# Amby Design

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

- Skill: `ambystechcom/amby-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ambystechcom/amby-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ambystechcom/amby-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ambystechcom (https://skillmd.com/u/ambystechcom)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ambystechcom/amby-design

---

<!-- 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.