gilde

← All craftbooks

Design System Consultation

Build: interactive and webevalv2.0.8released 2026-09-05

Interview for product context and taste, then propose a full design system — type, color, layout, motion — and capture it as a DESIGN.md with live preview pages.

Steps

Entry step: audit-interface. Each step names the specialist role it wants; the full working prompt is expandable.

  1. Audit the current interfaceproduct designerentry

    Map the product, users, existing visual language, implementation constraints, and inconsistencies.

    Show working prompt
    Inspect the project description, interface entry points, components, styles, assets, screenshots, and accessibility conventions with workspace tools. Identify the product type, primary users and jobs, current design tokens and patterns worth preserving, inconsistencies, technical constraints, and missing states. If no interface exists, document that and work from the product brief rather than inventing current-state claims.

Observable handoff: write the completed result to `design/current-state-audit.md` in the workspace with `write_file`. Do not merely describe what the file would contain. Re-read it with `read_file` before finishing this phase and repair any incomplete sections.
  2. Lock the design briefdesign strategist

    Define the memorable intent, principles, references, exclusions, and success tests.

    Show working prompt
    Use the audit to pre-fill a concise design brief. Ask the user one high-leverage question at a time with `ask_user_question`: confirm audience and product posture, the one thing the experience should be remembered for, useful references, strong dislikes, brand or accessibility constraints, and the most important workflows. When research tools are available and the user wants it, collect relevant outside patterns with sources; otherwise label proposals as design judgment. Recommend a direction and explain why it fits.

Observable handoff: write the completed result to `design/design-brief.md` in the workspace with `write_file`. Do not merely describe what the file would contain. Re-read it with `read_file` before finishing this phase and repair any incomplete sections.
  3. Propose and render the design systemdesign systems lead

    Specify the system and render a realistic, accessible preview of its important states.

    Show working prompt
    Create `DESIGN.md` from the audit and brief, covering foundations, type scale, color roles and contrast, spacing, grid, shape, elevation, iconography, motion, components, states, responsive behavior, content voice, accessibility, and adoption sequence. Use exact reusable tokens and explain how every choice serves the memorable intent. Also create `previews/design-system.html`: a self-contained, responsive page that applies the proposed tokens to representative navigation, type, controls, cards, data or content, empty, loading, error, focus, hover, and disabled states. Inspect it with browser tools when available and record what was actually checked.

Observable handoff: write the completed result to `DESIGN.md` in the workspace with `write_file`. Do not merely describe what the file would contain. Re-read it with `read_file` before finishing this phase and repair any incomplete sections.
  4. Evaluate the deliverableproduct design reviewer

    Independently grade the observable deliverable and route it to finish, repair, or user escalation.

    Show working prompt
    Review `DESIGN.md`, `previews/design-system.html`, `design/current-state-audit.md`, `design/design-brief.md` against every criterion below. Inspect the underlying evidence files named by the workflow; do not grade from the author's summary alone.

1. The system visibly serves the product, users, memorable intent, and real implementation constraints.
2. Typography, color, spacing, layout, shape, motion, content, and components form a coherent system rather than independent preferences.
3. Tokens are specific and reusable, with responsive rules and all important interaction states.
4. Contrast, focus, reduced motion, keyboard use, readability, and error communication have explicit treatment.
5. The HTML preview is complete, renders without structural errors, and demonstrates representative states rather than a static swatch sheet.
6. Existing strengths, outside sources, design judgment, and unresolved assumptions are labeled honestly.

Open `DESIGN.md`, `previews/design-system.html`, `design/current-state-audit.md`, `design/design-brief.md` with `read_file`. Write the evidence-backed review to `reviews/design-system-consultation-review.md` in the artifacts drawer with `write_artifact`. Give each criterion a PASS or FAIL with a concrete path, excerpt, measurement, or observed behavior. End with exactly `Verdict: PASS` or `Verdict: REVISE`. Then use `advance_task_step` for the active task: PASS routes to `finish`; REVISE routes to `repair` for review rounds 1 through 2, and the 3th REVISE routes to `needs-user`. Never route to finish while a criterion is unmet.
  5. Repair the deliverabledesign systems lead

    Fix only the concrete gaps from the latest independent review.

    Show working prompt
    Read `reviews/design-system-consultation-review.md` with `read_artifact` and repair every failed criterion in `DESIGN.md`, `previews/design-system.html`, `design/current-state-audit.md`, `design/design-brief.md`. Make changes on each file's declared surface (`write_artifact` for artifact inputs, `write_file` for workspace inputs), not in task notes or a reply. Preserve evidence that already passed. Re-run or re-check anything the reviewer found unproven. Ensure `DESIGN.md` is genuinely updated this turn so the repair is observable, then hand it back for independent evaluation.
  6. Finishproject lead

    All deterministic and reviewer criteria passed.

    Show working prompt
    The independent review passed. Read `reviews/design-system-consultation-review.md` with `read_artifact`, then use `write_task_note` to record a concise DONE summary with the final deliverable paths (`DESIGN.md`, `previews/design-system.html`, `design/current-state-audit.md`, `design/design-brief.md`) and the evidence that each acceptance criterion passed. Report DONE without starting new work.
  7. Escalate unresolved concernsproject lead

    The bounded repair loop ended without a defensible pass.

    Show working prompt
    The deliverable did not pass after 3 review rounds. Do not claim success. Read `reviews/design-system-consultation-review.md` with `read_artifact`, then use `write_task_note` to record DONE_WITH_CONCERNS: the unmet criteria, what was attempted, the affected paths, and the smallest user decision or missing input needed to continue.

Triggers

Phrases that suggest this craftbook to a crew.

Toolsets

Source

View this craftbook on GitHub · MIT license