原創設計
執行一個互動式、問題驅動的會話，將產品或主題轉化為一套完整的設計語言——一個連貫的視覺世界，讓每個畫面、影格、圖示、插圖和動畫都作為其中的「產出物」——並將其交付為一份已填妥的設計語言簡報。此技能適用於任何視覺交付物：資訊圖表、影片腳本、網站或手機應用 UI/UX。其指導原則是：原創性不在於獨特，而在於圍繞一個核心想法保持內在一致。 不要問「我該如何讓它看起來獨特？」；而要問「核心想法的視覺表現是什麼？」這個技能強制執行最大的轉變：不要設計畫面——要設計一個世界。 其他一切都是那個世界的元素。
何時使用 / 何時不使用
- 當使用者需要原創的視覺識別或藝術指導，或現有設計看起來千篇一律 / 像 AI 預設值，需要一個統一的核心理念時使用。
- 如果使用者需要一份實用的品牌樣式指南（色票、字體、用於素材生成的氛圍），而非一個原創的世界 → 使用
skills/creative/creative-strategist；本技能的簡報可以作為該技能的輸入。 - 如果設計語言已存在，使用者只需要素材 → 直接前往該媒體的生產技能（參見第 9 階段）。
- 如果問題是 UI 結構 / 可用性而非視覺識別 → 使用
skills/frontend-design/frontend-orchestrator。
如何執行此技能（請先閱讀）
這是一場引導式對話，而非填寫表單。 請遵守以下規則：
- 一次一個階段。 詢問當前階段的聚焦問題，等待回答，用一兩句話回覆您的理解，然後繼續前進。切勿一次貼出所有七個階段。
- 始終提供建議。 針對每個問題，提出 2–4 個具體選項（第一個標記為「(建議)」），讓使用者可以做出反應，而不是從頭開始發想。他們隨時可以自由回答。
- 當宿主主機支援時，使用結構化問題。 在 Claude Code 中，對於基於選項的階段，優先使用
AskUserQuestion工具。在其他代理中，使用純文字提問，並附上簡短的標籤選項列表。 - 在階段 1.5 和階段 6 從網路收集即時視覺靈感（參見 references/inspiration-browsing.md）。選擇符合宿主主機的瀏覽方法。
- 邊進行邊記錄決策，寫入一份正在產生的設計語言簡報（範本位於 assets/design-language-brief-template.md）。
- 在產出最終結果前，必須通過原創性測試。 不要跳過。
- 為所選媒體進行生產技能交接（參見 references/medium-playbooks.md）。
將此檢查清單複製到您的工作筆記中並逐項勾選：
設計語言進度：
- [ ] 階段 0：定義世界（媒體、主題、受眾）
- [ ] 階段 1：核心隱喻（一句話）
- [ ] 階段 1.5：靈感蒐集（網路）
- [ ] 階段 2：視覺宇宙（詞彙）
- [ ] 階段 3：設計 DNA（形狀 / 顏色 / 動態 / 紋理）
- [ ] 階段 4：吉祥物系統（若適用）
- [ ] 階段 5：簽名式限制條件
- [ ] 階段 6：跨領域靈感（網路）
- [ ] 階段 7：生成多個概念 → 選定世界
- [ ] 階段 8：原創性測試（5 個問題）— 關卡
- [ ] 階段 9：撰寫簡報 + 媒體交接
階段 0 — 定義世界
在進行任何視覺設計之前，先釐清你實際要製作的東西。詢問：
- 我們在創造什麼？ → 資訊圖表 · 影片腳本 · 網站 · 手機應用 UI/UX · 其他
- 產品 / 主題是什麼？用一句話說明。
- 這是為誰設計的？他們應該感受到什麼？
然後，大聲對使用者說出心態轉變：「我們不是要設計畫面。我們要設計一個世界，而你的」+ 媒體 +「將由那個世界中的產出物構成。」
不要停滯： 如果請求已經回答了這些問題（例如「為我孩子的數學應用程式設計一個原創外觀」），用一句話將答案作為假設反饋回去，然後直接進入階段 1 — 互動規則適用於設計問題，而非重新詢問使用者已經說過的話。
階段 1 — 定義核心隱喻
一切都源自核心隱喻。
問出關鍵問題：「如果這個產品是一個實體物件或地方，它會是什麼？」
根據領域提供種子想法（這些來自來源方法）：
| 產品類型 | 可能的隱喻 |
|---|---|
| 數學 / 學習應用程式 | 積木 |
| AI 導師 / 助手 | 智慧導師 |
| 金融 / 交易應用程式 | 指揮中心 |
| 旅遊應用程式 | 探險家的日記 |
| 知識 / 文件應用程式 | 活的圖書館 |
推動選擇一個隱喻，而非三個。然後寫下一句話設計語言： 「這是一個 [隱喻] —— 所以它看起來像 [感受/世界]。」
如果他們無法用一句話說清楚，表示隱喻還不夠銳利 — 繼續精煉。
階段 1.5 — 靈感蒐集（網路）
在定義詞彙之前，為所選的隱喻和氛圍收集真實參考資料。遵循 references/inspiration-browsing.md：瀏覽 cosmos.so、Pinterest、Savee、Dribbble、Behance、Are.na 尋找該隱喻 + 氛圍，收集 8–15 個參考資料，並記錄重複出現的模式（燈光、色溫、構圖、紋理、形狀）。在繼續之前，將這些模式總結給使用者。
階段 2 — 建立視覺宇宙
列出存在於那個世界中的所有事物。這些將成為你的視覺詞彙。
確定隱喻後，與使用者一起腦力激盪存在於那個世界中的每個物體、表面、角色和紋理。例如，對於活的圖書館：書本、書架、筆記、墨水、郵戳、書籤、紙張紋理。
然後，明確地將詞彙映射到設計層面：
| 世界中的物體 | 變成 |
|---|---|
| （例如 書本、郵戳） | 圖示 |
| （例如 頁緣塗鴉） | 插圖 |
| （例如 翻頁、墨水暈染） | 動畫 / 動態 |
| （例如 書架、卡片） | UI 元素 / 版面 |
| （例如 墨水、紙張、皮革） | 顏色 |
| （例如 手寫標題） | 字體排版 |
目標是建立一個包含 6–10 個具體元素的詞彙表。這個列表是後續所有工作的唯一真相來源。
階段 3 — 建立你的設計 DNA
定義所有事物都必須遵循的系統規則。
鎖定四個維度。保持每個維度緊湊 — 這裡的限制是讓設計有「設計感」的關鍵：
- 形狀 — 2–3 個形狀家族（例如 圓角矩形、圓形、立方體）
- 顏色 — 3–5 個核心顏色，名稱與世界相關聯（例如 深海軍藍、電光藍、暖黃色、柔灰色）
- 動態 — 用一句話描述的一個哲學（例如 「有彈性且有趣，帶有目的」）
- 紋理 — 一種語言（例如 「紙張、手繪、草圖風格」）
記錄顏色的確切十六進位色碼，以及動態的具體緩動 / 時間意圖，讓簡報達到可直接建置的狀態。
階段 4 — 設計吉祥物系統（適用時）
吉祥物為你的產品賦予面孔和個性，並成為世界的心臟。
詢問吉祥物是否能為此專案服務。它對於學習、消費性產品、兒童產品和品牌主導的產品非常有效；通常對於企業 / 金融或極簡工具則可省略。如果是，定義：
- 它 / 他們是誰（例如 好奇的機器人、智慧的狐狸、小小科學家、活的星座）
- 個性用 3 個形容詞描述
- 它如何出現在媒體中（空狀態、載入中、引導流程、影片中的旁白、資訊圖表中的指南）
為何重要：情感連結、記憶點，並且它能統一整個體驗。
階段 5 — 建立簽名式限制條件
限制不會扼殺創造力。它們創造了識別度。
定義一個設計永遠不會違反的規則。這個單一的決定往往是讓一種語言具有辨識度的關鍵：
| 限制條件 | 產生的風格 |
|---|---|
| 不允許使用照片 | 乾淨、插畫風格（類似 Zenn） |
| 所有東西都是幾何區塊 | 結構化（類似數學應用程式） |
| 只有黑色、白色 + 一個強調色 | 銳利、線性（類似 Linear） |
| 每張插圖都必須看起來像手繪 | 溫暖、人性化（類似 Excalidraw） |
將限制條件寫成一句可執行的句子：「在這個世界中，我們從不 ___ / 我們總是 ___。」
階段 6 — 從不相關的領域汲取靈感（網路）
不要複製競爭對手。從其他世界借用想法。
從產品類別之外的領域汲取靈感，以保持新鮮感：建築、自然、玩具、古代手稿、科學圖表、太空任務、工業機械。使用 references/inspiration-browsing.md 瀏覽 2–3 個不相關的領域，提取可轉移的想法（來自建築的網格系統、來自自然的色彩故事、來自科學圖表的標籤風格）。帶回 3–5 個具體的「借用點子」。
階段 7 — 生成多個概念，然後選定世界
一個核心想法。多個世界。數量造就了卓越的機會。
生成大量簡短的概念方向——每個都是表達相同核心想法的不同「世界」（例如 博物館、太空船、魔法學院、偵探佈告欄、活的大腦……目標是 20–50 個一句話概念）。大多數會很普通；你在尋找那一個非凡的。
將它們分組呈現，讓使用者做出反應，然後縮小到 1 個主要方向（可選 1–2 個備選）。對於大量概念，你可以派發子代理或工作流程來擴展概念，但讓使用者保持在選擇迴圈中。
階段 8 — 原創性測試（關卡）
在產生任何東西之前，執行所有五個問題。每個答案都應該是「是」。 如果有任何一個是「否」，返回相關階段。
- 我能否用一句話解釋這個視覺語言？（→ 階段 1）
- 每個元素是否都來自同一個隱喻？（→ 階段 2）
- 移除商標後，我還能識別出這個產品嗎？（→ 階段 3/5）
- 一個孩子能畫出同樣的設計語言嗎？（它是否簡單明瞭？→ 階段 3）
- 它看起來像一個世界而不是一個 UI 嗎？（→ 總體）
明確地向使用者陳述每個問題及其判定結果。
階段 9 — 撰寫簡報並交接
填寫 assets/design-language-brief-template.md 中的所有已鎖定決策，並將其儲存到使用者的專案（建議命名為 design-language.md）。然後，使用 references/medium-playbooks.md（在此階段閱讀以取得各媒體的轉換表格）將該語言轉換為所選的媒體，並提供調用相應生產技能的選項：
- 資訊圖表 / 社群圖形 →
skills/creative/social-graphics、skills/creative/image-generation或skills/creative/brand-asset - 影片腳本 →
skills/creative/remotion-script-writer、skills/creative/product-video或skills/creative/creative-strategist - 網站 →
skills/frontend-design/frontend-orchestrator、skills/frontend-design/design-foundation、skills/frontend-design/color-system、skills/frontend-design/typography-system - 手機應用 UI/UX →
skills/frontend-design/frontend-orchestrator、skills/frontend-design/component-architecture、skills/frontend-design/layout-system
簡報即為合約：每個下游素材都必須是其所述世界中的一個產出物。
要求的輸出格式
交付物是完整的簡報 — 始終遵循 assets/design-language-brief-template.md 的結構，每個章節都需填寫，不得跳過：
# 設計語言簡報 — [產品 / 主題]
## 1. 核心隱喻 （一句話的設計語言）
## 2. 視覺宇宙 （6–10 個詞彙元素，映射到圖示/插圖/動態/UI/顏色/字體）
## 3. 設計 DNA （形狀 · 附十六進位色碼的顏色 · 一個動態哲學 · 一種紋理語言）
## 4. 吉祥物系統 （誰/個性/出現位置 — 或「無」並附上理由）
## 5. 簽名式限制條件 （「在這個世界中，我們從不 ___ / 我們總是 ___」）
## 6. 跨領域靈感 （3–5 個具體借用點子，附來源）
## 7. 所選方向 （勝出的世界 + 1–2 個備選）
## 8. 原創性測試 （全部五個問題，附明確的「是」判定）
## 9. 製作備註 （媒體交接：哪個技能，它必須遵守什麼）
針對同一個產品運行的兩個會話，必須產生具有相同順序的這九個章節的簡報；只有創意內容會有所不同。
常見錯誤
| 錯誤 | 修正 |
|---|---|
| 將所有 7 個階段作為一個問卷全部丟出 | 一次一個階段；對每個回答進行反思回饋 |
| 選擇 3 個隱喻「以求保險」 | 強制只選一個 — 混合隱喻會破壞一致性 |
| 跳過網路靈感蒐集 | 真實的參考資料可以防止產生千篇一律、AI 預設值的輸出 |
| 沒有簽名式限制條件 | 沒有限制就沒有識別度（階段 5 不是可選的） |
| 在世界之前設計畫面/影格 | 先定義世界；產出物最後再處理 |
| 未經原創性測試就提交 | 5 個問題的關卡是強制性的 |
整合
skills/creative/creative-strategist→ 消費：簡報中的設計 DNA（顏色、紋理、動態）作為生成實用素材樣式指南的原料。skills/creative/social-graphics、skills/creative/image-generation、skills/creative/brand-asset→ 消費：簡報；每個生成的素材都必須是該世界中的一個產出物（儲存庫圖片管線：docs/creative_cli.py，模型fal-ai/nano-banana-pro）。skills/creative/product-video、skills/creative/talking-head、skills/creative/remotion-script-writer→ 消費：簡報作為其節拍、場景和畫面來源的視覺世界。skills/frontend-design/frontend-orchestrator→ 消費：簡報作為其設計系統技能集（design-foundation、color-system、typography-system、layout-system、component-architecture）之上的識別層。
總結
設計一個世界。其他一切都是那個世界中的一個元素。 每個畫面、縮圖、圖片、圖示和動畫都應該感覺像是來自同一個宇宙的產出物。