Run any Skill in Manus with one click

tutorial-center-update

AI_PM 教程中心自动化更新 Skill。扫描所有 skills，增量更新单一 HTML 文件，完全离线可用。当用户说「更新教程中心」「刷新教程」「教程中心过期了」「新增了技能需要更新文档」「同步技能列表到教程」时，立即使用此技能。注意：必须增量编辑，禁止整体重写。

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/K3tty5555/AI_PM --skill tutorial-center-update

Copy and paste this command into Claude Code to install the skill

Source

K3tty5555/AI_PM

Stars2

Forks0

UpdatedJune 2, 2026 at 07:32

File Explorer

8 files

SKILL.md

readonly

教程中心自动化更新

概述

本 Skill 生成完全独立、纯原生的教程中心 HTML 文件：

扫描阶段 - 发现所有 skills，提取元数据
生成阶段 - 构建 Editorial Endfield 风格单一 HTML 文件（零依赖）
自检阶段 - 执行全量代码验证，确保可正常运行
交付阶段 - 输出完全离线可用的 HTML 文件

设计系统（必须遵守）

风格定位

终末地官网 Editorial × 精工细节：纯白底色，极大无衬线 Display 字体，// 双斜杠作为核心装饰，黄色 #FFD700 仅用于实色块（非描边），深色页脚对比。开阔、明亮、精工感。

禁止：扫描线、菱形装饰、深蓝黑导航、游戏 HUD 风、#1A1A2E 暗色底、clip-path 多边形卡片。

调色板

颜色值来自终末地官网 CSS 实测（2026-03-11），与目测/拾色器有差异，以下为准。

:root {
  --white:       #FFFFFF;              /* 主背景（Hero/Nav/卡片区） */
  --light:       #F5F5F5;              /* 次背景（交替 section） */
  --dark:        #191919;              /* 页脚/深色块（实测值，非 #1E1E1E） */
  --dark2:       #252525;              /* 页脚次层 */
  --yellow:      #fffa00;              /* 主强调色——实色块，非描边（实测值，非 #FFD700） */
  --yellow-dim:  rgba(255,250,0,0.08); /* 悬浮底高亮 */
  --border-y:    rgba(255,250,0,0.5);  /* 黄色边框（如 code-block 左侧线） */
  --text:        #141414;              /* 正文（实测值，非 #424242） */
  --text-title:  #141414;              /* 标题（同正文，高对比） */
  --text-muted:  #6b6b6b;              /* 辅助说明（实测值，非 #757575） */
  --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);
  /* 无暗色背景，无扫描光，无 HUD 效果 */
}
.brand-slash { color: var(--yellow); font-weight: 900; font-size: 20px; }
.hud-tab.active::after {
  background: var(--yellow);  /* 2px 底线，非整个 tab 高亮 */
}

微交互清单（所有必须实现）

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

# 验证现有 HTML
/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>

    <!-- 内联 CSS -->
    <style>
        :root { /* CSS Variables */ }
        /* Scroll Reveal 动画 */
        /* Tab 样式 */
        /* 响应式布局 */
    </style>
</head>
<body>
    <!-- 进度条 -->
    <div class="progress-bar" id="progressBar"></div>

    <!-- Tab 导航 -->
    <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>

    <!-- Tab 内容 -->
    <div class="tab-panels">
        <div class="tab-panel active" data-panel="0">
            <!-- Tab 1: 首页 -->
        </div>
        <div class="tab-panel" data-panel="1">
            <!-- Tab 2: 技能 -->
        </div>
        <!-- ... -->
    </div>

    <!-- 原生 JavaScript -->
    <script>
        (function() {
            'use strict';
            // Tab 切换逻辑
            // 键盘/触摸支持
            // Scroll Reveal
            // 进度条
        })();
    </script>
</body>
</html>

Phase 3: 全量自检

静态检查：

运行时检查（可选，用 Playwright MCP）：

Phase 4: 交付

输出文件：

AI_PM_教程中心.html - 单一文件，完全离线可用

验证报告：

=== 生成验证报告 ===
✓ 文件大小: ~80KB
✓ 零外部依赖
✓ 技能数量: N
✓ Tab 导航: 5个
✓ 交互特性: 键盘/触摸/进度条/动画
✓ 所有检查通过

结论: HTML 文件完全独立，可离线运行

