| name | tutorial-center-update |
| description | AI_PM 教程中心自动化更新 Skill。扫描所有 skills，增量更新单一 HTML 文件，完全离线可用。 当用户说「更新教程中心」「刷新教程」「教程中心过期了」「新增了技能需要更新文档」 「同步技能列表到教程」时，立即使用此技能。注意：必须增量编辑，禁止整体重写。 |
| argument-hint | [update|preview|sync|validate] |
| allowed-tools | Read Write Edit Bash(ls) Bash(find) Bash(cat) Bash(grep) Bash(sed) Agent |
教程中心自动化更新
概述
本 Skill 生成完全独立、纯原生的教程中心 HTML 文件：
- 扫描阶段 - 发现所有 skills，提取元数据
- 生成阶段 - 构建 Editorial Endfield 风格单一 HTML 文件（零依赖）
- 自检阶段 - 执行全量代码验证，确保可正常运行
- 交付阶段 - 输出完全离线可用的 HTML 文件
设计系统（必须遵守）
风格定位
终末地官网 Editorial × 精工细节：纯白底色，极大无衬线 Display 字体，// 双斜杠作为核心装饰，黄色 #FFD700 仅用于实色块（非描边），深色页脚对比。开阔、明亮、精工感。
禁止：扫描线、菱形装饰、深蓝黑导航、游戏 HUD 风、#1A1A2E 暗色底、clip-path 多边形卡片。
调色板
颜色值来自终末地官网 CSS 实测（2026-03-11），与目测/拾色器有差异，以下为准。
:root {
--white: #FFFFFF;
--light: #F5F5F5;
--dark: #191919;
--dark2: #252525;
--yellow: #fffa00;
--yellow-dim: rgba(255,250,0,0.08);
--border-y: rgba(255,250,0,0.5);
--text: #141414;
--text-title: #141414;
--text-muted: #6b6b6b;
--border: rgba(0,0,0,0.10);
--green: #4CAF50;
--font-mono: 'Courier New', 'Consolas', monospace;
--font-sans: -apple-system, 'PingFang SC', sans-serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
视觉特征（六要素，缺一不可）
| 特征 | 实现方式 |
|---|
| // 双斜杠标识 | Logo、节标题前缀、页脚均使用 //，颜色 var(--yellow)，font-weight: 900 |
| 白色导航栏 | background: var(--white)，border-bottom: 1px solid var(--border)，active tab 下方 2px 黄线 |
| Display 大字 | Hero 标题 clamp(76px, 12.5vw, 164px)，font-weight: 900，letter-spacing: -4px，行高 0.86 |
| 黄色实色块 | background: var(--yellow) 标签块/右侧装饰条/CTA hover，不用黄色描边 |
| 等宽字体克制使用 | var(--font-mono) 仅用于命令标签、版本号、代码块；标题/正文/nav 一律用 var(--font-sans) |
| 精工 HUD 框 | border: 1px solid var(--border) 功能框，四角 L 形装饰线（SVG 或 pseudo element），无背景色 |
导航结构
现在的页面是单页锚点滚动，不用 Tab 切换系统。Nav 包含：
- 左：
// AI_PM 品牌 + 版本号
- 中：锚点链接（快速开始 / 技能列表 / 工作流）
- 右：实时时钟 + 在线状态点
#hud-nav {
position: fixed; top: 0; left: 0; right: 0;
height: 54px;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.brand-slash { color: var(--yellow); font-weight: 900; font-size: 20px; }
.hud-tab.active::after {
background: var(--yellow);
}
微交互清单（所有必须实现）
- Hero 标题分行打字效果（setTimeout 链式）
- 统计数字从 0 计数到目标值（countUp on IntersectionObserver）
- 技能卡片 hover → 轻微上移 -3px + 淡黄色底
- DEPLOY 按钮点击 → 黄底黑字反色 + "✓ COPIED" 文字
- CTA 按钮 hover → 黄底反转
- Scroll Reveal（IntersectionObserver，threshold: 0.12）
- 涟漪点击效果（ripple-wave）
- 代码块 COPY 按钮
- 导航锚点平滑滚动
- 实时时钟（每秒更新）
- 触摸滑动不再用于 Tab 切换（锚点模式不适用）
核心约束
技术架构（纯原生）
✅ 零 JavaScript 框架依赖（无 Vue/React/Angular）
✅ 零外部 CDN 依赖
✅ 所有 CSS 内联在 <style>
✅ 所有 JS 内联在 <script>（原生 JS）
✅ 无本地文件依赖
✅ 完全离线可用（无需网络）
✅ 双击 HTML 即可打开，无需服务器
✅ 文件可拷贝到任何地方独立运行
技术实现
| 组件 | 方案 | 大小 |
|---|
| 交互框架 | 原生 JavaScript | ~3KB |
| 动画系统 | CSS3 + IntersectionObserver | ~2KB |
| 样式系统 | CSS Variables + Flex/Grid | ~15KB |
| 总计 | - | ~20KB + 内容 |
页面架构
单页锚点滚动结构
┌─────────────────────────────────────────────────────────┐
│ // AI_PM │ 快速开始 技能列表 工作流 │ 时钟 ● │ ← 固定导航 54px
├─────────────────────────────────────────────────────────┤
│ │
│ #hero 白底 · //AI/PRODUCT/MANAGER 大字 · 右侧黄条 │
│ │
├─────────────────────────────────────────────────────────┤
│ #quickstart 浅灰底 · 步骤卡片 3列 auto-fill grid │
├─────────────────────────────────────────────────────────┤
│ #skills 白底 · 技能卡片网格 │
├─────────────────────────────────────────────────────────┤
│ #workflow 浅灰底 · 横向时间轴 │
├─────────────────────────────────────────────────────────┤
│ #footer 深色 #1E1E1E · // AI_PM v2.x │
└─────────────────────────────────────────────────────────┘
Section 结构
| Section | 背景色 | 主要内容 |
|---|
#hero | --white | 大字标题 + 副标题 + 统计数字 + CTA |
#quickstart | --light | 3步快速开始卡片（步骤序号+黄色标签） |
#skills | --white | 所有技能卡片网格（分类展示） |
#workflow | --light | 横向工作流时间轴（hover 显示说明） |
#footer | --dark | // 品牌 + 版本 + 版权 |
交互特性
实现细节（Scroll Reveal 双层动画、ScrollSpy、实时时钟）见 → references/interactions.md
关键要点：
- Scroll Reveal 用两套 Observer（threshold 0.25 标题 / 0.1 内容），产生层次感
- ScrollSpy 需要
_navLock 机制，防止点击导航后 scroll 事件覆盖高亮
- 实时时钟挂
hud-clock 元素，每秒更新
使用方式
/tutorial-center-update
/tutorial-center-update preview
/tutorial-center-update sync
/tutorial-center-update validate
./.claude/skills/tutorial-center-update/validate-html.sh
⚠️ 核心原则：增量更新，不重写
现有 AI_PM_教程中心.html 是经过多轮打磨的复杂文件（1700+ 行），包含 SVG 六边形工作流节点、稀有度色条、暗色代码块、汉堡移动导航、速查表、Back-to-top 等组件。每次更新必须增量编辑，绝对不能整体重写。
强制执行步骤（违反即视为错误）
- 先读文件：用 Read 工具读取
AI_PM_教程中心.html，记录当前行数
- 识别差异：对比 skill 列表变化、persona 变更、版本号更新等，明确需要改哪几处
- 精准 Edit：用 Edit 工具做局部插入/替换，每次只改需要改的内容
- 禁止 Write：不得用 Write 工具覆盖整个文件，不得从空白重新生成 HTML
- 验证行数：编辑后文件行数必须 ≥ 原始行数（新增内容会增加行数，不应大幅减少）
什么情况才允许重写？
只有在用户明确说"我知道会丢失现有样式，请从头生成新版本"时，才可以整体重写。普通的"更新教程中心"指令 = 增量更新，不是重写。
工作流程
Phase 1: 扫描 Skills
find .claude/skills -name "SKILL.md" -type f
提取每个 skill：
name - 技能名称description - 第一行描述command - 主命令icon - Emoji 图标category - 分类（产品/设计/数据/协作/工具）
已知技能列表（技能 Tab 展示顺序）
| 命令 | 名称 | 分类 | 说明 |
|---|
/ai-pm | AI_PM 主控 | 产品 | 完整产品流程，从需求到原型 |
/ai-pm-priority | 需求优先级评估 | 产品 | 批量评分、排序、生成回复模板 |
/ai-pm-weekly | 工作周报 | 产品 | 自动整理工作内容，生成结构化周报 |
/ai-pm-interview | 现场调研 | 产品 | 线下客户访谈，实时生成 PRD |
/ai-pm-data | 数据洞察 | 数据 | 数据分析、仪表盘、需求发现 |
/ai-pm-persona | 产品分身 | 产品 | 学习写作风格，让 AI 像你一样写 PRD |
/ai-pm-design-spec | 设计规范 | 设计 | 加载公司 UI 规范，统一原型风格 |
/ai-pm-knowledge | 产品知识库 | 工具 | 沉淀经验，搜索历史决策 |
/ai-pm-analyze | 需求分析 | 产品 | 深入分析需求，挖掘用户画像 |
/ai-pm-research | 竞品研究 | 产品 | 市场对标，识别差异化机会 |
/ai-pm-story | 用户故事 | 产品 | 生成用户故事和验收标准 |
/ai-pm-prd | PRD 生成 | 产品 | 输出完整产品需求文档 |
/ai-pm-prototype | 原型生成 | 设计 | 生成可交互 HTML 原型 |
/ai-pm-review | 需求评审 | 产品 | 六角色评审（产品/设计/前端/后端/测试/运营），支持多轮迭代 |
/agent-team | 多代理引擎 | 协作 | 内部引擎，通常由 /ai-pm --team 触发，也可直接调用 |
/tutorial-center-update | 教程中心更新 | 工具 | 扫描技能，生成离线 HTML 教程 |
注意：不包含 ai-pm-config（已移除）。扫描到未在上表中的 SKILL.md 时，按文件元数据自动补充到列表末尾。
Phase 2: 更新 HTML（增量）
执行前必做：
1. Read AI_PM_教程中心.html → 记录行数（期望 1700+）
2. 对比差异：
- 新增/删除了哪些 skill 卡片？
- persona / 版本号是否变更？
- 导航锚点是否需要调整？
3. 仅对有差异的部分执行 Edit
常见增量操作示例：
| 需要更新的内容 | 操作 | 注意事项 |
|---|
| 新增 skill 卡片 | Edit：在对应 tab 末尾插入新 <div class="skill-card"> | 复制相邻卡片格式，data-delay 递增 |
| 修改 persona 说明 | Edit：找到 hero 中的 badge 文本，局部替换 | 保留 animation/style 不变 |
| 更新版本号 | Edit：找 v2.x.x 字符串，精准替换 | 同步更新 footer + changelog |
| 删除 skill | Edit：删除对应 <div class="skill-card"> 块 | 不影响其他卡片的 data-delay |
如需了解现有 HTML 的完整结构（如首次接触此文件），参考以下骨架：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI_PM - AI 产品经理</title>
<style>
:root { }
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<nav class="nav">
<div class="nav-logo">AI_PM</div>
<div class="nav-tabs">
<button class="nav-tab active" data-tab="0">首页</button>
<button class="nav-tab" data-tab="1">技能</button>
<button class="nav-tab" data-tab="2">指南</button>
<button class="nav-tab" data-tab="3">工作流</button>
<button class="nav-tab" data-tab="4">关于</button>
</div>
</nav>
<div class="tab-panels">
<div class="tab-panel active" data-panel="0">
</div>
<div class="tab-panel" data-panel="1">
</div>
</div>
<script>
(function() {
'use strict';
})();
</script>
</body>
</html>
Phase 3: 全量自检
静态检查：
运行时检查（可选，用 Playwright MCP）：
Phase 4: 交付
输出文件：
AI_PM_教程中心.html - 单一文件，完全离线可用
验证报告：
=== 生成验证报告 ===
✓ 文件大小: ~80KB
✓ 零外部依赖
✓ 技能数量: N
✓ Tab 导航: 5个
✓ 交互特性: 键盘/触摸/进度条/动画
✓ 所有检查通过
结论: HTML 文件完全独立，可离线运行
详细文档
故障排查
| 问题 | 原因 | 解决 |
|---|
| 更新后页面大幅简化，组件丢失 | 用 Write 整体重写了 HTML | 从备份恢复（AI_PM_教程中心V2.html），改用 Edit 增量编辑 |
| 更新后行数从 1700+ 降至 600- | 同上，整体重写 | 同上 |
| Tab 不切换 | JS 语法错误 | 检查 switchTab 函数 |
| 动画不生效 | CSS 类名错误 | 检查 reveal/visible 类 |
| 进度条不动 | 滚动事件未触发 | 检查 scroll 监听器 |
| 键盘无效 | 焦点在输入框 | 点击页面空白处再试 |
内容规范
更新日志（Changelog）原则
重要：教程中心 HTML 文件自身的更新不纳入更新日志中。
更新日志应只包含：
- ✅ AI_PM 技能的变更（新增/删除/修改）
- ✅ 功能特性的增删改
- ✅ 工作流程的变化
- ✅ 配置选项的变更
更新日志不应包含：
- ❌ 教程中心 UI 的更新
- ❌ HTML 文件结构的调整
- ❌ 样式或交互的优化
- ❌ 视觉效果的改进
文案风格与用词规范
语气与语调
- 友好专业：像一位经验丰富的导师，而非冷漠的文档
- 简洁有力：避免冗长，直击要点
- 鼓励性：让用户感到"我也能做到"
- 一致性：相同概念使用相同表述
推荐用词
| 推荐 | 避免 | 原因 |
|---|
| "开始体验" | "开始使用" | 更有吸引力 |
| "引导你" | "帮助您" | 更亲切、平等 |
| "产出" | "生成" | 强调结果而非过程 |
| "技能" | "功能" | AI_PM 特有术语 |
| "全流程" | "一站式" | 更专业 |
避免用词
- ❌ "简单"、"容易" - 暗示用户可能做不到
- ❌ "只需要" - 可能低估复杂度
- ❌ "等等"、"..." - 不完整的列举
- ❌ 技术缩写（除非已解释）
技能卡片规范
每个技能卡片必须包含：
- 图标：Emoji，22-28px
- 名称：2-4 个汉字，简洁有力
- 命令：完整的命令格式
- 简短描述：一句话说明核心功能（15 字以内）
可选增强内容：
5. 使用场景：2-3 个典型场景（高频/痛点/入门）
6. 示例：1 个完整的实际案例（场景+命令+结果）
技能描述模板
名称: AI_PM 主控
命令: "/ai-pm"
图标: 🎯
简短描述: 完整产品流程，从需求到原型
使用场景:
- 全新项目启动，需要全流程指导（高频）
- 快速验证一个产品想法（痛点）
- 初学者体验 AI_PM 的最佳入口（入门）
示例:
场景: 你想做一个记账小程序
命令: /ai-pm "我想做一个记账小程序，帮助年轻人管理日常开支"
结果: AI 会引导你完成需求澄清，然后自动分析、研究、生成 PRD 和原型
场景描述规范
每个技能必须提供 3 类使用场景：
- 高频场景 - 最常用的场景
- 痛点场景 - 解决具体问题的场景
- 入门场景 - 新手第一次使用的场景
场景描述格式：
示例案例规范
每个示例必须包含：
- 标题：场景名称（4-6 个字）
- 背景：一句话描述当前情况
- 命令：完整的可执行命令
- 结果：明确说明产出物
Editorial Endfield 排版原则
详细排版规范、字体表、关键组件 CSS 见 → references/design-system.md
关键约束速查：
- 步骤卡片网格必须用
auto-fit（不能用 auto-fill，否则宽屏留白）
- 最低可读字号 10px（装饰性全大写标签）；正文最低 12px
- 字体栈：正文/标题用
--font-sans，命令/代码用 --font-mono
- Section 英文标签：quickstart→
GETTING STARTED，skills→SKILL MANIFEST，workflow→OPERATION FLOW
更新日志
| 版本 | 日期 | 变更 |
|---|
| 5.1 | 2026-03-11 | 像素级对齐终末地实测值：yellow #fffa00、dark #191919、text #141414；双语 Section 标题系统（label-block 滑入 + sec-cn 淡入）；双层 ScrollReveal（headers/content 分离）；导航 _navLock 机制修复最后 section 不高亮；全页字号审查（清除所有 9px，最低 10px）；steps-grid auto-fill→auto-fit |
| 5.0 | 2026-03-11 | 设计语言迁移至终末地官网 Editorial × 精工细节：白底、大字、// 斜杠、黄色实色块、锚点滚动替代 Tab 导航 |
| 4.0 | 2026-03-11 | 构成主义×包豪斯×明日方舟风格重设计（已废弃） |
| 3.0 | 2026-03-03 | 纯原生架构，Tab 导航，Scroll Reveal，键盘/触摸支持 |
| 2.1 | 2026-03-03 | Vue 3 + CDN 架构（已废弃） |
| 2.0 | 2026-03-03 | 完全内联架构（已废弃） |
| 1.0 | 2026-03-01 | 初始版本 |
关键原则: 生成的 HTML 必须是纯原生、零依赖的单一文件，完全离线可用。设计风格固定为终末地官网 Editorial × 精工细节：白底大字、// 斜杠、黄色实色块、深色页脚，不得使用扫描线、菱形、深蓝黑导航等旧游戏 HUD 元素。
