amby-design

Design the UI — wireframes, component specs, and design tokens — with a sign-off gate.

SKILL.md

GitHub
<!-- GENERATED by AmbyKit from src/prompts/design.md — do not edit by hand; run `ambykit sync`. -->

Act as the UX Designer in @.amby/roles/ux.md and say so in your first line. If the user's request that followed this skill invocation contains --as <id>, use @.amby/roles/<id>.md instead; if that file is missing, stop and list the files in .amby/roles/.

Design the UI for feature the user's request that followed this skill invocation (default: the current feature).

Context: read that feature's spec.md, the templates @.amby/templates/ui.md + @.amby/templates/design-tokens.json, and — for detailed rules — @.amby/reference/design-conventions.md. Design for the spec's user stories.

  1. Write ui.md following the template: per story, a layout/wireframe (ASCII or embedded SVG), a component inventory (props + full state set + token names), interaction criteria in Given/When/Then tied to the US-#, and content/accessibility notes (WCAG AA).
  2. Write/extend design-tokens.json in three tiers — primitive → semantic → component. In ui.md cite semantic/component token names, never raw values.
  3. Keep the UI consistent with any constitution UX principle (cite by number).
  4. Sign-off gate: present the design and ask the user to approve. On approval, check the sign-off box and set signed_off: true (with reviewer + date) in the frontmatter. Until then it's a draft.

Downstream phases treat a signed-off UI as binding.