Frontend Design Skills: configurar Claude Code e Codex
Escolha um skill para a tarefa, instale a pasta completa e entregue um pedido concreto ao agente. Este guia traz configuração local, um exemplo verificado no navegador e seis recursos sem login.
Por Neruve · Atualizado em
Comece com uma página funcional
Visualize uma página HTML funcional e aplique estas técnicas com o código e o prompt incluído no seu agente de programação.
Framewise — Template HTML de landing page para produto de IA
Pratique a apresentação do produto, a hierarquia visual e um destaque responsivo.
Visualizar modeloAster Hale — Template HTML de portfólio para designer de produto
Adapte os serviços, os casos de projetos e o contato ao seu trabalho.
Visualizar modeloAs Skills continuam gratuitas para leitura e cópia sem login. As prévias dos modelos são públicas; baixar o código e seu prompt exige conta e a compra ou o plano correspondente. Ver acesso ao código e preços
Escolha o skill antes de instalar
O frontend-design da Anthropic orienta o design visual. Taste é um projeto comunitário separado; skills de Framer e animação têm outros objetivos. Um README não é um SKILL.md instalável. Confira fonte, licença e dependências. As etapas abaixo usam o skill da Anthropic como exemplo, não como instalador universal.
Instalar no Claude Code
A instalação no projeto limita o alcance ao repositório. Preserve a estrutura, a licença e os arquivos auxiliares. Copiar para o Agent copia um pedido de instalação; o site não instala nada no seu computador.
- Abra a fonte do frontend-design abaixo e revise SKILL.md, licença e arquivos referenciados.
- Copie a pasta completa para .claude/skills/frontend-design/ na raiz do projeto. Compare uma pasta existente antes de substituir arquivos.
- Abra Claude Code nesse projeto. Digite / para verificar se frontend-design aparece e selecione-o com sua tarefa.
.claude/skills/frontend-design/SKILL.mdNeste exemplo, acrescente o pedido a /frontend-design. Se não aparecer, confira caminho, nome SKILL.md, repositório e políticas do espaço de trabalho. Plugins podem usar comandos com prefixo.
Documentação oficial de configuraçãoInstalar no Codex
O Codex usa outro diretório de projeto. Reutilize instruções compatíveis, mas confira comandos e dependências específicos antes de executar. Um skill não fornece backend nem contas para outras ferramentas.
- Copie a pasta revisada para .agents/skills/frontend-design/ na raiz do projeto, mantendo a licença e os arquivos auxiliares.
- Confira se SKILL.md começa com YAML contendo name e description, seguido das instruções. Neste exemplo, o nome é frontend-design.
- No Codex CLI ou na extensão IDE, use /skills ou $ para selecionar. No aplicativo, use o seletor de skills. Reinicie o Codex se a alteração não for detectada.
.agents/skills/frontend-design/SKILL.mdNo CLI/IDE, selecione $frontend-design e acrescente o pedido. Confirme que o Agent leu o arquivo; o nome da pasta não prova que ele foi usado.
Documentação oficial de configuraçãoExecute um pedido e confira a página real
Defina página, público, ação principal e fatos que devem ser preservados. Use o pedido ou exemplo abaixo. Confira 1280, 390 e 320 px, o link principal e o teclado. Guarde código e capturas, registrando também as falhas.
O Skill Frontend Design não aparece ou não é acionado?
Primeiro identifique como foi instalado. Uma pasta do projeto e um plugin do Claude Code usam locais e nomes de comando diferentes.
- Uma pasta Skill no projeto
- O exemplo manual do Claude Code coloca SKILL.md e arquivos auxiliares em .claude/skills/frontend-design/. O Codex usa o exemplo .agents/skills/ acima. O README não é o arquivo instalável.
- Um Skill fornecido por plugin
- No Claude Code, abra /plugin e confirme instalação, ativação e escopo correto de projeto ou usuário. Use o comando exibido no menu; ele pode ter namespace. Siga a configuração do próprio plugin.
Verifique nesta ordem
- Confira o projeto atual, a origem do Skill e o escopo da instalação. Preserve os arquivos necessários e compare pastas com o mesmo nome antes de substituí-las.
- Confira o nome SKILL.md e se o YAML começa na primeira linha. No Claude Code, revise name, description e controles de chamada. YAML inválido pode impedir a seleção automática mesmo quando a chamada manual funciona.
- Confirme que o Skill está listado. Pergunte ao Claude Code quais Skills estão disponíveis e confira o menu /. Se estiver listado mas não for usado, invoque o comando com uma tarefa compatível com a descrição e confira disable-model-invocation e user-invocable.
- Confirme que o agente realmente lê o Skill correto e executa a tarefa. Guarde o caminho ou registro da ferramenta junto com a saída e confira a página no navegador. O nome da pasta ou uma captura bonita não comprova o uso.
O caso Codex abaixo leu manualmente um arquivo de versão fixa. Não verifica descoberta automática nem instalação de plugin no Claude Code. Consulte a documentação da sua versão.
Documentação oficial de configuraçãoEscolha um Skill relacionado
As seis páginas permitem leitura e cópia sem login. Confira os requisitos de cada uma: integrações Framer, ferramentas de vídeo e módulos auxiliares não equivalem a um skill genérico de frontend.
Taste Skill — visão geral e instalação
Visão geral do projeto e dos fluxos. Este README não é o arquivo a instalar.
Taste Skill — design frontend (v2 experimental)
Fluxo comunitário de design para landing pages e portfólios. A versão v2 arquivada é experimental.
Framer Skills — Convert Prompt
Converte um pedido React/Tailwind em prompt para Framer. Confira os requisitos de integração.
Framer Skills — Sync Styles
Sincroniza cores, estilos de texto e ícones fornecidos com um projeto Framer. Exige a integração correspondente.
Claude Motion — Skill de motion design da comunidade
Fluxo comunitário de vídeo para Claude Code/Remotion. Não é uma função integrada da Anthropic.
Genjutsu Skill — Cast
Cast para animações e microinterações. Preserve os módulos _jutsu necessários.
Exercícios originais para adaptar
Estes exemplos originais da Neruve permanecem em inglês. São entradas propostas, não resultados testados nem prompts de templates pagos. Substitua os dados fictícios antes de usar.
Um briefing para uma skill de design frontend
Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.
Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.
First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.Uma revisão de design com escopo definido
Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.Exemplo documentado: Fieldnote com frontend-design
Uma página fictícia de notas de pesquisa: uma nota de exemplo, o fluxo coletar–comparar–decidir e um link interno funcional. Abra o exemplo ou baixe o pedido original e o HTML. O exemplo permanece em inglês.
Implementado no Codex em 13 de outubro de 2026 após a leitura manual do skill da Anthropic em uma revisão fixa, e verificado no navegador. Fonte usada: Anthropic frontend-design · dbd4588
Para repetir, instale o skill revisado conforme as etapas acima e entregue o pedido baixado. Compare o resultado em 1280, 390 e 320 px; verifique o link e o foco do teclado. Registre as diferenças.
É apenas um exemplo guiado manualmente. Não valida descoberta automática, Claude Code, Taste ou um gerador Neruve. Não há comparação de modelos, cadastro ou prova de aumento de conversão.
Perguntas frequentes
Instalar uma skill garante um site melhor?
Não. O exemplo mostra uma implementação no Codex após a leitura manual de uma versão fixa do skill da Anthropic. Não há comparação sem skill nem prova de melhoria em todas as ferramentas. O exemplo anterior do Fieldnote não usou skill de design.
Explore designs e os prompts associados
O catálogo público da Neruve oferece designs de sites, prompts associados disponíveis e um diretório de Skills. As prévias interativas não exigem login; os prompts seguem as permissões do item e do plano. Este fluxo usa sua própria ferramenta de desenvolvimento e não exige um gerador público de sites da Neruve.
Referências oficiais
Ferramentas e skills externas pertencem aos seus autores. Os links são referências, sem indicar parceria ou acesso incluído.