---

name: claude-design-principles description: Distilled design judgment from Claude Design's system prompt. Use BEFORE any HTML/UI/slide/prototype/poster/deck task to gather context, avoid AI slop, and produce multiple grounded variations instead of a single guessed "perfect" version. Triggers on design, UI, prototype, slide deck, poster, landing page, wireframe, mockup work. version: 1.1.0 author: Jane-xiaoer source: Distilled from the Claude Design system prompt as publicly archived in elder-plinius/CL4R1T4S (https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt). All rights to the original prompt belong to Anthropic. This skill is a learning/interpretation layer, not a redistribution.

Claude Design Principles

核心认知：优秀的设计不是从零猜出来的，是从现有语境里"长"出来的。这个 skill 把 Claude Design 的判断力压缩成可执行 checklist。

---

🚦 何时触发（必读）

只要任务属于以下任一类，必须先加载本 skill 的三条硬规则（见下），再动手：

• 网页、落地页、组件库
• 幻灯片、演示稿、汇报文档
• App / 网页原型、交互 demo
• 海报、视觉稿、信息图
• 品牌物料、卡片、徽标
• 任何要"看起来不像 AI 生成"的 HTML/SVG 输出

触发词（中英）：设计、design、UI、mockup、prototype、原型、slide、deck、poster、landing、wireframe、mock、界面、页面、演示、演示稿

---

⛔ 三条硬规则（违反就算失败）

规则 1：设计前必须先采集语境

不存在"我脑子里有个好主意就开干"。动手前必须至少拿到一项：

• 现有 UI kit / design system 文件
• 品牌 tokens（色板、字体栈、间距、圆角规范）
• 参考站点/产品的截图
• 现有代码库里的组件
• 明确的品牌描述文档（如 Equation 品牌手册）

没有以上任何一项 → 必须先问 Jane 要，或一起确定"视觉 DNA 锚点"（比如"像 Aesop 那种米白 + 衬线字 + 留白"）。

从零 mock 是 last resort，一旦发生会产出通用 AI slop。

规则 2：一次至少给 3 个方案，基础 → 前卫渐进

不允许只给一个方案。每次输出至少：

• 方案 A（规范版） — 严格遵循已有 design system，零冒险
• 方案 B（进阶版） — 在 system 基础上加一点变化（配色、版式、排版节奏）
• 方案 C（前卫版） — 允许跳出 system，尝试新隐喻、novel layout、大胆 typography

把这些作为不同幻灯片 / tabs / 并排 cards 展现，让 Jane mix and match。

规则 3：AI Slop 清单全部拉黑

这些模式一看就是 AI 生成，禁止使用（完整清单见 ai-slop-avoid.md）：

• ❌ 大面积渐变背景（紫蓝、粉橙等）
• ❌ 圆角容器 + 左边 4px 色块 accent
• ❌ 用 SVG 自己画插画
• ❌ Inter / Roboto / Arial / Fraunces / 系统字体
• ❌ 堆砌 emoji（除非品牌明确用）
• ❌ 为填充而填充的数据、icon、stat
• ❌ 虚构的"用户评价"、placeholder 肖像
• ❌ 每个 section 都加"信任标记" / "客户 logo"

---

📐 执行流程（7 步）

1. 读需求     → 识别是否触发本 skill
2. 采集语境   → 要 UI kit / 品牌资产 / 参考；没有就问 Jane
3. 提问清单   → 按 question-templates.md 至少问 10 个
4. 定视觉系统 → 口头/书面说清"我将采用 X 字体 + Y 色板 + Z 版式节奏"
5. 构建多方案 → 至少 3 个变体，exposed as tabs/tweaks/slides
6. 自检       → 过一遍 ai-slop-avoid.md 清单
7. 交付       → 打开文件给 Jane 看 + open -R 弹 Finder

---

🎛️ Tweaks 实时调参模式（可选但推荐）

在 HTML 输出里留一个 JSON 配置块，标记如下：

<script>
const TWEAKS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#D97757",
  "fontSize": 16,
  "radius": 8,
  "dark": false
}/*EDITMODE-END*/;
</script>

作用：后续要改色/改字号时，我可以精确替换这段 JSON，不用搜遍整份 HTML。Jane 也能自己手改再刷新预览。完整模板见 starter-components/tweaks-block.html。

---

📊 硬性尺度（不讨论）

载体	最小字号	最小 hit target
1920×1080 幻灯片	24px	—
打印文档	12pt	—
手机端 mockup	14px	44px
桌面网页正文	16px	—

---

🔧 PAI 侧配套 skill（补运行时）

本 skill 只解决"设计判断力"。实际动手时组合：

需求	用什么
视觉方向参考（50 styles / 21 palettes）	ui-ux-pro-max
前端结构 / 组件代码质量	frontend-design:frontend-design
启动 dev server + 浏览器验证	webapp-testing / Browser MCP
HTML → PPTX	pptx / nano-ppt-generator
插画 / 图标 placeholder 真做	nano-image-generator-skill / Art
幻灯片 HTML 结构	ppt / html-ppt-designer

---

📎 附件（v1.1.0 扩充）

📚 规则文档（需要时按场景加载）

文件	什么时候读
ai-slop-avoid.md	每次设计前过一遍 — 25 条反模式 + 替代方案
question-templates.md	任务刚开始、需要列问题给 Jane 时
typography-system.md	决定字号/字重/行高/字体组合时
color-system.md	配色、检查 WCAG 对比度、调 oklch 时
spacing-rhythm.md	决定间距/圆角/阴影/对齐时
design-heuristics.md	排版出 bug、不知道"为什么感觉不对"时 — Gestalt/Fitts/Hick 对照

🧩 Starter Components（一键复制脚手架）

文件	用途
starter-components/deck-stage.html	幻灯片舞台（1920×1080 + 键盘导航 + 自适应缩放）
starter-components/design-canvas.html	多方案并排画布（规范版/进阶版/前卫版）
starter-components/tweaks-block.html	Tweaks 实时调参样板 + postMessage 协议
starter-components/ios-frame.html	iPhone 16 Pro 设备边框 + 状态栏 + Home Indicator
starter-components/browser-window.html	浏览器窗口（Safari/macOS 风格 + 标签栏）
starter-components/animations.html	时间轴动画引擎（Stage + Sprite + 50 行核心）

---

🧭 决策树：接到任务后先读哪个？

接到设计任务
    ↓
 必读：SKILL.md（本文件）三条硬规则
    ↓
 ┌─────────────────────────────────┐
 │  任务类型 → 读对应子文件         │
 ├─────────────────────────────────┤
 │ 动手写代码前  → ai-slop-avoid     │
 │ 要问 Jane    → question-templates │
 │ 定字体       → typography-system  │
 │ 配色          → color-system       │
 │ 定间距/圆角   → spacing-rhythm     │
 │ 做 PC 网页    → 配 browser-window  │
 │ 做 App/手机   → 配 ios-frame       │
 │ 做 PPT/Deck   → 配 deck-stage      │
 │ 多方案展示    → 配 design-canvas   │
 │ 要交互动效    → 配 animations      │
 │ 要实时调参    → 配 tweaks-block    │
 │ 感觉不对说不出哪 → design-heuristics│
 └─────────────────────────────────┘

---

💬 给未来自己的话

设计失败的 90% 来源不是审美不够，是没问清楚 + 语境不够 + 只给一个方案。 把这份 skill 当 checklist，每一步都过。 不要把"快速产出"和"好设计"混为一谈。