knowledge-site-creator
一句话生成任何领域的知识学习网站。AI自动理解主题、创作内容、生成页面、部署上线。适用于任何需要系统学习的知识领域：进化心理学、大模型术语、化学元素、历史事件等。
By joeseesun · 977 installs
npx skills add joeseesun/qiaomu-knowledge-site-creator --skill knowledge-site-creator
Source repository · Upstream listing
Knowledge Site Creator 通用知识学习网站生成器
AI理解主题，自动创作内容，生成网站，一键部署。
核心理念
设计系统优先 ：
复用设计语言（极简主义、配色、布局、交互模式）
不复用具体页面代码
AI根据主题重新创作所有内容
通用学习模式 （核心功能）：
闪卡（Flashcard） 快速记忆
学习（Learn） 渐进式学习
测试（Quiz） 知识检验
索引（Index） 快速查找
进度（Progress） 学习追踪
零模板依赖 ：
不再 cp r 复制模板
AI参考设计系统，生成新页面
所有文案、统计、介绍都由AI创作
触发方式
"生成一个XXX学习网站"
"创建XXX知识网站"
"做个XXX学习工坊"
示例：
"生成一个进化心理学概念学习网站"
"创建量子力学基础概念网站"
"做个中医经络穴位学习工坊"
工作流程
用户视角（一句话）
实施流程（AI执行）
Step 1: 理解主题
AI深入分析主题，输出主题分析：
思考问题 ：
这是什么领域？（学科分类、知识特点）
为什么重要？（学习价值、应用场景）
目标受众是谁？（背景、需求、痛点）
如何表达更好？（语言风格、案例选择）
Step 2: 生成数据 + 网站配置
⚠️ 关键 ：生成两个文件，不只是数据！
2.1 生成数据（wordData.js）
通用数据结构 ：
生成数量 ：默认20 30个，根据主题复杂度调整
2.2 生成配置（siteConfig.js）🆕
AI创作，完全适配主题 ：
AI创作原则 ：
hero.title : 简洁有力，3行，突出核心价值
hero.subtitle : 具体说明学什么，为什么学
stats : 真实、有说服力的数字，匹配主题特点
footer.tagline : 一句话点题，朗朗上口
footer.description : 2 3句，说清楚是什么、学什么、有什么用
Step 3: 参考设计系统，生成页面
⚠️ 不再复制模板！AI参考设计规范，生成新页面
3.1 设计系统参考
⚠️ 参考文档 ： references/design system.md 完整的设计规范
核心要点 ：
配色 ：黄色主题色 ( FBBF24)，灰色系文字和背景
字体 ：Inter字体族，代码用Courier New
风格 ：极简主义，大留白，清晰层级
组件 ：圆角卡片（12px），极浅阴影
间距 ：8px网格系统，Hero区96px留白
详细配色、字体、间距、组件样式见 design system.md
3.2 生成页面清单
⚠️ 功能参考 ：
references/core patterns.md 核心学习模式实现
references/code quality.md 代码质量标准（必须遵守）
references/seo best practices.md SEO优化指南 🆕
references/pwa setup.md PWA配置指南
代码质量要求 （强制）：
✅ 错误处理 ：所有 LocalStorage 操作必须有 try catch
✅ XSS 防护 ：使用 textContent/createElement，禁止直接 innerHTML 插入未转义数据
✅ DOM 安全 ：所有 DOM 操作前检查元素存在
✅ 避免全局污染 ：使用模块封装或 IIFE
详细规则见 references/code quality.md 。
AI参考设计系统，从零生成以下页面：
1. index.html 首页 🆕
Hero区：使用 siteConfig.hero.title/subtitle
动画演示：从 WordRoots 动态加载前5个（见core patterns.md §9）
统计卡片：使用 siteConfig.stats
CTA按钮：使用 siteConfig.cta
Footer：使用 siteConfig.footer
2. learn.html 学习页（见core patterns.md §5）
渐进式卡片展示
上一个/下一个导航
标记已掌握功能
3. flashcard.html 闪卡页（见core patterns.md §4）
卡片翻转动画
键盘快捷键（←→翻页，空格翻转）
进度显示
4. roots.html 索引页（见core patterns.md §7）
标题适配： ${itemName}索引
搜索框 + 筛选器
卡片网格布局
5. progress.html 进度页（见core patterns.md §8）
学习统计
已掌握列表
成就系统
6. root detail.html 详情页
概念详细说明
例子展示
测试题（见core patterns.md §6）
7. css/minimal.css 样式文件（见design system.md）
统一设计系统
响应式布局
8. js/storage.js 存储逻辑（见core patterns.md §3）
LocalStorage 进度管理
9. manifest.json PWA 配置（见pwa setup.md §1）🆕
App 名称、图标、主题色
支持安装到主屏幕
10. sw.js Service Worker（见pwa setup.md §2）🆕
缓存静态资源
支持离线访问
11. icon 192.png / icon 512.png PWA 图标 🆕
自动生成 ：使用 PIL 从配置生成（黄色背景 + 主题文字）
不要手动创建 ：AI 应自动用 Python PIL 生成
12. sitemap.xml 网站地图（见seo best practices.md §4）🆕
列出所有页面URL
提交到搜索引擎
13. robots.txt 爬虫指令（见seo best practices.md §5）🆕
允许/禁止抓取规则
Sitemap 位置声明
⚠️ 强制要求：所有 HTML 文件必须包含完整的 meta 标签
每个 HTML 文件的 <head 必须包含：
关键原则 ：
✅ 核心学习模式（闪卡、学习、测试）保持一致 参考 core patterns.md
✅ 设计风格（配色、字体、布局）保持一致 参考 design system.md
✅ 所有文案、标题、描述由AI根据主题创作
✅ 代码质量 ：必须遵守 code quality.md 标准（错误处理、XSS防护、DOM安全）🆕
✅ PWA 支持 ：manifest.json + Service Worker + 图标（离线访问、可安装）🆕
✅ SEO 优化 ：完整的 meta 标签 + sitemap.xml + robots.txt + 结构化数据 🆕
✅ 语义化 HTML ：正确使用 header, main, article, section 等标签 🆕
✅ 移动端优先 ：响应式设计 + viewport meta + 快速加载（< 3秒）🆕
❌ 不要硬编码特定领域的内容
Step 4: 创建项目结构
Step 5: 数据验证（强制质量检查）
⚠️ 关键 ：AI 生成的数据必须经过完整验证，确保质量和一致性
Step 6: 部署（强制安全检查）
⚠️ 关键 ：每个项目必须独立部署，绝不共享 GitHub 仓库
部署流程（必须严格按顺序执行） ：
安全原则（必须遵守） ：
1. ✅ 禁止 GitHub 关联 ：默认不连接 GitHub，避免仓库共享
2. ✅ 强制前置检查 ：部署前必须移除所有 Git 远程仓库
3. ✅ 强制后置验证 ：部署后必须检查 projectId 唯一性
4. ✅ 冲突自动检测 ：发现冲突立即报错，不允许继续
5. ✅ 完整日志记录 ：所有部署操作记录到 /tmp/
如果仍然发生冲突（极端情况） ：
如果验证通过但实际仍有问题，执行紧急修复：
成功输出模板
实施检查清单
AI 执行此 skill 时， 必须严格按顺序 完成：
[ ] 1. 理解主题 分析领域特点、价值、受众、表达方式
[ ] 2. 生成数据 创建 wordData.js（const WordRoots）
[ ] 3. 生成配置 🆕 创建 siteConfig.js（AI创作首页文案）
[ ] 4. 生成页面 🆕 参考设计系统，从零生成HTML（不复制模板）
[ ] 5. 创建项目 mkdir + 写入所有文件
[ ] 6. 验证数据 检查数据和配置文件完整性
[ ] 7. 安全部署 🔒 执行 Step 6 的完整部署流程（含前置检查 + 部署 + 后置验证）
[ ] 8. 返回信息 项目路径 + URL + 核心特性 + 安全检查结果
关键改进（相比旧版）
❌ 旧版问题
依赖模板复制（ cp r word root workshop ）
用 sed 粗暴替换文案
首页文案硬编码，不适配主题
动画示例写死英文单词
✅ 新版优势
零模板依赖，AI从零生成页面
AI理解主题后创作所有文案
首页完全适配主题特点
动画自动从数据加载
🎯 核心理念转变
注意事项
⚠️ 数据结构不变 ：
仍然使用 const WordRoots 和固定字段结构
这是核心学习模式（闪卡、学习、测试）的基础
⚠️ 设计风格保持 ：
极简主义、黄色主题色、Inter字体
这些是品牌识别度的保证
⚠️ AI自由发挥 ：
首页文案、统计数据、介绍文本
根据主题特点创作，不要千篇一律
Vercel 部署最佳实践 🆕
问题背景
Vercel 在部署时可能会自动连接 GitHub 仓库，导致多个项目共享同一个仓库，引发部署冲突：
新项目覆盖旧项目的部署
旧项目的 URL 失效
GitHub 仓库关联混乱
解决方案
1. 默认不连接 GitHub
2. 部署后验证
3. 发现冲突时的补救
如果部署后发现旧项目受影响：
故障排查清单
部署新项目后，必须检查：
[ ] 新项目的 .vercel/project.json 中的 projectId 是否唯一
[ ] 新项目的 Production URL 是否可以访问（HTTP 200）
[ ] 旧项目（如果存在）的 URL 是否仍然可访问
[ ] 部署日志中的 "Linked to" 信息是否正确
经验教训（真实生产事故）
事故时间线 ：2026 02 25
事故描述 ：
1. 生成 evolutionary psychology workshop （进化心理学），成功部署
2. 生成 design aesthetics workshop （设计美学），成功部署
3. 用户发现 word.qiaomu.ai （原词根词缀网站）显示的是进化心理学内容
4. 检查发现 word root workshop 项目的 Git 仓库被进化心理学内容覆盖
根本原因分析 ：
为什么会发生 ：
旧版 skill 使用 cp r word root workshop 复制模板
复制时连 .git/ 目录也一起复制了（包含远程仓库配置）
部署时 Vercel 检测到 Git 远程仓库，自动关联
多个项目关联同一个 GitHub 仓库，后部署的覆盖先部署的
损害范围 ：
⛔ word.qiaomu.ai（生产域名）显示错误内容
⛔ word root workshop 的 Git 历史被污染
⛔ 用户体验受损，需要紧急修复
紧急修复步骤 ：
彻底解决方案 （已在 Step 6 实施）：
1. 强制前置检查 ：部署前自动移除所有 Git 远程仓库
2. 强制后置验证 ：部署后检查 projectId 唯一性
3. 冲突自动检测 ：遍历所有项目，发现相同 projectId 立即报错
4. 完整日志记录 ：所有部署操作记录到 /tmp/
5. 零容忍策略 ：任何检测到的冲突都不允许继续
长期防范措施 ：
✅ 废弃模板复制机制（ cp r ），改用从零生成
✅ 在 Step 6 中实施强制安全检查
✅ 更新实施检查清单，明确"安全部署"步骤
✅ 文档中增加"经验教训"章节，防止后人重蹈覆辙
教训总结 ：
"Copy + Paste 是万恶之源。模板驱动看似高效，实则埋下了隐患。只有从零生成（设计系统驱动），才能确保每个项目真正独立。"
影响 ：
促使 skill 从"模板驱动"彻底重构为"设计系统驱动"
确立了"零模板依赖"的核心原则
建立了完善的部署安全检查机制
批量更新机制 🔄
使用场景
当 skill 的设计系统有更新（如 CSS bug 修复、样式改进）时，需要将更新同步到所有已部署的 workshop 项目。
典型场景 ：
CSS 样式修复：修复了响应式布局问题
设计改进：优化了卡片阴影、间距、配色
功能增强：添加了新的交互动效
安全更新：修复了 XSS 漏洞或其他安全问题
更新脚本
脚本位置 ： scripts/update css.sh
使用方法 ：
工作流程
脚本自动执行以下步骤 ：
1. 扫描项目 ：自动扫描 /Users/joe/Dropbox/code/ workshop
2. 智能对比 ：使用 cmp 命令对比 CSS 文件，跳过已是最新版本的项目
3. 安全备份 ：更新前自动备份旧 CSS 为 .backup 文件
4. Git 提交 ：自动 commit CSS 变更（commit message: chore: update CSS from skill template ）
5. 重新部署 ：调用 vercel prod yes 重新部署到生产环境
6. 失败回滚 ：如果部署失败，自动恢复备份的 CSS
7. 统计报告 ：输出更新统计（成功/跳过/失败项目数量）
使用示例
步骤 1：准备最新的 CSS
在 skill 目录中修复或改进 templates/minimal.css ：
步骤 2：预览将更新的项目
输出示例：
步骤 3：执行批量更新
输出示例：
安全特性
1. 智能跳过 ：自动跳过已是最新版本的项目，避免不必要的部署
2. 自动备份 ：更新前备份旧 CSS 为 .backup 文件
3. 失败回滚 ：部署失败时自动恢复备份
4. Git 记录 ：所有更新都有 Git commit，可追溯历史
5. 演练模式 ： dry run 模式让你先看看会更新什么
注意事项
⚠️ 更新前检查 ：
确保 templates/minimal.css 已经过测试
使用 dry run 先预览将更新的项目
检查是否有项目正在被用户访问（避免高峰期更新）
⚠️ 更新后验证 ：
脚本完成后，随机抽查 2 3 个项目的网站
确认新样式生效且没有破坏布局
检查移动端显示是否正常
⚠️ 失败处理 ：
如果某个项目部署失败，脚本会自动回滚该项目的 CSS
失败的项目不影响其他项目的更新
可以手动进入失败的项目目录，使用 vercel prod yes 重试
扩展性
未来可扩展的更新类型 ：
当前脚本仅支持 CSS 更新，但同样的机制可以扩展到：
JavaScript 文件更新（ js/storage.js 等）
HTML 模板更新（如修复 meta 标签缺失）
配置文件更新（ vercel.json 等）
批量迁移（如数据结构变更）
扩展方法 ：参考 update css.sh 创建类似脚本，如 update storage.sh 、 update meta tags.sh 等。