一個人設計一套視覺系統
Ian小黑三件套橫評同實戰教學

內容創作圈有個公開嘅秘密：文章寫得幾好，配圖唔掂，傳播效果直接腰斬。

你花幾個鐘寫一篇乾貨，然後用半個鐘去Unsplash揾一張差唔多嘅配圖——風格唔對路、冇記憶點、讀者睇一眼就劃走。

仲麻煩嘅係，AI寫作氾濫之後，內容越嚟越似。邊個先建立視覺辨識度，邊個就攞到傳播嘅入場券。

今日唔係講一個工具，而係一套完整嘅視覺表達系統。作者Ian（伊恩），產品設計師出身，用三個Codex Skill將中文內容創作需要嘅配圖場景基本上都覆蓋曬。

先上速覽，方便你對號入座：

三件事唔係替代關係，係分工唔同：

項目地址：github.com/helloianneo/ian-xiaohei-illustrations

呢個係三件套嘅起點，亦係Ian登上GitHub Trending嘅作品。

佢嘅核心邏輯唔係「畫一張靚圖」，而係先睇明文章裏面嘅認知錨點，再將佢翻譯成一個物理動作。

舉個例。你寫咗一篇關於「資訊過載」嘅文章：

平庸嘅配圖：一張塞滿電郵嘅截圖
1.0 嘅配圖：小黑企喺一口深井前面，資訊好似水咁不斷湧出，小黑手拎住一個漏水嘅水桶，旁邊標住「接唔完」

分別好明顯：前者係素材，後者係隱喻。

1.0 預設嘅視覺IP係「小黑」——一個黑色實心、白點眼、幼腳嘅小角色。佢唔係裝飾，係畫面入面認真做緊一件荒誕事嘅打工仔。

視覺原則好剋制：

適合邊個：寫方法論、AI工作流程、知識型內容嘅人。需要將「判斷」「流程」「結構」呢啲抽象概念變成一眼睇得明嘅視覺隱喻。

唔適合：商業插畫、精緻扁平風、兒童卡通。

文章教學：

文章配圖風格唔統一？一隻小黑幫你由頭管到尾，手把手教學

項目地址：github.com/helloianneo/ian-xiaohei-scenes

如果話1.0係一塊白板上嘅邏輯圖，咁2.0就係一個白色攝影棚入面嘅真實物件現場。

佢唔解釋概念，佢製造共鳴。

視覺核心由「手繪線稿」換成「真實攝影物件」。背景仲係乾淨嘅白色，但畫面入面出現嘅係真實嘅手機、電腦、沙漏、紙條、咖啡杯——唔係畫出嚟，係好似產品攝影咁擺喺度。

小黑仲喺度，但佢周圍嘅世界由白板變咗做現實。

2.0 有兩種輸出規格：

標準模式（16:9）：一個真實物件 + 一個物理動作 + 2-4個短標籤。適合表達處境、情緒、觀點隱喻。

典型嘅母版場景：

彩蛋長卷模式（超闊全景）：5-8個真實物件節點，一條手繪曲線貫穿過去，形成一條「真實物件人生線」。適合個人經歷、項目覆盤、產品演化。

呢個模式自然避開咗「PPT流程圖感覺」——冇序號、冇箭頭、冇步驟標記，純靠物件同小黑動作串聯敍事。

以下係我實測為一篇文章生成嘅4張配圖：

呢個係理解Ian三件套最需要把握嘅一點。

1.0 嘅目標係降低認知成本——將一個複雜概念壓成一張秒懂嘅圖。讀者睇完會話「哦，原來係呢個意思」。

2.0 嘅目標係降低共鳴門檻——令讀者睇到嘅瞬間就講出「呢個就係我」。佢唔係解釋，係確認。

呢兩個Skill喺SKILL.md入面互相引用，俾出咗明確嘅選擇指引：

一個管邏輯，一個管情緒。內容創作嘅兩種核心需求，都覆蓋曬。

項目地址：github.com/helloianneo/ian-handdrawn-ppt

簡單講兩句。呢個Skill同前兩個唔同——小黑基本上唔出現，視覺風格亦都更講究。

佢將文章、課程筆記、大綱變成一 set 中文手繪技術解釋風格嘅PNG頁面圖。需要做課程課件、技術講解配圖、文章封面的時候，用佢。

同前面兩個嘅核心分別：

唔需要記任何指令。三個Skill裝好之後，喺opencode、WorkBuddy、OpenClaw呢啲環境入面，直接同AI講就得。

第一步：叫AI幫你裝

第二步：幫文章配圖

第三步：先規劃後出圖（防止出錯）

見到方案你點頭，AI就生成。

實戰工作流程：一篇文章用曬三件套

假設你寫咗一篇「AI自動化對產品經理的影響」：

全程唔超過10分鐘，唔需要打開任何設計工具。

Ian喺SKILL.md入面列咗一堆「失敗信號」。生成圖唔合格，多數係犯咗其中一條：

三個Skill唔係越多越好，係按需要使用：

一個人設計一套視覺系統，將中文內容創作需要嘅配圖基本上都覆蓋曬。由「令人理解」到「令人共情」，由單張配圖到成套演示頁——呢個係我目前見過，中文內容創作領域最完整嘅可視化方案。

