{ "markdown": "# Knowledge Site Creator\n\n> 一句话生成任何领域的知识学习网站 - AI 理解主题，自动创作内容，生成页面，一键部署\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Claude Code](https://img.shields.io/badge/Claude-Code-7C3AED)](https://www.anthropic.com)\n\n## ✨ 特性\n\n- 🤖 **AI 全自动创作**：理解主题 → 生成数据 → 创作文案 → 部署上线\n- 📚 **通用学习模式**：闪卡、渐进学习、测试、索引、进度追踪\n- 🎨 **极简设计系统**：黄色主题、Inter 字体、响应式布局\n- 📱 **PWA 支持**：自动生成图标、离线访问、可安装\n- 🔍 **SEO 优化**：完整 meta 标签、sitemap、结构化数据\n- ✅ **代码质量**：XSS 防护、错误处理、DOM 安全\n- 🚀 **零模板依赖**：AI 参考设计系统从零生成页面\n\n## 🎯 适用领域\n\n适用于任何需要系统学习的知识领域：\n\n- 📖 学科知识：进化心理学、量子力学、中医经络\n- 💻 技术术语：大模型术语、编程概念、设计原则\n- 🏛️ 历史文化：五代十国、唐诗宋词、世界历史\n- 🔬 科学概念：化学元素、物理定律、生物分类\n- 🎨 设计美学：CRAP 原则、配色理论、版式设计\n\n## 🚀 快速开始\n\n### 前置要求\n\n- Claude Code CLI\n- Node.js 18+\n- Vercel CLI（可选，用于部署）\n\n### 安装\n\n#### 方法一：使用 npx skills（推荐）\n\n```bash\n# 自动安装到 Claude Code\nnpx skills add joeseesun/knowledge-site-creator\n```\n\n#### 方法二：手动安装\n\n```bash\n# 克隆仓库\ngit clone https://github.com/joeseesun/knowledge-site-creator.git\n\n# 复制到 Claude Code skills 目录\ncp -r knowledge-site-creator ~/.claude/skills/\n```\n\n#### 方法三：直接复制（如果已有本地副本）\n\n```bash\ncp -r /path/to/knowledge-site-creator ~/.claude/skills/\n```\n\n### 使用\n\n在 Claude Code 中直接说：\n\n```\n生成一个进化心理学学习网站\n```\n\n或者：\n\n```\n创建量子力学基础概念网站\n```\n\nAI 会自动：\n1. 分析主题特点和价值\n2. 生成 20-30 个核心知识点数据\n3. 创作首页文案、统计、介绍\n4. 参考设计系统生成页面\n5. 部署到 Vercel\n6. 返回访问链接\n\n## 📂 项目结构\n\n```\nknowledge-site-creator/\n├── SKILL.md # 主 Skill 文件（AI 执行流程）\n├── README.md # 本文件\n├── references/ # 设计规范和模式参考\n│ ├── core-patterns.md # 核心学习模式（闪卡、测试等）\n│ ├── design-system.md # 设计系统（配色、字体、间距）\n│ ├── code-quality.md # 代码质量标准\n│ ├── pwa-setup.md # PWA 配置指南\n│ └── seo-best-practices.md # SEO 优化最佳实践\n└── scripts/ # 辅助脚本\n └── update-css.sh # CSS 更新脚本\n```\n\n## 🎨 设计系统\n\n### 配色方案\n\n- **主题色**：`#FBBF24`（黄色）\n- **成功色**：`#10B981`（绿色）\n- **错误色**：`#EF4444`（红色）\n- **文字色**：`#1F2937`（深灰）\n- **背景色**：`#FFFFFF`（白色）\n\n### 核心学习模式\n\n1. **闪卡（Flashcard）**：卡片翻转、键盘控制（←→空格）、进度显示\n2. **学习（Learn）**：渐进式展示、上下翻页、自动保存进度\n3. **测试（Quiz）**：4 选 1 测试题、Toast 反馈、答案解析\n4. **索引（Index）**：搜索筛选、卡片网格、已掌握标记\n5. **进度（Progress）**：学习统计、已掌握列表、进度条\n\n## 📊 示例网站\n\n- [五代十国历史工坊](https://wudai.qiaomu.ai/) - 从后梁到后周，系统学习五代十国历史脉络\n- [设计美学学习工坊](https://designrule.qiaomu.ai/) - 掌握 CRAP 原则，提升设计品味\n- [词根词缀记忆工坊](https://word.qiaomu.ai/) - 通过词根拆解，高效记忆英语单词\n- [大模型术语学习工坊](https://llmwords.qiaomu.ai/) - AI 时代必备，30 个核心概念速览\n\n## 🛠️ 技术栈\n\n- **前端**：原生 HTML/CSS/JavaScript（零依赖）\n- **样式**：CSS 变量 + 8px 网格系统\n- **存储**：LocalStorage（进度管理）\n- **PWA**：manifest.json + Service Worker\n- **部署**：Vercel（一键部署）\n- **AI**：Claude Code（内容创作）\n\n## 📝 核心原则\n\n1. **设计系统优先**：复用设计语言，不复用具体页面代码\n2. **AI 创作内容**：所有文案、统计、介绍都由 AI 根据主题创作\n3. **零模板依赖**：AI 参考设计系统从零生成页面\n4. **代码质量**：XSS 防护、错误处理、DOM 安全\n5. **用户体验**：Toast 反馈、键盘快捷键、响应式设计\n\n## 🔧 高级配置\n\n### 自定义主题色\n\n编辑生成的 `css/minimal.css`：\n\n```css\n:root {\n --color-primary: #FBBF24; /* 改成你想要的颜色 */\n}\n```\n\n### 修改知识点数量\n\n在生成时明确告诉 AI：\n\n```\n生成一个进化心理学网站，包含 50 个核心概念\n```\n\n### 自定义数据结构\n\n编辑生成的 `js/wordData.js`，按照固定格式添加知识点。\n\n## 🤝 贡献\n\n欢迎贡献代码、报告 Bug、提出建议！\n\n1. Fork 本仓库\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交改动 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 提交 Pull Request\n\n## 📄 License\n\n本项目采用 MIT 协议开源 - 详见 [LICENSE](LICENSE) 文件\n\n## 👨‍💻 作者\n\n**向阳乔木（Joe）**\n\n- X (Twitter): [@vista8](https://x.com/vista8)\n- 微信公众号：「向阳乔木推荐看」\n- GitHub: [@joeseesun](https://github.com/joeseesun)\n\n

\n \"向阳乔木推荐看公众号二维码\"\n

\n\n---\n\n如果这个项目对你有帮助，请给个 ⭐️ Star 支持一下！\n", "bytes": 3633, "sha": "21923b292906d9a1f53d067150c0809a01bdfa939764e555c5110a68006fcbe3", "repo_slug": "joeseesun/qiaomu-knowledge-site-creator", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/skl_joeseesun_qiaomu_knowledge_site_creator__557a0d84/readme" }