Design com método: wireframe aprovado, depois código.
Pipeline fixo de referência visual, wireframe.json, wireframe.svg, aprovação, código e auditoria. A skill cuida do visual e do gosto; a engenharia de front fica com a schematize-web.
$ schematize install designPisos inegociáveis
Não se desligam "pra ir mais rápido". Lista completa na skill.
Wireframe aprovado antes do código
O JSON é a fonte da verdade e o SVG é a figura; a página inteira para e pergunta a stack antes de construir, e o builder lê o JSON, nunca o SVG.
Mídia gerada nunca pelo Claude
Detecta Codex e Gemini, pergunta qual usar e delega à schematize-models; se não houver nenhum, avisa sem rodeio e oferece banco de imagem ou asset do cliente.
Ícones são SVG, nunca emoji
SVG inline (sprite de 22 símbolos incluso); SVG estrutural como diagrama é código, mas ilustração figurativa conta como visual gerado.
Contraste e DOM medidos, não supostos
Razões de contraste, escalas e durações vêm dos arquivos de referência e dos auditores em scripts/, com testes de vermelho plantado; não se trabalha de memória.
Recusas anti-AI-slop
Uma lista unificada de recusas, com contraprova e conflitos entre fontes já resolvidos, barra o visual genérico de gerador.
Pergunta só o que muda o trabalho
Descobre o modo (Persuadir, Operar, Ler, Experienciar) e quanto inventar; decide o resto e registra em meta.suposicoes. Sem argumento, um comando pergunta e nunca roda sozinho.
Comandos
Instalados em .claude/commands/. Use /design-help a qualquer momento.
/design-animateMovimento com intenção: um momento autoral, GSAP só quando vale. Argumentos: momento, delight, overdrive, revisar./design-auditPasso 5: audita contraste, DOM renderizado, imagens provisórias e anti-padrões numa página pronta, em tabela Before / After / Why./design-buildPasso 4: constrói a página a partir de um wireframe.json já aprovado, em HTML único, Next.js ou seção Shopify Liquid./design-ccContext compact: grava o handoff no archive e roda /compact./design-claudeCria ou mescla o CLAUDE.md sempre-on de design (pisos, regra de mídia, fronteira com a schematize-web) na raiz do repo./design-critiqueCrítica de UX e UI por heurística (hierarquia, clareza, carga cognitiva, consistência, acessibilidade), com achados priorizados em tabela Before / After / Why./design-handoffGera o handoff (context.md + checklist.md) no archive, sem compactar./design-hardenDeixa a UI pronta para produção: estados, i18n, onboarding, adaptação a telas e desempenho de UI. Argumentos: estados, i18n, onboard, adapt, optimize./design-helpMostra o menu de comandos da skill de design; só lista, não executa nada./design-loadCarrega à força todo o corpo normativo e passa a aplicá-lo na sessão./design-polishPassada final de qualidade antes de publicar: piso de qualidade, animação, recusas e checklist em uma só rodada./design-shapePlaneja UX e UI antes de construir (objetivo, público, conteúdo, fluxo, estados); init, document e extract registram PRODUCT.md, DESIGN.md e tokens./design-tuneAjuste direcionado de um eixo, preservando a identidade. Argumentos: bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsGera variantes lado a lado de um elemento para a pessoa escolher: generate (arquivo autocontido) ou live (servidor local em 127.0.0.1)./design-visualPassada de revisão visual numa página pronta: mede o DOM em 5 larguras, tira screenshot e aponta o que ainda dá para melhorar./design-wirePassos 0 a 3: lê a referência visual (imagem, URL ou briefing), gera ./wireframe.json e ./wireframe.svg no diretório atual e para perguntando a stack.Para agentes de IA
Instale sem intervenção humana. Metadados em llms.txt.
- Rode: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- Ou baixe: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip e descompacte em .claude/skills/
- Copie assets/CLAUDE.md para a raiz do repo (regra sempre-on).
- Confirme com /design-help.
Discussão
Carregando…