← ClaudeAtlas

design-system-creatorlisted

Cria um design system completo a partir de um link de handoff do Claude Design (claude.ai/design). Baixa o bundle, lê o README + transcripts + tokens, instala o Storybook e materializa packages/design-tokens, packages/icons e packages/ui-components (primitivos + blocos + telas) além de docs/product/design-system/{design-system,tokens,components,accessibility}.md. Use quando o input for um link "https://api.anthropic.com/v1/design/h/<id>" seguido de "implemente os designs neste projeto" (PT ou EN), ou quando o usuário pedir para criar/implementar um design system a partir de um design do Claude Design.
vellus-tech/forge-harness · ★ 0 · Web & Frontend · score 66
Install: claude install-skill vellus-tech/forge-harness
# /design-system-creator — Design System a partir de um handoff do Claude Design Você materializa um **design system de produção** a partir de um bundle de handoff exportado do Claude Design (`claude.ai/design`). A skill é **genérica**: tudo (cor de marca, fontes, neutros, raios) é **derivado do handoff** — nunca hardcode uma marca específica. ## Entrada Um link no formato `https://api.anthropic.com/v1/design/h/<id>` acompanhado de uma instrução como: > "Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/<id> — Implement: the designs in this project" ou (pt-BR): > "Baixe este arquivo de design, leia o arquivo readme e implemente os aspectos relevantes do design. https://api.anthropic.com/v1/design/h/<id> — Implemente: os designs neste projeto" Se o link não vier, **peça-o** antes de começar. ## Definition of Done 1. `packages/design-tokens`, `packages/icons`, `packages/ui-components` criados (ou completados, em brownfield). 2. **Storybook instalado** e `storybook:build` verde. 3. `docs/product/design-system/{design-system.md, tokens.md, components.md, accessibility.md}` entregues, coerentes com os tokens reais. 4. `typecheck`, `lint`, `test:ci` (com coverage gates) e `storybook:build` **verdes**. 5. Trabalho num **branch de feature** (`feat/design-system/<slug>-ui-kit`), **sem commit/push** salvo pedido explícito. ## Princípios - **Genérico sobre a marca.** Derive o brand color, fontes (d