design-md-chrome is a Chrome extension that reverse-engineers any website’s design system into a structured DESIGN.md file. It extracts five types of design tokens: typography, colors, spacing, shadows, and motion. This file is then consumed directly by AI coding agents like Claude Code, Cursor, Aider, and Continue, giving them awareness of visual design constraints before generating UI code. On April 21, 2026, Google made Stitch’s DESIGN.md format open-source, establishing a shared standard for how agents read design specifications.
The concept works similarly to how .d.ts files gave code editors type awareness. A DESIGN.md file placed in a project’s root directory tells agents what fonts, colors, and spacing to use, so generated components match the existing design without manual correction. This solves the biggest pain point in AI-assisted frontend development: agents produce functional code but create visually inconsistent interfaces because they have no access to the project’s design decisions.
With six or more agents already supporting the format and Google backing the open standard, DESIGN.md is positioned to become a default part of project scaffolding. The workflow shifts from “generate code then fix the styling” to “generate code that already matches the design.” For teams using design systems, this removes an entire round of review and revision from the development cycle.
Sources:
- DESIGN.md Generator (Chrome Web Store)
- Stitch’s DESIGN.md Format is Now Open-Source (Google Blog)
- Agent Skills Specification
Disclaimer: For information only. Accuracy or completeness not guaranteed. Illegal use prohibited. Not professional advice or solicitation. Read more: /terms-of-service
Reuse
Citation
@misc{kabui2026,
author = {{Kabui, Charles}},
title = {Design-Md-Chrome and {Google} {Stitch:} {Giving} {AI}
{Agents} {Design} {System} {Awareness}},
date = {2026-05-02},
url = {https://toknow.ai/posts/design-md-chrome-google-stitch-ai-design-system-awareness/},
langid = {en-GB}
}