Claude Design Website Prompts and Handoff

Choose the design deliverable

Ask for a website layout, prototype or refinement of an existing design, and name the target device. Anthropic documents Claude Design workflows across its current tools; check which surface and features your account has. Do not treat a designed button as a working route or service.

Provide content and the design system

Supply the audience, goal, sections, action destinations and factual copy. Attach the available design system and assets when you have them. Request desktop and mobile views, readable hierarchy and clearly labelled placeholders rather than invented customer logos or business metrics.

Refine one section at a time

Point to the section, viewport and specific problem. Explain which content and system rules must stay fixed. For a prototype, distinguish the interaction you can actually try from behavior that is only described. Review the new output before moving to the next change.

Prepare an implementation handoff

Pass the available design files, assets, brief and unresolved states to the coding agent. Ask it to inspect the existing project before integration and report missing dependencies. Preserve product facts and backend contracts, then verify real routes, actions, keyboard access and mobile layouts.

Original exercises you can adapt

These original Neruve examples remain in English. They are proposed inputs, not tested tool outputs or paid template prompts. Replace the fictional facts before using them.

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.

A real exercise: Fieldnote with Codex

Fieldnote includes an original brief, the unchanged Codex HTML and desktop/mobile checks. No frontend-design Skill was supplied; this is not a ChatGPT or Claude Design test.

Common questions

Explore designs and paired prompts

Neruve's public catalog offers website designs, available paired prompts and a skills directory. Interactive previews are available without signing in; paired prompts follow the item and plan access rules. This workflow uses your own coding tool and does not require a public Neruve site generator.

• Explore library
• SaaS Landing Page HTML Templates & Prompts
• Designer Portfolio Website Templates with HTML Source

Official references

• Anthropic · Claude Design
• Anthropic · Prototypes and UX

Third-party tools and skills belong to their respective authors. These links are references, not a claim of partnership or bundled access.