Power Design Slides 是 Design Skills 集合中的 Claude Code 技能,用于生成演示幻灯片。它把品牌 DNA(可从 URL 提取,或使用 72+ 预置品牌系统,如 Stripe、Apple、Linear、Spotify、Tesla 等)与 20 条设计原则结合,输出自包含的 HTML 演示文件。
主要能力:从任意 URL 提取品牌身份(颜色、字体、语气);对每张幻灯片应用 20 条基于研究的设计规则;生成自包含 HTML 演示文件;内置 72+ 预置品牌系统;强制 WCAG 对比度、模块化比例、数据墨水比和 F 型布局。
安装:git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design,或进入 ~/.claude/skills 后执行 git clone https://github.com/ItsssssJack/power-design power-design。验证:ls ~/.claude/skills/power-design/SKILL.md。
使用方式:在 Claude 中用自然语言调用,例如“use power-design — make me a deck for stripe.com about our new product launch”。使用 URL 提取品牌需设置 FIRECRAWL_API_KEY。未指定品牌时回退到中性高对比设计系统。生成后可用自然语言继续修改,如调整标题、添加图表、增加留白、更换强调色等。
20 条设计规则涵盖:每页一个观点、3 秒内可扫读(≤50 词)、3–5 个视觉块、≥40% 留白、5% 边缘安全区、1.25–1.618 模块化比例、每页最多 4 种字号、正文 ≥24px 标题 ≥48px、行高 1.4–1.6、行长 ≤60 字符、WCAG 对比度 ≥4.5:1、60-30-10 配色、每页一个强调色、不只靠色相编码、8pt 网格、单一网格对齐、邻近间距、数据墨水比 ≥80%、F 型布局、统一模式(极简/丰富)。
适用场景:产品发布、数据可视化、多章节长演示、深色模式演示等。限制:需 Claude Code 环境;URL 品牌提取依赖 Firecrawl API;自定义字体需提供 Web 安全回退;资料未提供收费与价格信息。