把一篇文章，做成知识图卡¶
把一篇短文拆成封面和四个要点，做成一组可以保存、分享的知识图卡。你会练习提炼内容、统一视觉，以及在手机上检查文字是否易读。
浏览整组图卡 ↗ 下载图卡与源文件 下载练习原文 在线阅读原文
示例文章是本站原创的《让 AI 少猜一点：写清需求的四个要素》。封面插画由 JarlessAPI 实际生成，中文文字通过 HTML 排版，再逐页导出 PNG。这样可以准确修改标题、纠错和统一字号。
你需要准备¶
- 能读写本地文件的 Codex 或 Claude Code，以及 练习文件夹。
- 下载并解压练习原文，将
knowledge-materials放到练习文件夹内。 - 使用配套 知识图卡 Skill 时，把环境准备和图片导出交给 AI 完成。
第一次可以用已有插画完成排版。想练习真实生图，再准备 生图分组的 API Key；聊天接通不代表生图权限也已具备。
1. 从原文提炼五页内容¶
请读取 knowledge-materials/article.md，把文章改编成 5 张知识图卡的文案，读者是第一次使用 AI 编程工具的人。
第 1 张：封面，标题“让 AI 少猜一点。”，副标题点出目标、输入、约束、验收。
第 2—5 张：每张解释一个要素，包含一个清楚的标题、一段短解释和一个具体例子。
先只给文案和对应原文段落。一张只讲一个观点，保留重点、减少整段搬运。不要添加原文没有的研究数据、专家结论或成功率。
看完五页文案后，确认观点与原文一致。文字过多时，让 AI 先精简内容，而不是缩小字号硬塞。
2. 把文案变成版面¶
按确认后的文案，在新建的 knowledge-output 文件夹里制作 5 张知识图卡。
每张 1080×1440，封面与四张内页共用米白、钴蓝、少量黄绿色。用大标题、页码和留白建立顺序，第三张可用蓝底转换节奏。
封面使用 knowledge-materials/illustration.jpg。正文的中文通过 HTML 文字排版，不烘焙进生图模型输出。
生成 index.html，每张使用独立的 .slide 元素，固定 1080×1440。图片使用本地资源；浏览器里能预览整组图卡。
同时提供每页 PNG，命名 card-01.png 到 card-05.png，放在 images 子文件夹。导出时每张必须是完整的 1080×1440。
请检查并安装制作和导出所需的依赖，已有的直接使用，准备好后继续完成任务。
检查字体加载、插图显示、页脚与正文重叠、内容溢出；打开所有 PNG 检查文字。保留 HTML 源文件，给出完整路径。
3. 可选：生成自己的封面插画¶
已配置 JarlessAPI 生图 Skill 后，可以调用：
/jarlessapi-imagegen 为一组“写清 AI 需求”的知识图卡生成封面插画：米白背景上有钴蓝色靶心、笔记纸、尺子和橙色勾选符号，纸艺与黏土质感，硬朗自然光，构图简洁，主体集中在中央，不包含文字、字母或水印。使用 gpt-image-2，1536x1024，只生成一张，保存到 knowledge-output 文件夹。
然后告诉 AI：“将新插画替换到封面中，保留 HTML 标题和正文，再导出整组 PNG。”只把实际保存成功的生成结果标注为 AI 插画。
4. 从图片本身验收¶
| 检查什么 | 完成标志 |
|---|---|
| 文件数量与尺寸 | 5 张 PNG，每张 1080 × 1440 |
| 单页信息 | 一张一个要点，内容可以回到原文核对 |
| 手机可读性 | 在手机相册打开，不放大也能看清主要标题和正文 |
| 排版 | 没有缺字、乱码、半截文字或压住页脚 |
| 统一性 | 页码连续，颜色、字号与边距有一致规则 |
| 可修改性 | HTML 和原文保留，修改后可以再次导出 |
5. 练习一次编辑修改¶
把封面副标题改成“给 AI 的需求说明，从这四件事开始”。保持 5 张图卡的尺寸、正文和页码。重新导出到 images-v2 文件夹，并检查新标题的换行是否自然。
图片空白时检查路径和加载失败；尺寸不对时检查 CSS 缩放与截图范围；页面太挤时先删去重复解释。配套成品已经逐张检查，自行生成的结果仍需重新验收。