Claude Design Principles

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 把第一层固化下来。

安装

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 个方案 — 规范版 / 进阶版 /