메뉴
生成赛博朋克终端控制台风格的网页 PPT（HTML 单文件）。设计语言是把 PPT 伪装成正在被解构/调试的开发者控制台。典型场景用户说做个赛博朋克风的网页 PPT、帮我做一份终端风格的演示稿、用 cyberpunk terminal 风格讲 xxx。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
图片生成技能,当用户需要生成图片、视觉信息图、创建图像、编辑已有图片时使用此技能。基于Agnes AI官方API的Agnes Image 2.1 Flash模型（agnes-image-2.1-flash）的图片生成服务
项目知识分层维护技能，根据三层架构（项目层→技术层→资产层）生成标准化项目文档目录结构。支持初始化和增量维护。当用户需要创建项目知识管理文档、维护项目资产文档、规划项目文档体系、生成项目文档目录时使用此技能。
AI图片生成技能，使用ChatGPT最新生图 gpt-image-2-all，当用户需要生成图片、视觉信息图、创建图像、编辑/修改/调整已有图片时使用此技能。基于API易平台(https://api.apiyi.com/)的ChatGPT最新生图gpt-image-2-all模型（gpt-image-2-all）的图片生成服务，无需访问外网。该模型以 $0.03/张 按次计费，支持文生图、单图编辑、多图融合、自然语言改图，文字还原度高、中文提示词友好。尺寸通过prompt描述控制（无显式size参数）与NanoBanana2不同的关键点：无size参数，需在prompt开头描述尺寸；统一$0.03/张无分辨率阶梯；使用对话式端点/v1/chat/completions为主推。
图片生成技能，当用户需要生成图片、视觉信息图、创建图像、编辑/修改/调整已有图片时使用此技能。基于API易平台(https://api.apiyi.com/)的ChatGPT Image 2模型（gpt-image-2）的官方正式版图片生成服务。该模型支持精确的尺寸/画质控制（含4K），按token计费。与gpt-image-2-all（官逆版）不同的关键点：使用/v1/images/generations和/v1/images/edits端点；有显式size参数；有quality参数；按token计费；使用multipart/form-data上传参考图；b64_json为纯base64无前缀。
图片生成技能，当用户需要生成图片、视觉信息图、创建图像、编辑/修改/调整已有图片时使用此技能。基于中国的API易代理站(https://api.apiyi.com/)的NanoBanana2模型的图片生成服务，无需访问外网。支持14种宽高比的图片比例（`1:1`、`16:9`、`9:16`、`4:3`、`3:4`、`3:2`、`2:3`、`5:4`、`4:5`、`1:4`、`4:1`、`1:8`、`8:1`、`21:9`等）和3种分辨率（1K、2K、4K），支持文生图和图生图编辑。基于谷歌的NanoBanana2模型(快速模型)，使用API易国内代理服务访问。
图片生成技能，当用户需要生成图片、视觉信息图、创建图像、编辑/修改/调整已有图片时使用此技能。基于中国的API易代理站(https://api.apiyi.com/)的NanoBananaPro模型的图片生成服务，无需访问外网。支持10种宽高比的图片比例（`1:1`、`16:9`、`9:16`、`4:3`、`3:4`、`3:2`、`2:3`、`5:4`、`4:5`、`21:9`等）和3种分辨率（1K、2K、4K），支持文生图和图生图编辑。基于谷歌的NanoBananaPro模型(快速模型)，使用API易国内代理服务访问。
| name | haizei-cyberpunk-terminal-ppt |
| description | 生成赛博朋克终端控制台风格的网页 PPT（HTML 单文件）。设计语言是把 PPT 伪装成正在被解构/调试的开发者控制台。典型场景用户说做个赛博朋克风的网页 PPT、帮我做一份终端风格的演示稿、用 cyberpunk terminal 风格讲 xxx。 |
把 PPT 伪装成"正在被解构/调试的开发者控制台"。每一页都是一个 IDE / 终端 / 调试器的瞬间截图。
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
| 维度 | 值 |
|---|---|
| 背景 | #060a14（深海军蓝，绝不纯黑） |
| 网格 | 36px 浅蓝网格 + 双 radial gradient |
| 主色 | #00ff9c（薄荷绿，41%）+ #5ce1ff（青蓝，26%）+ #ffb020（琥珀，19%）+ #ff2e88（品红，13%） |
| 字体 | JetBrains Mono + Space Grotesk + Noto Sans SC + Noto Serif SC |
| 字号 | 主体 9-17px（91%），靠留白 + 颜色 + 字距 |
| 装饰 | 闪烁光标（70%）+ 3px 装饰条（90%）+ box-shadow 辉光（90%） |
| 灵魂 | window-chrome（IDE 标题栏）+ footer-chrome（命令行）+ slide-corner（[N/M] LABEL）三件套 |
| 新增 | 进度条（顶部 2px）/ line-numbers（左侧 40px 01-30 列）/ 衬线（章节名 / 标题） |
#060a14▸ ▍ ◆ ▌ 等 unicode 字符▌ 光标字符（用 <span class="blink">▌</span>）| 文件 | 何时读 | 内容 |
|---|---|---|
| 00-design-system.md | 第一份必读 | 设计令牌 + window-chrome + panel + corner + footer + line-numbers + 进度条 + 12-col grid |
| 01-cover.md | 设计封面 | boot log + 12-col 完整版（speaker box + ASCII 框 + 3 色 legend）+ 5 个变体 |
| 02-toc.md | 设计目录 | 12-col featured 全宽卡 + 6/6 / 4/8 错落 + 衬线章节名 + 3 个变体 |
| 03-part-cover.md | 设计章节封面 | 中心 wrapper（96px 中文 + 68px 英文 subtitle）+ accent 单词 + /* */ 描述 + 5 个变体 |
| 04-content-pages.md | 设计正文 | 8 种基础 layout：thesisPanel+stepCard（推荐） / 4-card / 3-card / 2-col / KPI / timeline / roadmap / frameworkCard |
| 05-components.md | 设计组件 | 11 个组件：statCard / kpiCard / stepKpi / channelBar / priorityChip / hBar / kpiBar / spectrum / progressRing / accentBadge / noteCard |
| 06-rendering-tips.md | 渲染/调试 | 字体加载 / grid 技巧 / 动画 / 性能 / 调试 |
| 07-advanced-layouts.md | 设计高级页（核心） | 8 种高频 layout 完整模板 + nav + Checklist + 失败模式（90K · 拆分后） |
| 08-roadmap-tile.md | 设计路线图 | roadmap-tile 完整模板（4 列 × N tile） |
| 文件 | 何时读 | 内容 |
|---|---|---|
| advanced-layouts/README.md | 子目录导航 | 渐进式加载策略 + 完整 21 种 layout 目录 |
| advanced-layouts/01-basic-patterns.md | 基础但低频 layout | 9-19 基础模式：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 | 复杂中段内容页 | A1-A13 补充模式：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/README.md | 收尾页导航 | 4 种收尾 layout 速查 + 何时用哪个 |
| closing/01-thanks-qa.md | PPT 结束时 | A14 thanksQandA：致谢大字 + 3 列 Q&A 邀请 |
| closing/02-cta-contact.md | 留资环节 | A15 ctaAndContact：主 CTA + 二维码 + 联系方式 grid |
| closing/03-recap-summary.md | 培训场景 | A16 recapSummary：5 张 takeaway 卡片 + TL;DR |
| closing/04-references-credits.md | 学术演讲 | A17 referencesAndCredits：参考资料 + 致谢 + 版权 |
| Layout | 用途 | 对齐参考站 slide |
|---|---|---|
| commandPanel + hubRing + laneStack | AI 调度中枢 + 双泳道对比 | slide 5 |
| specCanvas + stepTrack + foundationBar | 方法论主链（6 步 + 上下闸口） | slide 10 |
| layerCard 9-grid + intro + side thoughtPanel | 9 层架构 + 侧栏思考 | slide 17 |
| carrierPanel + channelGrid (A/B/C) | "在哪里 + 怎么用" 4 通道对比 | slide 12 |
| shotStage + filmstrip | 截图演示 + 多缩略图切换 | slide 7 |
| stagePanel (split image) + toolCompareGrid | 双图对比 + 4 工具对比 | slide 8 |
| docCard + bridge + matrixPanel | 两栏对比 + 中间 ≠ + 4 行矩阵 | slide 30 |
| heroCard + discussCard + footer open floor | 收尾页（Q&A / 开放讨论） | slide 37 |
| # | Layout | 用途 | 对齐 slide |
|---|---|---|---|
| 9 | arch-flow | 架构图 / 数据流 | - |
| 10 | intro-typ | 中文大字 hero 引言 | - |
| 11 | layer-stack | N 层堆叠 | - |
| 12 | loop-evo | 循环 / 演进 | - |
| 13 | repo-tree | 仓库目录树 | - |
| 14 | yaml-code | YAML / 配置代码块 | - |
| 15 | spectrum-page | 全宽 spectrum 大图 | - |
| 16 | note-card-page | 多并列 note-card | - |
| 17 | harness-table | 表格 / Harness 配置 | - |
| 18 | quadrant | 2×2 四象限 | - |
| 19 | mode-stack | 模式对比 / 错位堆叠 | - |
| # | Layout | 用途 | 对齐 slide |
|---|---|---|---|
| A1 | part-cover-CN | 中文封面 + 英文副标题大字 | 20 / 25 / 34 |
| A2 | layerFlowPanel | 5 层架构 + 2x2 Loop + 4 要点 | 18 |
| A3 | progressionStrip + denseSplit | 4 阶段条 + 6 primitive + 适合/不适合 + 叙事 | 19 |
| A4 | transformSideBySide | AS-IS/TO-BE + TRANSFORM + Core Formula | 22 |
| A5 | timelineLadder + antiPattern | T+0/+6M/+18M + KPI + 阶段警告 + 反模式 | 23 |
| A6 | roleMatrix 6-grid | 2x3 角色卡 + KEEP/SHRINK/AI TAKES/NEW + 公理条 | 24 |
| A7 | qaGrid 4-col | 4 列问答 + 编号答案 + 对答话术 | 26 |
| A8 | heroThesis + insightTable | 顶部 hero + 左洞察 + 右表格 | 27 |
| A9 | stepTabPanel | 落地三步法 tab + 三步深讲 | 28 |
| A10 | principleCard + goldenRule | 4 哲学 + 9 黄金法则 + CORE INSIGHT | 29 |
| A11 | docCardGrid | 文档卡（彩边 + 元数据 + tags + CTA） | 31 |
| A12 | qaDual 2x2 | 2x2 + QUESTIONS/ANSWER 双栏 | 32 / 33 |
| A13 | kanbanBacklog + metric | 4 列 backlog + 优先级 + 底部 KPI 条 | 35 / 36 |
| # | Layout | 用途 | 文件 |
|---|---|---|---|
| A14 | thanksQandA | 致谢大字 + 3 列 Q&A 邀请 | closing/01-thanks-qa.md |
| A15 | ctaAndContact | 主 CTA + 二维码 + 联系方式 grid | closing/02-cta-contact.md |
| A16 | recapSummary | 5 张 takeaway 卡片 + TL;DR | closing/03-recap-summary.md |
| A17 | referencesAndCredits | 参考资料 + 致谢 + 版权说明 | closing/04-references-credits.md |
这个 skill 不依赖任何外部文件：
archive/、tmp/、参考资料/[PLACEHOLDER] 占位符）通用 PPT 渲染工具：用 Puppeteer 把"按 ← → 翻页"的 PPT 网页的所有 slide dump 为单文件 HTML。
node scripts/render-ppt.mjs <url> --out ./rendered
完成一份 PPT 后，逐项检查：
[ 01 / 37 ] COVER / [ 02 / 37 ] INDEX / [ 03 / 37 ] PART 0#5 直接打开第 5 页▌（用 <span class="blink">▌</span>）#060a14（绝不用纯黑）[ WARN ]（即使在 cover 之外）