power-design-slides

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Power Design Slides

Power Design 幻灯片生成工具

Skill by ara.so — Design Skills collection

Power Design is a Claude Code skill that generates presentation slides combining brand DNA (extracted from URLs or 72+ pre-built brand systems) with 20 codified design principles from Tufte, Reynolds, Duarte, Williams, Refactoring UI, and WCAG 2.2. Output is beautiful HTML decks that don't look AI-generated.

由ara.so开发的Skill — 设计技能合集

Power Design是一款Claude Code技能，它将品牌DNA（从URL提取或来自72+预构建品牌系统）与源自Tufte、Reynolds、Duarte、Williams、《Refactoring UI》以及WCAG 2.2的20条标准化设计原则相结合，生成演示文稿幻灯片。输出的HTML演示文稿美观自然，完全看不出AI生成的痕迹。

What It Does

功能介绍

Extracts brand identity (colors, typography, voice) from any URL via Firecrawl
Applies 20 research-backed design rules to every slide
Generates self-contained HTML presentation files
Includes 72+ pre-built brand systems (Stripe, Apple, Linear, Spotify, Tesla, etc.)
Enforces WCAG contrast ratios, modular scales, data-ink ratios, and F-pattern layouts

通过Firecrawl从任意URL提取品牌标识（色彩、排版、语气风格）
为每张幻灯片应用20条经研究验证的设计规则
生成独立可运行的HTML演示文稿文件
内置72+预构建品牌系统（Stripe、Apple、Linear、Spotify、Tesla等）
强制遵循WCAG对比度比例、模块化排版尺度、数据墨水比和F型布局

Installation

安装步骤

bash

undefined

bash

undefined

Clone into Claude skills directory

克隆到Claude技能目录

git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design

Or manually:

或手动安装：

cd ~/.claude/skills git clone https://github.com/ItsssssJack/power-design power-design


Verify installation:
```bash
ls ~/.claude/skills/power-design/SKILL.md

cd ~/.claude/skills git clone https://github.com/ItsssssJack/power-design power-design


验证安装：
```bash
ls ~/.claude/skills/power-design/SKILL.md

Project Structure

项目结构

power-design/
├── SKILL.md                          # Skill runbook (this file)
├── principles/
│   ├── design-principles.md          # All 20 rules with citations
│   └── images/                       # Rule illustrations
├── brands/
│   ├── _template.md                  # Template for new brands
│   ├── anthropic-claude.md           # Pre-built brand system
│   ├── stripe.md
│   └── ... (72+ brands)
└── examples/
    └── sample-deck.html              # Reference output

power-design/
├── SKILL.md                          # 技能运行手册（即本文档）
├── principles/
│   ├── design-principles.md          # 包含引用来源的20条设计规则
│   └── images/                       # 规则示意图
├── brands/
│   ├── _template.md                  # 新增品牌系统模板
│   ├── anthropic-claude.md           # 预构建品牌系统
│   ├── stripe.md
│   └── ... (72+ 品牌)
└── examples/
    └── sample-deck.html              # 参考输出示例

Basic Usage

基础用法

1. Generate a Deck with Pre-Built Brand

1. 使用预构建品牌生成演示文稿

> use power-design — make me a deck for stripe.com about our new product launch

The skill will:

Load Stripe's brand DNA from
```
brands/stripe.md
```
Ask for content brief (headline + 3-5 key points)
Generate
```
slides.html
```
applying brand × 20 rules
Open in browser

> use power-design — 为stripe.com生成新产品发布的演示文稿

该技能会：

从
```
brands/stripe.md
```
加载Stripe的品牌DNA
请求内容摘要（标题 + 3-5个关键点）
应用品牌规范×20条设计规则，生成
```
slides.html
```
在浏览器中打开文件

2. Extract Brand from URL

2. 从URL提取品牌信息

> use power-design — create slides using the brand from example.com

Requires Firecrawl API key:

bash

export FIRECRAWL_API_KEY=your_key_here

The skill extracts:

Primary/secondary/accent colors
Typography (font families, weights, sizes)
Voice/tone
Component patterns
Layout principles