详细文档

generator.md - HTML 生成器规范
validator.md - 验证流程和自检机制
references/design-system.md - 字体/排版/关键组件 CSS 规范（需要调试样式时读取）
references/interactions.md - Scroll Reveal / ScrollSpy / 时钟 JS 实现（需要调试交互时读取）
agent-review.md - Agent Team 调优流程（可选）

故障排查

问题	原因	解决
更新后页面大幅简化，组件丢失	用 Write 整体重写了 HTML	从备份恢复（`AI_PM_教程中心V2.html`），改用 Edit 增量编辑
更新后行数从 1700+ 降至 600-	同上，整体重写	同上
Tab 不切换	JS 语法错误	检查 switchTab 函数
动画不生效	CSS 类名错误	检查 reveal/visible 类
进度条不动	滚动事件未触发	检查 scroll 监听器
键盘无效	焦点在输入框	点击页面空白处再试

内容规范

更新日志（Changelog）原则

重要：教程中心 HTML 文件自身的更新不纳入更新日志中。

更新日志应只包含：

✅ AI_PM 技能的变更（新增/删除/修改）
✅ 功能特性的增删改
✅ 工作流程的变化
✅ 配置选项的变更

更新日志不应包含：

❌ 教程中心 UI 的更新
❌ HTML 文件结构的调整
❌ 样式或交互的优化
❌ 视觉效果的改进

文案风格与用词规范

语气与语调

友好专业：像一位经验丰富的导师，而非冷漠的文档
简洁有力：避免冗长，直击要点
鼓励性：让用户感到"我也能做到"
一致性：相同概念使用相同表述

避免用词

❌ "简单"、"容易" - 暗示用户可能做不到
❌ "只需要" - 可能低估复杂度
❌ "等等"、"..." - 不完整的列举
❌ 技术缩写（除非已解释）

技能卡片规范

每个技能卡片必须包含：

图标：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 元素。

推荐	避免	原因
"开始体验"	"开始使用"	更有吸引力
"引导你"	"帮助您"	更亲切、平等
"产出"	"生成"	强调结果而非过程
"技能"	"功能"	AI_PM 特有术语
"全流程"	"一站式"	更专业

推荐	避免	原因
"开始体验"	"开始使用"	更有吸引力
"引导你"	"帮助您"	更亲切、平等
"产出"	"生成"	强调结果而非过程
"技能"	"功能"	AI_PM 特有术语
"全流程"	"一站式"	更专业

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

tutorial-center-update

More from this repository

More from this repository

教程中心自动化更新

概述

设计系统（必须遵守）

风格定位

调色板

视觉特征（六要素，缺一不可）

导航结构

微交互清单（所有必须实现）

核心约束

技术架构（纯原生）

技术实现

页面架构

单页锚点滚动结构

Section 结构

交互特性

使用方式

⚠️ 核心原则：增量更新，不重写

强制执行步骤（违反即视为错误）

什么情况才允许重写？

工作流程

Phase 1: 扫描 Skills

已知技能列表（技能 Tab 展示顺序）

Phase 2: 更新 HTML（增量）

Phase 3: 全量自检

Phase 4: 交付

详细文档

故障排查

内容规范

更新日志（Changelog）原则

文案风格与用词规范

语气与语调

推荐用词

避免用词

技能卡片规范

技能描述模板

场景描述规范

示例案例规范

Editorial Endfield 排版原则

更新日志

教程中心自动化更新

概述

设计系统（必须遵守）

风格定位

调色板

视觉特征（六要素，缺一不可）

导航结构

微交互清单（所有必须实现）

核心约束

技术架构（纯原生）

技术实现

页面架构

单页锚点滚动结构

Section 结构

交互特性

使用方式

⚠️ 核心原则：增量更新，不重写

强制执行步骤（违反即视为错误）

什么情况才允许重写？

工作流程

Phase 1: 扫描 Skills

已知技能列表（技能 Tab 展示顺序）

Phase 2: 更新 HTML（增量）

Phase 3: 全量自检

Phase 4: 交付

详细文档

故障排查

内容规范

更新日志（Changelog）原则

文案风格与用词规范

语气与语调

推荐用词

避免用词

技能卡片规范

技能描述模板

场景描述规范

示例案例规范

Editorial Endfield 排版原则