根据任意主题（儿童故事、科普知识、习惯养成等）一键生成完整的儿童绘本，输出为自包含HTML文件：分页故事文案、每页原创SVG插画、单页朗读按钮、自动朗读模式、翻页动画和键盘翻页。支持中英文，自动适配浏览器Web Speech API朗读，无需依赖外部服务。

儿童绘本生成器：输入主题一键生成可翻页可朗读的HTML绘本

【适用场景】

当用户需要为孩子创作一本图文并茂的儿童绘本时使用本技能。适用场景包括：

- habit 习惯养成：如"不挑食"、"好好刷牙"、"分享很重要"等道理，通过故事让孩子自然接受 - 认知学习：颜色、动物、植物、数学概念等知识性主题 - 情感陪伴：睡前故事、亲子共读、情绪管理类绘本 - 创意表达：根据孩子喜爱的事物（汽车、恐龙、公主等）定制专属故事 - 节日主题：生日、春节、圣诞节等节日专属故事

触发词包括："儿童绘本"、"绘本"、"给孩子讲故事"、"picture book"、"bedtime story"、"睡前故事"、"英文绘本"等。

【操作步骤】

Step 1：确定故事框架

先确定语言（用户明说就照做，没明说跟随用户提问语言，默认中文），写入 `book.json` 的 `lang` 字段（`zh-CN` 或 `en-US`）。

根据主题决定目标年龄和页数。默认3–6岁：

- 简单概念（颜色、动物、习惯养成）：4–8页正文 - 有情节起伏的故事（友谊、成长、冒险）：8–12页正文 - 另加封面和结尾页

先写简短大纲：主角是谁、遇到什么、怎么解决、传达什么。儿童文案要求：

- 每页1–3个短句，口语化，读出来有节奏 - 多用重复句式和拟声词，例如"咚咚咚"、"呼——"、"tap-tap-tap" - 主角有名字，情绪具体，不要只说"很难过"，要表现孩子能理解的反应 - 结尾温暖点题，但不要说教

Step 2：定义视觉规格

插画使用内联SVG。画第一页前必须固定以下内容：

- 主角的形状构成，例如"小刺猬 = 棕色半圆身体 + 三角刺 + 圆脸 + 豆豆眼" - 每个角色3–4个固定色值 - 全书统一调色板：建议奶油底、暖橙、草绿、天蓝等低饱和颜色 - 每页构图有变化（远景、近景、俯视），但角色形状组合必须复用

先读 `references/svg_guide.md`，避免把插画画成几何图形堆砌。

Step 3：制作朗读音频

每页播放按钮都应可用。按以下顺序处理：

1. 可选的内嵌真实音频：只有运行环境允许安装依赖且可联网时，才使用 `edge-tts` 生成音频，音频转为base64填入该页 `audio` 字段 2. 浏览器朗读兜底：将 `audio` 留空，模板会调用浏览器Web Speech API朗读，不需要额外写播放器逻辑

交付时优先浏览器朗读版本。

Step 4：组装HTML

不要手写整个HTML，先写 `book.json`，再用打包脚本生成：

```bash python scripts/build_book.py book.json output/book.html ```

`book.json` 结构：

```json { "title": "小刺猬的拥抱", "subtitle": "一个关于分享的故事", "age": "3–6岁", "lang": "zh-CN", "cover_svg": "<svg viewBox=\"0 0 800 600\">...</svg>", "pages": [ { "text": "本页文案", "svg": "<svg viewBox=\"0 0 800 600\">...</svg>", "audio": "" } ] } ```

生成后生成 `output/book.html`，成品不加载外部图片、字体、脚本或网页资源，完全自包含。

【代码模板】

```json // book.json 示例 { "title": "小蚂蚁的冒险", "subtitle": "一个关于勇气和友谊的故事", "age": "4–7岁", "lang": "zh-CN", "cover_svg": "<svg viewBox=\"0 0 800 600\"><circle cx=\"400\" cy=\"300\" r=\"150\" fill=\"#8B4513\"/></svg>", "pages": [ { "text": "从前有一只小蚂蚁，名叫豆豆。", "svg": "<svg viewBox=\"0 0 800 600\"><text x=\"400\" y=\"300\">蚂蚁</text></svg>", "audio": "" } ] } ```

```bash

生成绘本HTML

python scripts/build_book.py book.json output/book.html

打开查看

open output/book.html ```

【复盘要点】

1. 主角设计：给主角起名字，情绪具体化，孩子的代入感更强 2. 重复句式：用"咚咚咚"、"嘿嘿嘿"等拟声词增加节奏感和趣味性 3. SVG复用：主角形状组合必须全程复用，保证视觉一致性 4. 不加载外部资源：成品完全自包含，确保在任何设备都能正常显示 5. 浏览器兼容性：Web Speech API在不同浏览器表现不同，离线环境建议嵌入真实音频

来源：SkillsMP kids-picture-book（GitHub raw获取，SkillsMP详情页不可访问）