> use power-design — 使用example.com的品牌风格创建幻灯片

需要Firecrawl API密钥：

bash

export FIRECRAWL_API_KEY=your_key_here

该技能会提取：

主色/辅助色/强调色
排版（字体族、字重、字号）
语气风格
组件样式
布局原则

3. Use Default Design System

3. 使用默认设计系统

> use power-design — make a deck about AI safety (no brand)

Falls back to a neutral, high-contrast design system.

> use power-design — 生成关于AI安全的演示文稿（不指定品牌）

将回退到中性、高对比度的设计系统。

The 20 Design Rules

20条设计规则

Every slide passes these checks:

#	Rule	Threshold
1	One idea per slide	1 main message
2	Glanceable in ≤3 seconds	≤50 words
3	3–5 visual chunks	Max 7
4	≥40% whitespace ratio	Measured
5	5% edge safe-zone	All sides
6	Modular scale 1.25–1.618	Type sizes
7	Max 4 type sizes per slide	Counted
8	Body ≥24px, title ≥48px	Enforced
9	Line-height 1.4–1.6 body	CSS
10	Line length ≤60 chars	Measured
11	WCAG contrast ≥4.5:1	7:1 aim
12	60-30-10 color split	Measured
13	One accent per slide	Max 1
14	Never hue-only encoding	Patterns/icons
15	8pt grid spacing	All margins
16	Single grid alignment	Consistent
17	Proximity ≤16px related	≥48px unrelated
18	Data-ink ratio ≥80%	Charts only
19	F-pattern layout	Headline top-left
20	Pick one mode (minimal/rich)	Consistent

Full documentation with sources:

principles/design-principles.md

每张幻灯片都需通过以下检查：

序号	规则	阈值
1	每张幻灯片仅承载一个核心观点	1个主要信息
2	3秒内可快速浏览	≤50个单词
3	3–5个视觉区块	最多7个
4	留白占比≥40%	精确测量
5	5%边缘安全区	四边均需满足
6	1.25–1.618的模块化排版尺度	字号遵循该比例
7	每张幻灯片最多使用4种字号	严格计数
8	正文字号≥24px，标题字号≥48px	强制执行
9	正文行高1.4–1.6	通过CSS设置
10	每行长度≤60字符	精确测量
11	WCAG对比度≥4.5:1	目标达到7:1
12	60-30-10色彩分配比例	精确测量
13	每张幻灯片仅使用一种强调色	最多1种
14	不单独使用色相区分信息	搭配图案/图标
15	8pt网格间距规范	所有边距遵循
16	单一网格对齐系统	保持一致性
17	关联元素间距≤16px，非关联元素≥48px	严格区分
18	图表数据墨水比≥80%	仅针对图表
19	F型阅读布局	标题置于左上角
20	统一风格模式（极简/丰富）	保持一致性

包含来源的完整文档：

principles/design-principles.md

Code Examples

代码示例

Create a Custom Brand System

创建自定义品牌系统

Create

brands/my-company.md

markdown

undefined

创建

brands/my-company.md

：

markdown

undefined

My Company Brand System

我司品牌系统

Source URL: https://mycompany.com
Last updated: 2025-01-15

来源URL: https://mycompany.com
最后更新: 2025-01-15

Colors

色彩

Primary

主色

Brand Blue:
```
#0066FF
```
(rgb(0, 102, 255))
Dark Navy:
```
#001133
```
(rgb(0, 17, 51))

品牌蓝:
```
#0066FF
```
(rgb(0, 102, 255))
深海军蓝:
```
#001133
```
(rgb(0, 17, 51))

Secondary

辅助色

Warm Gray:
```
#F5F5F0
```
(rgb(245, 245, 240))
Cool Gray:
```
#E8EBF0
```
(rgb(232, 235, 240))

暖灰:
```
#F5F5F0
```
(rgb(245, 245, 240))
冷灰:
```
#E8EBF0
```
(rgb(232, 235, 240))

Accent

强调色

Action Orange:
```
#FF6B35
```
(rgb(255, 107, 53))

