Os 2 arquivos mais importantes pra quem faz sites com IA

DESIGN.md diz o que a IA deve fazer. ANTI_PATTERNS.md diz o que ela nunca pode fazer. O que são, como usar em 3 passos e 3 estilos prontos pra baixar grátis.

Se a IA já te entregou um site com cara de "feito por IA", este guia é pra você. São só 2 arquivos, e você não precisa saber programar pra usar.

Em 30 segundos

A IA faz site feio porque ninguém disse a ela o que é bonito e o que é proibido.O DESIGN.md diz o que fazer: cores, letras, cantos, espaços e como é cada parte do site.O ANTI_PATTERNS.md diz o que nunca fazer: os vícios que deixam todo site de IA igual.Você coloca os dois na pasta do projeto, avisa a IA com uma frase e pede o site.No fim do guia tem 3 estilos prontos pra baixar grátis.

O problema: por que a IA faz site feio

A IA aprendeu olhando milhões de sites. Quando você pede "faz um site bonito" sem dar nenhuma regra, ela entrega a média de todos eles: o caminho mais comum. É por isso que tanto site feito com IA parece igual.

Veja a diferença que os 2 arquivos fazem:

CorSem os arquivos: A IA escolhe roxo e azul, porque é o que mais aparece na internet.Com os arquivos: Usa só as cores do DESIGN.md, cada uma no lugar certo.

LetraSem os arquivos: Tamanho médio, um peso só, tudo com cara de modelo pronto.Com os arquivos: Tamanho, peso e espaçamento exatos, iguais em todas as telas.

LayoutSem os arquivos: Título no meio, dois botões e três cards iguais embaixo.Com os arquivos: O layout descrito no arquivo, sem os vícios da lista proibida.

CorreçãoSem os arquivos: Você pede "deixa mais bonito" e ela chuta outra coisa.Com os arquivos: Você manda revisar contra os 2 arquivos e ela acha o erro sozinha.

Os 2 arquivos

Arquivo 1DESIGN.mdDiz o que fazer

Quais cores o site usa e onde cada uma entraO tamanho, o peso e o espaçamento de cada letraOs cantos, os espaços e as sombrasComo é cada peça: botão, cartão, hero, menu

É a receita do visual do seu site.

Arquivo 2ANTI_PATTERNS.mdDiz o que nunca fazer

Título centralizado com 2 botões e 3 cards iguaisGradiente roxo e azulSombra borrada em todo cartãoAnimação rápida e sempre igual

É a lista dos vícios que a IA repete.

Um é o mapa. O outro é o freio. Juntos, a IA sabe aonde ir e o que evitar.

Arquivo 1: DESIGN.md (o que fazer)

É a ficha técnica do visual do seu site. Em vez de pedir "faz bonito", você entrega os números exatos, e a IA não precisa adivinhar nada.

Um DESIGN.md completo tem 6 partes:

01TokensAs cores, fontes, tamanhos, cantos, sombras e espaços, cada um com o valor exato.

02ContrasteA prova de que todo texto dá pra ler em cima do fundo onde ele fica.

03ComponentesComo é cada peça do site: menu, botão, hero, cartão, campo de e-mail.

04Faça e não façaAs regras de uso: onde cada cor entra e o que nunca combinar.

05Imagens e layoutQue tipo de foto usar e como a página se organiza de cima a baixo.

06Guia pra IAPedidos prontos pra colar e os tokens em CSS e Tailwind, prontos pra usar.

Na prática, um pedaço dele fica assim:

color-canvas   #ffffff    fundo de todas as seções
color-cta      #0071e3    só no botão de comprar
text-hero      80px, peso 600, linha de 84px
radius-card    28px, sem sombra

Faça: separe as seções grandes por 90px.
Não faça: não use gradiente.

Cada valor tem nome, número e função. Quando a IA vai criar um botão, ela não escolhe uma cor qualquer: usa a color-cta, do tamanho e do jeito que o arquivo manda.

Arquivo 2: ANTI_PATTERNS.md (o que nunca fazer)

O DESIGN.md dá a direção. Mas a IA tem vícios, e vício não se corrige só com direção: você precisa de uma lista de proibições. É isso que o ANTI_PATTERNS.md faz.

## Layout
- Proibido hero centralizado com título médio, subtítulo, 2 botões e 3 cards.
- Proibido alinhar tudo ao centro.

## Cor e superfície
- Proibido gradiente roxo e azul.
- Proibido sombra grande e borrada em todo card.

## Antes de entregar
- Revise a tela contra esta lista e diga quais itens você conferiu.

A última linha é a mais importante. Ela obriga a IA a se revisar antes de te entregar, e é aí que ela pega os próprios erros.

A lista completa é grátis e tem uma página só pra copiar: ver o ANTI_PATTERNS.md completo →

Como usar em 3 passos

Coloque os 2 arquivos na pastaSalve o DESIGN.md e o ANTI_PATTERNS.md na pasta principal do seu projeto, a mesma onde a IA trabalha.

Avise a IA com uma fraseCole a frase abaixo no CLAUDE.md. No ChatGPT ou no Gemini, cole no começo da conversa junto com os 2 arquivos.

Peça o site normalmenteAgora é só pedir. Se ela errar, mande revisar a tela contra os 2 arquivos.

Antes de criar ou alterar qualquer tela, leia DESIGN.md e ANTI_PATTERNS.md.
Use só os tokens do DESIGN.md. Se faltar um valor, pergunte antes de inventar.
Ao entregar, diga quais itens das duas listas você conferiu.

Se a IA errar alguma coisa, não peça "deixa mais bonito". Peça assim: "revise esta tela contra o DESIGN.md e o ANTI_PATTERNS.md e corrija o que estiver fora".

Baixe os 3 estilos prontos, grátis

Pra você não começar do zero, montei 3 estilos completos. Cada um vem com o DESIGN.md, os mesmos valores em CSS, em Tailwind e em JSON, e o ANTI_PATTERNS.md. Escolha o estilo, coloque o e-mail e o arquivo baixa na hora, aqui mesmo.

Dentro do .zip você encontra:

promptfly-design-pack/
├── LEIA-ME.md
├── ANTI_PATTERNS.md
└── vitrine/   ← seu estilo
    ├── DESIGN.md
    ├── tokens.css
    ├── theme.tailwind.css
    └── tokens.json

LEIA-ME.mdComece por aqui. Explica como usar em 3 passos.

ANTI_PATTERNS.mdA lista do que a IA nunca pode fazer. Vale pra todos os estilos.

DESIGN.mdAs regras do estilo: tokens, componentes, faça e não faça, guia pra IA.

tokens.cssOs mesmos valores em variáveis CSS, pra importar no projeto.

theme.tailwind.cssOs mesmos valores no formato do Tailwind v4.

tokens.jsonOs mesmos valores em JSON, pra qualquer ferramenta.

Quer o resto da biblioteca?

Esses 2 arquivos são a base. No Premium estão os prompts completos de todos os sites cinematográficos, as animações de scroll com código, as skills pro Claude Code e a mentoria pronta: o método do primeiro site ao primeiro cliente.

Promptfly PremiumAcesso vitalício

Todos os templates, animações e a mentoria pronta

R$ 129,90, pagamento único e acesso vitalício.

Mentoria pronta: o método do primeiro site ao primeiro cliente
Os prompts completos de todos os templates cinematográficos
As 10 animações de scroll Premium, com prompt e código
As skills cinematográficas pro Claude Code
Grupo VIP no Discord
Pagamento via Hotmart, garantia de 7 dias

Quero o Premium →Ver os templates grátis

Bastidores e templates novos no @rafha.gpt →