Claude Code 网站设计提示词使用指南

一个可检查的小步骤流程

1. 在目标项目中打开 Claude Code，先让它检查技术栈、路由和组件，再建议改动；明确保留后端接口及既有行为。
2. 提供可用的参考提示词，再另附适配需求：受众、页面目标、真实文案、资产、主操作及约束。编辑前先要求提出具体改动。
3. 在浏览器检查首轮结果，记录问题视口和具体区域，要求一次聚焦修复后重复同一检查。

原创 SaaS 与作品集需求示例

这是 Neruve 编写的虚构需求示例，独立于付费提示词；英文原文保留以便复现。

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.

生成结果检查清单

检查 390 px 手机与桌面视图：主标题清楚、文字可读、链接有效、键盘焦点可见且无横向溢出；将所有演示声明替换为核实的事实。

用于已有项目的 Claude 网站改版 Prompt

从一个 Hero、现有组件库和原始操作入口开始。完整需求保护产品事实与行为，同时给 Claude Code 一个具体的界面任务。

这是 Neruve 编写的虚构需求示例，独立于付费提示词；英文原文保留以便复现。

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.

随结果保留哪些证据

保留改动文件、相同宽度的截图、原始操作目标，以及键盘、手机布局和受保护约定的检查结果。无法测试的项目标记为待验证。

以下是原创 Claude Code 建议输入，尚非 Claude 实测输出。按任务选择 Skill，检查依赖并保留项目事实。链接的 Taste 是独立社区项目。

• Frontend Design Skill 没出现或未触发？
• Taste Skill：前端设计（v2 实验版）
• 已有网站的 AI 改版 Prompt

真实练习：用 Codex 生成 Fieldnote

我们把上面的 Fieldnote 原创 brief 交给 Codex，并保留完整输出。这张虚构研究笔记页面，用来检验同一份需求在另一款编码工具中的结果。尝试运行 Claude Code 时收到登录错误，没有生成页面。

记录于 2026 年 10 月 4 日；Codex CLI 0.145.0，一次成功生成，耗时 35.92 秒，没有使用文件或命令工具。CLI 未报告模型标识。输入、输出和截图保留英文原文。

浏览器检查覆盖 1280、390 和 320 像素布局、工作流锚点和键盘跳转链接。页面只有一个 h1，研究笔记明确标为虚构；没有注册表单、价格或客户评价。也检查了文字对比度和减少动态效果规则；这不是完整的无障碍审计。

下载完整英文输入，在已登录的编码工具中运行。用浏览器打开返回的 HTML，按相同宽度检查布局和链接，先记录失败，再请求一次聚焦修复。提供的源码保留本次真实结果；重新生成的页面可能不同。

这是一个独立 HTML/CSS 练习，不是 Claude Code 成功案例，也不是 Neruve 生成服务的测试。输入没有附带 DESIGN.md 或 frontend-design Skill。结果不能证明工具优劣、注册转化、SEO 增长或 AI 引用。

DESIGN.md 与 SKILL.md 解决不同任务

Google 的 DESIGN.md 格式结合 YAML 设计 token 与 Markdown 使用说明，用于描述项目视觉身份。作为 Claude Code 上下文时，明确要求读取该文件；本指南不声称自动发现或 Neruve 已支持导出。 当前格式和 CLI 处于 alpha 阶段，可能变化。

Claude Code Skill 在 SKILL.md 中用 frontmatter 和指令提供可复用任务指导。安装前检查来源、许可证和权限。视觉身份文件提供项目背景，Skill 提供过程或能力。

Neruve 当前提供什么

Neruve 的公开目录提供网站设计、可用的配套提示词和 Skills 目录。交互预览无需登录；配套提示词按条目与套餐权益获取。本工作流使用你自己的编程工具，无需公开的 Neruve 网站生成器。

参考设计是起点；输出随模型、工具和版本变化，文件和访问权益以条目及套餐为准。

官方参考资料

• Claude Code
• SKILL.md
• DESIGN.md