Claude Design System Prompt 中文教程：先做一个可比较的小页面
这个仓库是一套第三方 Markdown 提示与设计流程。作者称它来自对 Claude Design 的逆向整理，但它不是 Anthropic 官方项目，也不包含官方画布或协作服务。比较稳妥的用法，是把它当作一份可审阅、可裁剪的团队设计规范。
1. 只选择一套宿主版本
Claude Code 或 Claude.ai 使用 claude/；Codex 使用 codex/。两套设计原则相近，但执行方式不同：Claude 版允许委派评审，Codex 版按单一循环顺序检查。不要同时加载，以免重复约束。
claude/ system-prompt.md skills/*.md codex/ AGENTS.md system-prompt.md skills/*.md
2. 先保存未加载提示的基线
选一个没有生产数据的单页任务，例如“为图书馆活动做移动端报名页”。先让同一模型在相同输入下产出一次，保存 HTML 与截图。基线能帮助你分辨真正的改进，避免只凭第一印象判断。
3. 跑一条完整而短的流程
discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass
把真实文案、目标人群、品牌颜色、已有组件和交付尺寸一并提供。仓库也有 design-system-extract、accessibility-audit、interaction-states-pass 等流程，可以在基本页面稳定后逐步加入。
4. 用可观察标准复核
人工走一遍键盘导航，确认焦点可见、表单标签明确、错误信息能被理解；再检查 320px 窄屏、长文本、空状态、加载和失败状态。颜色对比与语义结构应使用专门工具检查，不能仅接受模型声称“符合 WCAG”。
与官方 Claude Design 对比
Anthropic 官方 Claude Design 是付费计划中的 beta 产品，提供画布、行内评论、设计系统导入、共享，以及 HTML、PDF、PPTX 等导出方式。这个开源仓库只有提示和流程，适合在不同模型里修改规则；它没有官方账户协作、画布编辑或版本管理。需要完整设计工作区可用 Claude Design，需要透明的纯文本规则可评估本仓库。
这里仅补原教程没有展开的事实和边界。安装命令与操作步骤仍以前文为准。
先判断这个项目是否适合你
适合谁用
适合给通用编码代理增加网页视觉方向、原型、设计 token 提取和审查清单。它更像可编辑的工作规范，适合团队按品牌和组件库裁剪；需要多人画布、版本管理、组织级设计系统和成品导出时，应使用完整设计产品。
采用建议
它适合把设计原则和复核步骤带进已有代理工作流，但不要把“逆向提示”当作官方实现。先在一个小页面上比较加载前后差异，并记录可访问性、响应式和品牌一致性问题；只有团队评审通过后再固化为项目指令。
原教程未展开的系统信息
核心功能
20 章设计约束
覆盖内容纪律、视觉层级、字体、颜色、可访问性、交互反馈、系统化组件与交付。
14 个可串联流程
从需求澄清、视觉方向和线框，到原型、设计系统提取、可访问性检查与最终润色。
架构与数据流
claude/ 和 codex/ 各自保存 system-prompt.md 与 14 个同名流程。Claude 路线把提示放入支持 system prompt 的宿主并按任务加载流程；Codex 路线通过 AGENTS.md 进入，评审按单一循环顺序执行。最终设计仍由宿主模型与它可用的 HTML、CSS、SVG、JavaScript 工具产出。
技术栈和运行条件
语言
Markdown 提示词；输出侧使用 HTML、CSS、SVG 与 JavaScript
框架
20 章 system prompt + 14 个阶段化设计流程
关键依赖
- 支持系统提示或项目指令的 LLM 宿主
- 能读写目标项目的工作环境
- 人工设计评审
运行环境
无服务端、无构建步骤、无 API key 分发；按所用宿主自行放置提示文件
常见问题
Claude Design System Prompt 是 Anthropic 官方项目吗？
不是。它由第三方维护，README 明确称内容是对 Claude Design 的逆向整理；使用时应把它当作可审阅的社区提示库。
这个仓库需要安装 Node.js 或 Python 吗？
仓库核心是 Markdown 提示和流程，没有服务端或包管理安装步骤。真正需要哪些运行环境，取决于承载提示的模型和工具。
Claude 版和 Codex 版应该一起加载吗？
不建议。README 将两者作为独立变体维护；选择与宿主匹配的一套，避免重复规则和相互冲突的执行方式。
它能保证产出符合 WCAG 吗？
不能。仓库提供可访问性审查步骤，但模型生成结果仍需用键盘、读屏器、对比度工具和真实用户流程复核。