為 AI 協作而生的設計系統（上）：從風格指南到結構化元件

1. 當設計開始跟 AI 協作，結構變得重要

以前做設計系統，很多東西是「做給人看」的。

風格指南、命名規則、元件拆分，通常只要團隊內部看得懂就可以。

但這個專案用 AI 工具之後，狀況變得不太一樣。

設計結構會直接影響輸出品質。

Variables 怎麼分、元件怎麼切、命名方式怎麼寫，都會影響 AI 最後能不能正確使用這些東西。

所以本次實驗比較在意的是一件事：

如果一開始就把結構整理清楚，後面 AI 的生成會不會比較穩定。

2. 先把流程收斂到最簡

這個專案沒有做工具比較，直接把流程壓到最少。

因為設計本來就在 Figma 裡完成，所以整個流程基本都留在 Figma 生態裡。

最後留下的流程是：

Relume → Figma Make → Figma 元件整理

其他工具先不加進來，避免流程太複雜。

本次實驗的重點只是確認一件事：

在最簡配置下，這條流程能不能走完。

3. Relume：先把結構打底

流程從 Relume 開始。

它主要用來快速產出一組基礎 style guide，包含顏色、字體、間距這些最基本的設計 token。

可以調整的東西不多，但當作起點已經夠用。

這一段我比較在意的是：

這種結構化的 design token，之後 AI 能不能直接理解並使用。

所以在匯入 Figma 之後，我有再重新整理一次命名方式，讓 variables 分組更一致。

這一步其實花了一點時間，但對後面整體穩定性有幫助。

4. 用 Figma Make 生成畫面，再回來整理成元件

有了 variables 之後，就開始用 Figma Make 生成介面。

這個專案的目標是一個小型 dashboard，包含圖表、卡片、基礎儀表板元件。

一開始是用 prompt 慢慢調整，大概來回了 40 到 50 次才穩定下來。

中間遇到幾個狀況：

• 有些像 gradient、shadow、SVG 的細節在轉換時會跑掉
• 結構會有點鬆，需要後面再拉回 Auto Layout

所以最後還是回到 Figma 裡整理一次元件庫。

把比較穩定的部分抽出來做成：

• Navbar / Currency Card / Line Chart / Gauge / 基礎 layout components

這一步做完之後，整個系統才比較穩。

5. 一個比較明顯的感覺

做完這一輪之後，有一個很直接的感覺：

其實不一定要在 Figma 裡完整重建一套 design system。

Figma Make 產出的結果，本身就已經可以當成一個基準。

比較合理的做法變成：

保留少量核心元件，其他讓 AI 生成再收斂。

設計師的角色比較像是在做最後的結構整理，而不是從零搭全部。

6. 專案反思

整體來看，這條流程是可以跑的，而且確實比傳統方式快很多。

但目前還是有幾個限制：

• AI 很適合生成結構，但不擅長處理細節一致性
• Figma Make 到 Figma 之間的轉換還是單向
• 設計回寫到工具裡的能力還不完整

所以實際工作中，還是會出現來回調整的情況。

Cursor 這類工具在後期反而更直接，因為可以直接改 code，看結果也快。

7. 結論

這個專案比較像是在確認一件事：

當設計開始被 AI 參與之後，流程的重點會慢慢從「畫什麼」變成「怎麼讓結構可以被理解」。

• Relume 負責打底
• Figma Make 負責生成
• Figma 負責整理成可維護的元件

整體還算順，但目前還沒有完全形成雙向流程。

下一篇會接著看 Cursor 和實際開發階段的整合狀況。詳見下篇。