如何把一次 AI 產圖經驗，做成可重複使用的 Codex Skill

很多人第一次用 AI 產圖時，會把重點放在 prompt 怎麼寫？但真正讓產圖變成可交付服務的，不是某一段神奇的 prompt，而是一套能穩定重複的工作流。

這次我以日系商業視覺風格為例，設計一個適合 Codex 使用的 Skill：使用者只要給出產品、用途、受眾與風格偏好，Codex 就能先規劃視覺方向，再產出底圖，最後用可靠的排版流程輸出可直接發布的成品。

這篇文章會完整拆解這個 Skill 的開發概念、流程設計、應用場景與實作注意事項。它不只是產圖教學，更是把一次成功經驗變成下次還能成功的方法。

為什麼要把產圖流程做成 Skill？

老實說，單次產圖很容易靠運氣。

同樣對 AI 說一句「請幫我設計一張銷售頁的主視覺」，今天可能產出漂亮的圖，明天可能出現錯字或尺寸錯誤，最慘的是風格跑掉、中文字亂碼、畫面沒有留白，甚至連用途和場景都不適合。

當然，如果只是自己玩，這些問題可以接受。但當你要為課程、銷售頁、社群招生、電子報或品牌活動產出素材時，產圖這件事就不可以小覷，而是內容產製流程的一環。

這時候，你需要的也許不是更長的 prompt，而可以是一套 Skill。

簡單來說，Skill 的價值在於把判斷封裝起來：

• 使用者給需求時，要先問哪些資訊？
• 什麼情況下該先做視覺策略，而不是直接產圖？
• 哪些文字可以交給模型，哪些文字必須後製？
• 產出後要如何驗證尺寸、文字、路徑與可用性？
• 多尺寸素材如何保持同一套視覺語言？

當這些判斷變成流程，AI 才比較像一個穩定的設計助理，而不是一臺隨機的圖片產生器。

這個 Skill 想解決的問題

過去這段期間，我開發了很多的 Skill，主要都是從我自己的需求跟興趣出發。所以，我設計的場景是：使用者想為一個課程、服務或產品產出商業視覺，例如課程封面、銷售頁 Hero、社群貼文、限時動態或廣告素材。

當然，使用者通常不會一開始就講得很完整。他可能只會說：

幫我為 AI 家教班規劃一套日系商業視覺。用途是課程封面／銷售頁，受眾是創業家、老闆、高階主管，風格偏專業。

這句話其實已經有很多關鍵資訊：

• 產品：AI 家教班
• 用途：課程封面、銷售頁
• 受眾：創業家、老闆、高階主管
• 風格：專業、日系商業視覺
• 隱含要求：需要高信任感、不能太像一般 AI 工具教學課程、不能太廉價

Skill 要做的第一件事，不是急著產圖，而是把這些資訊轉成視覺決策。

核心概念：把視覺產出拆成三層

這個 Skill 的設計核心，是把產圖工作拆成三層。

第一層是視覺策略：先決定這個產品應該長什麼樣子。 第二層是底圖生成：用 AI 生成沒有文字、沒有 logo、沒有浮水印的商業視覺底圖。 第三層是精準排版：用 HTML/CSS 或其他排版工具，把標題、賣點與品牌資訊疊上去。

這樣做的原因很務實：目前圖像模型生成中文仍不夠穩定。它可以做氛圍、場景、材質、光線或構圖，但不適合負責正式中文字。

所以，我會把模型最擅長的工作，交給模型來做出高質感底圖。再把模型最容易失誤的工作交給可控工具，也就是中文字排版。

這是整個流程最重要的分工。

Step 1：把使用者需求轉成視覺策略

一個好的商業視覺，不是看起來漂亮而已，而是要支撐銷售訊息。

以 AI 家教班為例，如果只是說「AI 課程」，模型很容易產出藍紫色光束、機器人、電路板或發光大腦。這些符號很常見，但不一定符合高階決策者的一對一教學情境。

更好的視覺策略是：

