菜单
Create strategic HTML presentations with Chart.js, design tokens, and contextual decision system. Use for investor pitches, sales decks, product demos, QBRs, and conference talks. Features 15 deck strategies, 25 layouts, BM25 search, and Duarte Sparkline emotion arcs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create or update Claude skills. Use for new skills, skill references, skill scripts, optimizing existing skills, extending Claude's capabilities.
Generate images via Nano Banana with 129 curated prompts. Mandatory validation interview refines style/mood/colors (use --skip to bypass). 3 modes: search, creative, wild. Styles: Ukiyo-e, Bento grid, cyberpunk, cinematic, vintage patent.
Corporate Identity Program design with 50 deliverables, 20 styles, 20 industries. Generate CIP mockups with Gemini Nano Banana (Flash/Pro). Actions: design, create, generate brand identity. Deliverables: business card, letterhead, signage, vehicle, apparel, packaging. Styles: corporate, luxury, minimal, modern.
Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
Logo design intelligence with 55 styles, 30 color palettes, 25 industries. Generate logos with Gemini Nano Banana model, search styles/colors/industries. Actions: design, create, generate logo. Industries: tech, healthcare, finance, food, fashion, fitness. Styles: minimalist, vintage, luxury, geometric, abstract, mascot, emblem. Features: AI prompt generation, design briefs, color psychology.
Social media content, API integrations, scheduling. X, Facebook, Threads, LinkedIn, YouTube, TikTok. OAuth, rate limits, media uploads, engagement, threads.
| name | slides-design |
| description | Create strategic HTML presentations with Chart.js, design tokens, and contextual decision system. Use for investor pitches, sales decks, product demos, QBRs, and conference talks. Features 15 deck strategies, 25 layouts, BM25 search, and Duarte Sparkline emotion arcs. |
Create persuasive HTML slide decks using design tokens, Chart.js, and a contextual decision system.
Before creating slides, activate in order:
design-system - Design tokens, color palettes, typography, spacingfrontend-design - Design thinking, aesthetics, visual asset generationui-ux-pro-max (if frontend-design is not available) - Premium UI patterns, component libraryALL slides MUST:
file:// compatibility)
node .claude/skills/design-system/scripts/embed-tokens.cjs --minimal
var(--color-primary), var(--slide-bg)node .claude/skills/design-system/scripts/embed-tokens.cjs --minimal
python .claude/skills/design-system/scripts/search-slides.py "[goal]" -d strategy
python .claude/skills/design-system/scripts/search-slides.py "[slide goal]" \
--context --position [N] --total [TOTAL] --prev-emotion [PREV]
Follow references/html-template.md for navigation and Chart.js patterns.
| CSV File | Purpose |
|---|---|
slide-strategies.csv | 15 deck types + emotion arcs |
slide-layouts.csv | 25 layouts + animations |
slide-layout-logic.csv | Goal → Layout mapping |
slide-typography.csv | Content → Typography scale |
slide-color-logic.csv | Emotion → Color treatment |
slide-copy.csv | 25 copywriting formulas |
slide-charts.csv | 25 Chart.js configurations |
Data location: .claude/skills/design-system/data/
| Topic | File |
|---|---|
| HTML Template | references/html-template.md |
| Slide Strategies | references/slide-strategies.md |
| Layout Patterns | references/layout-patterns.md |
| Copywriting | references/copywriting-formulas.md |
Alternate emotions for engagement: "What Is" (frustration) ↔ "What Could Be" (hope)
Pattern breaks calculated at 1/3 and 2/3 positions for full-bleed emotional slides.
Save to: assets/designs/slides/{slug}-{date}.html
/slides:create "10-slide seed funding pitch for ClaudeKit"
/slides:create "B2B sales deck with ROI focus"
/slides:create "5-slide product demo with features"
Skill Dependencies: frontend-design, ui-ux-pro-max, design-system, brand-guidelines Primary Agents: ui-ux-designer, content-creator