21
版型 layout
資訊怎麼排（infographic）
他叫寶玉（Jim Liu）。今天不逛功能，看他怎麼把「品味」這種說不清的東西，變成 AI 照著做就不會錯的明文約束。
不是團隊、不是公司，是一個人。他把每天做內容的工序切成 skill，長成 21 支互相呼叫的生態。原始碼公開、MIT 授權，誰都能 clone 下來逐行讀。
沒有設計團隊、沒有工程組，21 支全是他一人手寫、維護、發布。Agent 時代「個人能力被放大」的活證據。
翻譯、逐字稿、生圖、排版、配圖、發文，幾乎涵蓋內容創作者的全部工序。一支管一件事，但會互相調度。
github.com/JimLiu/baoyu-skills，MIT 授權，沒有黑箱。下面每個數字、每張配色表都是 clone 下來的真檔。
一條主線把素材變成發布內容，三個衛星各管生圖、發布、雜活。不用記工具名，記住這四群在做什麼就好。
一條完整產線。影片進來，逐字稿、翻譯、排版、配圖，出來是可發布的文章。
本章主角。把封面、資訊圖、社群圖卡的視覺品味，拆成可以逐項挑的配方。
把成品送上各平台。公眾號、微博、X，格式各自就位，不用手動重排。
純苦力、沒判斷，但每支都救命。代表作就是壓圖，這章最後會單獨講。
這十支不是平行的工具，是排成一條流水線。每一站交一棒，下一站接著做。
看到中文文章，先問要不要請排版同事整理，再轉成網頁版。markdown-to-html 的 SKILL.md 寫死了這個開場三步：
這篇文章裡有沒有中文？沒有 → 直接轉檔。
有中文，而且隔壁排版同事 format-markdown 在 → 問你「要不要先請他整理？」
叫 format-markdown 整理完，再回來轉網頁版。
format-markdown 裡，藏了 8 個下標公式這支表面是排版器，下標題時卻用一張寫死的配方表 title-formulas.md。對靠標題搶點擊的行銷人，這是現成的牌路，不用憑感覺。以下是真檔：
| # | 公式 | 範例（原檔真句） |
|---|---|---|
| 1 | 顛覆認知 | "All de-AI-flavor prompts are wrong" |
| 2 | 直接給答案 | "One recipe to make AI write in your voice" |
| 3 | 懸念 | "It took me six months to find how to remove AI flavor" |
| 4 | 具體數字 | "150 lines of docs taught AI my writing style" |
| 5 | 反差 | "One doc replaced three months of AI tuning" |
| 6 | 結果先行 | "After using this method, nobody could tell it was AI" |
| 7 | 反問 | "Why can people spot your AI writing at a glance?" |
| 8 | 共鳴 | "Three months fighting AI flavor, I finally broke free" |
每篇文章上架還要手刻 meta description、想一個 slug，最煩。format-markdown 排版的同一趟就一起交件，而且長短各生一份，分給不同用途。
一句話濃縮。給社群分享卡、SEO meta description 用，就是別人轉貼時預覽框那一行。
多兩三句的版本。給文章列表預覽、電子報摘要 用，賣點要講得完整一點的地方。
EXTEND.md：讓同一支 skill，記住「你的」品牌標準別人的 skill 誰下載都長一樣。寶玉多了一份 EXTEND.md 偏好檔，把 skill 從「一次性工具」，變成「記住你品牌的助手」。
第一次用，skill 先問你幾個問題：預設語言、語氣、受眾、品牌術語、禁用詞。答案存進 EXTEND.md。之後每次執行，它先讀你的偏好，再動手。
這等於一份會自動套用的團隊風格指南。你和同事各自有各自的 EXTEND.md，不用改 skill 本體，同一支 skill 各照各的品牌標準跑。
EXTEND.md 是寶玉自訂的慣例，不是 Claude Code／Anthropic 官方規範（官方只認 SKILL.md ＋ references/ ＋ scripts/）。當「進階玩法」學它的概念就好，做 skill 不一定要它。你跟 AI 說「幫我做張好看的封面」。好看是什麼？沒人答得出來，於是每次生出來都不一樣，整個帳號視覺一團亂。
「幫我做張好看的封面」
→ AI 自由發揮
→ 這張藍、那張紫、下張又換風格
→ 帳號視覺零一致
「用 macaron 風格做封面」
→ AI 在驗證過的骨架裡填充
→ 每張同一套配色、同一種質感
→ 帳號視覺自動一致
寶玉把抽象的「好看」拆成幾個各自獨立、可以自由相乘的維度。infographic 的 SKILL.md 第一句就把這個思路寫死：layout（資訊結構）× style（視覺風格），自由組合。
資訊怎麼排（infographic）
畫面長怎樣（infographic）
色碼全塞進主檔，每次對話都得吞一遍，又貴又亂。寶玉的做法：主檔只當目錄，每個配方一個獨立小檔，選到哪個才讀哪個。
這就是 references/palettes/macaron.md 的真實內容。一張表，把「奶油色教學風」固化成任何人照抄都一樣的配方。
macaron、懷舊文挑 retro（它的真實 hex 是 Coral Red #E07A5F、Mustard Yellow #F2CC8F…）。同一個 schema、換一組值。你的部落格、IG 帳號，從此每張圖都像同一個設計師出的手。正向原則，模型往往已經知道；
負面邊界，才是專家經驗。
「要配對比色」「標題要吸引人」「圖片要清晰」
→ 這些模型本來就會，講了等於沒講。
「文字生壞不准事後 P 圖」「別拿 SVG 假冒點陣圖」
→ 這是踩過坑的人才寫得出來的邊界。
當生圖後端連不上、或它「偷懶」想省事時，最自然的脫身方式就是吐一段 <svg> 或 HTML/CSS，因為那對它很容易，而且乍看真的很像一張圖。
SVG 不能上傳到只吃點陣圖的平台、不能當社群縮圖、在很多 CMS 會破版。你以為拿到一張圖，實際上拿到一個用不了的假貨，到要發布才發現，最氣。
封面上「自動化」打成「自動花」，第一直覺：拿 ImageMagick 在那塊區域蓋一塊、補上正確的字。看起來修好了。
事後貼的字，字體、光影、紋理跟原圖對不起來，放大一看就是補丁，廉價感藏不住。AI 生圖的整體感，一塊補丁就毀了。正解是改 prompt 重生，讓字從一開始就長對。
壓圖、轉檔、排版這類會蓋掉原檔的破壞性操作，寶玉一律先留退路。做法固定，每支 skill 都一樣：
compress-image：重點不是壓圖，是把「壓到剛好」變成永不漏的紀律21 支裡看起來最不起眼的一支，就是壓圖。但它是對行銷人最容易算出帳的一支，因為它直接打在 Google 的排名信號上。
245KB → 89KB，吐出 WebP 還附戰績。關鍵預設 WebP、品質 80，肉眼幾乎無感的甜蜜點。這章看的三件事，其實是同一個動作的三個面。
.tmp、原檔留 _original。讓人敢放心交辦的，從來不是工具多強，是它出錯時不會把你害慘。你做 SEO、做行銷，腦袋裡也有一整套說不清的判斷。把它變成 skill，就用這三招。
下次要 AI 產一致風格的東西（社群圖、報告版型、信件語氣），先把「好的長怎樣」拆成幾個維度，每個維度列一張清單。別讓 AI 自由發揮，給它選單。
回想你這個工序最常被 AI 搞砸的地方，把它寫成一條「不准…」。不用寫程式，一句中文就鎖住。這是你 skill 裡最值錢的一行。
任何會覆寫、會刪檔的步驟，加一句「動手前先備份」。讓你的 skill 出錯時不會把你害慘，你才敢放心一句話交辦。
| 招 | 照抄句型 |
|---|---|
| ✕ | 「不准 ______（你這工序最常被 AI 搞砸的地方）」 |
| 留底 | 「任何會覆寫或刪檔的步驟，動手前先備份原檔。」 |
github.com/JimLiu/baoyu-skills本單元為教學用途整理與中文化，招牌方法（配方維度、負向 gotchas、留底防呆）以自己的口吻轉述，保留原作者出處。
EXTEND.md 偏好檔、baoyu- 前綴命名、metadata.openclaw 欄位，都不是 Claude Code／Anthropic 官方規範。SKILL.md ＋ references/ ＋ scripts/。學員自己做 skill 不必、也不該照抄 EXTEND.md，學概念即可。