📝 這篇文章是從 ameyanagi.com 部落格轉載而來。
前言
當我們用 AI 來製作 App 或 UI 時，對 ChatGPT 或 Claude 說「幫我做得有感覺一點」，往往回傳的會是某種似曾相識、很保守的配色。
不管是用 PowerPoint 做簡報，還是用 Word 整理報告，常常在內容開始前，就先卡在「顏色要怎麼配」。對於不是設計專業的人來說，配色決定永遠都是揮之不去的瓶頸。
這次我做的 Morphos ，就是為了把這個煩惱整個跳過。
🔗 相關連結
- 網站：https://morphos.ameyanagi.com
- GitHub：Ameyanagi/morphos
- 作品集：Projects / Morphos
Morphos 是什麼
Morphos 是一個蒐集以自然界意象為基礎的配色與設計系統的集合網站。
蝴蝶翅膀、礦物、深海、苔蘚、夕陽、鳥羽。大自然本身就是經過數億年淬鍊而成的色彩設計寶庫。Morphos 會把這些從自然物汲取靈感的色票，以可立即使用的多種格式提供下載。
網站名稱 Morphos 來自希臘語 μορφή（morphē，意為「形狀」「姿態」）。我們把大自然展現出的各種「形」，轉換成配色與設計系統這些不同的「形」。這就是這個名稱背後的概念。
契機來自在昆蟲攝影展看到的色彩
我會想做這個網站，是因為曾經帶著孩子一起去看東京都寫真美術館的「養老孟司與小檜山賢二的昆蟲展」。
小檜山賢二氏用景深合成這項技法拍攝、放大數百倍的昆蟲照片。當我看著那些作品時，突然覺得：「這些配色，比想像中還要漂亮得多。」
蝴蝶翅膀、甲蟲的金屬光澤、蛾類沉穩的色階。人類為了設計而絞盡腦汁才想出來的色彩組合，昆蟲早就穿在身上了。經過數億年自然淘汰所調校出的配色，當然不會失衡，而且有一種獨特的說服力。
展覽的標語是「答案全都在昆蟲身上。」，但在配色這件事上，也許真的就是如此，我是這麼想的。
既然如此，把這些自然界的色彩直接蒐集起來，整理成能立即使用的形式，應該會很有趣吧。這就是 Morphos 的起點。
為什麼只聚焦在自然意象
在生成與編輯 UI 主題的情境下，其實已經有像 tweakcn 這樣很優秀的工具。它可以很直覺地調整 shadcn/ui 的主題，是相當方便的服務。
Morphos 和這些工具不同的地方在於，它把來源完全限定在自然界。不是追逐流行色調，也不是人工設計出來的配色，而是把自然原本就擁有的和諧直接借來用，這就是它的核心概念。
與其說是追求最大通用性，不如說是提供一個「不想出錯時，直接向自然借用」的選項。
使用方式非常簡單
使用方式只有 3 個步驟：
- 前往 Morphos
- 挑選有感覺的主題與配色
- 下載所需格式
可下載的格式主要有以下 4 種：
AI 用色票（Prompt-ready）
這是可以直接貼到 ChatGPT 或 Claude 的格式。只要再加上一句「請用這組顏色設計 UI」，就能把具體的色彩方向傳達給 AI，而不是只給它模糊的氛圍描述。
CSS 變數（Web-ready）
以可直接整合到網站或 React 應用程式的 CSS 變數形式提供。也很適合用來調整 shadcn/ui 或 tweakcn 的主題。
PowerPoint 範本（Deck-ready）
這是已套用配色的簡報檔案。目標是讓提案資料或內部文件不用再把時間花在一開始的顏色決定上。
Word 範本（Doc-ready）
這是已套用配色的文件檔案。可從自然意象中調整報告、規格書、內部文件的整體氛圍。
例如，當你想請 AI 幫你做聊天 UI，以前常常只能用很模糊的日文或中文去描述，例如「藍色系、清爽一點，但又帶點銳利感」。使用 Morphos 的話，只要貼上色碼清單，就能直接而明確地傳達方向。
💡 基本想法
把思考配色這件事整個外包，將時間投入到真正想專注的內容討論上。Morphos 就是為了這件事而生的工具。
預想的使用情境
Morphos 預想的使用情境如下：
- 為 AI 製作 UI/UX 時的色彩指定
- 簡報、提案書、內部文件的配色範本
- 個人開發或品牌塑造的靈感來源
尤其在對 AI 下指令時，能減少像「有感覺一點」這種模糊字眼非常實用。把自然意象和色碼一起提供給 AI，輸出的方向會更容易一致。
使用的技術
實作上，我把重點放在以下兩項：
- Codex：作為程式碼生成與實作的核心
- ChatGPT Images 2.0：用來生成作為主題的自然物視覺素材
我們建立了一條流程：先生成自然視覺素材，再從中抽取色票，並延伸成 CSS、PowerPoint、Word 等不同格式。我覺得現階段開發最有趣的地方之一，就是 AI 不只是「寫程式的工具」，也可以是「產生素材的工具」。
原始碼已公開在 GitHub
用於圖片生成的提示詞，以及用來做配色抽取與各格式轉換的技巧和腳本，全部都公開在 GitHub 上。
🔗 GitHub: https://github.com/Ameyanagi/morphos
如果你也想試著做出類似的蒐集網站，或想把這條流程應用到其他主題，都歡迎看看。實作內容本身應該也能直接作為參考。
如果你覺得有幫助，也歡迎到儲存庫按一個 ⭐️ Star，會非常鼓舞我。
最後
市面上的色票集很多，但如果要用一句話概括 Morphos 的特色，我想應該是「限定自然界 × 面向 AI 使用而整理好的格式」 這個組合。
把決定顏色的時間，留給思考內容本身。若有興趣，歡迎先點進來看看。如果你找到喜歡的配色，明天要做簡報或寫程式時應該就能直接拿來用。
也歡迎提供回饋，或提出「希望有這種主題」之類的需求。
連結整理
種類URL🌿 Morphos（網站）https://morphos.ameyanagi.com💻 GitHub 儲存庫https://github.com/Ameyanagi/morphos👤 作者部落格（原文）https://ameyanagi.com/blog/morphos-nature-design-systems📂 作品集https://ameyanagi.com/projects#morphos
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
