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

📄Full Article· Automatically extracted by trafilaturaGemini 翻譯1251 words

Google Labs has open-sourced the DESIGN.md format for its design tool, Stitch: it is a pure markdown file used to encode design system rules—such as colors, typography, spacing, and component specifications—allowing AI agents like Claude Code and Gemini CLI to read brand design rules directly instead of relying on guesswork when generating UI. (Previous coverage: Google officially launches "Gemini 3"! Topping the world as the smartest AI model, what are the highlights?) (Background supplement: Gemini App officially lands on Mac desktop: Wake it up with Option+Space, and screen sharing allows AI to read data directly) Most code repositories have a README.md to tell AI what the project is and how to use it. Google is now asking: can a design system have a file like this too? This is how the concept of DESIGN.md was born. It is a markdown file that any person, any tool, and any AI agent can read directly, containing information on: what colors, fonts, and spacing rules a brand uses, as well as the rationale behind these choices. A DESIGN.md file includes several core sections: color definitions (primary colors, semantic colors), typography settings (font families, sizes, weights, line heights, etc.), and spacing and layout rules (spacing scales, grid conventions, border radii, shadows). There are three ways to create a DESIGN.md: let Stitch's AI generate it automatically based on your description, extract the design language from an existing website URL or image, or write the markdown by hand. Once generated, this file can be brought into any tool that supports it, including Claude Code, Cursor, Gemini CLI, and Google's own Antigravity development platform. In the past, the standard design delivery process was: designers complete the design in Figma → annotate dimensions, colors, and spacing → developers reference Figma to build the UI. The rise of AI coding agents has not completely broken this process; although AI agents can now log into Figma, they cannot easily understand the design intent within Figma files. DESIGN.md solves exactly this gap. It transforms the expression of a design system from "a file inside Figma" into "plain text that any tool can read." For an AI coding agent, the difference between having a DESIGN.md and not having one is: the former can generate UI that "adheres to brand specifications," while the latter can only generate UI that "looks decent." For the design tool market, the potential impact of this move is clear. Figma's moat has always been "designers work inside it, and developers extract specifications from it." If an AI coding agent can directly read a DESIGN.md to generate UI that complies with brand specifications, the "hand-off" step of design specs is compressed. For example, Figma's stock price fell by about 10% on the day Stitch 2.0 was released; the market's judgment on this threat is more direct than any analyst report. Competition in design tools used to be about "who makes designers more efficient"; now the question has become "who makes AI agents better at understanding design." DESIGN.md is the first card Google has played in this latter competition.

Data Status✓ Full text extractedRead Original (動區 BlockTempo)

🔍Historical Similar Events· Keyword + Asset Matching6 items

2026-04-21

Google assembles elite team to catch up with Anthropic, even its own engineers are secretly using Claude Code

2026-04-23

Introduction to Claude Code's new feature /ultrareview: Cloud-based multi-agent deep code review, now free for a limited time for Pro and Max users

Similarity 170%關鍵字 code/claude同分類 zh

2026-04-19

Claude Code updates to native binary, ditching JS and Node.js dependency

Similarity 170%關鍵字 code/claude同分類 zh

2026-04-17

Anthropic launches visual design tool "Claude Design"! Create presentations, proposals, and App prototypes in seconds with a single prompt.