Claude Design 网站设计 Prompt 与代码交付
在 Claude Design 中描述网站或原型，修改可见结果，再交付实际设计资料与待定事项。精美布局仍需要交互验证、项目接入和浏览器检查。
于 2026 年 10 月 9 日审阅。工具功能随账号和版本变化，请核对下方官方文档。
从可用的页面开始
先预览可用的 HTML 页面，再让编程智能体结合源码和配套 Prompt，练习这些方法。
Skills 继续免登录免费阅读和复制。模板可公开预览；源码下载和配套 Prompt 需要账户及相应购买权益或套餐。 查看源码权限和价格
先确定设计交付物
明确要网站布局、交互原型还是已有设计的修改，并指定设备。Anthropic 文档说明了当前工具中的 Claude Design 流程，请核对你的账号可用入口与功能。设计图上的按钮不能当作已接通的路由或服务。
提供内容与设计系统
给出受众、目标、区块、行动去向和真实文案；已有设计系统与资源时一并提供。要求桌面和手机视图、清楚的信息层级及标记明确的占位内容，不编造客户标志或业务数据。
一次改一个区块
指出区块、视口及具体问题，说明哪些内容和设计系统规则必须保留。原型里能实际操作的交互，与仅在文字中描述的行为应分开记录。审阅新结果后，再开始下一处修改。
准备给代码代理的交付
传递可用设计文件、资源、需求和未解决状态。要求代码代理先检查现有项目，并报告缺失依赖。保留业务事实与后端约定，再验证真实路由、行动、键盘访问和手机布局。
可自行改写的原创练习
以下 Neruve 原创示例保留英文，是建议输入，不是工具实测输出或付费模板 Prompt。使用前请替换虚构事实。
Claude Design：网站与原型需求
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.Claude Design：交付给代码实现
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.真实练习：用 Codex 生成 Fieldnote
Fieldnote 保留了原创输入、未经改写的 Codex HTML，以及桌面和手机检查记录。该次运行没有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 实测。
真实练习：用 Codex 生成 Fieldnote常见问题
Neruve 实测过这些 Claude Design Prompt 吗？
没有。这些是原创建议输入，尚非 Claude Design 实测输出，也不是 Neruve 提供的工具集成。链接中的 Fieldnote 是真实 Codex 输出，运行时未提供 frontend-design Skill，不能据此证明 Claude Design 的效果。
浏览设计与配套 Prompt
Neruve 的公开目录提供网站设计、可用的配套提示词和 Skills 目录。交互预览无需登录；配套提示词按条目与套餐权益获取。本工作流使用你自己的编程工具，无需公开的 Neruve 网站生成器。
官方参考资料
第三方工具和 Skill 属于各自作者。链接用于参考，不表示合作关系或已包含相关使用权益。