← ClaudeAtlas

design-mdlisted

Use quando o Pedro quer criar, editar ou validar um design system no formato DESIGN.md (o padrão aberto do Google — tokens de design em YAML + seções em markdown), ou exportar os tokens pra Tailwind/DTCG. Escreve o arquivo seguindo a spec, valida de verdade pelo CLI oficial @google/design.md via npx, e cai numa checagem manual pela spec quando o npx não está disponível. Trigger em /design-md, DESIGN.md, design system em markdown, design tokens, gera o DESIGN.md, valida o DESIGN.md, exporta os tokens pro Tailwind.
pedroberaldo87/pedro-plugins · ★ 0 · Web & Frontend · score 62
Install: claude install-skill pedroberaldo87/pedro-plugins
# design-md — Escrever, validar e exportar DESIGN.md `DESIGN.md` é o formato aberto do Google pra representar um **design system em texto puro**: um arquivo auto-contido com **frontmatter YAML** (tokens de design — cores, tipografia, espaçamento, etc.) + um **corpo markdown** com as seções que explicam o racional. Os tokens são os valores normativos; a prosa dá o contexto de aplicação. É o mesmo arquivo que humano e agente leem e refinam entre sessões. Esta skill **embrulha o CLI oficial** (`@google/design.md`) — não reimplementa o linter. Escreve o arquivo pela spec, valida pelo CLI, exporta os tokens. A spec completa está vendorada em **`${CLAUDE_PLUGIN_ROOT}/skills/design-md/references/spec.md`** — leia antes de escrever ou de validar manualmente. ## Quando usar - Criar um `DESIGN.md` do zero pra um produto/marca. - Editar/estender um `DESIGN.md` existente (novos tokens, nova seção, variante de componente). - Validar um `DESIGN.md` (estrutura + contraste + refs). - Exportar os tokens pra Tailwind (v3/v4) ou DTCG (W3C Design Tokens). ## Quando NÃO usar - Gerar CSS/componentes finais de UI — DESIGN.md é a **fonte de tokens/diretrizes**, não o código da tela. - Editar `tokens.json`/Figma direto — use o `export` pra derivar desses, não o contrário aqui. ## Pré-requisito (e o fallback) O caminho titular usa o CLI via **npx** (precisa de `node`/`npx` no PATH). A versão é **pinada em `@0.3.0`** — a única testada; o formato é `alpha` e versões futuras podem mudar a sintaxe se