# Claude Design Idea To Ready

> Take a UI from a one-line idea to on-brand, shippable design with Claude, in the correct order — brand foundation first, then components, screens, interactions, accessibility, and only then generation via /design. Use whenever someone wants to design, redesign, or generate a screen, page, component, or onboarding flow and wants the output to match an existing brand instead of looking like generic…

- **Type:** Skill
- **Install:** `agentstack add skill-chohra-med-claude-design-skill-claude-design-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [chohra-med](https://agentstack.voostack.com/s/chohra-med)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [chohra-med](https://github.com/chohra-med)
- **Source:** https://github.com/chohra-med/claude_design_skill

## Install

```sh
agentstack add skill-chohra-med-claude-design-skill-claude-design-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# claude-design-idea-to-ready

Drive a UI from idea to ready design in the order that actually produces on-brand output: the foundation before the screens, the generation last. This is the "brand first, generate second" pipeline. It composes with a memory bank-style memory bank (drop it in your skills folder) or runs standalone.

## The core rule

The model can only be as on-brand as the constraints it has before it generates. So the work is upstream. Never run `/design` (or generate any UI) until steps 1 to 5 exist. If they do not exist, scaffold them first.

## When this fires

Any task that will produce visual interface: a new screen, a redesign, a component, a page, an onboarding flow, a "make it on-brand" pass. If the user opens with `/design` directly, stop and check that the foundation (step 1) exists first.

## The pipeline (run in order)

1. **Foundation.** Locate or scaffold two files: `design/tokens.ts` (one source of truth: color, type, spacing, radius, as names not hex) and a `## Design rules` block in `CLAUDE.md` (one accent, monochrome base, 8pt spacing, one primary action per screen, no glassmorphism). Read `references/foundation-templates.md`. Nothing else proceeds until these exist.
2. **Components before screens.** List the components the brief needs. Define each against the tokens, with variants and states, before composing any screen. See `references/component-checklist.md`.
3. **Screens and hierarchy.** Compose screens from the defined components. Enforce one primary action; the eye finds it first. Everything else reads as secondary.
4. **Interactions and states.** Define loading, empty, error, and transitions. Motion 200 to 240ms. The happy path alone is half a design.
5. **Accessibility pass.** Contrast, touch targets, semantics. Run as a pre-generation checklist (`references/a11y-checklist.md`) so the model produces it by default.
6. **Generate with `/design`.** Now, and only now. Describe the screen in one line; the model generates against the foundation, syncs a live design, hands off code into the repo.
7. **Verify.** Read the output back against the `CLAUDE.md` design rules using `references/verify-rules.md`. Invented hex, second primary action, off-scale spacing → fix and re-run. This is the anti-hallucination check, pointed at UI.

## Files in this skill

- `references/foundation-templates.md` — paste-ready `tokens.ts` + `CLAUDE.md` design block.
- `references/component-checklist.md` — the component primitives + states to define before screens.
- `references/a11y-checklist.md` — the pre-generation accessibility gate.
- `references/verify-rules.md` — the step-7 checklist the agent runs against output.

Heavy detail lives in `references/`, loaded only when the relevant step runs, so the skill stays under 500 lines and does not burn context until a step needs it.

## Notes

- Platform-agnostic: the order is identical for web (Next.js) and mobile (React Native / Expo). Only the token values and component primitives change.
- Worked examples: getwireai.com (web, via AI Web Launcher) and Morrow Self onboarding (mobile, via AI Mobile Launcher).
- Companion playbook (PDF): "From Idea to Ready Design with Claude" on Code Meet AI.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [chohra-med](https://github.com/chohra-med)
- **Source:** [chohra-med/claude_design_skill](https://github.com/chohra-med/claude_design_skill)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-chohra-med-claude-design-skill-claude-design-skill
- Seller: https://agentstack.voostack.com/s/chohra-med
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.