• 不賣科技炫技，而賣陪伴感與可信任感
• 不像大眾線上課，而像私人顧問與高端私塾
• 不用科幻視覺，而用真實商務桌面、筆記、筆電、自然光
• 不強調 AI 的形狀，而強調 AI 進入真實工作的方式

因此，Skill 應該先產出類似這樣的策略：

視覺定位：日系高端私塾 × 商務顧問 × 溫暖陪跑
主色系：米白、木質棕、深墨綠、玫瑰棕
構圖：左側留白放標題，右側放一對一商務情境
避免：機器人、藍紫霓虹、科幻光束、廉價課程感

這一步會直接影響後面所有 prompt。

Step 2：先生成無文字底圖

產圖 prompt 的原則是：讓模型負責畫面，不讓模型負責正式文字。

例如可以這樣寫：

Create a warm Japanese premium business editorial background visual for a private AI tutoring program.
Background only, no readable text.
Show a quiet executive office, warm natural morning light, wood table, laptop with abstract non-readable AI interface, handwritten notes, business documents, fountain pen, ceramic tea cup.
Reserve generous clean negative space on the left for title overlay.
Avoid robots, futuristic neon, cyberpunk, blue-purple tech gradients, readable text, logos, watermarks.

這裡有幾個關鍵：

• 明確說 background only
• 明確說 no readable text
• 指定留白位置
• 指定應避免的俗套元素
• 用場景、材質、光線定義質感

這樣產出的圖片就比較像可用素材，而不是一張已經寫壞字的海報。

Step 3：用排版工具疊上精準中文字

底圖完成後，下一步是用 HTML/CSS 做排版，再透過瀏覽器擷圖輸出 PNG。

這個做法有幾個好處：

• 中文字不會亂碼
• 標題可以精準斷行
• 尺寸可以固定為 16:9、1:1、4:5、9:16
• 色彩、陰影、字重可以重複使用
• 文案要改時，不需要重新產圖

實作上，我會建立一個簡單的 HTML：

<section class="hero">
  <div class="copy">
    <div class="eyebrow">一對一・完全客製</div>
    <h1>AI 家教班</h1>
    <div class="subtitle">給資深決策者的一對一<br>AI 私人家教</div>
    <p>用你的真實業務，把 AI 變成每天用得上的決策工具。</p>
  </div>
</section>

再用 CSS 控制背景、漸層遮罩、字體、位置與尺寸。

最後用 Playwright 把這個區塊截圖輸出：

const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1600, height: 900 },
  deviceScaleFactor: 1,
});

await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle' });
await page.locator('#hero').screenshot({ path: outPath });
await browser.close();

這套做法比「請模型直接在圖上寫中文」穩定很多。

Step 4：把多尺寸素材當成同一套系統

老實說，商業視覺很少只需要一張圖。通常會需要：

• 銷售頁 Hero：16:9
• 社群貼文：1:1 或 4:5
• 限時動態：9:16
• 課程封面：4:5
• 課綱流程圖：16:9

Skill 的好處是可以要求每一張圖有不同構圖，但維持同一套視覺語言。

例如「概念變現陪跑營」這門課，我會把視覺主軸設定為：

點子被打磨成產品，模糊想法沿著 6 週路徑走向市場測試。

於是不同尺寸可以這樣分工：

• Hero：桌面上有紙雕市場路徑，表現從概念到產品
• 方圖：原石被切成產品盒，表現「你不是缺創意」
• 限動：6 週發光路徑，表現從模糊想法到市場測試
• 課綱圖：六個站點，對應每週實作路線

這不是把同一張圖裁成四種尺寸，而是同一個創意概念在不同媒介上的延展。

▲ 「概念變現陪跑營」的視覺 demo：把「從模糊想法到市場測試」的六週路徑，做成一條紙雕市場旅程，依序是定位、討論、打磨產品、對外發聲、市場回饋與課綱站點。

Step 5：產出後一定要驗證

只要是要發布的素材，就不能只看一眼覺得漂亮。

至少要檢查：

• 檔案是否真的輸出
• 尺寸是否正確
• 中文是否有錯字、拆詞、溢出
• 圖片是否有不可用的亂字或假 logo
• 文字與背景對比是否足夠
• 檔案是否保存到專案路徑，而不是只留在暫存區

