Cyberpunk Terminal PPT · Fully self-contained design system
Disguise the PPT as a "developer console being deconstructed/debugged." Each page is a snapshot of an IDE / terminal / debugger moment.
When to use
- The user wants a "cyberpunk style"、"terminal style"、"console style" PPT
- The user wants a "developer perspective"、"presentation for engineers" product introduction
- The user wants a "highly readable code style" PPT, not a marketing style
- The user provides specific content (sections / cards / numbers / flows) that needs visual layout
Whennotto use
- Marketing-style homepage (using gradients + large images + rounded buttons)
- Business pitch style (using bold Song typeface + lots of gold decoration)
- For executive decision-making (recommend switching to a minimalist "white background, black text + 1-2 numbers" style)
Quick start (AI workflow)
1. 先读 references/00-design-system.md ← 设计令牌 + 基础 HTML 底座
2. 按章节类型选 layout（共 19 种）：
- 设计封面（boot log + 12-col + speaker box） → references/01-cover.md
- 设计目录（12-col featured 卡 + 衬线章节名） → references/02-toc.md
- 设计章节封面（中心 wrapper + accent 单词 + /* */ 描述） → references/03-part-cover.md
- 设计正文（8 种 layout，含 thesisPanel+stepCard / frameworkCard） → references/04-content-pages.md
- 设计组件（11 个原子组件） → references/05-components.md
- 渲染 / 性能 / 调试 → references/06-rendering-tips.md
- 设计高级页（19 种 layout，含 8 种高频） → references/07-advanced-layouts.md
- 设计路线图瓦片（最复杂） → references/08-roadmap-tile.md
3. 复制对应 md 里的「完整 HTML 模板」→ 替换占位符 [LIKE-THIS] → 写新 slide
4. 浏览器打开 index.html，按 ← → 翻页浏览
5. 用 Puppeteer 抓 PDF / 截图（可选）
node ../.claude/skills/haizei-cyberpunk-terminal-ppt/scripts/render-ppt.mjs ./index.html --out ./slides
Design language at a glance (30-second version)
| Dimension |
Value |
| Background |
#060a14(deep navy blue, never pure black) |
| Grid |
36px light blue grid + double radial gradient |
| Primary colors |
#00ff9c(mint green, 41%) + #5ce1ff(cyan blue, 26%) + #ffb020(amber, 19%) + #ff2e88(magenta, 13%) |
| Font |
JetBrains Mono + Space Grotesk + Noto Sans SC + Noto Serif SC |
| Font size |
Body 9-17px (91%), relying on whitespace + color + letter spacing |
| Decoration |
Blinking cursor (70%) + 3px decorative bar (90%) + box-shadow glow (90%) |
| Soul |
window-chrome (IDE title bar) + footer-chrome (command line) + slide-corner ([N/M] LABEL) trio |
| New |
Progress bar (2px at top) / line-numbers (40px on the left, 01-30 column) / serif (section names / titles) |
Anti-patterns (absolutely do not do)
- ❌ Pure white / pure black background → use
#060a14
- ❌ emoji as visual elements → use
▸ ▍ ◆ ▌ and other unicode characters
- ❌ Rounded corners ≥ 8px → keep the 4px hardcore feel
- ❌ 32-48px large blocks of body text → body text no larger than 17px
- ❌ Writing Chinese in the terminal command bar → keep commands in English
- ❌ Material Design-style floating buttons
- ❌ Filling the hero with a gradient background
- ❌ Missing the window-chrome / corner / footer trio(required on every page)
- ❌ Using emoji or colored dots instead of the
▌ cursor character(use <span class="blink">▌</span>）
references quick reference (core 9 + advanced 6 + closing 5)
Main directory (core · always loaded)
| File |
When to read |
Content |
| 00-design-system.md |
First required read |
Design tokens + window-chrome + panel + corner + footer + line-numbers + progress bar + 12-col grid |
| 01-cover.md |
Design cover |
boot log + 12-col full version (speaker box + ASCII frame + 3-color legend) + 5 variants |
| 02-toc.md |
Design table of contents |
12-col featured full-width card + 6/6 / 4/8 staggered + serif chapter names + 3 variants |
| 03-part-cover.md |
Design section cover |
Centered wrapper (96px Chinese + 68px English subtitle) + accent word + /* */ description + 5 variants |
| 04-content-pages.md |
Design body |
8 basic layouts: thesisPanel+stepCard (recommended) / 4-card / 3-card / 2-col / KPI / timeline / roadmap / frameworkCard |
| 05-components.md |
Design components |
11 components：statCard / kpiCard / stepKpi / channelBar / priorityChip / hBar / kpiBar / spectrum / progressRing / accentBadge / noteCard |
| 06-rendering-tips.md |
Rendering/Debugging |
Font loading / grid techniques / animation / performance / debugging |
| 07-advanced-layouts.md |
Design advanced pages (core) |
8 full templates for high-frequency layouts + nav + Checklist + failure modes (90K · after splitting) |
| 08-roadmap-tile.md |
Design roadmap |
roadmap-tile full template (4 columns × N tiles) |
advanced-layouts/ subdirectory (advanced · load on demand)
| File |
When to read |
Content |
| advanced-layouts/README.md |
Subdirectory navigation |
Progressive loading strategy + full catalog of 21 layouts |
| advanced-layouts/01-basic-patterns.md |
Basic but low-frequency layouts |
9-19 basic patterns：arch-flow / intro-typ / layer-stack / loop-evo / repo-tree / yaml-code / spectrum-page / note-card-page / harness-table / quadrant / mode-stack（18K） |
| advanced-layouts/02-supplementary.md |
Complex mid-section content pages |
A1-A13 supplementary patterns：part-cover-CN / layerFlowPanel / progressionStrip+denseSplit / transformSideBySide / timelineLadder+antiPattern / roleMatrix 6-grid / qaGrid 4-col / heroThesis+insightTable / stepTabPanel / principle+goldenRule / docCardGrid / qaDual 2x2 / kanbanBacklog+metric（124K） |
closing/ subdirectory (closing pages · load on demand)
21 layouts at-a-glance quick reference
8 high-frequency layouts (core recurring patterns · see 07-advanced-layouts.md）
| Layout |
Purpose |
Align with reference site slides |
| commandPanel + hubRing + laneStack |
AI orchestration hub + dual-swimlane comparison |
slide 5 |
| specCanvas + stepTrack + foundationBar |
Methodology main chain (6 steps + upper/lower gates) |
slide 10 |
| layerCard 9-grid + intro + side thoughtPanel |
9-layer architecture + sidebar thinking |
slide 17 |
| carrierPanel + channelGrid (A/B/C) |
"Where + how to use" 4-channel comparison |
slide 12 |
| shotStage + filmstrip |
Screenshot demo + multi-thumbnail switching |
slide 7 |
| stagePanel (split image) + toolCompareGrid |
Dual-image comparison + 4-tool comparison |
slide 8 |
| docCard + bridge + matrixPanel |
Two-column comparison + middle ≠ + 4-row matrix |
slide 30 |
| heroCard + discussCard + footer open floor |
Closing page (Q&A / open discussion) |
slide 37 |
| # |
Layout |
Purpose |
Align with slide |
| 9 |
arch-flow |
Architecture diagram / data flow |
- |
| 10 |
intro-typ |
Large Chinese text hero quote |
- |
| 11 |
layer-stack |
N-layer stacking |
- |
| 12 |
loop-evo |
Cycle / evolution |
- |
| 13 |
repo-tree |
Repository directory tree |
- |
| 14 |
yaml-code |
YAML / configuration code block |
- |
| 15 |
spectrum-page |
Full-width spectrum large image |
- |
| 16 |
note-card-page |
Multiple side-by-side note-card |
- |
| 17 |
harness-table |
Table / Harness configuration |
- |
| 18 |
quadrant |
2×2 four-quadrant |
- |
| 19 |
mode-stack |
Mode comparison / staggered stacking |
- |
| # |
Layout |
Purpose |
Align slide |
| A1 |
part-cover-CN |
Chinese cover + English subtitle in large text |
20 / 25 / 34 |
| A2 |
layerFlowPanel |
5-layer architecture + 2x2 Loop + 4 key points |
18 |
| A3 |
progressionStrip + denseSplit |
4-stage bar + 6 primitives + suitable/unsuitable + narrative |
19 |
| A4 |
transformSideBySide |
AS-IS/TO-BE + TRANSFORM + Core Formula |
22 |
| A5 |
timelineLadder + antiPattern |
T+0/+6M/+18M + KPI + stage warnings + anti-patterns |
23 |
| A6 |
roleMatrix 6-grid |
2x3 role cards + KEEP/SHRINK/AI TAKES/NEW + axiom bar |
24 |
| A7 |
qaGrid 4-col |
4-column Q&A + numbered answers + dialogue script |
26 |
| A8 |
heroThesis + insightTable |
Top hero + left insights + right table |
27 |
| A9 |
stepTabPanel |
Three-step implementation tab + three-step deep dive |
28 |
| A10 |
principleCard + goldenRule |
4 philosophies + 9 golden rules + CORE INSIGHT |
29 |
| A11 |
docCardGrid |
Document card (colored border + metadata + tags + CTA) |
31 |
| A12 |
qaDual 2x2 |
2x2 + QUESTIONS/ANSWER two-column |
32 / 33 |
| A13 |
kanbanBacklog + metric |
4-column backlog + priority + bottom KPI bar |
35 / 36 |
4 closing page layouts (see closing/）
Self-contained principle
This skill does not depend on any external files：
- ❌ Does not reference project root directory
archive/、tmp/、参考资料/
- ❌ Does not reference specific slide paths
- ❌ Does not contain real copy / real IP / real project paths
- ✅ Each references md provides a complete runnable HTML template (with
[PLACEHOLDER] placeholders)
- ✅ All CSS is generic design tokens + layout patterns
scripts
scripts/render-ppt.mjs
Generic PPT rendering tool: use Puppeteer to dump all slides of a "navigate with ← →" PPT webpage into a single-file HTML.
node scripts/render-ppt.mjs <url> --out ./rendered
Output verification checklist
After completing a PPT, check item by item:
- Every page has the window-chrome + footer-chrome + slide-corner trio(required)
- slide-corner content changes per page：
[ 01 / 37 ] COVER / [ 02 / 37 ] INDEX / [ 03 / 37 ] PART 0
- Left line-numbers column is visible（40px 01-30）
- Top 2px progress barreflects current page progress
- hash deep link works：URL
#5 directly opens page 5
- At least 1 page has a blinking cursor
▌(using <span class="blink">▌</span>）
- No more than 4 colors (green / cyan / amber / pink)
- All four font families are loaded (JetBrains Mono + Space Grotesk + Noto Sans SC + Noto Serif SC)
- Body font size 9-17px (no 32-48px large blocks of body text)
- Background is
#060a14(never pure black)
- Border radius ≤ 4px (hardcore feel)
- Keyboard ← → Space F available (additionally supports Home / End / PageUp / PageDown)
- No overflow at desktop 1440×900 viewport
- At least 1 ASCII box / command-line element (maintain terminal feel)
- boot log must contain 1 line
[ WARN ](even outside cover)
