Distilled design judgment from Claude Design system prompt, packaged as a Claude Code skill.
概览
这是一个提炼自 Anthropic Claude Design 产品 system prompt 的设计原则 skill。把 Claude Design 产品里关于"设计判断力"的部分压缩成一个 Claude Code 可用的 skill，在做任何 HTML / UI / 幻灯片 / 原型 / 海报 任务前自动加载。 1. — 设计哲学、反模式清单、多方案思维、10+ 提问习惯 2. — 实时预览 iframe、verifier 子代理、starter components、Tweaks postMessage 主机 第二层绑定 Claude Design 自己的宿主环境，无法迁移到 Claude Code。但**——它就是纯粹的认知资产。这个 skill 把第一层固化下来。 直接让 Claude Code 做设计相关的任务即可。skill 的 description 字段里包含触发词（design、UI、mockup、prototype、slide、deck、poster、landing、wireframe 等），Claude 会自动加载原则后再动手。 1. — 不允许从零 mock。没有 UI kit / 品牌资产 / 参考就必须先问。 2. — 规范版 / 进阶版 / 前卫版 渐进式。 3. — 渐变、圆角左色块、SVG 画配图、Inter/Roboto 等全禁。 - - 本 Skill **对原 prompt 的重新发布，而是基于其**所做的** - 公开存档地址（由 elder-plinius 的 CL4R1T4S 仓库维护）： https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt - 提炼、本地化、工程化适配：Jane-xiaoer 如 Anthropic 对本项目的引用方式有任何异议，请开 issue，我会立即调整。 如果这个仓库对你有帮助，欢迎关注我。后面我会持续更新更多 AI Skill、设计方法、网站美学和创意工作流。
README
claude-design-principles
从 Claude Design 的系统 prompt 中提炼的设计判断力，打包为 Claude Code skill。
这是一个提炼自 Anthropic Claude Design 产品 system prompt 的设计原则 skill。把 Claude Design 产品里关于"设计判断力"的部分压缩成一个 Claude Code 可用的 skill，在做任何 HTML / UI / 幻灯片 / 原型 / 海报 任务前自动加载。
为什么需要它
Claude Design 产品有两层能力：
- Prompt 层 — 设计哲学、反模式清单、多方案思维、10+ 提问习惯
- 运行时层 — 实时预览 iframe、verifier 子代理、starter components、Tweaks postMessage 主机
第二层绑定 Claude Design 自己的宿主环境，无法迁移到 Claude Code。但第一层完全可以——它就是纯粹的认知资产。这个 skill 把第一层固化下来。
安装
git clone https://github.com/Jane-xiaoer/claude-design-principles.git ~/.claude/skills/claude-design-principles
Claude Code 下次启动会自动识别这个 skill。
使用
直接让 Claude Code 做设计相关的任务即可。skill 的 description 字段里包含触发词（design、UI、mockup、prototype、slide、deck、poster、landing、wireframe 等），Claude 会自动加载原则后再动手。
你也可以显式触发：
使用 claude-design-principles，帮我做一个落地页
内容
| 文件 | 作用 |
|---|---|
SKILL.md |
主入口，3 条硬规则 + 7 步流程 + 工作流节奏细则 + 硬性字号尺度 |
ai-slop-avoid.md |
26 条 AI slop 反模式清单 + 替代方案 + 内容密度正面原则 |
question-templates.md |
10+ 提问模板，按任务类型分组（落地页/幻灯片/App/海报/信息图/品牌物料） |
starter-components/deck-stage.html |
幻灯片舞台脚手架，1920×1080 固定画布 + 自适应缩放 + 键盘导航 + data-screen-label 合规 |
starter-components/design-canvas.html |
多方案并排画布模板（规范版/进阶版/前卫版） |
starter-components/tweaks-block.html |
实时 Tweaks 调参样板，完整 postMessage 协议（先注册监听再 announce） |
starter-components/ios-frame.html |
iPhone 16 Pro 设备边框 + 状态栏 + Home Indicator |
starter-components/browser-window.html |
浏览器窗口（Safari/macOS 风格 + 标签栏） |
starter-components/animations.html |
时间轴动画引擎（Stage + Sprite + 50 行核心） |
starter-components/android-frame.html |
Android 14 设备框，Material You 风格，动态主题色留口 |
starter-components/macos-window.html |
macOS 风格窗口 chrome，sidebar + main 两栏，Sonoma 配色 |
starter-components/react-babel-pins.md |
[email protected]/[email protected] 版本锁定 + styles 命名规则 + 跨文件共享组件方案 |
核心原则摘要
三条硬规则
- 设计前必须先采集语境 — 不允许从零 mock。没有 UI kit / 品牌资产 / 参考就必须先问。
- 一次至少给 3 个方案 — 规范版 / 进阶版 / 前卫版 渐进式。
- AI Slop 清单全部拉黑 — 渐变、圆角左色块、SVG 画配图、Inter/Roboto 等全禁。
硬性尺度
| 载体 | 最小字号 | 最小 hit target |
|---|---|---|
| 1920×1080 幻灯片 | 24px | — |
| 打印文档 | 12pt | — |
| 手机端 mockup | 14px | 44px |
| 桌面网页正文 | 16px | — |
来源与版权声明
- 原始 Claude Design 系统 prompt 版权归 Anthropic PBC 所有
- 本 Skill 不是对原 prompt 的重新发布，而是基于其设计原则与判断框架所做的学习和提炼
- 公开存档地址（由 elder-plinius 的 CL4R1T4S 仓库维护）： https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt
- 提炼、本地化、工程化适配：Jane-xiaoer
如 Anthropic 对本项目的引用方式有任何异议，请开 issue，我会立即调整。
License
MIT
📱 关注作者 / Follow Me
如果这个仓库对你有帮助，欢迎关注我。后面我会持续更新更多 AI Skill、设计方法、网站美学和创意工作流。
If this repo helped you, follow me for more AI skills, design systems, web aesthetics, and creative workflows.
- X (Twitter): @xiaoerzhan
- 微信公众号 / WeChat Official Account: 扫码关注 / Scan to follow
中文：欢迎关注我的公众号，一起研究 AI Skill、设计原则、网站表达和创意工作流。
English: Follow my WeChat Official Account for more AI skills, design principles, web aesthetics, and creative workflows.
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add jane-xiaoer/claude-design-principles