DESIGN.md 与 SKILL.md：视觉上下文和工作流程
视觉上下文文件描述项目外观，Skill 描述可复用操作流程，需求描述当前改动。这样可以跨页面保持一致方向，同时保留不同页面需要的布局。
2026年10月8日核对。具体工具行为请以所用版本的官方文档为准。
从可用的页面开始
先预览可用的 HTML 页面，再让编程智能体结合源码和配套 Prompt，练习这些方法。
Skills 继续免登录免费阅读和复制。模板可公开预览；源码下载和配套 Prompt 需要账户及相应购买权益或套餐。 查看源码权限和价格
DESIGN.md 该写什么？
Google 的 DESIGN.md 描述视觉身份，规范目前为 alpha。自己的上下文应说明颜色角色、字体、间距、控件与响应式行为，并解释选择与受众的关系。下方示例是普通 Markdown，不是通过 Google token 规范验证的文件。
SKILL.md 该写什么？
Skill 放可重复执行的流程：何时审查、查看什么、保留哪些行为、如何报告失败。项目事实和本次需求放在流程之外。下方纯操作说明展示这种分工，不是已打包的第三方 Skill。
和具体网站需求一起使用
写明页面、访问者、主要操作、真实内容与受保护行为。明确要求 Agent 阅读视觉上下文和所选流程，修改前复述适用约束。文件名相同不代表各工具都会自动加载或强制执行。
网站变化时维护有效上下文
接受改动后更新受影响的设计说明，并记录实际检查。共享控件保留稳定规则，各区域可以采用不同布局。行为和无障碍要求还要在源码与浏览器中验证，仅有文字不能强制落实。
可自行改写的原创练习
以下 Neruve 原创示例保留英文，是建议输入，不是工具实测输出或付费模板 Prompt。使用前请替换虚构事实。
视觉识别说明
# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.
This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.仅含操作说明的审查 Skill
---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---
1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.
This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.真实练习：用 Codex 生成 Fieldnote
Fieldnote 保留了原创输入、未经改写的 Codex HTML，以及桌面和手机检查记录。该次运行没有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 实测。
真实练习：用 Codex 生成 Fieldnote常见问题
Claude Code、Codex 和 Stitch 都能使用吗？
按各工具文档选择格式和加载方式。普通上下文可作为文本提供；格式转换、自动发现与扩展字段要分别检查。本指南不承诺 Neruve 的 DESIGN.md 导出或自动集成。
浏览设计与配套 Prompt
Neruve 的公开目录提供网站设计、可用的配套提示词和 Skills 目录。交互预览无需登录；配套提示词按条目与套餐权益获取。本工作流使用你自己的编程工具，无需公开的 Neruve 网站生成器。
官方参考资料
第三方工具和 Skill 属于各自作者。链接用于参考，不表示合作关系或已包含相关使用权益。