iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0
生成式 AI

30 天一人公司的 AI 開發實戰系列 第 4

Day 04: 設計總監上線:從 Logo 到 UI 風格的 Design Language

  • 分享至 

  • xImage
  •  

昨天搞定了域名和 GitHub 組織。

今天,我需要一位設計總監。

問題是,我是工程師。對設計一竅不通。但一人公司的好處就是——我可以找 AI 當設計總監。

尋找設計靈感:從動漫開始

Grimo 源自「Grimoire」(魔法書)。

在思考設計方向時,我想起最近很喜歡的動漫《葬送的芙莉蓮》。那種靜謐、神秘的魔法世界氛圍,不正合適嗎?

「先了解符合《葬送的芙莉蓮》世界觀與畫風。」我對 AI 設計總監說。

AI 立刻進入角色,分析了作品的美術風格:低飽和冷色調、柔光感、魔法陣元素。還解釋了角色命名的雙關——「Frieren」在德語是「冰冷」,她的老師「Flamme」是「火焰」。這種對比關係讓我意識到,設計不只是視覺,還有文化底蘊。

這給了我方向:Grimo 的設計語言要有魔法書的神秘優雅,智慧記錄的概念,以及自動施法般的任務執行感。

Logo 設計:與 AI 設計總監的對話

「幫我設計 Logo,要符合芙莉蓮畫風,適用於 App icon。」

第一版,AI 給了我帶機器人元素的設計。

「芙莉蓮沒有機器人元素吧?」我提醒。

AI 設計總監立刻修正:「你完全正確。應該用古典魔法與幻想中世紀氛圍,魔法陣、符文、精緻圖騰。」

經過幾輪迭代:

  • 「線條簡單一點但保留魔法神秘感」
  • 「保留魔法陣的感覺」
  • 「顏色要有點深淺差異」

最終版本誕生了。一個浮空魔法陣,中央是攤開的魔法書和羽毛筆。圓環上的節點代表多個 AI Agent 協作。深藍基底配銀白光暈,完美詮釋了「將想法化為現實的智慧魔法書」。

UI 設計語言:從 Logo 延伸

有了 Logo,接下來要建立完整的設計系統。

「你是 UI/UX 設計師,幫我整理出設計語言系統文件。」我把幾張參考圖片給 AI。

AI 設計總監開始工作了。

字體選擇的考量

「字體用 LINE Seed Sans TW。」我決定。

為什麼?因為它清晰、現代,完美支援繁體中文。這是我少數堅持的選擇——好的中文字體太重要了。

玻璃質感的堅持

「卡片採用玻璃質感。」我對 AI 說。

Glassmorphism 風格,帶微妙的藍色光澤和柔和陰影。這個決定來自芙莉蓮世界觀的啟發——魔法的透明感、層次感,就像魔法陣發出的光暈。

色彩系統的建立

AI 設計總監提供了完整的色彩系統:

  • 主色:深藍 (#2563EB) 到天藍 (#60A5FA) 漸層
  • 背景:Midnight Blue (#1E3A8A),如夜空般深邃
  • 光效:Crystal Blue (#93C5FD),魔法光暈
  • 狀態色:Success 綠、Warning 黃、Error 紅,都帶藍色調保持和諧

建立完整的 Design System

「給我 UI 設計師能用的文件。」我要求 AI 設計總監。

「還不夠。」AI 回答,「要讓不同設計師做出一模一樣的風格,需要把抽象原則落到可量測的設計代幣。」

AI 設計總監開始輸出詳細規範:

Design Tokens(設計代幣)

  • 間距系統:8pt scale(4, 8, 12, 16, 20, 24, 32, 40)
  • 圓角規範:r-8, r-12, r-16, r-pill
  • 陰影層級:e-1 到 e-3,從卡片到浮層
  • 互動狀態:Hover 加深 8%、Active 縮放 0.98、Focus 外暈 4px

元件規格

  • 按鈕:高度 40px、內距 16px、字級 14px、圓角 r-12
  • 輸入框:高度 40px、內距 12px、圓角 r-8
  • 卡片:圓角 r-16、內距 16-20px、陰影 e-2
  • 標籤:高度 24px、圓角 r-pill、字級 12px

這種精確到像素的規範,確保任何人都能複製相同的設計風格。

從設計到程式碼

AI 設計總監最後給了我三份文件:

  1. Design Style Guide(Markdown)——完整的設計規範文件
  2. design-tokens.json——給設計系統用的語義代幣
  3. tokens.css——前端可直接引用的 CSS 變數

「這樣就能確保跨平台一致性。」AI 總結,「新功能介面可以快速套用現有風格,開發與設計溝通成本最低化。」

AI 設計總監的威力

今天的經歷讓我大開眼界。

原來設計不是天賦,是可以學習的系統。透過 AI 設計總監,我這個工程師也能:

  • 從動漫中汲取設計靈感
  • 建立完整的視覺語言系統
  • 產出專業的設計規範文件
  • 確保跨平台的一致性

AI 不只是回答問題的工具。給它正確的角色和任務,它就能成為專業的設計總監,帶領我探索陌生的設計領域。

最重要的是,我學會了設計思維。設計不是隨意的美化,而是有系統、有邏輯、可量化的規範。每個顏色、每個像素都有其存在的理由。

明天,換個角色。我會請 AI 當架構師,討論技術選型——為什麼選擇 Kotlin Multiplatform?

從設計到技術,一人公司的冒險才剛開始。

今日金句

「最好的設計,是讓使用者感受到魔法,卻不需要學習咒語。」

關於作者:Sam,一人公司創辦人。正在打造 Grimo,一個智能任務管理和分配平台。

專案連結GitHub - grimostudio


上一篇
Day 03: CTO 打造品牌入口:域名與 GitHub 組織規劃
系列文
30 天一人公司的 AI 開發實戰4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言