القائمة
生成赛博朋克终端控制台风格的网页 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 之外）