行动橙:
```
#FF6B35
```
(rgb(255, 107, 53))

Semantic

语义色

Success:
```
#00CC66
```
Warning:
```
#FFAA00
```
Error:
```
#FF3333
```

成功:
```
#00CC66
```
警告:
```
#FFAA00
```
错误:
```
#FF3333
```

Typography

排版

Font Families

字体族

Sans: "Inter", system-ui, sans-serif
Mono: "JetBrains Mono", monospace

无衬线: "Inter", system-ui, sans-serif
等宽: "JetBrains Mono", monospace

Scale (1.25 ratio)

尺度（1.25比例）

Display: 64px / 700
H1: 48px / 700
H2: 36px / 600
Body: 24px / 400
Caption: 18px / 400

展示级: 64px / 700
H1: 48px / 700
H2: 36px / 600
正文: 24px / 400
说明文字: 18px / 400

Line Heights

行高

Display/Headings: 1.1
Body: 1.5

展示级/标题: 1.1
正文: 1.5

Voice & Tone

语气风格

Personality: Technical but approachable
Formality: Professional casual
Key phrases: "Ship fast", "Build trust", "Stay nimble"

个性: 专业且平易近人
正式程度: 专业休闲
关键词: "快速交付", "建立信任", "保持灵活"

Layout Principles

布局原则

8pt grid system
5% minimum edge margins
Max content width: 1200px
Card-based components with subtle shadows

undefined

8pt网格系统
最小5%边缘边距
最大内容宽度: 1200px
带轻微阴影的卡片式组件

undefined

Generate Slides Programmatically

程序化生成幻灯片

If you want to script deck generation:

python

undefined

如果需要通过脚本生成演示文稿：

python

undefined

deck_generator.py

import subprocess import os

def generate_deck(brand_name, content_brief, output_path="slides.html"): """ Generate a Power Design deck via Claude CLI """ prompt = f""" use power-design

Brand: {brand_name}

Content:
{content_brief}

Generate slides.html and save to {output_path}
"""

result = subprocess.run(
    ["claude", "code", "--prompt", prompt],
    capture_output=True,
    text=True
)

if os.path.exists(output_path):
    print(f"✓ Deck generated: {output_path}")
    return True
else:
    print(f"✗ Generation failed: {result.stderr}")
    return False

import subprocess import os

def generate_deck(brand_name, content_brief, output_path="slides.html"): """ 通过Claude CLI生成Power Design演示文稿 """ prompt = f""" use power-design

Brand: {brand_name}

Content:
{content_brief}

Generate slides.html and save to {output_path}
"""

result = subprocess.run(
    ["claude", "code", "--prompt", prompt],
    capture_output=True,
    text=True
)

if os.path.exists(output_path):
    print(f"✓ 演示文稿已生成: {output_path}")
    return True
else:
    print(f"✗ 生成失败: {result.stderr}")
    return False

Usage

使用示例

content = """ Headline: Introducing Data Pipeline v2 Points:

10x faster ingestion
Real-time validation
Zero-downtime migrations
Built-in observability """

generate_deck("stripe", content, "pipeline-v2-deck.html")

undefined

content = """ Headline: Introducing Data Pipeline v2 Points:

10倍更快的数据摄入
实时验证
零停机迁移
内置可观测性 """

generate_deck("stripe", content, "pipeline-v2-deck.html")

undefined

Extract Brand DNA via Firecrawl

通过Firecrawl提取品牌DNA

python

undefined

python

undefined

brand_extractor.py

import os import json from firecrawl import FirecrawlApp

def extract_brand_dna(url): """ Extract brand identity from website using Firecrawl """ api_key = os.environ.get("FIRECRAWL_API_KEY") if not api_key: raise ValueError("FIRECRAWL_API_KEY not set")

app = FirecrawlApp(api_key=api_key)

# Scrape with structured extraction
result = app.scrape_url(url, params={
    "formats": ["markdown", "html"],
    "extract": {
        "colors": "array of hex color codes used prominently",
        "typography": "font families and key sizes",
        "tone": "brand voice description"
    }
})