之前我分別寫過1.0同2.0嘅單獨推薦，今次將三件湊埋一齊。希望可以幫你將內容視覺系統建立起來。

項目地址

三個項目都係MIT開源協議，免費可商用。

一人設計一套視覺體系
Ian小黑三件套橫評與實戰教程

內容創作圈有個公開的秘密：文章寫得再好，配圖不行，傳播效果直接腰斬。

你花幾小時寫一篇乾貨，然後花半小時去 Unsplash 翻一張差不多的配圖——風格對不上、沒有記憶點、讀者掃一眼就划走。

更麻煩的是，AI 寫作氾濫之後，內容越來越像。誰先建起視覺識別度，誰就拿到了傳播的入場券。

今天聊的不是一個工具，是一整套視覺表達體系。作者 Ian（伊恩），產品設計師出身，用三個 Codex Skill 把中文內容創作需要的配圖場景基本都覆蓋了。

先上速覽，方便你對號入座：

三件事不是替代關係，是分工不同：

項目地址：github.com/helloianneo/ian-xiaohei-illustrations

這是三件套的起點，也是 Ian 登上 GitHub Trending 的作品。

它的核心邏輯不是"畫一張好看的圖"，而是先看懂文章裏的認知錨點，再把它翻譯成一個物理動作。

舉個例子。你寫了一篇關於"信息過載"的文章：

平庸的配圖：一張堆滿郵件的截圖
1.0 的配圖：小黑站在一口深井前，信息像水一樣不斷湧出，小黑手裏拿一個漏水的水桶，旁邊標註"接不完"

區別很明顯：前者是素材，後者是隱喻。

1.0 默認的視覺 IP 是"小黑"——一個黑色實心、白點眼、細腿的小角色。他不是裝飾，是畫面里正在認真做一件荒誕事的打工人。

視覺原則很剋制：

適合誰：寫方法論、AI 工作流、知識型內容的人。需要把"判斷""流程""結構"這種抽象概念變成一眼能懂的視覺隱喻。

不適合：商業插畫、精緻扁平風、兒童卡通。

文章教程：

文章配圖風格不統一？一隻小黑給你從頭管到尾，手把手教程

項目地址：github.com/helloianneo/ian-xiaohei-scenes

如果說 1.0 是一塊白板上的邏輯圖，那 2.0 就是一個白色攝影棚裏的真實物件現場。

它不解釋概念，它製造共鳴。

視覺核心從"手繪線稿"換成了"真實攝影物件"。背景還是乾淨的白色，但畫面裏出現的是真實的手機、電腦、沙漏、紙條、咖啡杯——不是畫出來的，是像產品攝影一樣擺在那裏。

小黑還在，但他周圍的世界從白板變成了現實。

2.0 有兩種輸出規格：

標準模式（16:9）：一個真實物件 + 一個物理動作 + 2-4 個短標籤。適合表達處境、情緒、觀點隱喻。

典型的母版場景：

彩蛋長卷模式（超寬全景）：5-8 個真實物件節點，一條手繪曲線貫穿過去，形成一條"真實物件人生線"。適合個人經歷、項目覆盤、產品演化。

這個模式天然避開了"PPT 流程圖感"——沒有序號、沒有箭頭、沒有步驟標記，純靠物件和小黑動作串聯敍事。

以下是我實測為一篇文章生成的4張配圖：

這是理解 Ian 三件套最該抓住的一點。

1.0 的目標是降低認知成本——把一個複雜概念壓成一張秒懂的圖。讀者看完會說"哦，原來是這個意思"。

2.0 的目標是降低共鳴門檻——讓讀者看到的瞬間就說出"這說的就是我"。它不是解釋，是確認。

這兩個 Skill 在 SKILL.md 裏互相引用，給出了明確的選擇指引：

一個管邏輯，一個管情緒。內容創作的兩種核心需求，都覆蓋到了。

項目地址：github.com/helloianneo/ian-handdrawn-ppt

簡單說兩句。這個 Skill 和前兩個不同——小黑基本不出現，視覺風格也更講究。

它把文章、課程筆記、大綱變成一套中文手繪技術解釋風格的 PNG 頁面圖。需要做課程課件、技術講解配圖、文章封面的時候，用它。

和前面兩個的核心區別：

不需要記任何命令行。三個 Skill 裝好之後，在 opencode、WorkBuddy、OpenClaw 這些環境裏，直接跟 AI 說就行。

第一步：讓 AI 幫你裝

第二步：給文章配圖

第三步：先規劃後出圖（防止翻車）

看到方案後你點頭，AI 再生成。

實戰工作流：一篇文章用上三件套

假設你寫了一篇"AI 自動化對產品經理的影響"：

全程不超過 10 分鐘，不需要打開任何設計工具。

Ian 在 SKILL.md 裏列了一堆"失敗信號"。生成圖不合格，多半是犯了其中一條：

三個 Skill 不是越多越好，是按需取用：

一個人設計一套視覺體系，把中文內容創作需要的配圖基本都覆蓋了。從"讓人理解"到"讓人共情"，從單張配圖到整套演示頁——這是我目前見過的，中文內容創作領域最完整的視覺化方案。

之前我分別寫過 1.0 和 2.0 的單獨推薦，這次把三件湊在一起。希望能幫你把內容視覺體系立起來。

項目地址

三個項目均為 MIT 開源協議，免費可商用。