Guia prático de prompts de design web para Claude Code

Um fluxo pequeno e verificável

1. Abra Claude Code no projeto e peça revisão da stack, rotas e componentes antes de alterar. Explicite contratos de backend e comportamentos existentes.
2. Forneça o prompt e um briefing separado com público, objetivo, texto real, recursos, ação e restrições. Peça uma proposta antes de editar.
3. Confira o resultado no navegador. Relate um defeito concreto com viewport e seção, peça uma correção focada e repita a verificação.

Briefings originais de SaaS e portfólio

Este briefing fictício foi escrito pela Neruve, separado dos prompts pagos. O texto em inglês é mantido para reprodução.

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

O que conferir no resultado

Confira celular de 390 px e desktop: título claro, texto legível, links funcionando, foco de teclado visível e ausência de overflow horizontal. Substitua afirmações demonstrativas por fatos verificados.

Um prompt Claude para reformular um site existente

Comece com um hero, a biblioteca de componentes existente e a ação original. O briefing completo protege fatos e comportamento e fornece ao Claude Code uma tarefa visual concreta.

Este briefing fictício foi escrito pela Neruve, separado dos prompts pagos. O texto em inglês é mantido para reprodução.

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

Quais evidências guardar

Guarde arquivos alterados, capturas nas mesmas larguras, o destino original da ação e testes de teclado, celular e contratos protegidos. Marque como pendente o que não puder testar.

São entradas originais sugeridas para Claude Code, não saídas verificadas do Claude. Escolha o Skill pela tarefa, revise dependências e preserve os fatos do projeto. Taste é um projeto comunitário independente.

• O Skill Frontend Design não aparece ou não é acionado?
• Taste Skill — design frontend (v2 experimental)
• Prompts de redesign para sites existentes

Exercício real: Fieldnote com Codex

Executamos o brief original do Fieldnote com Codex e guardamos toda a saída. Esta página fictícia de notas de pesquisa permite verificar o mesmo brief em outro agente. A tentativa com Claude Code retornou um erro de login e não gerou uma página.

Registrado em 4 de outubro de 2026 com Codex CLI 0.145.0: uma geração bem-sucedida, 35,92 segundos, sem ferramentas de arquivos ou shell. A CLI não informou o identificador do modelo. Entrada, saída e capturas permanecem em inglês.

Verificamos no navegador layouts de 1280, 390 e 320 pixels, a âncora do fluxo e o link de salto por teclado. Há um único h1 e a nota está marcada como fictícia. Não há cadastro, preços nem depoimentos. Também revisamos contraste e regras de movimento reduzido; não é uma auditoria completa de acessibilidade.

Baixe a entrada completa em inglês e execute em um agente autenticado. Abra o HTML no navegador, verifique as mesmas larguras e links e registre falhas antes de pedir uma correção específica. O código preserva nosso resultado real; outra execução pode ter aparência diferente.

Este é um exercício HTML/CSS independente, não um sucesso do Claude Code nem um teste do gerador do Neruve. Não fornecemos DESIGN.md nem o Skill frontend-design. O resultado não comprova superioridade, conversão, crescimento SEO ou citações de IA.

DESIGN.md e SKILL.md têm funções diferentes

O DESIGN.md do Google combina tokens YAML e explicações Markdown para descrever a identidade visual. Peça explicitamente que Claude Code leia o arquivo; não se afirma descoberta automática nem exportação na Neruve. O formato e a CLI estão em fase alpha e podem mudar.

Uma skill do Claude Code oferece instruções reutilizáveis em SKILL.md com frontmatter. Revise fonte, licença e permissões antes de instalar. O arquivo de identidade fornece contexto; a skill fornece procedimento ou capacidade.

O que a Neruve oferece hoje

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.

A referência é um ponto de partida. O resultado varia por modelo, ferramenta e versão; arquivos e acesso dependem do item e plano.

Referências oficiais

• Claude Code
• SKILL.md
• DESIGN.md