{"slug": "a-hand-drawn-illustration-skill-for-any-articles", "title": "A hand-drawn illustration skill for any articles", "summary": "Ian (伊恩), a product designer and AI builder, released Ian Xiaohei Illustrations, a Codex Skill that guides AI agents to generate 16:9 hand-drawn, white-background explanatory images for Chinese articles, with a default visual IP called '小黑' (Little Black), a black solid character with white dot eyes and thin legs. The skill outputs 4-8 shot lists per article and final PNG images saved to assets/<article-slug>-illustrations/, and is available via GitHub at https://github.com/helloianneo/ian-xiaohei-illustrations.", "body_md": "把中文文章里的判断、流程、状态和隐喻，变成一张张白底、手绘、怪诞但清爽的正文配图。\n\n16:9 横版 | 小黑 IP | 纯白手绘 | 少量红橙蓝中文批注 | Codex Skill\n\nIan Xiaohei Illustrations 是一个 Codex Skill，用来指导 AI Agent 为中文文章、帖子、博客、Notion 文档和方法论内容生成正文配图。\n\n它不是通用插画 prompt，也不是 PPT 信息图模板。它的核心目标是：先理解文章里的认知锚点，再把其中一个判断、流程、结构、状态或隐喻，变成一张有记忆点的 16:9 手绘解释图。\n\n默认视觉 IP 是“小黑”：一个黑色实心、白点眼、细腿、空表情的小角色。小黑不是吉祥物，不是贴纸，也不是站在角落里的装饰物，而是正在认真参与系统运转的荒诞工作者。\n\n一句话：**让 AI 不只是“配一张图”，而是把文章里的一个关键认知动作画出来。**\n\n特别适合：\n\n- 写中文文章，需要正文配图和文章插图的人\n- 做知识型内容、方法论内容、AI 工作流内容的人\n- 想把抽象判断画成具体隐喻的人\n- 想要一种比 PPT 信息图更轻、更怪、更有个人识别度的配图风格的人\n- 用 Codex 做内容生产，希望稳定复用一套视觉语言的人\n\n不适合：\n\n- 想要商业插画、品牌 KV 或精致扁平插画的人\n- 想要传统 PPT 信息图、复杂架构图或流程图的人\n- 想要儿童卡通、可爱 IP、表情包风格的人\n- 想把大量正文、长段解释或完整课程页塞进一张图里的人\n- 需要严格可编辑矢量源文件的人\n\n默认输出：\n\n- 16:9 横版正文配图\n- 一篇文章的 4-8 张 shot list\n- 每张图的主题、核心意思、结构类型、小黑动作和中文标注建议\n- 最终 PNG 图片，保存到 workspace 的\n`assets/<article-slug>-illustrations/`\n\n默认不输出：\n\n- PPTX / PDF / Keynote\n- SVG / HTML / Canvas 可编辑图\n- 商业海报或封面 KV\n- 大段文字型信息图\n\n这个 skill 默认使用 Ian 的“小黑怪诞正文配图”风格：\n\n- 纯白背景，不要纸纹、米色、阴影、渐变\n- 黑色手绘线稿，细线，轻微抖动\n- 大量留白，主体只占画面约 40%-60%\n- 少量红色、橙色、蓝色中文手写批注\n- 一张图只表达一个核心动作、结构、状态或隐喻\n- 小黑必须参与核心动作，不能只是装饰\n- 怪诞、有创意、清爽，但不幼稚、不卖萌\n\n这些图片是风格校准样例，不是构图模板。使用时应该从当前文章重新发明隐喻，不要照抄旧案例的物件和构图。\n\n克隆仓库：\n\n```\ngit clone https://github.com/helloianneo/ian-xiaohei-illustrations.git\ncd ian-xiaohei-illustrations\n```\n\n复制 skill 到 Codex skills 目录：\n\n```\nmkdir -p \"${CODEX_HOME:-$HOME/.codex}/skills\"\ncp -R ./ian-xiaohei-illustrations \"${CODEX_HOME:-$HOME/.codex}/skills/\"\n```\n\n安装后，在 Codex 里使用：\n\n```\nUse $ian-xiaohei-illustrations 为这篇中文文章设计并生成 5 张小黑怪诞正文配图。\nUse $ian-xiaohei-illustrations 先不要生图。\n请分析下面这篇文章哪里值得配图，输出 5 张左右的 shot list。\n每张图写清楚：放在哪段后、主题、核心意思、结构类型、小黑在做什么、建议中文标注词。\n\n<粘贴文章>\nUse $ian-xiaohei-illustrations 把下面这篇文章生成 4 张小黑怪诞正文配图。\n要求：16:9 横版、纯白背景、黑色手绘线稿、少量红橙蓝中文手写批注。\n\n<粘贴文章>\nUse $ian-xiaohei-illustrations 为“信任不是喊出来的，而是一块证据一块证据铺过去”生成一张正文配图。\n画面要怪诞但清爽，小黑必须承担核心动作。\nUse $ian-xiaohei-illustrations 帮我编辑这张图，去掉左上角的“流程图”标题，其他内容保持不变。\n```\n\n更多示例见 [examples/prompts.md](/helloianneo/ian-xiaohei-illustrations/blob/main/examples/prompts.md)。\n\n这个 skill 的流程是：\n\n- 读取文章、Markdown、Notion 内容、截图或用户给的主题\n- 提炼核心观点、认知转折、流程结构和适合视觉化的段落\n- 先输出 shot list：每张图只选一个认知锚点\n- 为每张图选择结构类型：Workflow、系统局部、前后对比、角色状态、概念隐喻、方法分层、地图路线或小漫画分镜\n- 重新发明一个低科技、怪诞但成立的物理隐喻\n- 让小黑承担核心动作\n- 每张图单独调用图像模型生成\n- 按 QA checklist 检查：白底、留白、小黑动作、中文标注、非 PPT 感、非旧案例复刻\n- 保存最终 PNG，并报告用途和路径\n\n```\n.\n├── README.md\n├── LICENSE\n├── NOTICE.md\n├── assets/\n│   └── ian-wechat-qr.jpg\n├── examples/\n│   ├── images/\n│   │   ├── 01-two-breakpoints.png\n│   │   ├── 02-sort-by-purpose.png\n│   │   └── ...\n│   └── prompts.md\n└── ian-xiaohei-illustrations/\n    ├── SKILL.md\n    ├── agents/\n    │   └── openai.yaml\n    ├── assets/\n    │   └── examples/\n    └── references/\n        ├── style-dna.md\n        ├── xiaohei-ip.md\n        ├── composition-patterns.md\n        ├── prompt-template.md\n        └── qa-checklist.md\n```\n\n真正需要安装到 Codex 的是子目录：\n\n```\nian-xiaohei-illustrations/\n```\n\n根目录的 README、LICENSE、NOTICE 和 examples 是 GitHub 分享文档。\n\n- 图片里的中文文字越短越稳定。\n- 每张图只讲一个核心结构，不要把文章做成说明书。\n- 小黑必须承担核心动作；如果去掉小黑画面仍然完全成立，说明小黑太装饰了。\n- 示例图只用于校准线条密度、留白、颜色克制和小黑参与方式，不要复刻构图。\n- AI 图像模型可能出现错字、幻觉标签、风格漂移或多余标题，生成后需要检查。\n- 如果中文错字严重，优先减少标注词并重生成。\n\n[Ian Handdrawn PPT](https://github.com/helloianneo/ian-handdrawn-ppt)— 中文手绘技术 PPT-style 页面图生成 Skill[Awesome Claude Code Skills](https://github.com/helloianneo/awesome-claude-code-skills)— Claude Code Skills / Agents / Plugins 精选合集[Obsidian + Claude AI Second Brain](https://github.com/helloianneo/obsidian-ai-second-brain)— Obsidian + Claude AI 个人知识库搭建指南\n\n**Ian (伊恩)** — 产品设计师 / 一人公司实践者 / AI Builder\n\n用 AI 团队打造一人公司。\n\n- GitHub:\n[helloianneo](https://github.com/helloianneo) - X/Twitter:\n[@ianneo_ai](https://x.com/ianneo_ai) - 网站:\n[www.ianneo.xyz](https://www.ianneo.xyz) - 微信:\n`ianneoxyz`\n\n- 邮箱:\n[hello.neoc@gmail.com](mailto:hello.neoc@gmail.com)\n\n这套小黑配图 Skill，只是我用 AI 搭建个人生产系统里的一个小工具。\n\n如果你也在用 AI 做内容、知识库、工作流或产品化，可以继续看我的网站：[www.ianneo.xyz](https://www.ianneo.xyz)。\n\n只想先观察，可以关注我的 [X/Twitter](https://x.com/ianneo_ai)。\n\n想了解 Indie Builders Club，加微信：`ianneoxyz`\n\n，备注「OPC」。\n\n不方便扫码也可以搜索微信：`ianneoxyz`\n\n。\n\nMIT License. See [LICENSE](/helloianneo/ian-xiaohei-illustrations/blob/main/LICENSE).", "url": "https://wpnews.pro/news/a-hand-drawn-illustration-skill-for-any-articles", "canonical_source": "https://github.com/helloianneo/ian-xiaohei-illustrations", "published_at": "2026-08-05 13:15:51+00:00", "updated_at": "2026-08-05 13:38:05.105025+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai"], "entities": ["Ian (伊恩)", "Ian Xiaohei Illustrations", "Codex", "GitHub", "helloianneo"], "alternates": {"html": "https://wpnews.pro/news/a-hand-drawn-illustration-skill-for-any-articles", "markdown": "https://wpnews.pro/news/a-hand-drawn-illustration-skill-for-any-articles.md", "text": "https://wpnews.pro/news/a-hand-drawn-illustration-skill-for-any-articles.txt", "jsonld": "https://wpnews.pro/news/a-hand-drawn-illustration-skill-for-any-articles.jsonld"}}