當設計文件有 946 個顏色變數、8 種模式、12 種變體時，誰還能記住真相？
這不是一個假設的問題。這是 Figma 自己的產品設計系統檔案的現狀。一個被專業設計團隊精心打造的黃金標準，卻複雜到讓人懷疑人生。
Sam Henri Gold 在他的部落格上寫道：「想像一下你在除錯一個看起來不對的顏色。你檢查元件。元件使用一個變數。變數別名到另一個變數。那個變數引用了一個模式。模式在實例層級被覆寫。實例在一個應用了資料庫交換的巢狀元件內。」到這時，你會考慮拿起程式碼，或者搬到鄉下當牧羊人，因為再多一分鐘你就會瘋掉。
這不是設計工具應該有的樣子。
Figma 的勝利與隱藏成本
Figma 贏了 Sketch，部分原因在於他們聲稱自己是「真相的來源」。他們的工具會是規範性的、權威的。這個勝利有一個隱藏的成本。
Figma 的格式是封閉的、大部分沒有文件的，想要用程式方式操作非常痛苦。這導致了一個意外的後果：Figma 意外地將自己排除在 AI 智慧體時代相關的訓練資料之外。
大型語言模型（LLM）是在程式碼上訓練的，不是在 Figma 的 primitives 上訓練的。所以模型從來沒有學會它們。
隨著設計師寫程式碼變得更容易，AI 智慧體不斷改進，真相的來源自然會遷移回程式碼。而 Figma 過去十年不得不引入的所有巴洛克式基礎設施，相比之下會顯得瘋狂。為什麼要在損失性的近似物上折騰，而不是直接在實際存在的媒介中工作？如果我們想做陶器，為什麼要畫水彩畫的陶罐，而不是直接玩陶土？
「真實材質」的設計原則
Claude Design 選擇了相反的方向。
有一個「工藝與藝術運動」（Arts and Crafts）的原則叫做「真實材質」（truth to materials）——一個事物應該誠實地展示它是什麼以及如何製造，而不是偽裝成其他東西。
Figma 最終變成了這個原則的對立面：一組極其嚴格的架構，上面覆蓋著「就隨性吧，老兄」的自由形式偽裝。像一個 Type-A 人格，身體上無法放鬆，被迫在內心尖叫「你的框架沒有巢狀！你的 tokens 分離了！沒有任何東西在網格上！」的同時，表演著放鬆。
Claude Design，儘管粗糙，至少誠實地展示了它是什麼：HTML 和 JS 一路向下。
這個誠實性帶來了一個巨大的結構性優勢：它的兄弟是 Claude Code。
最終，我可以看到 Claude Design 直接將東西傾倒進 Claude Code，反之亦然。Claude Design 的入門流程已經讓你導入你的儲存庫。設計與實作之間的反饋迴圈——這是有史以來摩擦力的來源——變成了一次對話。
設計工具的未來：兩條道路
我認為從這裡開始，設計工具會分叉成兩種不同的形狀——而在 Figma 和每一個其他試圖回答他們在 2016 年回答的同樣問題的競爭工具之間，幾乎有一個時鐘重置：誰能幫助我，一個設計師，最快地將我的想法變成現實？
劇透：不是 Figma Make。Figma Make 感覺上主要是對那些已經喝下 Kool-Aid 的人有幫助——它從 Figma 樣式、元件庫和專屬 props（或者，正如我喜歡稱它們為「Prop Props」）中讀取，它是這個新景觀中唯一還在假設設計檔案是規範性的工具。它是為那些想要（或者別無選擇只能）留在系統內的人準備的工具。
Claude Design 是這兩個工具中的第一個，並採取了相反的賭注。
另一個從這個時刻出現的工具將完全沒有對程式碼的期望。它將是一個純粹的探索環境——一個可以放置矩形、堆疊層級樣式、折騰混合模式和漸層、完全瘋狂的地方，不受系統或提示慣例的約束。也許是一個帶有 Pencil 支援的 iPad 應用程式，在那裡你只是快速地素描一堆矩形。37signals 可能會在這個時刻做一些非常有趣的事情。或者也許它朝著相反的方向發展——更像 Photoshop，全力投入高保真合成，讓我們的想像力狂奔，因為我們不再受限於用 CSS 效果能做到的界限。
Figma 的 Sketch 時刻正在迅速到來。
設計與程式碼的界線正在模糊
在工作時，我們花費了相當多的時間將直接在程式碼中進行的設計變更反向移植到 Figma，這一點都不好玩。我無法分享那個檔案，但為了公平比較，這是 Figma 自己的產品設計系統檔案。我必須假設它是由你能找到的最有能力的設計系統團隊建立的。然而…
一個 Figma 變數面板顯示 946 個顏色變數，組織成如「bg/desktopBackgrounded」等巢狀群組，單個選中的變數顯示八個模式特定值：Light、Dark、FigJam-Light、FigJam-Dark、DevMode-Light、DevMode-Dark、Slides-Light、Slides-Dark。
一個模態頁尾元件開啟其變體屬性編輯器，顯示 12 個變體，下拉選單充滿了「DS Library Swap」、「QA Plugin」、「Growth Stepper」和「Sharing Actions」等值。右側面板列出了八個 props，如「Border」、「Second CTA」和「Helper Text」。
一個滑桿元件的效果樣式面板，顯示一個名為「light/elevation-300-tooltip」的樣式。展開它顯示其完整定義：30% 黑色的 0.5px 投影。它有自己的命名樣式，因為這是記錄它對應的 CSS 變數的唯一方式。
一個帶有 16 個變體的組合輸入元件。它的層級面板中的子項被命名為「Default, Default, Close Button=False」和「Default, Focused, Close Button=True」等。
這些是 Figma 自己的檔案。由他們自己的團隊建立。這是黃金標準。
設計系統的複雜性陷阱
隨著產品團隊擴展，設計需要在工程組織內部合理化自己，它被推向系統化——Figma 發明了自己的 primitives 來讓這個工作變得可行：元件、樣式、變數、props 等等。一些概念借鑑自程式設計，一些沒有，整個東西沒有整齊地映射到任何東西上。指引演變，遷移堆積，如果你想要自動化其中任何一個，你會被困在一堆劣質的外掛程式中。
這個野獸足夠毛茸茸，以至於現在整個設計角色專門於處理系統本身。
有一種緊張的推拉，總是在 Figma 和程式碼之間爭論什麼應該是真相的來源。Figma 赢了 Sketch，部分原因在於聲稱自己在那裡的主權——他們的工具會是規範性的。
從複雜性到簡單性：Claude Design 的承諾
Claude Design 代表了一種不同的哲學。它不試圖成為「設計檔案作為真相」的捍衛者。它承認程式碼才是真相，並在這個前提下運作。
這種轉變的含義是深遠的。當設計師和開發者在一個共用的語境中工作——一個語境就是程式碼本身——整個設計到開發的流程變得更加流暢。不再需要在 Figma 和程式碼之間來回傳輸，不再需要擔心同步問題，不再需要在兩個不同的世界中維護兩套真實性。
對於那些長期受苦於設計與開發之間鴻溝的團隊來說，這是一個誘人的前景。
設計工具市場的下一輪競爭
Figma 的統治地位可能即將面臨挑戰。就像 Figma 在 2016 年通過回答「誰能幫助我，一個設計師，最快地將我的想法變成現實？」而擊敗 Sketch 一樣，現在的競爭對手正在回答一個新版本的同一個問題——在一個 AI 智慧體可以寫程式碼、生成設計、並在兩者之間無縫橋接的世界裡，誰能幫助設計師最快地將想法變成現實？
Figma Make 試圖通過加強現有的 Figma 生態系統來回答這個問題。但這個生態系統可能已經過時。如果程式碼是真相，為什麼還要依賴一個封閉的、複雜的中間層？
Claude Design 選擇了更激進的路徑：承認程式碼才是真相，並在這個前提下建構工具。這可能會被證明是更聰明的選擇。
什麼是「真實材質」的設計？
「工藝與藝術運動」的「真實材質」原則強調，一個事物應該誠實地展示它是什麼以及如何製造，而不是偽裝成其他東西。
Gustav Stickley 的燈桌，約 1902 年。接縫是暴露的，不是隱藏的。木材就是木材。
Claude Design 體現了這個原則。它不試圖隱藏程式碼的本質。它不試圖創造一個設計的「抽象層」而最終只是製造更多的複雜性。它是 HTML 和 JS，從頭到尾。
兩種未來的設計工具
我預見設計工具會分叉成兩種不同的形狀：
第一種是「程式碼優先」的工具，如 Claude Design。這些工具接受程式碼是設計的真相來源，並在這個前提下運作。它們可能看起來粗糙，可能缺乏 Figma 的那些花哨功能，但它們是誠實的，而且它們與 AI 智慧體和開發工作流整合得更好。
第二種是「純探索」的工具。這些工具完全放棄對程式碼的期望。它們是設計師的遊樂場，一個可以自由地探索、實驗、瘋狂地堆疊效果和漸層的地方，不受系統或程式碼的約束。
Figma Make 試圖站在兩者之間——它想要保持 Figma 的生態系統，同時加入 AI 功能。但這可能不是正確的方向。
設計師的選擇
對設計師來說，這是一個有趣的時刻。你有一個選擇：
你可以繼續投資於 Figma 的複雜性，學習它越來越多的功能，管理越來越多的變數和元件，希望這個生態系統能夠繼續生存下去。
或者，你可以嘗試新的工具，接受程式碼是真相來源的新現實，學習如何與 AI 智慧體協作，在設計和開發之間建立更直接的橋樑。
這不是一個容易的選擇。Figma 的生態系統已經成熟，有大量的學習資源和社群支持。新工具如 Claude Design 還很粗糙，可能缺乏許多你習慣的功能。
但歷史告訴我們，當技術範式轉移時，舊的優勢可能會變成舊的包袱。當數位相機出現時，許多攝影師堅持用底片，但最終，數位相機贏了。
設計師的角色在改變
隨著 AI 智慧體的進步，設計師的角色正在改變。設計師不再只是「在 Figma 中做設計」的人。設計師變成了能夠在各種媒介中表達想法的人——程式碼、原型、互動設計、敘事。
這並不意味著設計師需要成為全職的程式設計師。但這意味著設計師需要理解程式碼，能夠與 AI 智慧體協作，能夠跨越設計和開發的界限。
Claude Design 和類似的工具代表了這種轉變。它們不是設計的「自動化工具」——它們是設計師的新介面，一個更誠實、更直接的介面。
Figma 的下一步
Figma 面臨一個困境。他們可以試圖保護現有的生態系統，加強他們的封閉格式，繼續相信設計檔案是真相來源。或者，他們可以開放，接受程式碼是真相，轉型成為一個「程式碼優先」的設計工具。
後者可能意味著放棄一些他們建立的基礎設施。但 Figma 的 Sketch 時刻正在迅速到來，如果他們不能適應，他們可能會像 Sketch 一樣，被一個更聰明的競爭者擊敗。
結尾：設計工具的真相時刻
Figma 的 946 個顏色變數、8 種模式、12 種變體，這不是一個成功的設計系統的標誌——這是一個失敗的警示燈。當一個系統變得如此複雜，以至於沒有人能夠真正理解它，它已經失去了作為「真相來源」的資格。
Claude Design 可能很粗糙，可能不完美，但它選擇了誠實。它接受程式碼是真相來源，並在這個前提下運作。在 AI 智慧體時代，這可能是一個更聰明的選擇。
設計工具的市場正在重置。誰能回答「在一個 AI 智慧體可以寫程式碼的世界裡，誰能幫助設計師最快地將想法變成現實？」這個問題，誰將贏得下一輪競爭。
如果你在問自己為什麼你的設計系統如此複雜，為什麼你在 Figma 和程式碼之間來回傳輸，為什麼你感覺像在「畫水彩畫的陶罐」而不是直接玩陶土——也許是時候考慮一個不同的路徑了。
Claude Design 可能就是那條路徑的開始。