return {
    "url": url,
    "colors": result.get("extract", {}).get("colors", []),
    "typography": result.get("extract", {}).get("typography", ""),
    "tone": result.get("extract", {}).get("tone", ""),
    "raw_markdown": result.get("markdown", "")
}

import os import json from firecrawl import FirecrawlApp

def extract_brand_dna(url): """ 使用Firecrawl从网站提取品牌标识 """ api_key = os.environ.get("FIRECRAWL_API_KEY") if not api_key: raise ValueError("FIRECRAWL_API_KEY 未设置")

app = FirecrawlApp(api_key=api_key)

# 结构化提取内容
result = app.scrape_url(url, params={
    "formats": ["markdown", "html"],
    "extract": {
        "colors": "array of hex color codes used prominently",
        "typography": "font families and key sizes",
        "tone": "brand voice description"
    }
})

return {
    "url": url,
    "colors": result.get("extract", {}).get("colors", []),
    "typography": result.get("extract", {}).get("typography", ""),
    "tone": result.get("extract", {}).get("tone", ""),
    "raw_markdown": result.get("markdown", "")
}

Usage

使用示例

brand_data = extract_brand_dna("https://stripe.com") print(json.dumps(brand_data, indent=2))

undefined

brand_data = extract_brand_dna("https://stripe.com") print(json.dumps(brand_data, indent=2))

undefined

HTML Deck Structure

HTML演示文稿结构

Generated decks follow this pattern:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deck Title</title>
    <style>
        /* Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* Base (follows Rule 15: 8pt grid) */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 24px; /* Rule 8: body ≥24px */
            line-height: 1.5; /* Rule 9: 1.4-1.6 */
            background: #FFFFFF;
            color: #1A1A1A; /* Rule 11: 7:1 contrast */
        }
        
        /* Slide container */
        .slide {
            width: 100vw;
            height: 100vh;
            padding: 5%; /* Rule 5: 5% safe-zone */
            display: flex;
            flex-direction: column;
            justify-content: center;
            scroll-snap-align: start;
        }
        
        /* Typography (Rule 6: modular scale 1.25) */
        h1 {
            font-size: 64px; /* 24 × 1.25³ */
            font-weight: 700;
            line-height: 1.1; /* Rule 9: display 1.05-1.2 */
            margin-bottom: 48px; /* Rule 17: ≥48px unrelated */
        }
        
        h2 {
            font-size: 48px; /* Rule 8: title ≥48px */
            font-weight: 600;
            margin-bottom: 32px;
        }
        
        /* Max line length (Rule 10: ≤60 chars) */
        p, ul {
            max-width: 40em; /* ~60 chars at 24px */
            margin-bottom: 16px; /* Rule 17: ≤16px related */
        }
        
        /* Accent (Rule 13: one per slide) */
        .accent {
            color: #0066FF;
            font-weight: 600;
        }
        
        /* Navigation */
        .nav {
            position: fixed;
            bottom: 5%;
            right: 5%;
            font-size: 18px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <!-- Slide 1: Title (Rule 1: one idea) -->
    <section class="slide">
        <h1>Introducing<br><span class="accent">Data Pipeline v2</span></h1>
        <p style="font-size: 32px; opacity: 0.7;">Ship faster. Scale smarter.</p>
    </section>
    
    <!-- Slide 2: Key point (Rule 3: 3-5 chunks) -->
    <section class="slide">
        <h2>10× Faster Ingestion</h2>
        <ul style="font-size: 28px; line-height: 1.6;">
            <li>Parallel processing across 16 workers</li>
            <li>Smart batching with adaptive backpressure</li>
            <li>Zero data loss guarantees</li>
        </ul>
    </section>
    
    <!-- More slides... -->
    
    <div class="nav">Use ← → to navigate</div>
    
    <script>
        // Arrow key navigation
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
                currentSlide++;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            } else if (e.key === 'ArrowLeft' && currentSlide > 0) {
                currentSlide--;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            }
        });
    </script>
</body>
</html>

