Nunca mais fique sem ideia de frontend pra construir suas páginas

Fica no gratuito. Abre um estilo, copia o DESIGN.md, cola na IA. O resto da plataforma você não precisa hoje.

A maioria das pessoas ainda pede página assim: "faz uma landing moderna, clean, premium".

A IA entrega o mesmo site de sempre. Roxo de fábrica. Três cards iguais. Headline gigante. Botão no vazio.

Não é falta de ideia. É ideia sem sistema.

Você não precisa assinar o Refero pra resolver isso.

Hoje eu abri o styles.refero.design sem login. Badge Beta no topo. Headline oficial: "High-quality DESIGN.md examples for AI agents". Em português: exemplos de DESIGN.md, o arquivo de texto que descreve um sistema de design pra agente de IA ler.

O site afirma 2.000+ sistemas de design extraídos de páginas de produto reais. Eu não contei os 2.000. Na primeira tela, sem rolar o infinito, a grade mostrou 20 cards. O número grande é comunicação do produto, não uma contagem minha.

O que eu fiz, sem pagar: abri um card, copiei o DESIGN.md, li as regras, coloquei na IA.

O plano Pro existe. MCP, skill, biblioteca de telas, plugin de Figma. A documentação oficial do Free é direta: busca com resultado limitado; sem MCP; sem Refero Skill; sem plugin de Figma. Fonte: doc.refero.design/help/plans.

Passo 1. Separa pelo menos duas páginas que você já gosta

O que eu faria de verdade: não começo no Styles pedindo "moderno". Começo com referência que eu já gosto.

Separaria pelo menos duas páginas. Pode ser site que você já usa. Pode ser card na grade do Styles.

• Uma pelo visual: cor, tipo, espaço, o jeito da página
• Outra pelo movimento: como as coisas entram, o hover, o ritmo

Se a mesma página tiver os dois, ainda assim eu abro uma segunda. Dois. Não cinco. Não "mistura tudo".

Aí abre https://styles.refero.design/ e procura essas páginas. Pelo nome. Ou pelo que você viu.

Na home, hoje:

• busca
• chips de clima: Minimal Design, Clean SaaS, Editorial Type, Soft Gradients, Monochrome UI, Playful Design, High Contrast, Premium Design
• abas Trending, Popular, Newest

Eu fiz assim nesta sessão:

• Linear pro visual: escuro, apertado, um botão só
• monopo saigon pro movimento: letra grande, cor só no topo, animação lenta

Abre as duas fichas. Uma de cada vez. O passo 2 é o que você puxa de cada uma.

Passo 2. Abre o card e pega o que importa

A ficha não é um moodboard. O print é a foto. O DESIGN.md é o recado: como essa página pensa cor, tipo, espaço e o que é proibido.

Eu abri o Linear: styles.refero.design/style/90ce5883-bb24-4466-93f7-801cd617b0d1.

Do lado direito tem umas abas. Tailwind, CSS, tokens. Esquece. Clica em DESIGN.md. Se aparecer Extended, usa esse. Copy.

O arquivo inteiro vai colado na IA. Eu não resumo no lugar dele.

O que eu anoto, só pra cobrar depois, são três coisas. Se a IA errar uma delas, ela não leu o arquivo.

• Clima: a página é escura ou clara? Apertada ou folgada?
• Cor do botão: qual é, e o que não pode virar botão
• Proibido: o "não faça" que mais muda o resultado

No Linear, isso bateu assim:

• Clima: escura e apertada
• Botão: aquele verde-limão. Uma cor só. O resto não compete
• Proibido: negrito pesado e gradiente no botão

Tem um vermelho na paleta. Não é alerta. Não é botão. Se a IA pintar o CTA de vermelho "pra chamar atenção", ela não leu o arquivo. Manda voltar.

Não é ficha pra preencher. É o teste. O DESIGN.md vai inteiro. Essas três linhas são o que eu olho no output.

A segunda página que eu separei foi o monopo saigon. Não é substituta do Linear. É a referência de movimento.

No arquivo dela, o movimento é lento. Sem pulinho de tutorial. Isso é o que eu quero da segunda. O visual continua o do Linear.

Se a pessoa desligou animação no celular, o site não fica brigando com ela.

Passo 3. Copia os dois arquivos e joga na IA

Clica Copy em cada ficha. Ou baixa os dois arquivos.

Cola os dois no topo do chat.

E fala o combinado, em português:

Se a sua marca já tem cor de botão, troca a cor e mantém a regra: um botão, uma cor.

