Prompts de sites no Claude Design e entrega ao código

Escolha a entrega de design

Peça layout web, protótipo ou revisão e defina o dispositivo. Confira os fluxos atuais do Claude Design na documentação da Anthropic e os recursos da sua conta. Um botão desenhado não é uma rota ou serviço conectado.

Forneça conteúdo e sistema de design

Inclua público, objetivo, seções, destinos das ações e textos factuais. Anexe sistema de design e recursos disponíveis. Peça desktop e celular, hierarquia legível e conteúdo provisório identificado, sem logotipos ou métricas inventados.

Refine uma seção por vez

Indique seção, largura e problema, além de conteúdo e regras que devem permanecer. Diferencie interações que realmente podem ser testadas de comportamentos apenas descritos. Confira o novo resultado antes da próxima alteração.

Prepare a entrega para implementação

Entregue arquivos de design, recursos, briefing e estados pendentes. Peça para inspecionar o projeto e informar dependências ausentes. Preserve fatos e contratos do backend; verifique rotas, ações, teclado e layouts móveis reais.

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.

Create a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.

Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.

Exercício real: Fieldnote com Codex

Fieldnote inclui o briefing original, o HTML do Codex sem alterações e verificações em desktop e celular. Nenhum Skill frontend-design foi fornecido; não é um teste do ChatGPT ou do Claude Design.

Perguntas frequentes

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.

• Explorar biblioteca
• Landing pages HTML para SaaS e prompts
• Templates de sites de portfólio e prompts de design

Referências oficiais

• Anthropic · Claude Design
• Anthropic · Prototypes and UX

Ferramentas e skills externas pertencem aos seus autores. Os links são referências, sem indicar parceria ou acesso incluído.