Google Labs open-source Stitch design format DESIGN.md

robot
Abstract generation in progress

ME News Report, April 22 (UTC+8), according to Beating Monitoring, Google Labs publicly released a draft specification of the DESIGN.md format used internally for the AI design tool Stitch. This is a file format that allows AI agents to understand design systems; previously used only within Stitch, it can now be open-sourced to reuse the same design rules in tools outside Stitch.

A DESIGN.md file has two layers: the top YAML preface describes design tokens in a machine-readable way, covering colors (hex values), fonts (including fontFamily, fontSize, fontWeight, lineHeight, etc.), spacing, border radius, and components; the lower Markdown body explains design rationale in the order of Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do’s and Don’ts, for human reading. Component properties reference tokens from above using syntax like {colors.primary}.

A supporting CLI tool offers linting (including 7 rules and WCAG contrast checks), diff (comparing two versions), export (to Tailwind or DTCG formats), and spec (generating specification documents). The token system references the W3C Design Tokens Format Module.

The current version is alpha 0.1.0, licensed under Apache-2.0, maintained by five contributors including davideast. Users can generate their own DESIGN.md at stitch.withgoogle.com or submit modifications to the GitHub repository google-labs-code/design.md.

For AI programming agents, this is equivalent to a machine-verifiable design contract: agents no longer need to guess the purpose of a color or the layout logic of a component but can verify their choices against tokens and perform WCAG rule-based accessibility checks.

(Source: BlockBeats)

View Original
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Reward
  • Comment
  • Repost
  • Share
Comment
Add a comment
Add a comment
No comments
  • Pin