O que vai: o jeito das duas referências, cada uma no seu papel.

O que não vai: logo, nome, texto, print do produto deles.

A própria plataforma pede isso. Referência. Não clone.

Passo 4. Cola o prompt. Só então pede a página

Troca Linear e monopo pelas duas páginas que você separou. Cola os dois arquivos. Preenche o produto. Não deixa colchete.

Você vai construir a landing do produto abaixo. Português do Brasil. HTML + CSS + JS num arquivo só.

Eu separei 2 referências no Refero Styles, no plano gratuito. Colei o DESIGN.md de cada uma.

Referência 1 - visual (cor, tipo, espaço, o que é proibido):
Nome: [ex: Linear]
DESIGN.md:
[COLE O DESIGN.md DA REFERÊNCIA 1]

Referência 2 - movimento:
Nome: [ex: monopo saigon]
DESIGN.md:
[COLE O DESIGN.md DA REFERÊNCIA 2]
Desta, use só o movimento. Não traga a paleta nem o tipo dela.

Produto:
- Nome:
- O que vende, em uma frase:
- Quem decide a compra:
- Promessa da primeira dobra:
- Prova (número, nome, fato). Se não tiver, escreva "sem prova" e não invente.
- Texto do botão e pra onde vai:
- Cor do botão da minha marca (se não tiver, usa a da referência 1):

Regras:
1. Visual = referência 1. Movimento = referência 2. Não faça média. Não misture os dois no mesmo papel.
2. Não copie logo, nome, texto nem print dos sites de origem.
3. Sem três cards iguais. Sem inventar "moderno/clean/premium".
4. Se a referência 2 não falar de movimento, hover curto e para. Sem bounce.
5. Se a pessoa desligou animação no celular, o site não briga com ela.
6. Campo vazio do produto = você pergunta. Não inventa prova.
7. Antes do HTML, escreve:
   A. Visual em uma frase (referência 1)
   B. Movimento em uma frase (referência 2)
   C. O que você não vai copiar (marca, texto, print)
   D. As seções da página
Depois disso, o HTML.

Comece por A. Só escreva código depois de A, B, C e D.

Se os dois arquivos já estão na raiz do Cursor ou do Claude Code, troca o bloco DESIGN.md por: "Leia DESIGN.md da referência 1 e DESIGN.md da referência 2 na raiz."

Antes de aceitar o HTML, olha se ela fez o dever de casa:

• O visual veio da referência 1
• O movimento veio da referência 2
• Não trouxe logo nem texto de nenhum dos dois sites

Se pulou, manda voltar. Não aceita o código.

Faz nessa ordem

• Separei pelo menos 2 páginas que eu já gosto
• Achei elas (ou parecidas) no Styles, sem pagar
• Copiei o DESIGN.md das duas
• Anotei de cada uma: clima, cor do botão, o que é proibido
• Colei os dois arquivos e falei quem manda o visual e quem manda o movimento
• Só aceitei o HTML depois de ela me contar o que vai fazer

O que o gratuito não faz

E por que isso não muda o plano.

• Busca limitada. A doc oficial diz isso. Trabalha com chip, aba e os cards que abrem. Uma landing precisa de um sistema, não de dois mil.
• Sem MCP. Você copia o arquivo. Demora um minuto.
• Sem Refero Skill. O prompt acima faz o ofício desta extração.
• Sem a biblioteca grande de telas e fluxos. Isso é o produto principal, em refero.design. Outro trabalho.
• Styles está em Beta. O rótulo está no topo da home. Recorte, busca e volume podem mudar.
• Eu não contei 2.000 fichas. O site afirma 2.000+. Eu vi 20 cards na primeira tela.
• Eu não rodei teste controlado. Não construí a mesma landing com e sem o DESIGN.md nesta sessão. Quando eu rodar, eu posto o print. Evidência de conversão, CPL ou "fica mais bonito" eu não tenho.
• Não substitui oferta, copy nem marca. Sistema certo com headline fraca continua fraco.

Pagar faz sentido se você vive o dia inteiro dentro de tela de produto alheia. Se a tarefa é uma landing com direção visual, o gargalo não é volume. É sair de "moderno" e chegar num arquivo com regra. Isso o Styles já entrega no browser.

Hoje: duas páginas no gratuito. Dois arquivos. O prompt. Sem upgrade.

Se fizer, me manda o print. Inclusive se der errado. Caso ruim ensina mais que caso bom.

Valeu. Nos vemos no próximo.

- Vini