Skill pra Claude Code e Codex · Design e frontend
Estrutura primeiro, direção escrita, tokens e fontes locais, uma composição diferente por seção e a revisão anti-genérico no fim. É a skill que faz a minha página não nascer com cara de 2010 nem de template de IA, e é a que mais roda aqui.
Ou as 25 skills com 9 bônus no Pack de Skills por R$ 497.
O problema
Não é o modelo que erra, é a ordem: ele abre o CSS antes de saber o que a página precisa fazer. Três sintomas que entregam a página feita no automático, e o que muda quando a skill entra na frente.
| Sem a skill | Com a frontend-expert |
|---|---|
| Você pede a LP e a IA já sai escrevendo: título, parágrafo, dois botões e três cards iguais com ícone. Bonito por dez segundos, igual a todas as outras. | Ela pergunta o objetivo, quem chega e por onde, monta a lista de seções com uma função persuasiva em cada, e só depois decide como a página vai parecer. |
| Uma fonte só, quase sempre a mesma, puxada do Google em pesos vizinhos. Nada tem hierarquia, e a página pede permissão pra fora antes de carregar. | Duas famílias locais com salto real de tamanho, uma cor de acento e nenhuma requisição externa. A direção fica escrita no projeto, e quem mexer depois lê primeiro. |
| A mesma composição cinco vezes seguidas, nenhuma imagem depois do hero, fundo liso do começo ao fim. A página vira documento e o olho para de rolar. | Cada seção muda de composição, tem imagem onde precisa e profundidade onde faz sentido. No fim uma revisão mede a página e reprova o que ainda parece template. |
O que sai dela
Três páginas do meu próprio site, feitas com esse processo. Sem designer no meio: a skill pede a estrutura, escreve a direção, monta com o kit e reprova o que ficou genérico.
Como funciona
Uma ação, quem chega e por qual tráfego, e se é landing page, site institucional, software ou dashboard. Ela lê a referência daquele tipo antes de qualquer coisa.
Chama a copy-thief (a de copy, grátis no meu GitHub) e devolve a lista de seções, cada uma com uma função persuasiva diferente. Nenhum CSS antes dessa lista existir.
Escolhe uma entre 12 direções com cor, tipografia e movimento já travados, adapta à sua marca e registra no projeto: cor, par tipográfico, dispositivo assinatura e plano de imagens. Quem mexer depois lê isso primeiro.
Parte de um template completo, puxa componentes prontos (hero, preço, passos, FAQ, faixa final e mais), só os efeitos que a página usa e as fontes locais que ela mesma instala. Zero Google Fonts.
Um verificador mede fonte, tipografia, imagem, composição, profundidade, CTA, movimento e acessibilidade, e reprova se a página repete composição ou não tem imagem depois do hero. Depois, screenshot em três larguras e uma rubrica de 11 critérios, com nota mínima em cada.
Antes de comprar
Nenhuma chave de API. Foto e ilustração são as suas ou as que outra skill gerar.
Ela detecta se o projeto já tem direção e entra em modo manutenção, sem redesenhar o que você poliu à mão.
O limite dela
A skill escolhe a direção, monta a página e reprova o genérico, mas a foto boa continua sendo sua: ela gera placeholder neutro no tamanho certo e diz onde a imagem real entra. Quando você não tem a foto, gera na ferramenta de imagem que já usa e volta pra ela encaixar.
Em React ela cobre tokens para Tailwind v4 e shadcn e diz como portar o kit, mas o kit em si é HTML, CSS e JS puro. Quem vive em Next com design system próprio aproveita o processo e a rubrica, não os templates.
E ela não substitui a copy-thief: chama a de copy no passo 2 porque estrutura vem antes de visual. A copy-thief é grátis, então isso não te custa nada a mais.
O que você recebe
O preço
Só a frontend-expert
R$97pagamento único
Comprou avulsa e depois quis tudo? Me chama que eu abato o que você já pagou.
Pack de Skills
R$ 1.665R$497ou 10x no cartão
As 25 avulsas dão R$ 1.665. O pack se paga na nona skill.
02 · Design e frontend
Antes de você perguntar
A da Anthropic é um texto de boas intenções: pede estética distinta e para. Esta tem processo com ordem (estrutura, direção escrita, composição, build, revisão), um kit pra copiar em vez de inventar, fontes locais e uma revisão que mede a página e reprova. E foi calibrada em página brasileira, com setor, tom e tráfego daqui.
O processo e a rubrica valem pra qualquer stack. O kit é HTML, CSS e JS puro; para React ela traz a referência de tokens em Tailwind v4 com shadcn e o roteiro pra portar componente. Se o seu projeto é Next com design system próprio, você usa a direção e a revisão, não os templates.
Não. Gera placeholder neutro no tamanho certo e escreve o plano de imagens: quantas, de que tipo e onde. A foto real é sua, ou vem da ferramenta de geração de imagem que você já usa.
Ela chama a copy-thief no passo 2, porque a lista de seções vem antes do visual. A copy-thief é grátis, no meu GitHub, licença MIT. Sem ela instalada, a frontend-expert monta a estrutura sozinha, com menos rigor de copy.
É pra isso que ela existe aqui: as páginas do meu site e as que eu entrego pra cliente saem dela. A licença cobre o seu trabalho para terceiros; o que não vale é revender a skill.
Pagamento único, garantia de 7 dias, 12 meses de atualização. Ou leve as 25 no pack.
