• 【超完整懶人包】認識比特幣!原理與應用全面解析|動區新手村
  • Account
  • Account
  • BlockTempo Beginner – 動區新手村
  • Change Password
  • Forgot Password?
  • Home 3
  • Login
  • Login
  • Logout
  • Members
  • Password Reset
  • Register
  • Register
  • Reset Password
  • User
  • 不只加密貨幣,談談那些你不知道的區塊鏈應用|動區新手村
  • 動區動趨 BlockTempo – 最有影響力的區塊鏈新聞媒體 (比特幣, 加密貨幣)
  • 所有文章
  • 最完整的「區塊鏈入門懶人包」|動區新手村
  • 服務條款 (Terms of Use)
  • 關於 BlockTempo
  • 隱私政策政策頁面 / Privacy Policy
動區動趨-最具影響力的區塊鏈新聞媒體
  • 所有文章
  • 搶先看
  • 🔥動區專題
  • 🔥Tempo 30 Award
  • 加密貨幣市場
    • 市場分析
    • 交易所
    • 投資分析
    • 創投
    • RootData
    • 比特幣 BTC 即時價格
    • 以太幣 ETH 即時價格
    • Solana SOL 即時價格
    • 瑞波幣 XRP 即時價格
    • Pi Network PI 即時價格
  • 區塊鏈商業應用
    • 金融市場
    • 銀行
    • 錢包
    • 支付
    • defi
    • 區塊鏈平台
    • 挖礦
    • 供應鏈
    • 遊戲
    • dApps
  • 技術
    • 比特幣
    • 以太坊
    • 分散式帳本技術
    • 其他幣別
    • 數據報告
      • 私人機構報告
      • 評級報告
  • 法規
    • 央行
    • 管制
    • 犯罪
    • 稅務
  • 區塊鏈新手教學
  • 人物專訪
    • 獨立觀點
  • 懶人包
    • 比特幣概念入門
    • 從零開始認識區塊鏈
    • 區塊鏈應用
  • 登入
No Result
View All Result
  • 所有文章
  • 搶先看
  • 🔥動區專題
  • 🔥Tempo 30 Award
  • 加密貨幣市場
    • 市場分析
    • 交易所
    • 投資分析
    • 創投
    • RootData
    • 比特幣 BTC 即時價格
    • 以太幣 ETH 即時價格
    • Solana SOL 即時價格
    • 瑞波幣 XRP 即時價格
    • Pi Network PI 即時價格
  • 區塊鏈商業應用
    • 金融市場
    • 銀行
    • 錢包
    • 支付
    • defi
    • 區塊鏈平台
    • 挖礦
    • 供應鏈
    • 遊戲
    • dApps
  • 技術
    • 比特幣
    • 以太坊
    • 分散式帳本技術
    • 其他幣別
    • 數據報告
      • 私人機構報告
      • 評級報告
  • 法規
    • 央行
    • 管制
    • 犯罪
    • 稅務
  • 區塊鏈新手教學
  • 人物專訪
    • 獨立觀點
  • 懶人包
    • 比特幣概念入門
    • 從零開始認識區塊鏈
    • 區塊鏈應用
  • 登入
No Result
View All Result
動區動趨-最具影響力的區塊鏈新聞媒體
No Result
View All Result
Home 區塊鏈商業應用 AI

Google Stitch 開源設計系統:DESIGN.md 讓 Claude Code、Codex、Antigravity 生成高品質 UI

Token 形上學 by Token 形上學
2026-04-22
in AI
A A
Google Stitch 開源設計系統:DESIGN.md 讓 Claude Code、Codex、Antigravity 生成高品質 UI
36
SHARES
分享至Facebook分享至Twitter

Google Labs 旗下設計神器 Stitch 的 DESIGN.md 格式已開源:這是一個純 markdown 檔案,用來編碼設計系統的顏色、字體、間距與元件規則,讓 Claude Code、Gemini CLI…等 AI 代理在生成 UI 時,能直接讀取品牌設計規則而不是靠猜測。
(前情提要:Google 正式推出「Gemini 3」!登頂全球最聰明 AI 模型,有什麼亮點?)
(背景補充:Gemini App 正式登陸 Mac 桌面:Option+Space 一鍵喚醒,螢幕共享讓 AI 直讀資料)

