check-design-system

Check design system

When to use

• You have a design system (tokens, component rules, a Figma library) and want to know where the live product drifts from it
• Screens shipped independently and visual consistency has eroded
• You want design-system adherence enforced when the library is published or files change

Instructions

1. Resolve context:

   • list_workspaces() → pick the workspace
   • list_projects(workspace_id) → match the URL to a project, or let create_checklist find/create it

2. Set up a design-guardian actor and record the rules:

   • list_actors(workspace_id), else create_actor(...) described as a design-system reviewer
   • list_workspace_guidelines(workspace_id) first, then either attach an existing rule with set_project_guideline(project_id, guideline_id) or write one with add_project_guideline(project_id, category: "design_system", content, title). Token values and component dos and don'ts belong here: guidelines reach every run and design review for the project
   • update_workspace_guideline(workspace_id, guideline_id, apply_to_design_reviews: true) when the standard should also hold for design reviews raised from Slack or Linear, which carry no project
   • If no rules were supplied, ask for the key tokens and component rules, or derive a draft from the most polished screens and confirm it

3. Create a checklist per surface:

   • Actors see the rendered product the way a user does, so phrase checks visually, not in terms of code or class names:
     • "Body text uses the product font stack, no serif fallbacks anywhere"
     • "Primary CTAs use the brand primary colour and sentence case"
     • "Form fields show a visible focus state"
     • "Empty states use the illustration style, not stock icons"
     • "Spacing between sections is consistent across pages"

4. Run and collect evidence:

   • run_checklist(checklist_id) → poll get_checklist_run(run_id) until terminal; collect evidence for each deviation