生成的演示文稿遵循以下结构：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deck Title</title>
    <style>
        /* Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* Base (遵循规则15: 8pt网格) */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 24px; /* 规则8: 正文≥24px */
            line-height: 1.5; /* 规则9: 1.4-1.6 */
            background: #FFFFFF;
            color: #1A1A1A; /* 规则11: 7:1对比度 */
        }
        
        /* 幻灯片容器 */
        .slide {
            width: 100vw;
            height: 100vh;
            padding: 5%; /* 规则5: 5%安全区 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            scroll-snap-align: start;
        }
        
        /* 排版 (规则6: 1.25模块化尺度) */
        h1 {
            font-size: 64px; /* 24 × 1.25³ */
            font-weight: 700;
            line-height: 1.1; /* 规则9: 展示级文本1.05-1.2 */
            margin-bottom: 48px; /* 规则17: 非关联元素≥48px */
        }
        
        h2 {
            font-size: 48px; /* 规则8: 标题≥48px */
            font-weight: 600;
            margin-bottom: 32px;
        }
        
        /* 最大行长度 (规则10: ≤60字符) */
        p, ul {
            max-width: 40em; /* 24px字号下约60字符 */
            margin-bottom: 16px; /* 规则17: 关联元素≤16px */
        }
        
        /* 强调色 (规则13: 每张幻灯片仅一种) */
        .accent {
            color: #0066FF;
            font-weight: 600;
        }
        
        /* 导航 */
        .nav {
            position: fixed;
            bottom: 5%;
            right: 5%;
            font-size: 18px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <!-- 幻灯片1: 标题页 (规则1: 单一观点) -->
    <section class="slide">
        <h1>Introducing<br><span class="accent">Data Pipeline v2</span></h1>
        <p style="font-size: 32px; opacity: 0.7;">Ship faster. Scale smarter.</p>
    </section>
    
    <!-- 幻灯片2: 关键点 (规则3: 3-5个区块) -->
    <section class="slide">
        <h2>10× Faster Ingestion</h2>
        <ul style="font-size: 28px; line-height: 1.6;">
            <li>16个工作进程并行处理</li>
            <li>自适应背压的智能批处理</li>
            <li>零数据丢失保障</li>
        </ul>
    </section>
    
    <!-- 更多幻灯片... -->
    
    <div class="nav">Use ← → to navigate</div>
    
    <script>
        // 方向键导航
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
                currentSlide++;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            } else if (e.key === 'ArrowLeft' && currentSlide > 0) {
                currentSlide--;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            }
        });
    </script>
</body>
</html>

Common Patterns

常见使用模式

Refining Generated Decks

优化生成的演示文稿

After initial generation, refine via natural language:

> make the title slide more dramatic
> add a chart showing adoption growth
> use more whitespace on slide 3
> change accent color to match our new brand
> add a closing slide with call-to-action

The skill maintains context and applies all 20 rules to changes.

初始生成后，可通过自然语言指令优化：

> 让标题页更有冲击力
> 添加展示用户增长的图表
> 给第3页增加更多留白
> 将强调色改为我们新品牌的颜色
> 添加带行动号召的结尾页

该技能会保持上下文一致性，并对修改内容应用所有20条设计规则。

Data Visualization Slides

数据可视化幻灯片

When generating charts:

> add a slide with a bar chart showing revenue by quarter

The skill will:

Apply Rule 18 (data-ink ratio ≥80%): remove gridlines, borders, fills
Use brand accent color for key data point
Add direct labels (no legend)
Ensure WCAG contrast on labels

生成图表时：

> 添加一张展示季度收入的柱状图幻灯片

该技能会：

应用规则18（数据墨水比≥80%）：移除网格线、边框、填充
使用品牌强调色突出关键数据点
添加直接标签（无需图例）
确保标签符合WCAG对比度要求

Multi-Section Decks

多章节演示文稿

For longer presentations:

> create a 15-slide deck with 3 sections: Problem, Solution, Results

The skill adds section dividers with distinct visual treatment while maintaining consistency.

对于较长的演示文稿：

> 创建包含3个章节的15页演示文稿：问题、解决方案、成果

该技能会添加章节分隔页，采用独特的视觉样式同时保持整体一致性。

