claude-design-system-prompt 是什么?

Claude Design System Prompt 是 Trystan-SA 维护的 MIT 提示词与流程库,作者称其内容由 Claude Design 逆向整理。仓库分别提供 Claude 与 Codex 版本:20 章系统提示,以及两套各 14 个生产、结构提取和评审流程。它不是 Anthropic 官方项目。

⭐ 1,664 Stars 🍴 211 Forks — MIT 作者: Trystan-SA
来源:github.com/Trystan-SA/claude-design-system-prompt;https://github.com/… 查看 GitHub 仓库 → 📘 使用教程 →

为什么值得关注

覆盖内容纪律、视觉层级、字体、颜色、可访问性、交互反馈、系统化组件与交付。从需求澄清、视觉方向和线框,到原型、设计系统提取、可访问性检查与最终润色。claude/ 和 codex/ 各自保存 system-prompt.md 与 14 个同名流程。Claude 路线把提示放入支持 system prompt 的宿主并按任务加载流程;Codex 路线通过 AGENTS.md 进入,评审按单一循环顺序执行。最终设计仍由宿主模型与它可用的 HTML、CSS、SVG、JavaScript 工具产出。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md

核心功能

20 章设计约束

覆盖内容纪律、视觉层级、字体、颜色、可访问性、交互反馈、系统化组件与交付。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md…
14 个可串联流程

从需求澄清、视觉方向和线框,到原型、设计系统提取、可访问性检查与最终润色。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md
Claude 与 Codex 双版本

Claude 版本允许委派评审,Codex 版本把检查改为顺序执行,并带 AGENTS.md 入口。

来源:github.com/Trystan-SA/claude-design-system-prompt/tree/main/claude;ht…
纯文本、无运行时

仓库没有需要部署的服务或包;核心材料是 Markdown 提示和步骤文档。

来源:github.com/Trystan-SA/claude-design-system-prompt

技术架构

claude/ 和 codex/ 各自保存 system-prompt.md 与 14 个同名流程。Claude 路线把提示放入支持 system prompt 的宿主并按任务加载流程;Codex 路线通过 AGENTS.md 进入,评审按单一循环顺序执行。最终设计仍由宿主模型与它可用的 HTML、CSS、SVG、JavaScript 工具产出。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md

项目知识图谱

知识图谱:项目核心节点(中心)+ 核心功能(内环六边形)+ 关键技术依赖(外环 chip) 支持系统提示或项目指令的 LLM 宿主支持系统提示或项… 能读写目标项目的工作环境能读写目标项目的… 人工设计评审 20 章设计约束 14 个可串联流程 Claude 与 Codex 双版本Claude 与 Codex 双… 纯文本、无运行时 claude-design-system… 项目本体 核心功能 关键依赖

技术栈

语言Markdown 提示词;输出侧使用 HTML、CSS、SVG 与 JavaScript框架20 章 system prompt + 14 个阶段化设计流程
支持系统提示或项目指令的 LLM 宿主能读写目标项目的工作环境人工设计评审
无服务端、无构建步骤、无 API key 分发;按所用宿主自行放置提示文件
来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md…

快速上手

先选 claude/ 或 codex/,不要把两个版本混在同一上下文。用一个无生产数据的小页面做试验:加载对应 system-prompt.md,按 `discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass` 运行一轮,随后人工检查语义 HTML、键盘操作、焦点、对比度、窄屏和文案。
来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md

使用场景

适合给通用编码代理增加网页视觉方向、原型、设计 token 提取和审查清单。它更像可编辑的工作规范,适合团队按品牌和组件库裁剪;需要多人画布、版本管理、组织级设计系统和成品导出时,应使用完整设计产品。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md…

优势与局限

优势

  • 纯文本,容易审阅和修改
  • Claude 与 Codex 有独立版本
  • 从探索到评审的步骤齐全
  • 显式覆盖可访问性和常见模板化视觉问题

局限

  • 作者称内容来自逆向整理,不能当作 Anthropic 官方提示
  • 没有模型输出质量保证或自动可访问性认证
  • 默认假设 HTML 输出环境,迁移到 Figma 或聊天式顾问要改工具引用
  • 模型和宿主变化会改变遵循效果
  • 本轮没有加载提示生成或人工评审设计
来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md…

最新版本

GitHub Releases 页面截至 2026-09-23 没有正式 Release 或版本标签。主分支最近核对到的提交为 3c3ddb0,提交时间 2026-07-06,内容是压缩 Claude 与 Codex 两套共 28 个技能文件,以降低上下文占用。

来源:github.com/Trystan-SA/claude-design-system-prompt/releases;https://gi…

实测与证据

status: official_repo_docs_checked_not_run  |  checked_at: 2026-09-23  |  environment: 核对项目 README、claude/codex 目录、system-prompt.md、GitHub Releases 与主分支最新提交  |  limitations: 未把提示加载到 Claude、Codex 或其他模型,未生成原型,未验证可访问性、视觉质量、token 消耗或跨模型一致性  |  observed_output: 仓库包含两套各 14 个流程和 20 章提示;GitHub Releases 页面显示没有正式 Release;2026-07-06 的提交压缩了 28 个流程文件

来源:github.com/Trystan-SA/claude-design-system-prompt;https://github.com/…

同类项目对比

Anthropic 官方 Claude Design 是带画布、行内评论、设计系统导入、分享与 HTML/PDF/PPTX 导出的完整产品,目前为付费计划 beta。这个开源仓库只提供可复制、可修改的提示与流程,没有官方画布、账户协作、版本管理或导出服务。想在任意模型里审阅规则可用该仓库;需要官方设计工作区和团队功能则看 Claude Design。

来源:support.claude.com/en/articles/14604416-get-started-with-claude-desig…

总结评价

它适合把设计原则和复核步骤带进已有代理工作流,但不要把“逆向提示”当作官方实现。先在一个小页面上比较加载前后差异,并记录可访问性、响应式和品牌一致性问题;只有团队评审通过后再固化为项目指令。

来源:github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md

常见问题

Claude Design System Prompt 是 Anthropic 官方项目吗?

不是。它由第三方维护,README 明确称内容是对 Claude Design 的逆向整理;使用时应把它当作可审阅的社区提示库。

这个仓库需要安装 Node.js 或 Python 吗?

仓库核心是 Markdown 提示和流程,没有服务端或包管理安装步骤。真正需要哪些运行环境,取决于承载提示的模型和工具。

Claude 版和 Codex 版应该一起加载吗?

不建议。README 将两者作为独立变体维护;选择与宿主匹配的一套,避免重复规则和相互冲突的执行方式。

它能保证产出符合 WCAG 吗?

不能。仓库提供可访问性审查步骤,但模型生成结果仍需用键盘、读屏器、对比度工具和真实用户流程复核。

资料与核验范围
本文依据项目公开资料整理。版本、安装命令和功能边界可能随上游更新,请以所列来源和项目当前版本为准。 资料核对时间: 2026-09-23 13:55.

参考材料:README、GitHub API、依赖文件