菜单
一句话生成任何领域的知识学习网站。AI自动理解主题、创作内容、生成页面、部署上线。适用于任何需要系统学习的知识领域：进化心理学、大模型术语、化学元素、历史事件等。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/joeseesun/qiaomu-knowledge-site-creator --skill knowledge-site-creator命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | knowledge-site-creator |
| description | 一句话生成任何领域的知识学习网站。AI自动理解主题、创作内容、生成页面、部署上线。适用于任何需要系统学习的知识领域：进化心理学、大模型术语、化学元素、历史事件等。 |
| user_invocable | true |
AI理解主题，自动创作内容，生成网站，一键部署。
设计系统优先：
通用学习模式（核心功能）：
零模板依赖：
cp -r 复制模板示例：
用户："生成一个进化心理学学习网站"
AI自动执行：
✓ 分析"进化心理学"特点和价值
✓ 生成30个核心概念数据
✓ 创作首页文案、统计、介绍
✓ 参考设计系统生成页面
✓ 部署到 Vercel
✓ 返回：https://evolutionary-psychology.vercel.app
完成！
AI深入分析主题，输出主题分析：
主题分析 {
领域: "进化心理学",
特点: "跨学科（生物学+心理学），解释人类行为的底层逻辑",
价值: "理解人性、改善关系、优化决策",
受众: "心理学爱好者、自我提升者、教育工作者",
表达: "科学严谨 + 生活化案例，避免学术术语堆砌"
}
思考问题：
⚠️ 关键：生成两个文件，不只是数据！
通用数据结构：
const WordRoots = [
{
id: 1,
root: "适应性 (Adaptation)", // 知识点名称
origin: "核心理论", // 分类/来源
meaning: "通过自然选择进化出的有利特征", // 一句话解释
description: "详细说明（200-300字）...",
examples: [ // 应用案例/例子（3个）
{
word: "恐高症",
meaning: "对高处的恐惧",
breakdown: { root: "适应性" },
explanation: "详细解释..."
}
],
quiz: { // 小测试（4选1）
question: "以下哪个不是适应性的特征？",
options: ["选项A", "选项B", "选项C", "选项D"],
correctAnswer: 2 // 正确答案索引（0-3）
}
}
];
生成数量：默认20-30个，根据主题复杂度调整
AI创作，完全适配主题：
const siteConfig = {
// 基础信息
topic: "进化心理学",
siteName: "进化心理学概念工坊",
itemName: "概念", // 单个知识点的称呼
itemCount: 30,
// 首页Hero区（AI创作）
hero: {
title: [
"30个核心概念",
"理解人类行为",
"的底层逻辑"
],
subtitle: "从适应性到配偶选择，系统掌握进化心理学核心框架",
animation: {
enabled: true, // 是否显示动画
demoCount: 5 // 动画展示几个概念
}
},
// 统计卡片（AI生成，匹配主题特点）
stats: [
{ value: "30", label: "核心概念" },
{ value: "100+", label: "生活应用" },
{ value: "15分钟", label: "每日学习" }
],
// 底部介绍（AI创作）
footer: {
tagline: "像理解自己一样理解人性",
description: "基于进化心理学的科学框架，用30个核心概念解释人类行为背后的生物学逻辑。从配偶选择到亲子关系，从群体合作到情绪反应，让你看懂人性的深层原因。"
},
// 按钮文案（AI适配）
cta: {
primary: "开始第一个概念 →",
secondary: "闪卡复习"
}
};
AI创作原则：
hero.title: 简洁有力，3行，突出核心价值hero.subtitle: 具体说明学什么，为什么学stats: 真实、有说服力的数字，匹配主题特点footer.tagline: 一句话点题，朗朗上口footer.description: 2-3句，说清楚是什么、学什么、有什么用⚠️ 不再复制模板！AI参考设计规范，生成新页面
⚠️ 参考文档：references/design-system.md - 完整的设计规范
核心要点：
详细配色、字体、间距、组件样式见 design-system.md
⚠️ 功能参考：
references/core-patterns.md - 核心学习模式实现references/code-quality.md - 代码质量标准（必须遵守）references/seo-best-practices.md - SEO优化指南 🆕references/pwa-setup.md - PWA配置指南代码质量要求（强制）：
详细规则见 references/code-quality.md。
AI参考设计系统，从零生成以下页面：
index.html - 首页 🆕
siteConfig.hero.title/subtitleWordRoots 动态加载前5个（见core-patterns.md §9）siteConfig.statssiteConfig.ctasiteConfig.footerlearn.html - 学习页（见core-patterns.md §5）
flashcard.html - 闪卡页（见core-patterns.md §4）
roots.html - 索引页（见core-patterns.md §7）
${itemName}索引progress.html - 进度页（见core-patterns.md §8）
root-detail.html - 详情页
css/minimal.css - 样式文件（见design-system.md）
js/storage.js - 存储逻辑（见core-patterns.md §3）
manifest.json - PWA 配置（见pwa-setup.md §1）🆕
sw.js - Service Worker（见pwa-setup.md §2）🆕
icon-192.png / icon-512.png - PWA 图标 🆕
sitemap.xml - 网站地图（见seo-best-practices.md §4）🆕
robots.txt - 爬虫指令（见seo-best-practices.md §5）🆕
⚠️ 强制要求：所有 HTML 文件必须包含完整的 meta 标签
每个 HTML 文件的 <head> 必须包含：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${siteConfig.siteName}</title>
<!-- SEO 基础 -->
<meta name="description" content="${siteConfig.footer.description}">
<meta name="keywords" content="${siteConfig.topic},学习,知识,${siteConfig.itemName}">
<meta name="author" content="乔木">
<meta name="language" content="zh-CN">
<meta name="robots" content="index, follow">
<link rel="canonical" href="${currentPageUrl}">
<!-- Open Graph (社交分享) -->
<meta property="og:title" content="${siteConfig.siteName}">
关键原则：
# 项目位置
mkdir -p "/Users/joe/Dropbox/code/${topic}-workshop"
cd "/Users/joe/Dropbox/code/${topic}-workshop"
# 创建目录结构
mkdir -p js css
# 写入数据
cat > js/wordData.js << 'EOF'
const WordRoots = [...];
EOF
# 写入配置 🆕
cat > js/siteConfig.js << 'EOF'
const siteConfig = {...};
EOF
# 写入页面（AI生成的HTML）
cat > index.html << 'EOF'
[AI生成的index.html]
EOF
# 写入其他页面...
# 🆕 自动生成 PWA 图标（用 PIL）
python3 << 'PYEOF'
from PIL import Image, ImageDraw, ImageFont
def create_icon(size, filename, text):
# 创建黄色背景
img = Image.new('RGB', (size, size), color='#FBBF24')
draw = ImageDraw.Draw(img)
# 尝试使用系统字体
try:
font_size = int(size * 0.25)
font = ImageFont.truetype('/System/Library/Fonts/PingFang.ttc', font_size)
except:
font = ImageFont.load_default()
# 获取文字边界框
bbox = draw.textbbox((0, 0), text, font=font)
text_width = bbox[2] - bbox[0]
text_height = bbox[3] - bbox[1]
# 居中位置
x = (size - text_width) / 2
y = (size - text_height) / 2
# 绘制文字（深灰色）
draw.text((x, y), text, font=font, fill='#1F2937')
# 保存
img.save(filename, 'PNG')
# 从主题生成图标文字（取前2-3个字）
icon_text = "${siteConfig.itemName}"[:3] # 例如："概念" → "概念"、"历史知识点" → "历史知"
# 生成两种尺寸
create_icon(192, 'icon-.png', icon_text)
create_icon(, 'icon-.png', icon_text)
print("✓ PWA 图标生成完成")
PYEOF
⚠️ 关键：AI 生成的数据必须经过完整验证，确保质量和一致性
# ========================================
# 阶段 1：基础结构验证
# ========================================
echo "🔍 验证数据结构..."
# 1.1 检查数据文件存在且变量名正确
if ! grep -q "const WordRoots" js/wordData.js; then
echo "❌ 错误：数据变量名不正确（应为 const WordRoots）"
exit 1
fi
# 1.2 检查配置文件存在且变量名正确
if ! grep -q "const siteConfig" js/siteConfig.js; then
echo "❌ 错误：配置文件缺失（应为 const siteConfig）"
exit 1
fi
# ========================================
# 阶段 2：数据完整性验证
# ========================================
echo "🔍 验证数据完整性..."
# 2.1 使用 Node.js 进行深度验证
node -e "
const fs = require('fs');
// 读取数据文件
const dataContent = fs.readFileSync('js/wordData.js', 'utf-8');
eval(dataContent); // 加载 WordRoots
let errors = [];
let warnings = [];
// 验证数据存在
if (typeof WordRoots === 'undefined') {
console.error('❌ 严重错误：WordRoots 未定义');
process.exit(1);
}
if (!Array.isArray(WordRoots) || WordRoots.length === 0) {
console.error('❌ 严重错误：WordRoots 为空或不是数组');
process.exit(1);
}
console.log(\`📊 数据量：\${WordRoots.length} 个知识点\`);
// 遍历每个知识点进行验证
WordRoots.forEach((item, index) => {
const itemLabel = \`Item #\${item.id || index}\`;
// 必需字段检查
if (!item.id) errors.push(\`\${itemLabel}: 缺少 id\`);
if (!item.root || item.root.trim() === '') errors.push(\`\${itemLabel}: 缺少 root（知识点名称）\`);
if (!item.origin) warnings.push(\`\${itemLabel}: 缺少 origin（分类）\`);
if (!item.meaning || item.meaning.trim() === '') errors.push(\`\${itemLabel}: 缺少 meaning（简短解释）\`);
if (!item.description || item.description.trim() === '') errors.push(\`\${itemLabel}: 缺少 description（详细说明）\`);
// 描述长度检查（应该详细但不过长）
if (item.description && item.description.length < 50) {
warnings.push(\`\${itemLabel}: description 太短（<50字），建议扩展为200-300字\`);
}
if (item.description && item.description.length > 1000) {
warnings.push(\`\${itemLabel}: description 太长（>1000字），建议精简\`);
}
// 例子检查
if (!item.examples || !Array.isArray(item.examples)) {
errors.push(\`\${itemLabel}: 缺少 examples 数组\`);
} else if (item.examples.length < 3) {
errors.push(\`\${itemLabel}: examples 少于3个（当前 \${item.examples.length}）\`);
} else {
// 验证每个例子的结构
item.examples.forEach((ex, exIndex) => {
if (!ex.word) errors.push(\`\${itemLabel}.examples[\${exIndex}]: 缺少 word\`);
if (!ex.meaning) errors.push(\`\${itemLabel}.examples[\${exIndex}]: 缺少 meaning\`);
if (!ex.explanation) warnings.push(\`\${itemLabel}.examples[\${exIndex}]: 缺少 explanation\`);
});
}
// 测试题检查
if (!item.quiz) {
warnings.push(\`\${itemLabel}: 缺少 quiz（测试题）\`);
} else {
if (!item.quiz.question || item.quiz.question.trim() === '') {
errors.push(\`\${itemLabel}.quiz: 缺少 question\`);
}
if (!item.quiz.options || !Array.isArray(item.quiz.options)) {
errors.push(\`\${itemLabel}.quiz: 缺少 options 数组\`);
} else if (item.quiz.options.length !== 4) {
errors.push(\`\${itemLabel}.quiz: options 必须是4个（当前 \${item.quiz.options.length}）\`);
}
if (typeof item.quiz.correctAnswer !== 'number') {
errors.push(\`\${itemLabel}.quiz: correctAnswer 必须是数字\`);
} else if (item.quiz.correctAnswer < 0 || item.quiz.correctAnswer > 3) {
errors.push(\`\${itemLabel}.quiz: correctAnswer 越界（必须是0-3，当前 \${item.quiz.correctAnswer}）\`);
}
}
});
// 输出验证结果
if (errors.length > 0) {
console.error('\\n❌ 发现 ' + errors.length + ' 个错误：');
errors.slice(0, 10).forEach(e => console.error(' - ' + e));
if (errors.length > 10) console.error(\` ... 还有 \${errors.length - 10} 个错误\`);
process.exit(1);
}
if (warnings.length > 0) {
console.warn('\\n⚠️ 发现 ' + warnings.length + ' 个警告：');
warnings.slice(0, 5).forEach(w => console.warn(' - ' + w));
if (warnings.length > 5) console.warn(\` ... 还有 \${warnings.length - 5} 个警告\`);
}
console.log('\\n✓ 数据验证通过');
" || 1
node -e || 1
⚠️ 关键：每个项目必须独立部署，绝不共享 GitHub 仓库
部署流程（必须严格按顺序执行）：
# ========================================
# 阶段 1：部署前安全检查（必须执行）
# ========================================
# 1.1 检查并移除 Git 远程仓库（防止关联到其他项目的仓库）
if git remote -v 2>/dev/null | grep -q 'origin'; then
echo "⚠️ 警告：检测到 Git 远程仓库，立即移除以避免冲突"
git remote remove origin
echo "✓ 已移除 Git 远程仓库"
fi
# 1.2 初始化本地 Git（仅本地，不推送到 GitHub）
git init
git add .
git commit -m "Initial commit: ${siteName}"
# 1.3 列出所有现有 workshop 项目（用于后续验证）
echo "📋 现有项目列表："
ls -d /Users/joe/Dropbox/code/*-workshop 2>/dev/null | while read dir; do
PROJECT_NAME=$(basename "$dir")
if [ -f "$dir/.vercel/project.json" ]; then
PROJECT_ID=$(cat "$dir/.vercel/project.json" | jq -r '.projectId' 2>/dev/null || echo "unknown")
echo " - $PROJECT_NAME (projectId: $PROJECT_ID)"
fi
done
# ========================================
# 阶段 2：执行部署
# ========================================
echo "🚀 开始部署到 Vercel..."
vercel --prod --yes 2>&1 | /tmp/vercel-deploy-.
DEPLOY_STATUS=$?
[ -ne 0 ];
1
[ ! -f ];
1
NEW_PROJECT_ID=$( .vercel/project.json | jq -r )
NEW_PROJECT_NAME=$( .vercel/project.json | jq -r )
DEPLOY_URL=$(grep -E /tmp/vercel-deploy-. | grep -o | -1)
HTTP_STATUS=$(curl -s -o /dev/null -w || )
[ = ] || [ = ];
AFFECTED_PROJECTS=0
/Users/joe/Dropbox/code/*-workshop;
[ = ];
[ -f ];
OLD_PROJECT_NAME=$( )
OLD_PROJECT_ID=$( | jq -r 2>/dev/null)
[ = ];
AFFECTED_PROJECTS=$((AFFECTED_PROJECTS + ))
[ -gt 0 ];
1
VIEWPORT_CHECK=$(curl -s | grep -c )
[ -gt 0 ];
META_DESCRIPTION=$(curl -s | grep -c )
META_OG=$(curl -s | grep -c )
[ -gt 0 ];
[ -gt 0 ];
MOBILE_STATUS=$(curl -s -o /dev/null -w \
-H \
)
[ = ] || [ = ];
安全原则（必须遵守）：
如果仍然发生冲突（极端情况）：
如果验证通过但实际仍有问题，执行紧急修复：
# 1. 立即列出所有 Vercel 项目
vercel ls
# 2. 检查每个本地项目的部署状态
cd /Users/joe/Dropbox/code
for dir in *-workshop; do
echo "=== $dir ==="
cd "$dir"
if [ -f ".vercel/project.json" ]; then
cat .vercel/project.json | jq -r '.projectName, .projectId'
fi
cd ..
done
# 3. 重新部署受影响的项目
cd /path/to/affected-project
vercel --prod --yes
# 4. 向用户报告冲突详情和修复结果
✅ ${siteName} 已生成并部署！
📁 项目位置：${projectPath}
🌐 网站名称：${siteName}
📚 知识点数量：${itemCount}个
🔗 访问链接：${deployUrl}
🎯 核心特性：
- ✅ AI创作首页：根据主题生成标题、副标题、统计
- ✅ 动态动画：自动从数据加载，完全适配
- ✅ 通用学习模式：闪卡、渐进学习、测试、索引
- ✅ 极简设计：清晰的视觉层级，专注内容
🔧 下一步：
1. 打开网站查看效果
2. 审核AI生成的内容
3. 配置自定义域名（Vercel后台）
AI 执行此 skill 时，必须严格按顺序完成：
cp -r word-root-workshop）旧版：复制 + 替换
新版：理解 + 创作
旧版：模板驱动
新版：设计系统驱动
旧版：硬编码文案
新版：AI创作内容
⚠️ 数据结构不变：
const WordRoots 和固定字段结构⚠️ 设计风格保持：
⚠️ AI自由发挥：
Vercel 在部署时可能会自动连接 GitHub 仓库，导致多个项目共享同一个仓库，引发部署冲突：
1. 默认不连接 GitHub
# 仅使用本地 Git，不推送到 GitHub
git init
git add .
git commit -m "Initial commit"
vercel --prod --yes # 只部署，不连接 GitHub
2. 部署后验证
# 检查生成的 projectId 是否唯一
cat .vercel/project.json
# 应该看到类似：
# {"projectId":"prj_UNIQUE_ID_HERE",...}
3. 发现冲突时的补救
如果部署后发现旧项目受影响：
# 立即进入旧项目目录
cd /Users/joe/Dropbox/code/旧项目名称
# 重新部署旧项目
vercel --prod --yes
# 确认旧项目恢复正常
curl -I https://旧项目URL
部署新项目后，必须检查：
.vercel/project.json 中的 projectId 是否唯一事故时间线：2026-02-25
事故描述：
evolutionary-psychology-workshop（进化心理学），成功部署design-aesthetics-workshop（设计美学），成功部署word-root-workshop 项目的 Git 仓库被进化心理学内容覆盖根本原因分析：
# 事故前的状态
evolutionary-psychology-workshop → origin: https://github.com/joeseesun/word-root-workshop.git
word-root-workshop → origin: https://github.com/joeseesun/word-root-workshop.git
↑↑↑ 两个项目共享同一个 GitHub 仓库
为什么会发生：
cp -r word-root-workshop 复制模板.git/ 目录也一起复制了（包含远程仓库配置）损害范围：
紧急修复步骤：
# 1. 恢复 word-root-workshop 到原始状态
cd /Users/joe/Dropbox/code/word-root-workshop
git log --oneline # 找到原始提交
git reset --hard 14cc7b0 # 恢复到原始词根词缀内容
# 2. 修复 vercel.json 配置冲突
# 移除不兼容的 routes 配置
# 3. 重新部署
vercel --prod --yes
# 4. 验证恢复
curl -sL https://word.qiaomu.ai/ | grep "词根词缀记忆工坊"
# 5. 清理其他项目的 Git 远程仓库
cd /Users/joe/Dropbox/code/evolutionary-psychology-workshop
git remote remove origin
彻底解决方案（已在 Step 6 实施）：
长期防范措施：
cp -r），改用从零生成教训总结：
"Copy + Paste 是万恶之源。模板驱动看似高效，实则埋下了隐患。只有从零生成（设计系统驱动），才能确保每个项目真正独立。"
影响：
当 skill 的设计系统有更新（如 CSS bug 修复、样式改进）时，需要将更新同步到所有已部署的 workshop 项目。
典型场景：
脚本位置：scripts/update-css.sh
使用方法：
# 1. 演练模式（仅列出将更新的项目）
bash scripts/update-css.sh --dry-run
# 2. 执行更新
bash scripts/update-css.sh
脚本自动执行以下步骤：
/Users/joe/Dropbox/code/*-workshopcmp 命令对比 CSS 文件，跳过已是最新版本的项目.backup 文件chore: update CSS from skill template）vercel --prod --yes 重新部署到生产环境步骤 1：准备最新的 CSS
在 skill 目录中修复或改进 templates/minimal.css：
cd /Users/joe/.claude/skills/knowledge-site-creator
# 编辑 templates/minimal.css
# 修复 bug 或改进样式
步骤 2：预览将更新的项目
bash scripts/update-css.sh --dry-run
输出示例：
🔍 演练模式（不会实际更新）
📁 CSS 源文件：/path/to/templates/minimal.css
📊 文件大小：12345 bytes
🔍 扫描 workshop 项目...
================================================
📦 项目：evolutionary-psychology-workshop
📝 将更新：/path/to/evolutionary-psychology-workshop/css/minimal.css
📝 将重新部署到 Vercel
================================================
📦 项目：word-root-workshop
✓ 跳过：CSS 已是最新版本
================================================
📊 更新总结
✅ 成功更新：1 个项目
⚠️ 跳过：1 个项目
💡 这是演练模式，没有实际执行任何操作
要实际执行，请运行：bash scripts/update-css.sh
步骤 3：执行批量更新
bash scripts/update-css.sh
输出示例：
================================================
📦 项目：evolutionary-psychology-workshop
💾 已备份旧 CSS：/path/to/css/minimal.css.backup
✓ 已更新 CSS
🚀 重新部署到 Vercel...
✅ 部署成功
================================================
📊 更新总结
✅ 成功更新：1 个项目
⚠️ 跳过：1 个项目
.backup 文件--dry-run 模式让你先看看会更新什么⚠️ 更新前检查：
templates/minimal.css 已经过测试--dry-run 先预览将更新的项目⚠️ 更新后验证：
⚠️ 失败处理：
vercel --prod --yes 重试未来可扩展的更新类型：
当前脚本仅支持 CSS 更新，但同样的机制可以扩展到：
js/storage.js 等）vercel.json 等）扩展方法：参考 update-css.sh 创建类似脚本，如 update-storage.sh、update-meta-tags.sh 等。