Skip to content
cccskills
FreePublished on GitHub

ian-xiaohei-illustrations

Plan and generate hand-drawn article illustrations that turn key ideas, processes, and metaphors into clear visual scenes. The skill suggests image placement, creates individual 16:9 images with an active central character, and checks composition and annotations.

OriginalShow the original description

生成 Ian 风格的中文正文配图。用于用户要求为中文文章、帖子、博客、Notion 文档、工作流文档、方法论、流程、结构、状态、隐喻或观点生成“怪诞”“小黑”“手绘”“正文配图”“文章插图”“配图建议”“shot list”“去标题/改图”等任务;默认使用小黑 IP、纯白手绘、少量红橙蓝批注、简洁清爽但天马行空的视觉风格。

Works withNotion
See how to install

Good for

  • Plan illustration placement for an article
  • Illustrate a workflow or abstract idea
  • Generate hand-drawn images for blog posts
  • Revise crowded compositions or incorrect annotations

Files included (23)

  • SKILL.md5.2 KB
  • agents/openai.yaml304 B
  • assets/examples/01-two-breakpoints.png788.2 KB
  • assets/examples/02-minimum-loop.png930.5 KB
  • assets/examples/03-sort-by-purpose.png849.1 KB
  • assets/examples/04-one-fish-many-uses.png1.1 MB
  • assets/examples/05-handoff-path.png723.3 KB
  • assets/examples/06-three-sources.png1012.0 KB
  • assets/examples/07-three-content-jobs.png920.3 KB
  • assets/examples/08-handoff-copy-toolbox.png902.7 KB
  • assets/examples/09-common-pits-no-title.png1.1 MB
  • assets/examples/10-information-well.png1.0 MB
  • assets/examples/11-idea-press.png915.1 KB
  • assets/examples/12-content-fermentation.png894.0 KB
  • assets/examples/13-system-bearing.png914.9 KB
  • assets/examples/14-trust-bridge.png1.1 MB
  • LICENSE1.0 KB
  • NOTICE.md656 B
  • references/composition-patterns.md3.2 KB
  • references/prompt-template.md2.9 KB
  • references/qa-checklist.md1.8 KB
  • references/style-dna.md1.8 KB
  • references/xiaohei-ip.md1.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Ian 小黑怪诞正文配图

核心定位

为中文文章设计和生成 16:9 横版正文配图。目标不是做商业插画、PPT 信息图或可爱卡通,而是把文章里的关键判断、流程、结构、状态或隐喻,变成一张清爽、怪诞、有创意、可读但不说明书的手绘解释图。

默认视觉 IP 是“小黑”:黑色实心、白点眼、细腿、空表情,认真做一件荒诞但成立的事。小黑必须参与画面的核心动作,不能只是站在旁边当装饰。

先读这些参考

按任务需要读取,不要一次塞满上下文:

  • references/style-dna.md:风格 DNA、颜色、文字、禁忌。
  • references/xiaohei-ip.md:小黑 IP 的形象、性格、动作库和禁忌。
  • references/composition-patterns.md:结构类型、原创隐喻方法和反复刻规则。
  • references/prompt-template.md:单张生图提示词模板。
  • references/qa-checklist.md:生成后检查和迭代规则。
  • assets/examples/:只作低频视觉校准,不进入默认生成路径。不要照抄这些案例的构图、物件或标注。

工作流

1. 消化正文

先读用户给的正文、链接、Notion 页面、Markdown 文件或截图内容。提炼:

  • 核心观点是什么
  • 哪些段落承担认知转折
  • 哪些内容适合用图解释
  • 哪些地方只适合文字,不需要图

不要平均配图。优先选择“认知锚点”,例如:核心判断、两个断点、输入输出闭环、分流、前后对比、一鱼多吃、承接路径、常见坑、角色状态变化。

2. 先出配图策略

如果用户只是说“分析怎么配图 / 思考哪些地方需要配图”,先给 shot list。每张图写清楚:

  • 放在哪个段落后
  • 图的主题
  • 核心意思
  • 结构类型
  • 小黑在图里做什么
  • 建议元素
  • 建议中文标注词

默认 4-8 张。文章很短时 1-3 张;长文也不要轻易超过 9 张。够用就好,避免把正文做成画册。

3. 单张生成

如果用户明确要求“生成 / 输出 / 做图 / 帮我生成”,不要停下来等确认;用内置 image_gen 每张单独生成。不要把多张图拼在一张里。

每张图只讲一个核心结构。提示词必须包含:

  • 16:9 横版中文正文配图
  • 纯白背景
  • 黑色手绘线稿
  • 少量红色/橙色/蓝色中文手写批注
  • 大量留白
  • 小黑作为核心动作主体
  • 禁止 PPT、商业插画、幼稚可爱、复杂架构、左上角类型标题