本文目錄

Toggle
  • DESIGN.md 是什麼,做什麼?
  • 對設計工作流程的意義
  • 開源的戰略意圖

 

每個程式庫通常都會有 README.md,可以告訴 AI 這個專案是什麼、怎麼用。Google 現在問的是:設計系統,可不可以也有一個這樣的檔案?

DESIGN.md 的概念就是這樣來的,它是一個任何人、任何工具、任何 AI agent 都能直接讀取的 markdown 檔案,裡面寫著:這個品牌用什麼顏色、什麼字體、什麼間距規則,以及這些選擇背後的理由。

DESIGN.md 是什麼,做什麼?

一份 DESIGN.md 包含幾個核心部分:色彩定義(主色、語義色彩)、排版設定(字族、大小、字重、行高…)、間距與版型規則(間距刻度、網格慣例、圓角、陰影)。

DESIGN.md 有三種建立方式:讓 Stitch 的 AI 根據你的描述自動生成、從現有網站 URL 或圖片提取設計語言、或自己手寫 markdown。

生成之後,這個檔案可以帶到任何支援它的工具,包含 Claude Code、Cursor、Gemini CLI,以及 Google 自家的 Antigravity 開發平台。

對設計工作流程的意義

過去,設計交付的標準流程是:設計師在 Figma 裡完成設計 → 標注尺寸、顏色、間距 → 開發者對照 Figma 切版。AI coding agent 的崛起沒有完全打破這個流程,現在 AI 代理雖能登入 Figma,但也沒辦法輕易理解 Figma 檔案裡的設計意圖。

DESIGN.md 解決的正是這個缺口。它讓設計系統的表達方式,從「Figma 裡的一個檔案」變成「任何工具都能讀的純文字」。

對 AI coding agent 來說,有 DESIGN.md 和沒有 DESIGN.md 的差別是:前者可以生成「符合這個品牌規範」的 UI;後者只能生成「看起來還不錯」的 UI。

開源的戰略意圖

對設計工具市場來說,這個動作的潛在衝擊是明顯的。Figma 的護城河一直是「設計師在裡面工作、開發者在裡面取規格」。

如果 AI coding agent 可以直接讀 DESIGN.md 生成符合品牌規範的 UI,設計規格的「搬運」這個步驟就被壓縮了。例如 Figma 在 Stitch 2.0 發布當天股價單日下跌約 10%,市場對這個威脅方向的判斷,比任何分析師報告都更直接。

設計工具的競爭,過去是「誰讓設計師更有效率」;現在的問題變成了「誰讓 AI agent 更懂設計」。DESIGN.md 是 Google 在後面這場競爭裡交出的第一張牌。

加入動區 Telegram 頻道

📍相關報導📍

Google 正式推出「Gemini 3」!登頂全球最聰明 AI 模型,有什麼亮點?

Chrome 超進化來了!深度整合 Gemini,Google 為 AI 瀏覽器戰局投震撼彈

Google Pro、Ultra 好消息:訂閱戶 AI Studio 享 500 次額度,繞開 API 付費

Tags: AI設計DESIGN.mdFigmaGoogleStitch


關於我們

動區動趨

為您帶來最即時最全面
區塊鏈世界脈動剖析
之動感新聞站

訂閱我們的最新消息

動區精選-為您整理一週間的國際動態

戰略夥伴

Foresight Ventures Foresight News MEXC

主題分類

  • 關於 BlockTempo

動區動趨 BlockTempo © All Rights Reserved.

No Result
View All Result
  • 所有文章
  • 搶先看
  • 市場脈動
  • 商業應用
  • 區塊鏈新手教學
  • 區塊鏈技術
  • 數據洞察
  • 政府法規
  • RootData
  • 登入

動區動趨 BlockTempo © All Rights Reserved.