O que design-ref faz?
Referência: $ARGUMENTS
1. Capturar a referência
URL: tire um screenshot com o toolkit compartilhado em 1440 e 375, depois leia as folhas de estilo:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
Extraia os estilos computados com --inject, ou um script CDP avulso importando ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs (launch() → navigate() → evaluate()). Colete getComputedStyle de body, h1–h3, p, a, button, o CTA principal, um cartão, uma sobrancelha/kicker, um input e o rodapé. Colete font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding e gap.
HTML colado / e-mail: salve em /tmp/design-ref/ref.html, renderize com render-html.mjs e leia os estilos inline diretamente.
2. Destilar o sistema
- Papéis de cor: canvas, surface, ink, muted ink, accent, accent-ink, border, success/warn. Forneça valores hex e onde cada um aparece.
- Tipografia: famílias (e o equivalente gratuito mais próximo se a fonte for licenciada), passos da escala com px/line-height/weight/tracking, e capitalização (sobrancelhas maiúsculas + tracking?).
- Espaçamento: o ritmo realmente usado (ex.: 8/16/24/40/64), padding de seção e padding de cartão.
- Forma: raios por classe de elemento, receitas de sombra e peso da borda.
- Anatomia: botão (altura, padding, raio, peso, ícone), cartão, sobrancelha e a composição do hero.
- Tom: 3 adjetivos mais o que a cópia faz (frases curtas? segunda pessoa? números?).
3. Mapear no projeto (sem fazer fork)
Leia os tokens do projeto (app/globals.css @theme/:root, tailwind.config ou o arquivo de tema) e seus componentes existentes. Produza:
| Papel | Referência | Token do projeto agora | Proposta |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | manter / ajustar valor / novo (justificar) |
Regras:
- Ajuste tokens existentes antes de adicionar novos. Cada novo token precisa de uma justificativa de uma linha.
- Itens vinculados à marca não são tocados: logotipo, a cor da marca se o projeto tiver uma, e fontes já licenciadas ou em uso.
- Verifique contraste accent-on-canvas e ink-on-surface para cada proposta (≥ 4,5:1 texto, ≥ 3:1 UI).
- Se o projeto mantém um arquivo Figma sincronizado com o código, as alterações de tokens vão para o Figma na mesma tarefa.
Critérios de saída
- Tabela de tokens completa, com cada linha marcada como manter, ajustar ou novo.
- Contraste verificado para os pares propostos.
- Nenhum código alterado ainda. Isso é feito em
design-pass, após o usuário concordar com a tabela. - Resumo de uma frase para o usuário com a tabela abaixo.