【Skill 创作】StarMap：把你的知识变成一片可探索的星空
1、Skill 简介
StarMap（星图） 是一个将学习过程游戏化的知识管理 Skill。
它把你的知识领域可视化为一个动态星座图谱——每个知识点是一颗星星，学习就是在点亮星辰。AI 作为你的"星象导师"，通过"每日占星"为你指引学习方向，并智能发现知识盲区。
核心解决的问题：
学了就忘 → 
间隔重复算法 + 盲区预警- 无法形成知识体系 → 星图可视化 + 虫洞连接跨领域知识
- 缺乏学习动力 → 游戏化等级/成就系统
适合人群： 终身学习者、自学者、需要管理大量碎片化知识的知识工作者
2、使用场景
场景一：首次使用 - 初始化你的知识宇宙
你第一次打开 StarMap，说"初始化星图"
AI 引导你完成三步初始化：
- 选择领域：从清单中勾选你已涉猎的知识领域（编程、设计、语言、商业等）
- 标注掌握度：为每个领域选择等级（入门/进阶/熟练/精通）
- 设定目标（可选）：告诉 AI 你想学什么
AI 根据你的回答生成专属星图：
✨ 你的知识宇宙已创建！ 🎨 前端星系 ⭐ Lv.8（星座守护者） 已点亮：HTML、CSS、JavaScript、React、Vue（5 颗星星） 📊 统计数据 - 已点亮星星：13 颗 - 已探索星系：3 个 - 虫洞：0 个
场景二：每日占星 - 获取学习建议
你打开 SOLO，说"今日占星"
AI 回复：
🌟 今日星象 【星象总览】 你的前端星系正在扩张，React 星区光芒渐盛。 但数据结构星区已有 5 天未访问，星光黯淡。 【星象指引】 今日宜：深入 React Hooks 星区探索 今日忌：贸然踏入未知领域 【盲区预警】 ⚠️ 检测到 CSS Grid 与 Flexbox 之间连接薄弱 建议：补充学习现代 CSS 布局技术（预计 20 分钟）
场景三：记录学习 - 点亮新星星
你粘贴了一篇关于 React Hooks 的文章
AI 分析内容，更新星图：
✨ 星图更新报告 【新发现】 React Hooks 星已点亮！⭐ 【星域连接】 检测到与 JavaScript 闭包星形成连接 虫洞通道已建立 🌌 【等级提升】 🎉 恭喜！【前端星系】等级提升至 Lv.12！ 【获得经验】 +50 XP（掌握新概念） +20 XP（建立跨领域连接） 总计：+70 XP
场景四：查看星图 - 可视化你的知识宇宙
你说"查看星图"
AI 生成一个独立的 HTML 文件，包含：
- 动态背景星空：120+ 颗闪烁的星星
- 星座区域：各领域的光晕效果（用 radial-gradient 实现）
- 知识星星：根据掌握度显示不同亮度（金色/蓝色/灰色）
- 知识连线：SVG 动画展示知识点关联
- 虫洞：紫色脉冲动画展示跨领域连接
- 仪表盘：统计卡片、领域等级、成就展示
在对话中输出摘要：
🗺️ 你的知识星图已生成！ 📊 快速概览 ⭐ 已点亮星星：47 颗 🌌 知识连接：89 条 🔥 连续学习：5 天 🏆 解锁成就：12 个 🌐 完整星图已保存，请在浏览器中打开查看： [查看知识星图](starmap_20260519.html)
场景五：制定目标 - 规划学习路线
你说"我想在 3 个月内掌握全栈开发"
AI 生成"探险路线图"：
🗺️ 探险路线：从零到全栈开发者 【当前位置】 前端星系 Lv.12 | 后端星系 Lv.3 | 数据库星系 Lv.1 【推荐路线】 第一阶段（第 1-4 周）：巩固前端，点亮 Node.js 星区 第二阶段（第 5-8 周）：深入后端，建立 API 设计知识体系 第三阶段（第 9-12 周）：数据库与部署，打通全栈链路 【Boss 关卡】 🏰 关卡 1：用 React + Node 完成一个 CRUD 项目 🏰 关卡 2：设计并优化一个数据库 schema 🏰 关卡 3：部署完整应用到云服务器
场景六：攻克盲区 - 补齐薄弱环节
AI 预警或你主动询问"我哪里还不会"
AI 扫描知识结构，输出盲区报告：
🔍 盲区探测报告 【高危盲区】⚠️ 1. JavaScript 异步编程星区 - 缺失：Promise、async/await 深入理解 - 影响：阻碍 React 高级特性学习 - 建议：优先攻克（预计 2 小时） 【盲区统计】 总盲区数：7 个 | 高危盲区：2 个 | 预计攻克时间：12 小时
3、创作过程
灵感来源
作为一个长期自学者，我一直有三个痛点：
- 收藏夹吃灰 - 看到好文章就收藏，但再也没看过
- 学了就忘 - 看完一本书，过一个月只记得书名
- 知识碎片化 - 学了很多，但都是孤立的点，无法形成体系
我尝试过各种笔记软件、知识管理工具，但都觉得太"工具化"了，缺乏让人持续使用的动力。
直到有一天，我突然想到：如果把学习变成一场游戏呢？
第一轮：概念验证
我先用自然语言跟 SOLO 描述了我的想法：
“我想做一个知识管理的 Skill，把学习游戏化。每个知识点是一颗星星，学习就是点亮星星。要有等级、成就、每日任务…”
SOLO 帮我梳理出了核心概念：
- 星星 = 知识点
- 星座 = 知识领域
- 亮度 = 掌握程度
- 虫洞 = 跨领域连接
第二轮：设计游戏机制
我深入研究了游戏化设计，确定了几个核心机制：
经验值系统
| 行为 | 获得 XP |
|---|---|
| 点亮新星星 | +50 |
| 提升掌握度（每 10%） | +10 |
| 建立连接 | +20 |
| 建立虫洞（跨领域连接） | +50 |
| 攻克盲区 | +100 |
| 完成 Boss 关卡（教学输出） | +200 |
等级系统
- 每级需要 XP = 100 × 当前等级
- 等级称号：星尘探索者 → 星光学徒 → 星座守护者 → 星系领航员 → 宇宙探险家 → 知识星主
成就系统
分为探索类、挑战类、坚持类三大类别，共 11 个成就
第三轮：可视化设计与算法
这是最关键的一轮。SOLO 对话界面只能渲染 Markdown，无法展示 CSS 动画。因此我设计了一个数据驱动的 HTML 模板：
视觉效果实现
| 效果 | 技术 |
|---|---|
| 动态背景星空 | JS 生成 120+ 颗随机星星 + @keyframes twinkle |
| 星座区域光晕 | radial-gradient + @keyframes constellation-glow |
| 知识星星 | radial-gradient + box-shadow，按 mastery 分三档 |
| 知识连线 | SVG <line> + stroke-dasharray 流动动画 |
| 虫洞脉冲 | @keyframes wormhole-pulse 紫色光晕 |
智能算法
- 间隔重复算法：根据掌握度智能安排复习（每天/3天/7天/14天）
- 盲区检测算法：识别长时间未复习、缺乏连接、目标路径缺失的知识点
- 虫洞检测：自动发现跨领域知识连接
第四轮：关键修复 - 初始化流程
发现问题：用户第一次使用时没有初始化流程，直接使用预设数据。
解决方案：新增「工作流 0：初始化星图」
- 清单勾选式选择知识领域
- 4级掌握度标注（入门/进阶/熟练/精通）
- 根据用户回答生成专属初始星图
- 所有其他工作流增加前置检查，未初始化则引导先初始化
4、使用步骤
首次使用（必须）
初始化星图
AI 引导你完成三步初始化，创建专属知识宇宙。
日常使用
今日占星 # 获取今日学习建议
我学习了 xxx # 记录学习，点亮星星
查看星图 # 生成可视化星图 HTML
我想学习 xxx # 制定学习目标，规划路线
攻克盲区 # 检测并补齐薄弱环节
重新初始化 # 更新知识储备（可选）
5、效果展示
初始化流程
每日占星
🌟 今日星象
【星象总览】
你的前端星系正在扩张，React 星区光芒渐盛。
但数据结构星区已有 5 天未访问，星光黯淡。
【星象指引】
今日宜：深入 React Hooks 星区探索
今日忌：贸然踏入未知领域
【盲区预警】
⚠️ 检测到 CSS Grid 与 Flexbox 之间连接薄弱
建议：补充学习现代 CSS 布局技术（预计 20 分钟）
【成就进度】
🎯 连续学习 7 天成就：还差 2 天
🎯 点亮 50 颗星星：当前 47/50
星图可视化（HTML 文件）
- 动态背景星空（120+ 闪烁星星）
- 星座区域光晕（各领域不同颜色）
- 知识星星（三档亮度）
- 知识连线（SVG 流动动画）
- 虫洞（紫色脉冲）
- 仪表盘 + 领域等级 + 成就
学习记录
✨ 星图更新报告
【新发现】
React Hooks 星已点亮！⭐
【星域连接】
检测到与 JavaScript 闭包星形成连接
虫洞通道已建立 🌌
【等级提升】
🎉 恭喜！【前端星系】等级提升至 Lv.12！
【获得经验】
+50 XP（掌握新概念）
+20 XP（建立跨领域连接）
总计：+70 XP
6、Skill 链接
GitHub：https://github.com/Tai-Yng/starmap-skill/tree/master
文件结构：
starmap-skill/
├── SKILL.md # Skill 定义文件（YAML frontmatter + Markdown）
├── README.md # 说明文档
├── templates/
│ └── starmap.html # 星图可视化模板（纯 CSS + JS，数据驱动）
├── data/
│ ├── knowledge_graph.json # 知识图谱数据（初始为空模板）
│ └── learning_log.json # 学习日志
└── scripts/
└── update_starmap.py # 星图更新脚本（可选）
7、功能实现清单
| 功能 | 状态 | 说明 |
|---|---|---|
| 工作流 0：初始化星图 | 已实现 |
清单勾选 + 掌握度标注 + 生成初始星图 |
| 工作流 1：每日占星 | 已实现 |
间隔重复算法 + 盲区预警 + 成就进度 |
| 工作流 2：记录学习 | 已实现 |
知识点提取 + XP 计算 + 升级检测 |
| 工作流 3：查看星图 | 已实现 |
生成独立 HTML 文件，包含完整 CSS 动画 |
| 工作流 4：制定目标 | 已实现 |
目标分析 + 路线规划 + Boss 关卡 |
| 工作流 5：攻克盲区 | 已实现 |
盲区扫描 + 优先级排序 + 攻克建议 |
| 工作流 6：重新初始化 | 已实现 |
增量更新知识储备 |
| 经验值系统 | 已实现 |
6 种 XP 获取方式 |
| 等级系统 | 已实现 |
6 个等级称号 |
| 成就系统 | 已实现 |
11 个成就，3 个类别 |
| 间隔重复算法 | 已实现 |
4 档复习间隔 |
| 盲区检测算法 | 已实现 |
3 种盲区类型识别 |
| 虫洞检测 | 已实现 |
自动发现跨领域连接 |
8、总结与思考
最满意的地方
1. 游戏化与实用性的平衡
不是简单的"为了游戏而游戏"，每个游戏机制都服务于学习目标。经验值、等级、成就都是为了让用户更愿意持续学习。
2. 真正的可视化
不是对话中的文字"假装"展示，而是生成独立的 HTML 文件，在浏览器中完整展示 CSS 动画效果。
3. 智能盲区检测
AI 能主动发现"你以为自己会了，其实快忘了"的知识点，真正做到防患于未然。
4. 个性化初始化
每个用户的星图都是基于其真实知识储备生成的，不是千篇一律的模板。
做得不够好的
1. 初始数据录入
目前需要手动选择领域和标注掌握度，如果能通过对话自然提取会更好。
2. 移动端体验
虽然做了响应式设计，但在小屏幕上星图的可读性还有待优化。
3. 社交功能
如果能看到朋友的星图、组队学习，会更有动力。但考虑到隐私，这部分需要谨慎设计。
后续想优化
- AI 内容解析 - 自动提取文章/视频的关键概念
- 知识推荐 - 基于星图结构推荐下一步学习内容
- 学习社区 - 安全的知识分享和组队功能
- 更多可视化 - 3D 星图、时间轴、能力雷达图等
创作感悟
做这个 Skill 最大的收获是：好的工具不是让人更努力，而是让人更愿意开始。
学习本身就是一件反人性的事（消耗能量、延迟满足），游戏化不是为了"欺骗"自己，而是为了降低启动门槛、提供持续反馈、创造成就感。
StarMap 的核心理念是：让学习成为一场探索知识宇宙的冒险。 每次打开它，不是面对"今天要学什么"的压力，而是"今天要去探索哪片星区"的期待。
希望这个 Skill 能帮助更多人找到学习的乐趣！
技术亮点
| 维度 | 实现方式 |
|---|---|
| 可视化 | 纯 CSS 实现，零外部依赖，数据驱动渲染 |
| 数据结构 | JSON 存储，支持增量更新，initialized 标记 |
| 游戏算法 | 经验值计算、等级系统、成就检测 |
| 学习算法 | 间隔重复（SM-2 简化版）、盲区检测 |
| 工程化 | 6 个工作流，完整的前置检查机制 |
让学习成为一场探索知识宇宙的冒险！ 