ORI帮你10min成为一个行业专家

> 作者：orionxzhang

> 输入一个领域，输出一部可交互的专业知识词典。

触发条件

当用户请求以下任一场景时，加载此 skill：

• 为某个专业领域构建知识库/词典
• 系统化整理某个方向的核心概念
• 生成可交互的 HTML 知识产品
• 提到"知识库"、"词典"、"赛道专家"、"术语库"等关键词

执行流程

Phase 0: 需求确认（30秒）

向用户确认以下参数（有默认值的可跳过）：

Phase 1: 架构设计

1. 章节规划：将目标领域拆分为 5-9 个互不重叠的章节（MECE 原则）
2. 认知递进：章节排列遵循 基础 → 进阶 → 高阶 → 跨域应用
3. 条目清单：每章规划 5-10 个条目，总量控制在 40-60 个
4. 输出：向用户展示章节+条目大纲，确认后进入 Phase 2

每个章节需有：

• id: slug 格式，用于锚点（如 asset-allocation）
• num: 两位编号（01-09）
• title: 中文标题
• desc: 一句话描述（定义这个章节解决什么问题）
• icon: SVG 内联图标（Feather/Lucide 风格）

Phase 2: 内容填充

按章节顺序编写 DATA 数组。每个条目包含以下字段：

{
  name: "术语中文名",           // 必填
  en: "English Term Name",     // 必填
  stars: 5,                    // 必填，1-5 星，决定排序权重
  updated: "2026-04-15",       // 必填，YYYY-MM-DD
  books: [                     // 可选，4-5星条目必须配备
    { title: "书名", author: "作者", url: "链接", quote: "核心引文" }
  ],
  quotes: [                    // 可选，1-2 句记忆金句
    "朗朗上口、有画面感的金句"
  ],
  desc: "核心定义，200字以内。用 <strong> 标记关键概念。",
  demo: '...HTML 字符串...'    // 必填，实战演示区
}

Demo 类型库（按条目特性选用，每条目至少用 2 种）

内容质量标准

条目筛选铁律：「一个中高级从业者，知道这个概念后，下周的工作方式会改变吗？」不会 → 不收录。

描述规范：

• 开头第一句独立成立，说清「是什么」
• 有经典提出者必须标注（如「Daniel Kahneman 提出」）
• 禁止：「在当今快速变化的时代」「非常重要」等空泛表述
• 每句话都有增量信息，删掉后应影响理解

Demo 规范：

• 案例用真实行业场景（但脱敏），不用 foo/bar/某公司
• 优先正反对照（好 vs 差），3 秒看到差异
• AI Prompt 用法可直接复制粘贴

金句标准：

• 朗朗上口、有节奏感（短句优先）
• 有画面感或类比
• 能在工作会议中直接引用

Phase 3: 产品集成

使用 references/template.html 作为 HTML 壳子模板。

关键替换点（用搜索替换完成）：

1. {{PRODUCT_NAME}} → 英文产品名（如 Ori's Financial Literacy Dictionary）
2. {{PRODUCT_DESC}} → 产品描述（中文，一段话）
3. {{PASSWORD}} → 密码（若用户未指定密码，则将模板中整个
   区块删除，并将 render() 调用移至 DOMContentLoaded 事件直接执行，跳过锁屏流程）
4. {{STORAGE_PREFIX}} → localStorage/sessionStorage 的键名前缀（如 fl 代表 financial literacy）
5. {{TAG_STATS}} → Hero 区的 Tag 统计 HTML
6. {{SEARCH_PLACEHOLDER}} → 搜索框占位文字（如 搜索理财概念...）
7. {{LOGO_SVG}} → 顶栏 logo 的 SVG path
8. {{DATA_ARRAY}} → 完整的 DATA 数组内容（不含 const DATA=[ 和 ]; 包裹）
9. {{DIAGRAM_MAP}} → 如有额外图示映射对象（默认为空 {}）

注意事项：

• DATA 数组中的字符串使用单引号 '...' 包裹
• Demo HTML 中的引号需要正确转义
• onclick 属性内部的引号使用 " 转义（已在模板中处理）
• 确保所有 SVG 图标使用 fill="none" stroke="currentColor" stroke-width="2" 风格

Phase 4: 质量校验

1. JS 语法校验：用 node -e "new Function(script)" 验证无语法错误
2. 脱敏检查：遍历所有条目，确认无真实个人信息泄露
3. 功能测试：（有密码时）密码解锁 →（无密码时）直接加载 → 深浅切换 → 搜索过滤 → 手风琴展开
4. 响应式：768px 以下侧边栏隐藏
5. 预览：使用 preview_url 展示最终效果

设计规范（硬性要求）

视觉体系

• 基调：去 AI 化、沉稳商务。全 SVG 图标，零 emoji
• 浅色：背景 #f8f7f4，强调色 #c45c3e，辅助色 #2d6a4f
• 深色：背景 #141413，强调色 #e07a5f，辅助色 #52b788
• 字体：-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Noto Sans SC", sans-serif
• 正文：15px / 1.7 行高 | h1: 32px | h2: 22px | h3: 17px
• 圆角：卡片 10px、按钮 6-8px

布局

• 顶栏 56px（毛玻璃 backdrop-filter:blur(12px)）
• 侧边导航 240px（搜索框 + 章节分组 + 条目链接）
• 主内容区 max-width 960px，居中
• 768px 以下隐藏侧边栏

交互

• 密码锁屏（sessionStorage 保持状态）
• 深浅色切换（localStorage 记忆偏好）
• 全局搜索（实时过滤，匹配中英文名+描述）
• 手风琴卡片展开/收起（fadeIn 动画）
• 侧边导航滚动高亮 + 点击跳转
• 回到顶部（400px 阈值）

举例脱敏规则（P0 级，不可覆盖）

所有条目中的案例和示例，严禁出现可识别的真实个人信息：

• 真实姓名 → 虚构角色名
• 公司名+职级组合 → 泛化描述
• 具体资产数额 → 量级描述
• 三重可交叉定位信息 → 最多保留一项

替代策略：角色化 > 泛化 > 变形 > 创造力优先

领域特化扩展

根据不同领域，可在模板基础上增加特化 CSS 变量：

输出产物

• 单个 HTML 文件，CSS/JS 全部内联，零外部依赖
• 文件大小控制在 200KB 以内
• 通过 preview_url 展示最终效果