Habilidade de Protótipo Web

Produza um protótipo HTML único e autônomo usando a biblioteca de "seed" e layout incluída — não escrevendo CSS do zero. O "seed" já codifica bons padrões (tipografia, espaçamento, orçamento de cores de destaque). Seu trabalho é compô-lo.

Mapa de Recursos

web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

Fluxo de Trabalho

Etapa 0 — Preparação (faça isso uma vez antes de escrever qualquer coisa)

1. Leia assets/template.html de ponta a ponta — no mínimo, até o bloco <style>. O inventário de classes no topo de references/layouts.md lista cada classe que deve ser definida lá; se uma estiver faltando, adicione-a a <style> em vez de redefini-la inline em cada seção.
2. Leia references/layouts.md para saber quais esqueletos de seção existem. Não escreva um tipo de seção que não esteja coberto — escolha o layout mais próximo e adapte.
3. Leia o DESIGN.md ativo (já injetado no seu prompt do sistema). Mapeie suas cores para as seis variáveis :root no "seed"; não introduza novos tokens.

Etapa 1 — Prepare index.html do "seed"

Use assets/template.html como "seed" para o arquivo de projeto canônico, normalmente index.html.

Substitua as seis variáveis :root pelos tokens do sistema de design ativo. Substitua o <title> da página e a marca da barra de navegação superior.

Etapa 2 — Planeje a lista de seções

Escolha os layouts antes de escrever o texto. Ritmos padrão (de layouts.md):

Declare a lista escolhida em uma frase para o usuário antes de escrever — ele pode redirecionar de forma barata agora e não depois de 200 linhas de HTML.

Etapa 3 — Cole e preencha

Para cada layout escolhido, copie o bloco <section> de layouts.md para <main id="content"> do HTML do projeto. Substitua as strings [REPLACE] entre colchetes por texto real e específico do briefing do usuário. Sem preenchimento — se um espaço estiver vazio, a seção é a escolha errada; escolha um layout diferente. Trate cada bloco .ph-img como um andaime de layout e substitua-o quando a seção exigir imagens, seguindo a regra do "real primeiro" abaixo antes da auto-verificação.

Etapa 4 — Auto-verificação

Execute references/checklist.md de cima para baixo. Todos os itens P0 devem passar antes de você prosseguir. Os itens P1 devem passar; P2 são bônus.

Etapa 5 — Escreva o arquivo do projeto

Escreva o HTML completo no arquivo de projeto canônico, normalmente index.html. Em seguida, envie um breve resumo comum do assistente nomeando o arquivo e descrevendo o que está lá. Não exiba o código HTML completo no chat.

Regras rígidas (o "seed" protege a maioria delas — não lute contra isso)

• Um único destaque, usado no máximo duas vezes por tela. A sobrancelha + CTA principal é o orçamento padrão.
• Fonte de exibição é serifada (Iowan Old Style / Charter / Georgia no "seed"). Sans para o corpo. Mono para numéricos, legendas, sobrancelhas.
• Imagens reais, nunca links remotos. .ph-img é um andaime de layout temporário, não o tratamento final padrão. Para uma referência do mundo real nomeada, pesquise/busque a imagem real correta, copie-a para o projeto e referencie-a relativamente; nunca gere, desenhe ou invente um substituto. Para assuntos ilustrativos ou atmosféricos, prefira fotografia real adequada e use a geração de imagens apenas como último recurso. Se nenhum ativo compatível puder ser adquirido, mantenha um .ph-img intencional e rotulado e divulgue a limitação no resumo de entrega.
• Preserve a geometria da imagem real. Inspecione a largura e altura intrínsecas de cada imagem adquirida, substitua todo o andaime .ph-img por um <img class="content-img"> e defina atributos width e height correspondentes. Nunca copie .ph-img, .wide, .portrait ou .square em uma imagem real. Imagens de conteúdo devem mostrar o quadro inteiro; object-fit: cover é apenas para preenchimentos decorativos intencionalmente cortáveis. A regra .content-img do "seed" limita imagens incomumente altas ou largas à viewport, mantendo o outro eixo automático.
• Refluxo móvel já funciona via a media query do "seed" em 920px. Não o quebre adicionando larguras fixas.

…