O que Construção de Sites faz?
Construa sites de produção distintos, onde cada site parece DIFERENTE. Cada escolha — tipo, cor, movimento, layout — deve ser derivada do assunto. Execute o gerador de paletas (bun run shared/generate-palette.ts "palavras-chave") para criar um esquema de cores único para cada projeto. NUNCA reutilize a mesma paleta entre sites.
Esta habilidade cobre tudo para projetos web. Leia os subarquivos neste diretório conforme necessário, com base no tipo do seu projeto. Para aplicações web, leia também skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md.
Princípios de design universais (filosofia de cor, paleta padrão, seleção de fontes) são compartilhados com outras habilidades via design-foundations. Os arquivos compartilhados desta habilidade estendem essas fundações com implementação específica para web (variáveis CSS, tokens responsivos, folhas de estilo base). Você não precisa carregar design-foundations separadamente — as versões específicas para web em shared/ são abrangentes.
Use read com o caminho completo, ex.: skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md
Roteamento por Tipo de Projeto
Passo 1: Identifique o tipo de projeto e carregue a orientação específica do domínio:
| Tipo de Projeto | Ação | Exemplos |
|---|---|---|
| Sites informativos | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/informational/informational.md | Sites pessoais, portfólios, editoriais/blogs, pequenos negócios, landing pages |
| Aplicações web | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | Produtos SaaS, dashboards, painéis administrativos, e-commerce, experiências de marca |
| Jogos de navegador | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game.md + skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game-testing.md | Jogos 2D Canvas, Three.js/WebGL, jogos HTML5, experiências 3D interativas |
Passo 2: Leia os arquivos compartilhados — leia skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md e skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/02-typography.md primeiro (OBRIGATÓRIO para TODOS os tipos de projeto, incluindo webapp). Estes estabelecem os padrões do sistema de design Kortix e as regras de tipografia que se aplicam universalmente. Para aplicações web e dashboards, pule os arquivos marcados com † abaixo — estes contêm detalhes de implementação pré-configurados no template fullstack.
Se o usuário disser apenas "site" ou "página" sem detalhes, pergunte qual o tipo ou considere informativo como padrão.
Referência de Subarquivos
Compartilhados (shared/) — Todo projeto
| Arquivo | Abrange | Carregar |
|---|---|---|
shared/01-design-tokens.md | Escala de tipos, espaçamento, paleta Kortix, base.css | Sempre |
shared/02-typography.md | Seleção de fontes, pareamento, carregamento, lista negra | Sempre |
shared/04-layout.md | Composição espacial, responsivo, mobile-first | Sempre † |
shared/05-taste.md | Skeleton loaders, estados vazios/de erro, polimento | Sempre |
shared/08-standards.md | Acessibilidade, performance, antipadrões | Sempre |
shared/09-technical.md | Estrutura do projeto, sandbox, deploy, checklist | Sempre † |
shared/head-defaults.html | Bloco de atribuição para <head> | Sempre † |
shared/03-motion.md | Animações de scroll, biblioteca Motion, plugins GSAP SVG, hover/cursor | Quando animado |
shared/06-css-and-tailwind.md | Tailwind CSS v3, shadcn/ui, CSS moderno | Quando usando Tailwind |
shared/07-toolkit.md | Bibliotecas CDN, React, Three.js, ícones, mapas, padrões/filtros SVG, esm.sh | Ao escolher bibliotecas |
shared/10-charts-and-dataviz.md | Chart.js, Recharts, D3, KPIs, sparklines | Quando visualização de dados for necessária |
shared/11-web-technologies.md | Versões de frameworks, compatibilidade com navegadores | Ao verificar compatibilidade |
shared/12-playwright-interactive.md | Automação persistente de navegador Playwright, screenshots, testes visuais | Ao testar |
shared/19-backend.md | Servidores FastAPI/Express/Flask, WebSocket, SSE, encaminhamento de porta | Quando backend for necessário |
shared/20-llm-api.md | Referência de integração de API LLM/AI | Quando o site usa APIs de IA |
Todos os caminhos são relativos a skills/GENERAL-KNOWLEDGE-WORKER/website-building/.
† Pule para webapp e dashboards — detalhes de implementação pré-configurados no template fullstack. Design-tokens e tipografia NÃO são pulados — eles fornecem os padrões autoritativos do sistema de design e orientação de seleção de fontes para todos os tipos de projeto.
Específicos do Domínio — Carregue um
| Arquivo | Quando carregar |
|---|---|
read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | SaaS, dashboard, admin, e-commerce, experiência de marca (habilidade filha com template fullstack) |
webapp/dashboards.md | Dashboard ou interface densa em dados (companheiro do webapp) |
informational/informational.md | Site pessoal, portfólio, editorial, pequeno negócio, landing page |
game/game.md | Jogo de navegador, Three.js, WebGL, 3D interativo |
game/2d-canvas.md | Jogo 2D Canvas (companheiro do game.md) |
game/game-testing.md | Qualquer jogo de navegador — carregue junto com game.md |
QA Interativo: Leia skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md para automação persistente de navegador com Playwright (screenshots, teste funcional, QA visual). Obrigatório para testes de jogos, útil para qualquer site complexo.
Fluxo de Trabalho
Passo 0: Carregue TODOS os arquivos obrigatórios (faça isso PRIMEIRO, em paralelo)
Leia TODOS estes em um lote — eles são obrigatórios para todo projeto:
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/02-typography.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/04-layout.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/05-taste.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md")
Em seguida, carregue o arquivo específico do domínio (informativo, webapp ou jogo) do Passo 1 abaixo.
Passo 1: Gere paleta única
Execute o gerador de paletas com palavras-chave que descrevam o assunto:
bun run skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/generate-palette.ts "palavras-chave do assunto aqui"
Escolha a melhor harmonia, personalize se necessário.
Passo 2: Design & Construção
Construa o site com a paleta gerada, seguindo todas as orientações de design carregadas.
Passo 3: Preview
Mostre via servidor estático: show(type: "url", url: "http://localhost:3211/open?path=/workspace/project/index.html")
Use Todas as Ferramentas
- Pesquise primeiro. Pesquise na web por sites de referência, tendências e exemplos de concorrentes antes de projetar. Navegue por exemplos premiados do tipo específico de site. Busque quaisquer URLs fornecidas pelo usuário.
- Gere ativos reais — generosamente. Gere imagens para heróis, ilustrações de seção, visuais de recursos editoriais, fundos atmosféricos — não apenas uma imagem de herói. Cada página longa deve ter ritmo visual com imagens geradas que combinem com a direção de arte do site. Sem placeholders. Gere um logotipo SVG personalizado para cada projeto (veja abaixo) — SVG é apenas para logotipos, a menos que o usuário solicite especificamente saída SVG. Salve imagens de referência da web que informem a direção.
- Screenshot via Playwright. Leia
skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.mdpara capturar screenshots em desktop (1280px+) e mobile (375px). Compare com referências. Isso é obrigatório, não opcional. Veja QA Visual abaixo. - Escreva código de produção diretamente. HTML, CSS, JS, SVG. Use bash para ferramentas de build e processamento de arquivos.
Geração de Logotipo SVG
Todo projeto recebe um logotipo SVG inline personalizado. Nunca substitua por um título de texto estilizado.
- Entenda a marca — propósito, tom, uma palavra definidora
- Escreva SVG diretamente — formas geométricas, letras ou marcas abstratas. Uma forma memorável.
- Princípios: Geométrico/mínimo (Paul Rand, Vignelli). Funciona em 24px e 200px. Monocromático primeiro — adicione cor como aprimoramento. Use
currentColorpara modo escuro/claro. - Implemente inline com
aria-label,viewBox,fill="none", traçoscurrentColor - Gere um favicon — versão simplificada 32x32 se necessário
Para animação SVG (DrawSVG, MorphSVG), veja shared/03-motion.md. Para padrões/filtros SVG, veja shared/07-toolkit.md.
Processo de Teste de QA Visual
Cada implantação deve passar no QA visual. Screenshots são portões de qualidade.
Leia skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md para todo o QA visual. Playwright fornece uma sessão de navegador persistente para screenshots, teste de interação e verificação de viewport.
Ciclo: Construir → Playwright QA → Avaliar → Corrigir → Repetir → Implantar quando pronto
Estágio 1: QA Página por Página
Após construir cada página:
- Screenshot em desktop (1280px+) e mobile (375px) via Playwright
- Avalie criticamente: Parece projetado profissionalmente (não gerado por IA)? A tipografia é distinta? O espaço em branco é generoso? Existe uma hierarquia visual clara?
- Corrija todo problema antes de prosseguir. Sem dívida visual.
Estágio 2: QA Final (antes de publicar)
- Screenshot de cada página em desktop e mobile
- Verifique consistência entre páginas (espaçamento, cor, tratamento de tipo)
- Verifique modo escuro (screenshot de ambos os temas para a página inicial no mínimo)
- Verifique estados interativos: hover, focus, active, loading, empty, error
- Teste de primeira impressão: parece polido e intencional?
Falhas de QA: transbordamento de texto, espaçamento inconsistente, cores fora dos tokens, modo escuro ausente, mobile espremido, aparência genérica de IA, conteúdo placeholder, logotipo ausente.
Passo 1: Direção de Arte — Infira Antes de Perguntar, Pergunte Antes de Usar o Padrão
Cada site deve ter uma identidade visual derivada de seu conteúdo. Não pule para a paleta de fallback Kortix. A paleta Kortix é um último recurso para quando tanto a inferência quanto a pergunta falharam — não um padrão conveniente.
- Infira a partir do assunto. Um site de torrefação de café → marrons terrosos, creme quente, sensação feita à mão. Um dashboard fintech → ardósia fria, sans-serif afiado, denso em dados. Um aplicativo de aprendizado infantil → primárias brilhantes, tipo arredondado, movimento lúdico. O conteúdo em si informa a paleta, tipografia e espaçamento antes do usuário dizer uma palavra.
- Verifique as tabelas de Direção de Arte. Cada arquivo de domínio (
informational.md,webapp/SKILL.md,game/game.md) tem uma tabela de Direção de Arte mapeando tipos de site/produto para direções orientadas por conceito e pontos de partida de tokens. Use-as como trampolim. - Derive os cinco pilares: Cor (quente/fria, acento do assunto), Tipografia (serif/sans, personalidade de exibição), Espaçamento (denso/generoso), Movimento (mínimo/expressivo), Imagens (foto/ilustração/só texto).
- Se o assunto for genuinamente ambíguo, pergunte — "Qual a vibe que você busca?" e "Algum site de referência?" Uma pergunta é suficiente.
- Fallback Kortix — apenas quando a inferência E a pergunta não produzirem nada. Se o usuário foi perguntado e não deu direção, E o assunto não dá sinal claro, então recorra aos padrões Kortix/Suíços.
O Fallback: Limpo & Suíço (Último Recurso)
Quando a inferência não produziu direção clara E o usuário foi perguntado mas não deu orientação de estilo, use os padrões de skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md com:
- Tipografia: Satoshi ou General Sans para corpo (Fontshare — preferido), ou Inter/DM Sans. Contraste de peso em vez de contraste de fonte. Máximo de 3-4 tamanhos. Mantenha o texto compacto —
--text-3xl/--text-herosão apenas para heróis de sites informativos. - Cor: Paleta Kortix. Superfícies neutras + um acento teal apenas para CTAs.
- Layout: Alinhado à grade. Margens generosas. Assimétrico onde interessante.
- Movimento: Mínimo, funcional. Apenas transições de estado suaves.
- Imagens: Gere visuais limpos e relevantes. Sem fotos de banco de imagens.
Direção de Arte — Evite a Estética AI
Veja skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md para a lista completa de antipadrões.
Passo 2: Publicar
Use comandos de preview local reais primeiro e publique apenas com o fluxo de trabalho de implantação real do projeto alvo. Veja skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/09-technical.md para o fluxo de preview e entrega recomendado.
Entrega
- Sempre verifique o site localmente primeiro.
- Use
pty_spawnpara o servidor de preview ou desenvolvimento. - Se o repositório alvo já tem um fluxo de trabalho de implantação, use exatamente esse fluxo.
- Se não houver um alvo de deploy estabelecido, entregue os arquivos e um preview local verificado em vez de inventar uma história de implantação específica da plataforma.