Dark Mode Decks

深色模式演示文稿

> generate the deck in dark mode

Applies Rule 20 (two valid modes) by:

Inverting background/foreground
Maintaining 7:1+ contrast
Adjusting accent colors for dark backgrounds

> 生成深色模式的演示文稿

通过以下方式应用规则20（两种有效模式）：

反转背景/前景色
保持7:1+对比度
调整强调色以适配深色背景

Configuration

配置说明

Environment Variables

环境变量

bash

undefined

bash

undefined

Required for URL-based brand extraction

URL品牌提取功能必填

export FIRECRAWL_API_KEY=your_firecrawl_api_key

Optional: default brand when none specified

可选：未指定品牌时使用的默认品牌

export POWER_DESIGN_DEFAULT_BRAND=stripe

Optional: output directory

可选：输出目录

export POWER_DESIGN_OUTPUT_DIR=~/presentations

undefined

export POWER_DESIGN_OUTPUT_DIR=~/presentations

undefined

Custom Brand Library Location

自定义品牌库位置

bash

undefined

bash

undefined

Use a custom brand directory

使用自定义品牌目录

export POWER_DESIGN_BRANDS_DIR=~/my-brands


Then structure as:

~/my-brands/ ├── company-a.md ├── company-b.md └── _template.md

undefined

export POWER_DESIGN_BRANDS_DIR=~/my-brands


目录结构需如下：

~/my-brands/ ├── company-a.md ├── company-b.md └── _template.md

undefined

Troubleshooting

故障排除

"Brand not found in library"

Problem: Requested brand doesn't exist in

brands/

Low Contrast Warnings

低对比度警告

Problem: Generated slides fail WCAG contrast checks

Solution: The skill auto-corrects to 4.5:1 minimum. If you see warnings:

> increase contrast between text and background
> use darker text color

Or manually edit the generated HTML

<style>

section.

问题： 生成的幻灯片未通过WCAG对比度检查

解决方案： 该技能会自动修正至最低4.5:1对比度。若仍看到警告：

> 增加文本与背景的对比度
> 使用更深的文本颜色

或手动编辑生成的HTML

<style>

部分。

Firecrawl Extraction Fails

Firecrawl提取失败

Problem: Brand DNA extraction times out or returns empty

Solution:

Verify API key:
```
echo $FIRECRAWL_API_KEY
```
Check URL is publicly accessible
Try alternative pages:
```
/about
```
,
```
/brand
```
,
```
/press
```
Fall back to manual brand creation

问题： 品牌DNA提取超时或返回空结果

解决方案：

验证API密钥：
```
echo $FIRECRAWL_API_KEY
```
确认URL可公开访问
尝试其他页面：
```
/about
```
,
```
/brand
```
,
```
/press
```
回退到手动创建品牌

Slides Too Text-Heavy

幻灯片文字过多

Problem: Generated slides violate Rule 2 (glanceable in ≤3 seconds)

Solution:

> split slide 4 into two slides
> use bullet points instead of paragraphs
> add an icon to represent this concept visually

The skill will redistribute content across more slides.

问题： 生成的幻灯片违反规则2（3秒内可快速浏览）

解决方案：

> 将第4页拆分为两张幻灯片
> 使用项目符号替代段落
> 添加图标可视化该概念

该技能会将内容重新分配到更多幻灯片中。

Typography Not Loading

排版未加载

Problem: Custom fonts in brand system don't render

Solution: Ensure brand

.md

file includes web-safe fallbacks:

markdown

**Sans:** "CustomFont", "Inter", system-ui, sans-serif

Or add

@import

in generated HTML:

html

<style>
  @import url('https://fonts.googleapis.com/css2?family=CustomFont:wght@400;600;700&display=swap');
  /* ... rest of styles ... */
</style>

问题： 品牌系统中的自定义字体未渲染

解决方案： 确保品牌

.md

文件包含网页安全字体 fallback：

markdown

**Sans:** "CustomFont", "Inter", system-ui, sans-serif

或在生成的HTML中添加

@import

：

html