在我的流程裡，會用 file 檢查圖片尺寸，用視覺預覽檢查排版，也會掃一次禁用字或不希望出現的字元。

這個步驟看似瑣碎，但它是把 AI 產物變成交付品的分界線。

Skill 檔應該怎麼寫？

一個好的 Skill，不需要把所有 prompt 都寫死。它應該寫清楚決策流程。

可以包含這幾個段落：

# 日系商業視覺 Skill

## 觸發時機
當使用者要求為課程、服務、銷售頁、活動或品牌產出商業視覺時使用。

## 輸入資訊
- 產品名稱
- 使用場景
- 目標受眾
- 品牌調性
- 必放文案
- 尺寸需求

## 工作流程
1. 先整理產品定位與視覺策略
2. 定義色彩、構圖、材質、避免元素
3. 生成無文字底圖
4. 用 HTML/CSS 疊上精準文字
5. 輸出多尺寸素材
6. 驗證尺寸、文字與可用性

## 重要規則
- 不讓圖像模型生成正式中文字
- 每張圖都要保留可修改的排版來源
- 專案素材必須複製到 workspace
- 不覆蓋舊檔，使用版本化命名

Skill 的本質不是提供一段 prompt，而是讓 AI 知道什麼時候該做策略、什麼時候該產圖、什麼時候該驗證？

可以用在哪些場景？

所以，這類 Skill 很適合用在高頻內容與商業素材生產：

• 線上課程封面
• 銷售頁 Hero
• 社群招生圖
• 電子報主圖
• 活動頁視覺
• 產品發布素材
• 顧問服務簡報封面
• 個人品牌系列圖

只要你的需求不是一次性的玩圖，而是會反覆需要相似品質與流程，做成 Skill 就值得。

特別適合以下工作者：

• 知識工作者：需要把專業產品化
• 顧問與講師：需要頻繁製作課程與活動素材
• 個人品牌經營者：需要穩定輸出視覺內容
• 小團隊創業者：沒有完整設計部門，但需要可發布素材
• 內容工作者：需要把文章、課程、活動包裝成視覺資產

常見問題

為什麼不直接叫 AI 產出完整海報？

因為中文、品牌字、價格與日期這些資訊很關鍵，不能開玩笑。正式發布素材，最怕錯字與亂碼。所以，把底圖設計交給模型，文字交給排版工具，是目前比較穩的分工。

一定要用 Playwright 嗎？

不一定。你也可以用 Figma、Canva、Puppeteer、Sharp、ImageMagick 或任何可控排版工具。重點不是工具，而是文字排版要可控。

Skill 會不會限制創意？

好的 Skill 不會限制創意，它限制的是錯誤。它讓創意發生在視覺策略與底圖設計上，讓交付品質穩定在尺寸、文字、路徑與驗證上。

每次都要先寫視覺策略嗎？

如果是全新產品，建議要。因為視覺策略會決定素材的可信度。尤其是商業視覺，不同受眾對專業的感受不同，不能只靠美感直覺。

下一步：把你的成功流程封裝起來

我現在愈來愈相信，AI 工作流的關鍵不是一次做出厲害成果，而是把厲害成果背後的判斷保存下來。

一次好看的圖片，是作品。但一套能重複產出好圖片的方法，才是系統。

Skill 的價值就在這裡：它把你的經驗、偏好、驗證標準與交付習慣，變成下一次可以直接啟動的工作流程。

如果你已經有一套常做的任務，例如：寫文章、做簡報、產課程封面、整理研究或發布社群內容，都可以問自己三個問題：

1. 這件事我是否會重複做？
2. 每次成功時，我其實遵循了哪些隱性步驟？
3. 哪些錯誤是我希望 AI 以後不要再犯的？

把答案寫進 Skill 裡，你就不是在使用 AI 做單次任務，而是在打造自己的工作系統。

如果你對這些感興趣，歡迎與我交流——也歡迎來我的兩堂實戰工作坊，把今天說的工作流，變成你自己手上的系統。

---