# claude-design-principles

> **从 Claude Design 的系统 prompt 中提炼的设计判断力，打包为 Claude Code skill。**

这是一个提炼自 Anthropic Claude Design 产品 system prompt 的设计原则 skill。把 Claude Design 产品里关于"设计判断力"的部分压缩成一个 Claude Code 可用的 skill，在做任何 HTML / UI / 幻灯片 / 原型 / 海报 任务前自动加载。

## 为什么需要它

Claude Design 产品有两层能力：

1. **Prompt 层** — 设计哲学、反模式清单、多方案思维、10+ 提问习惯
2. **运行时层** — 实时预览 iframe、verifier 子代理、starter components、Tweaks postMessage 主机

第二层绑定 Claude Design 自己的宿主环境，无法迁移到 Claude Code。但**第一层完全可以**——它就是纯粹的认知资产。这个 skill 把第一层固化下来。

## 安装

```bash
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` | React@18.3.1/Babel@7.29.0 版本锁定 + styles 命名规则 + 跨文件共享组件方案 |

## 核心原则摘要

### 三条硬规则

1. **设计前必须先采集语境** — 不允许从零 mock。没有 UI kit / 品牌资产 / 参考就必须先问。
2. **一次至少给 3 个方案** — 规范版 / 进阶版 / 前卫版 渐进式。
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](https://github.com/elder-plinius) 的 [CL4R1T4S](https://github.com/elder-plinius/CL4R1T4S) 仓库维护）：
  https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt
- 提炼、本地化、工程化适配：[Jane-xiaoer](https://github.com/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](https://x.com/xiaoerzhan)
- 微信公众号 / WeChat Official Account: 扫码关注 / Scan to follow

<p align="center">
  <img src="./follow-wechat-qrcode.jpg" alt="Jane WeChat Official Account QR code" width="300" />
</p>

<p align="center"><strong>中文：</strong>欢迎关注我的公众号，一起研究 AI Skill、设计原则、网站表达和创意工作流。</p>

<p align="center"><strong>English:</strong> Follow my WeChat Official Account for more AI skills, design principles, web aesthetics, and creative workflows.</p>