<style>
  @import url('https://fonts.googleapis.com/css2?family=CustomFont:wght@400;600;700&display=swap');
  /* ... 其余样式 ... */
</style>

Chart Data-Ink Issues

图表数据墨水比问题

Problem: Generated charts have too much decoration

Solution:

> remove the chart gridlines
> use direct labels instead of a legend
> make the bars thinner with more space between

Or manually edit SVG/canvas code following Tufte's guidelines in

principles/design-principles.md

Rule 18.

问题： 生成的图表装饰元素过多

解决方案：

> 移除图表网格线
> 使用直接标签替代图例
> 缩小柱状宽度并增加间距

或手动编辑SVG/canvas代码，遵循

principles/design-principles.md

中规则18的Tufte指南。

Advanced Usage

进阶用法

Batch Generation

批量生成

bash

undefined

bash

undefined

Generate multiple decks from a list

从列表生成多个演示文稿

for brand in stripe linear vercel; do claude code --prompt "use power-design; create a product launch deck for ${brand}; content: New AI features - 3x faster, smarter autocomplete, team collaboration; save as ${brand}-launch.html" done

undefined

undefined

CI/CD Integration

CI/CD集成

yaml

undefined

yaml

undefined

.github/workflows/generate-decks.yml

name: Generate Presentation Decks

on: push: paths: - 'presentations/*.txt'