不要复刻过往案例。案例只提供风格密度和小黑参与方式,不能直接复用“传送带断点 / 小黑拉线 / 素材鱼 / 盖章工具箱 / 常见坑路径”等已有构图,除非用户明确要求复刻某张图。每次都要从当前文章重新发明一个奇怪但成立的隐喻。

4. 检查与迭代

生成后检查 references/qa-checklist.md。如果出现以下问题,优先重生成或局部编辑:

  • 小黑只是装饰
  • 画面太满
  • 太像流程图/PPT
  • 中文太多或错字严重
  • 左上角出现“常见坑/流程图/系统架构图”等标题
  • 画风太可爱、幼稚、死板
  • 背景不是干净白底

5. 保存交付

如果用户在 workspace 内工作,把最终图复制到:

assets/<article-slug>-illustrations/

按顺序命名:

01-topic-name.png
02-topic-name.png

保留原始生成文件,不要覆盖已有资产,除非用户明确要求替换。

输出口径

生成前的策略输出要短而准。生成后的交付要包含:

  • 生成了几张
  • 每张图的用途
  • 保存路径
  • 哪些图最稳,哪些图是可选

不要长篇解释风格理论;让图自己说话。


本地覆盖规则(Munder Difflin blog — local overrides)

These project-level overrides apply on top of everything above whenever this skill runs in this repo:

  1. 小黑是黄色的。 Xiaohei's body is ALWAYS filled with the Munder Difflin accent yellow #FFCA54 with a thin black hand-drawn outline (no suit, no tie). Eyes become two small BLACK dots (white dots don't read on yellow). Keep the bean shape, thin legs, blank expression — every image, no exceptions.
  2. Annotations are hand-written in English, not Chinese (the blog is English).
  3. Annotation colors: orange, blue, and yellow only — never red (site-wide no-red rule).
  4. Output images for blog posts go to blog/src/assets/media/<post-slug>/ and each generated file must be recorded in blog/src/_data/media.json (set the entry's status to "ready").
  5. Aspect 16:9, pure white background, one concept per image — unchanged from the core skill.

Attribution: this skill is "Ian Xiaohei Illustrations" by Ian (https://github.com/helloianneo), MIT — see LICENSE and NOTICE.md in this folder.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

capabilities

FreeSummary

Help a spawned worker check which date-range helpers and external integrations are available and how to call them. The catalog explains environment settings, local broker access, and availability checks so the worker can choose tools for its task.

  • Checking available tools when a worker starts
  • Looking up calls for Slack replies or shared knowledge searches
  • Checking date-range helpers before querying external services
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

last30Days

FreeSummary

Resolve the last 30 days, including today, into local calendar dates and exact UTC time boundaries. Use the text and JSON output to scope trend analysis or recent activity reviews without manual date calculations or network access.

  • Set a rolling 30-day period for trend analysis
  • Define the date range for recent activity reviews
  • Prepare UTC boundaries for 30-day timestamp queries
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

last7Days

FreeSummary

Turn “last seven days” into a concrete date range ending today. Get local calendar dates and precise UTC boundaries, the global time reference, to use as consistent limits for reports or timestamp searches.

  • Set the reporting period for the last seven days
  • Define UTC boundaries for timestamp searches
  • Check the local dates covered by a trailing week
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

lastMonth

FreeSummary

Turn “last month” into the full previous calendar month's date range. Get local calendar dates and precise UTC boundaries, the global time reference, to set consistent periods for monthly reports, summaries, or timestamp searches.

  • Set the reporting period for the previous calendar month
  • Confirm the dates for a month-end summary
  • Define UTC boundaries for last month's timestamp searches
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

lastQuarter

FreeSummary

Get the date range for the previous full quarter, based on when the skill runs. It returns local dates and precise UTC boundaries to define reporting periods for quarterly reviews, quarter-over-quarter comparisons, and timestamp-based queries.

  • Setting the period for a quarterly review
  • Checking the previous quarter's comparison period
  • Getting UTC boundaries for timestamp queries
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

lastWeek

FreeSummary

Turn “last week” into the previous complete Monday-to-Sunday date range. Get local calendar dates and precise UTC boundaries to use for weekly digests, week-over-week comparisons, and queries that filter records by timestamp.

  • Setting the reporting period for a weekly digest
  • Checking the date range for week-over-week comparisons
  • Getting UTC boundaries to search last week's records
HarnessMD/munder-difflin8.9KUpdated Oct 20, 2026

See all skills by HarnessMD

Report a problem with this skill