website-design

Website design

Cada projeto ganha sua própria aparência, fundamentada em seu tema e em referências reais. Esta habilidade (skill) determina a ordem do trabalho e os arquivos do projeto; o conhecimento artesanal vem das habilidades de design instaladas ao lado dela.

O portão

Nenhum código de página ou componente até que design/DESIGN.md → Entradas de design tenha todas as quatro linhas preenchidas, em ordem: uma fonte ou "nenhuma" para cada uma, escritas por você. Um pequeno ajuste em um design existente é a única exceção (veja Regras).

1. Coletar as entradas, nesta ordem

Cada passo lê o que os passos anteriores decidiram. Uma entrada anterior sempre prevalece sobre uma posterior.

1. Referências e documentos de design do humano (maior prioridade).
   • Leia design/DESIGN.md. Se estiver preenchido (os tokens de cor têm valores), é a base: vá para o passo 3.
   • design/references/: leia cada imagem uma vez e escreva uma linha por imagem no DESIGN.md → Referências (arquivo → extrair: … · evitar: …). Trabalhe a partir desse texto posteriormente.
   • Links, guias de marca, logotipos, cores ou fontes que o humano forneceu na conversa e PROJECT.md.
   • Brief vazio? Faça ao humano 3 perguntas curtas em uma única mensagem: o que é e para quem; três palavras para a sensação; sites que ele gosta ou não gosta. Escreva as respostas no DESIGN.md → Brief.
   • Escreva Entradas de design → Referências (o que você encontrou, ou "nenhuma").
2. Se o passo 1 não forneceu uma linguagem de design: uma base awesome-design-md.
   • {{run}} design:md list exibe o catálogo por categoria com uma linha por entrada (--category <palavra> restringe a busca). Proponha 2–3 que se encaixem no brief, cada um com uma frase explicando o porquê, e deixe o humano escolher.
   • {{run}} design:md use <nome> copia a entrada para design/DESIGN.md com os créditos. Substitua cada nome de marca, logotipo e marca registrada pelos do próprio projeto.
   • Pule este passo se o passo 1 forneceu uma linguagem de design, ou se DESIGN.md já começa a partir de uma entrada (seu cabeçalho indica isso).
   • Escreva Entradas de design → Base (a entrada, ou "nenhuma: construída a partir das referências do humano").
3. taste-skill (skill design-taste-frontend): a direção de arte.
   • Execute seus passos 1–4 (brief e inventário do assunto, o argumento, a direção, a ideia) para esta página.
   • Quando os passos 1–2 definirem cores e tipografia, lide com --keep palette,type para que ele planeje composição, imagens e seções dentro da linguagem de design, em vez de substituí-la.
   • Escreva a direção escolhida nas seções de DESIGN.md (tema, layout, componentes), e Entradas de design → Direção (o id da direção e uma linha sobre o porquê).
4. Sites reais para os requisitos deste site.
   • Abra a seção do seu tipo de projeto em references/project-types.md (rg -n "^## " <arquivo>) e, para os padrões específicos que esta página precisa (precificação, checkout, documentação, dashboard, integração…), as galerias em references/inspiration.md.
   • Estude 2–3 sites reais para esses padrões (hierarquia, densidade, como explicam as coisas), em uma ferramenta de navegador. Escreva uma linha para cada um no DESIGN.md → Referências.
   • Escreva Entradas de design → Sites de referência.

2. Construção

• Tokens: mapeie os tokens de DESIGN.md para o tema em {{#tanstack-start}}src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui: --background, --primary, --radius…){{/shadcn}}. Sem valores hexadecimais brutos em componentes.
• Construção com o skill frontend-design, seguindo a folha de direção do taste-skill (seus passos 5–6). {{#shadcn}} Use componentes shadcn/ui (skill shadcn; {{dlx}} shadcn@latest add <componente>). {{/shadcn}} Escolha de componentes e ícones: references/libraries.md.
• Conteúdo: conteúdo real. Solicite-o ou escreva texto simples e específico. Nada de lorem ipsum, logotipos, estatísticas ou depoimentos falsos. Torne uma coisa memorável e mantenha o restante discreto.
• Linha de base: responsivo a partir de 360px, foco visível, prefers-reduced-motion, contraste WCAG 2.2 AA e estados vazio, de carregamento e de erro.

3. Revisão

• Portão e passos de verificação do taste-skill (seus passos 7–8), com capturas de tela em 390, 768 e 1440px (skill playwright-cli{{#next}}, ou next-dev-loop contra o servidor de desenvolvimento{{/next}}).
• Skill web-design-guidelines para acessibilidade e UX, skill writing-guidelines para cada pedaço de texto, e skill web-perf para desempenho de carregamento nas páginas principais.
• Corrija os 3 principais problemas e, em seguida, remova uma decoração antes de terminar.

Regras

• Aprenda princípios a partir das referências (hierarquia, ritmo, densidade, tipografia, cor). Nunca copie o layout, o texto, os logotipos, as ilustrações ou o código de um site, e nunca publique o nome, logotipo ou marca registrada de outra marca.
• O brief e as referências do humano prevalecem sobre a base awesome-design-md, que prevalece sobre os padrões do taste-skill, que prevalecem sobre seu próprio gosto.
• Um pequeno ajuste visual em um design existente (espaçamento, uma cor dentro da paleta, um componente) é uma alteração rápida: siga o DESIGN.md e não reexecute as entradas.