ItsssssJack/power-design · 上手攻略
- 仓库：ItsssssJack/power-design
- 链接：https://github.com/ItsssssJack/power-design
- 分类：design · AI-tool
- 作者：Tom
- 更新：2026-08-13
它是什么
Power Design 是一个 Claude Code Skill，通过品牌 DNA（Brand DNA）搭配编码化设计原则（20 条幻灯片规则 + 20 条网页规则）生成两类输出：演讲 deck 和响应式网站。它的核心主张是"每个输出既符合品牌调性，又满足客观设计标准"，不是生成"带紫色渐变的六条项目符号封面"。
两套规则书分别来自：Tufte、Duarte、Reynolds、Williams、Refactoring UI、Müller-Brockmann、Mayer、NN/g、WCAG 2.2（幻灯片）；Marcotte、Krug、Utopia、Baymard、Core Web Vitals、OKLCH（网页）。
⚠️ 注意：Power Design 产出 slides.html / site.html，不是 PPTX 原生文件。如需可编辑 PPTX，另选 ppt-master / A1 he3 ppt-master 等 Skill。
解决什么问题
AI 生成 PPT/Web 的典型失败模式：千篇一律的紫色渐变背景、六条项目符号堆在 hero 上、颜色对比度不达标、网页在手机上没法看。根本原因是"生成器不知道什么是对的，只知道什么能跑"。
Power Design 用编码化的数值阈值替代模糊审美：字重行高精确到 px、色对比精确到 :1 比率、留白精确到 %。生成器照着规则清单干活，不靠随机发挥。
快速安装
git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
装好后 Claude Code 里直接用：
use power-design — make me a deck for stripe.com about our new product launch
use power-design — build me a landing page in linear.com's style for my new app
⚠️ 依赖：Firecrawl 用于从 URL 提取品牌 DNA（需要 Firecrawl API key）。72+ 预置品牌库（Stripe / Apple / Linear / Vercel / Notion / Tesla / Airbnb 等）无需 API key。
核心用法
工作流
用户 prompt
↓
deck 或 website？ → 路由规则书
↓
品牌 DNA → Firecrawl 从 URL 提取 OR 从品牌库选择 OR 跳过用默认
↓
brief（deck：标题 + 3-5 要点；site：类型、目标、版块）
↓
品牌 DNA × 规则 → HTML 输出
↓
slides.html / site.html（浏览器打开，自然对话迭代）
幻灯片 20 条规则（精选）
| # | 规则 | 来源 | 阈值 |
|---|---|---|---|
| 2 | 3 秒内可扫视 | Duarte / NN/g | ≤3s |
| 3 | 视觉块 3-5 个（ Miller 1956） | Cowan 2001 | ≤7±2 |
| 4 | 留白 ≥40% | Refactoring UI / Reynolds | ≥40% |
| 8 | 正文 ≥24px，标题 ≥48px | Reynolds / Duarte | px |
| 10 | 行长 ≤60 字符 | Bringhurst | ≤60 |
| 11 | WCAG 对比 ≥4.5:1 | WCAG 2.2 | ≥4.5:1 |
| 13 | 每页一个强调色 | Tufte | — |
| 18 | 数据墨水比 ≥80% | Tufte 1983 | ≥80% |
网页 20 条规则（精选）
| # | 规则 | 来源 | 阈值 |
|---|---|---|---|
| 1 | 移动优先，流式至上限 | Marcotte / Frost | 360px–1440px |
| 3 | 流式字/间距 via clamp() |
Utopia | 1.25–1.618 scale |
| 11 | WCAG 2.2 AA 最低线 | WCAG 2.2 | ≥3:1 |
| 16 | CLS < 0.1 | Core Web Vitals | <0.1 |
| 17 | 性能预算（LCP/INP/CLS） | Google 2024 | 三项全设 |
品牌库（部分）
| 分类 | 品牌 |
|---|---|
| Tech / AI | Anthropic / Claude · OpenAI · DeepSeek · Linear · Vercel · Stripe · Cursor · GitHub · Figma · Webflow · Framer · Notion · Raycast · Replicate · Runway · Supabase · Sentry |
| Finance | Stripe · Mastercard · Coinbase · Binance · Kraken · Revolut · Wise |
| Auto / Lifestyle | Tesla · BMW · BMW M · Bugatti · Ferrari · Lamborghini · Nike · Airbnb |
| Media | The Verge · Wired · Spotify · YouTube · Sony · PlayStation |
典型适用场景
- 快速原型：给客户/投资人出 Deck 时，直接用目标品牌风格，无需手动调设计
- 设计一致性审查：让 AI 按规则生成，对照阈值检查是否达标
- 品牌适配验证：从竞品官网提取品牌 DNA，快速生成对比演示
- 网页 LP 快速验证：用 Linear / Stripe / Vercel 等品牌风格生成 landing page，验证布局和转化逻辑
坑与注意
| 坑 | 说明 |
|---|---|
| Firecrawl API key | 从 URL 提取品牌 DNA 需要有效 key；使用预置品牌库无需 key |
| 输出是 HTML | slides.html / site.html 非 PPTX / Figma，需二次转换 |
| 规则是固定阈值 | 20 条幻灯片规则 + 20 条网页规则，不支持自定义规则扩展（见 power-design-web） |
| 风格覆盖有限 | 预置 72+ 品牌，边缘品牌需手动 brands/_template.md 添加 |
| 规则书固定 | 不支持关闭特定规则或调整权重；变体需 fork 后改 principles/design-principles.md |
⚠️ 风险边界：规则阈值来自设计研究（1983–2024），但具体数值选择有主观成分（Tufte 1 个强调色 vs Reynolds 的多种模式）。不适用于品牌规范要求严格的正式发布场景。
与同类对比
| 维度 | 普通 PPT Skill | Power Design |
|---|---|---|
| 品牌一致性 | 随机配色/字体 | 品牌 DNA 提取或预置库 |
| 设计标准 | 靠模板质量 | 编码化 20 条阈值（可枚举检查） |
| 输出 | HTML / PPTX | HTML |
| 规则可解释性 | 黑箱 | 显式引用 Tufte / WCAG / NN/g |
| 预置品牌库 | 无 | 72+ 含 Stripe / Apple / Linear 等 |
类似 Skill：humanize-ppt（管演讲逻辑线，不管设计规则）、ppt-master（出原生 PPTX）。Power Design 专注"设计标准自动化"，不处理演讲结构编排。
一句话推荐结论
如果你的 AI 生成的 deck 总是一股"AI 味"（渐变背景 + 项目符号墙），Power Design 的 20 条设计规则 + 品牌 DNA 是目前最结构化的解法。但它输出 HTML 不是 PPTX——需要原生文件时另选 ppt-master。
原始仓库：https://github.com/ItsssssJack/power-design