Sites com cara de IA

Se você veio pelo Reels, esse é o material prometido.

A maioria das pessoas acha que a qualidade de um site gerado por IA depende do prompt. Na prática, o que mais muda o resultado é entregar para ela um sistema de design para seguir.

Método 1: usando o design.md

É o melhor caminho, porque você parte de um sistema que já existe e já funciona.

O que costuma vir dentro de um design.md:

O prompt do passo 3:

Vou anexar um arquivo chamado design.md.

Quero que você analise profundamente esse documento e transforme todo o
conhecimento contido nele em uma Skill reutilizável.

Essa Skill será utilizada sempre que eu criar novos sites.

Ela deve:

• tratar o design.md como fonte de verdade
• extrair todas as regras explícitas e implícitas
• organizar essas regras por categorias
• criar princípios de design reutilizáveis
• gerar uma checklist de validação
• impedir que a IA tome decisões visuais genéricas
• preservar o mesmo nível de refinamento do design original

A Skill deve ser escrita em Markdown e ficar pronta para ser salva e
utilizada em qualquer novo projeto.

Método 2: a partir de uma imagem qualquer

Serve para quando você acha uma interface bonita no Pinterest, no Dribbble, no Behance ou no X e não existe design.md nenhum para baixar.

O prompt do passo 3:

Analise esta interface como se você fosse um Staff Product Designer.

Não descreva apenas o que vê. Reconstrua todo o sistema de design
utilizado.

Extraia:

• tipografia
• escala tipográfica
• cores
• espaçamentos
• grid
• alinhamentos
• componentes
• padrões de layout
• bordas
• sombras
• ícones
• animações
• princípios de composição
• regras de responsividade
• densidade visual
• hierarquia
• microinterações

Depois transforme tudo em um arquivo design.md completo, organizado e
reutilizável.

Não copie a marca nem o conteúdo. Extraia apenas o sistema de design.

Onde buscar referência boa

Quanto melhor a referência, melhor o resultado. Os meus favoritos:

O Pinterest surpreende. Parece o menos técnico da lista e entrega referência excelente.

A mudança que faz diferença

A maioria das pessoas usa IA assim:

Prompt → código.

O caminho que funciona é outro:

Referência → sistema de design → skill → código.

Parece pouco, mas rende mais do que passar horas refinando prompt.

Meu jeito de fazer

Eu quase nunca uso só o design.md. Costumo juntar:

Quanto mais contexto visual você dá, menos a IA precisa inventar. E é quando ela para de inventar que o resultado começa a parecer feito por alguém que sabe desenhar.