Ship Beautiful UI

O que Ship Beautiful UI faz?

Interfaces construídas por IA parecem todas iguais porque o agente começa com os mesmos padrões todas as vezes: as mesmas fontes, os mesmos gradientes, a mesma fileira de cartões idênticos. Este skill substitui padrões por um processo:

1. Briefing. Definir o assunto, o público e o único objetivo da tela.
2. Direção. Construir a aparência a partir do próprio mundo do assunto, não de um template.
3. Travamento. Escrever cada decisão visual em DESIGN.md e verificá-la.
4. Construção. Usar apenas os tokens de DESIGN.md. Uma ideia ousada por tela.
5. Movimento. Apenas movimento que explica uma mudança.
6. Revisão. Escanear em busca de marcas de IA e lacunas de qualidade, olhar capturas de tela, escrever REVIEW.md.

Sempre nessa ordem. Não pule a etapa 0 nem a etapa 5.

Quem vence

Quando duas instruções discordam, a de maior hierarquia vence:

1. As próprias palavras do usuário.
2. DESIGN.md, uma vez que exista.
3. As regras deste skill em references/.
4. Qualquer outra coisa carregada, incluindo outros skills de UI.

Ao resolver um conflito, diga em uma linha para que o usuário possa contestar.

Ferramentas neste skill

Todos os scripts são da biblioteca padrão Python 3. Execute-os a partir da pasta deste skill ou forneça caminhos completos.

Script	O que faz
scripts/derive.py	Transforma palavras do mundo do assunto em uma paleta com contraste verificado, usando 78 materiais
scripts/direction.py	Distribui 3 opções de direção (paleta + par tipográfico + layout) para um tipo de produto e escreve um rascunho de DESIGN.md
scripts/lint_design.py	Verifica DESIGN.md: estrutura, ordem das seções, referências a tokens, contraste WCAG
scripts/detect.py	Escaneia código front-end em busca de 40 marcas de IA e lacunas de qualidade mínima

Biblioteca	Conteúdo
data/materials.json	78 materiais dos mundos dos assuntos (papel, comida, natureza, artesanato, telas, dinheiro, cuidado, brincadeira, viagem)
data/palettes.json	60 paletas, claro e escuro, todas com contraste verificado
data/type-pairings.json	40 pares tipográficos, todas Google Fonts gratuitas, com funções e observações
data/layouts.json	20 padrões de layout com wireframes
references/effects.md	16 efeitos em CSS/JS puro com alternativas de movimento reduzido
references/04-motion.md	Tokens de tempo e 12 receitas de movimento
references/ux-rules.md	80 regras de UX por área
references/anti-patterns.md	As 40 regras do detector e 12 padrões visuais padrão

Etapa 0: Briefing

Leia references/00-brief.md. Escreva quatro linhas: assunto, público, objetivo, restrições, além de cinco substantivos do mundo do assunto. Se o briefing for superficial, proponha estes e confirme em uma mensagem (no máximo três perguntas).

Etapa 1: Direção

Leia references/01-direction.md.

• Padrão: derivar do assunto. Escolha 3-5 dos substantivos do mundo e execute python3 scripts/derive.py --words "<substantivos>" (adicione --mode dark se o produto funcionar à noite). Combine a paleta com um par tipográfico e um layout de data/ que se adequem ao clima.
• Alternativa: sortear da biblioteca quando o assunto não tem um mundo visual forte ou o usuário quer opções rapidamente: python3 scripts/direction.py --kind <tipo> --brief "<uma linha>". Mostre as 3 opções e deixe o usuário escolher.
• Marca existente: a marca é a direção. Extraia suas cores e tipo.
• Verifique o plano contra os padrões visuais em references/anti-patterns.md e revise qualquer coisa que corresponda, a menos que o briefing tenha solicitado.

Etapa 2: Travamento

Leia references/02-lock.md.

• Escreva DESIGN.md na raiz do projeto: tokens YAML no topo, depois seções ## em ordem (Visão Geral, Cores, Tipografia, Layout, Elevação e Profundidade, Formas, Componentes, O que Fazer e Não Fazer). direction.py --write fornece um rascunho; templates/DESIGN.md é o formulário em branco.
• Coloque o briefing em Visão Geral e os padrões rejeitados em O que Fazer e Não Fazer.
• Execute python3 scripts/lint_design.py DESIGN.md e corrija todos os erros antes de construir.

Etapa 3: Construção

Leia references/03-build.md e use references/ux-rules.md enquanto constrói.

• Mapeie tokens para variáveis CSS (ou o tema do framework) uma vez; use apenas esses nomes.
• Um elemento memorável por tela. Todo o resto discreto.
• No máximo um efeito de references/effects.md, nesse elemento, recolorido com tokens.
• Construa até o piso de qualidade: largura 360px, foco visível, contraste AA, movimento reduzido, texto real, estados de carregamento/vazio/erro.

Etapa 4: Movimento

Leia references/04-motion.md. Movimento acionado pelo usuário usa os tokens de tempo e receitas ali. No máximo um momento de movimento ambiente por tela. Tudo tem um caminho de movimento reduzido.

Etapa 5: Revisão

Leia references/05-review.md.

1. python3 scripts/detect.py <src ou arquivos>. Corrija todos os erros; corrija avisos ou anote por que permanecem.
2. python3 scripts/lint_design.py DESIGN.md novamente. Código e DESIGN.md devem concordar.
3. Capture tela em desktop e 390px de largura se seu ambiente permitir, e critique as imagens contra o briefing.
4. Escreva REVIEW.md a partir de templates/REVIEW.md.

Saída

Ao finalizar, o projeto terá DESIGN.md (válido), a UI (construída apenas a partir de seus tokens) e REVIEW.md. Informe o usuário em poucas linhas: a direção e por que se adequa ao assunto, o único elemento memorável e o que você deliberadamente omitiu.