jobs: generate: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3

  - name: Install Power Design
    run: |
      git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
  
  - name: Generate Decks
    env:
      FIRECRAWL_API_KEY: ${{ secrets.FIRECRAWL_API_KEY }}
    run: |
      for brief in presentations/*.txt; do
        claude code --prompt "use power-design; brand: our-company; content from ${brief}; output: ${brief%.txt}.html"
      done
  
  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./presentations

undefined

name: Generate Presentation Decks

on: push: paths: - 'presentations/*.txt'

jobs: generate: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3

  - name: Install Power Design
    run: |
      git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
  
  - name: Generate Decks
    env:
      FIRECRAWL_API_KEY: ${{ secrets.FIRECRAWL_API_KEY }}
    run: |
      for brief in presentations/*.txt; do
        claude code --prompt "use power-design; brand: our-company; content from ${brief}; output: ${brief%.txt}.html"
      done
  
  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./presentations

undefined

API Integration (Python)

API集成（Python）

python

undefined

python

undefined

power_design_api.py

import subprocess import tempfile import os

class PowerDesignAPI: def init(self, brands_dir=None): self.brands_dir = brands_dir or os.path.expanduser( "~/.claude/skills/power-design/brands" )

def list_brands(self):
    """Return list of available pre-built brands"""
    brands = []
    for f in os.listdir(self.brands_dir):
        if f.endswith('.md') and f != '_template.md':
            brands.append(f.replace('.md', ''))
    return sorted(brands)

def generate(self, brand, content, output_path=None):
    """
    Generate deck with Power Design
    
    Args:
        brand: Brand name from library or URL
        content: Dict with 'headline' and 'points' list
        output_path: Where to save HTML (temp file if None)
    
    Returns:
        Path to generated HTML file
    """
    if output_path is None:
        fd, output_path = tempfile.mkstemp(suffix='.html')
        os.close(fd)
    
    headline = content.get('headline', 'Untitled')
    points = content.get('points', [])
    points_text = '\n'.join(f"- {p}" for p in points)
    
    prompt = f"""
    use power-design
    
    Brand: {brand}
    
    Headline: {headline}
    
    Key points:
    {points_text}
    
    Generate slides and save to: {output_path}
    """
    
    result = subprocess.run(
        ["claude", "code", "--prompt", prompt],
        capture_output=True,
        text=True,
        timeout=120
    )
    
    if os.path.exists(output_path):
        return output_path
    else:
        raise RuntimeError(f"Generation failed: {result.stderr}")

import subprocess import tempfile import os

class PowerDesignAPI: def init(self, brands_dir=None): self.brands_dir = brands_dir or os.path.expanduser( "~/.claude/skills/power-design/brands" )

def list_brands(self):
    """返回可用的预构建品牌列表"""
    brands = []
    for f in os.listdir(self.brands_dir):
        if f.endswith('.md') and f != '_template.md':
            brands.append(f.replace('.md', ''))
    return sorted(brands)

def generate(self, brand, content, output_path=None):
    """
    使用Power Design生成演示文稿
    
    参数:
        brand: 品牌库中的品牌名称或URL
        content: 包含'headline'和'points'列表的字典
        output_path: HTML保存路径（未指定则使用临时文件）
    
    返回:
        生成的HTML文件路径
    """
    if output_path is None:
        fd, output_path = tempfile.mkstemp(suffix='.html')
        os.close(fd)
    
    headline = content.get('headline', 'Untitled')
    points = content.get('points', [])
    points_text = '\n'.join(f"- {p}" for p in points)
    
    prompt = f"""
    use power-design
    
    Brand: {brand}
    
    Headline: {headline}
    
    Key points:
    {points_text}
    
    Generate slides and save to: {output_path}
    """
    
    result = subprocess.run(
        ["claude", "code", "--prompt", prompt],
        capture_output=True,
        text=True,
        timeout=120
    )
    
    if os.path.exists(output_path):
        return output_path
    else:
        raise RuntimeError(f"生成失败: {result.stderr}")

Usage

使用示例

api = PowerDesignAPI()

print("Available brands:", api.list_brands()[:5])

deck_path = api.generate( brand="stripe", content={ "headline": "Introducing Stripe Tax", "points": [ "Automate sales tax calculation", "150+ jurisdictions supported", "Real-time rate updates", "One-click integration" ] } )

print(f"Deck generated: {deck_path}")

undefined

api = PowerDesignAPI()

print("可用品牌:", api.list_brands()[:5])

deck_path = api.generate( brand="stripe", content={ "headline": "Introducing Stripe Tax", "points": [ "自动计算销售税", "支持150+司法管辖区", "实时税率更新", "一键集成" ] } )

print(f"演示文稿已生成: {deck_path}")

undefined

Resources

资源链接

Full principles with citations:
```
principles/design-principles.md
```
Brand library:
```
brands/
```
(72+ pre-built systems)
Example deck:
```
examples/sample-deck.html
```
Community: https://bit.ly/3PATPoL
Showcase site: https://power-design.vercel.app

包含引用的完整设计原则:
```
principles/design-principles.md
```
品牌库:
```
brands/
```
（72+预构建系统）
示例演示文稿:
```
examples/sample-deck.html
```
社区: https://bit.ly/3PATPoL
展示站点: https://power-design.vercel.app

Key Takeaways for Agents

面向Agent的核心要点

Always apply all 20 rules — they're non-negotiable and research-backed
Brand DNA comes first — extract or load before generating content
One idea per slide — split complex topics across multiple slides
Contrast is critical — aim for WCAG AAA (7:1), minimum AA (4.5:1)
Whitespace is content — 40%+ ratio makes slides glanceable
Grid everything — 8pt spacing, single alignment system
Modular type scale — use 1.25–1.618 ratio, max 4 sizes per slide
Data-ink ratio for charts — remove all non-essential decoration
F-pattern layout — headline and key visual top-left
Consistent mode — pick minimal or rich, stay there

When in doubt, refer to

principles/design-principles.md

for specific thresholds and research citations.

始终应用全部20条规则 — 这些规则是经研究验证的，不可妥协
品牌DNA优先 — 先提取或加载品牌信息，再生成内容
每张幻灯片一个核心观点 — 复杂主题拆分到多张幻灯片
对比度至关重要 — 目标达到WCAG AAA（7:1），最低AA（4.5:1）
留白也是内容 — 40%+留白比例让幻灯片更易快速浏览
一切遵循网格 — 8pt间距、单一对齐系统
模块化排版尺度 — 使用1.25–1.618比例，每张幻灯片最多4种字号
图表遵循数据墨水比 — 移除所有非必要装饰
F型布局 — 标题和核心视觉元素置于左上角
风格模式一致 — 选择极简或丰富风格，保持统一

如有疑问，请参考

principles/design-principles.md

中的具体阈值和研究引用。