AI Visuals
DESIGN.md
DESIGN.md is a file format and CLI toolkit from Google Labs Code for giving coding agents a project’s visual rules. It puts design tokens and the reasons for using them in a reference that stays with the project.
Use it when the next coding session needs the same colours, type and component guidance as the last one, rather than rebuilding that context in each prompt.
What it is
A file the agent can read
Optional YAML frontmatter holds machine-readable tokens. Markdown sections explain the visual identity and how to apply it. This supplies guidance; it does not make an agent follow every rule.
Why it stands out
Checks beside the written guidance
The CLI validates structure, compares token changes and exports tokens. These are checks on the design file, not a review of the interface an agent produces.
Availability
Specification, examples and npm package
The repository publishes the format, example files and the @google/design.md CLI. You can author the reference without running a coding assistant; the CLI needs Node.js 18 or later.
Why it matters
What makes it useful
A colour name in prose and a token value do different jobs. The specification makes the tokens authoritative; the prose explains their use. Keep a precise value in the token rather than expecting a description such as “forest green” to specify it for the agent.
What to know
Where it fits
A design system need not define every category. The optional omitted field records deliberately absent sections, either by name or with a reason, and suppresses their missing-section warnings. This lets you distinguish a deliberate absence from an incomplete reference without inventing spacing or corner values.
Notable points
What stands out
The diff command reports token changes and returns a failure when the later file has more errors or warnings. Lint returns a failure for errors; warnings alone do not fail it. Read the findings as well as the exit code: a passing lint run can still have a warning about a component’s text/background contrast. Before making an export part of your build, give lint its own check. Since CLI 0.4.0, a successful export returns exit code 0 even when the source has lint errors or warnings. Use lint’s findings to decide whether the source is acceptable, then export it; if warnings must block your build, check those explicitly too. An export success means the output was serialized, not that the design reference passed validation.
Before using
What to review
The specification’s current format version is alpha. Keep the version and exported format in mind when connecting it to existing token tools.
On Windows, the design.md executable name can collide with the Markdown file association. The documented dot-free command is npx -p @google/design.md designmd lint DESIGN.md.
Check the actual rendered interface separately. A declared colour-pair check cannot establish accessibility for the whole product.
Check the original listing's documentation for current requirements, limitations, licensing and any relevant privacy or security considerations.
Reader fit
Who may find it relevant
Designers who already know the product’s visual rules and want to explain them to coding agents.
Developers who want token changes and the written rationale reviewed with their project files.
Someone seeking a tool that invents a complete design system still needs to supply the design decisions; this format records and checks them.
Editorial note
Why LifeHubber lists it
DESIGN.md can connect an agent’s written design reference to the values used by a build. The CLI exports Tailwind v3 theme settings, Tailwind v4 CSS themes and DTCG tokens; version 0.4.0 also adds standard CSS variables. That makes it useful when a team wants the reference and exported tokens to start from the same file, rather than manually copying values into a second set. The export covers tokens, not the complete Markdown rationale or a finished interface.
Source links
Source materials
Reader note
About our listings
LifeHubber’s listings help you explore what’s available in AI and are not endorsements. We don’t independently verify every detail or guarantee that each listing is accurate, safe, actively maintained, or right for your needs.
More in Ecosystem
Keep browsing this category
Explore more AI ecosystem resources.
Docling
docling-project/docling
A document conversion toolkit with structured text, tables and layout, native chunking for retrieval, Markdown and JSON exports, and local model configuration.
Marker
datalab-to/marker
A document converter with OCR, Markdown and structured block outputs, page coordinates for checking source layout, and chunks output with full HTML for each top-level block.
CubeSandbox
TencentCloud/CubeSandbox
TencentCloud sandbox infrastructure for AI agents, with KVM MicroVM execution, E2B-compatible code workflows, templates, snapshots, an E2B-compatible Volume framework, preview Kubernetes deployment, and preview S3-backed cross-node pause and resume.
For project maintainers
Listed here? You can use the badge.
If you maintain a project with a current LifeHubber listing, you may add the optional “Listed on LifeHubber AI Resources” badge to its README, docs, or website. No introduction or permission request is needed.
MORE ON LIFEHUBBER
Use AI on your own terms.
Explore more AI projects, stories, guides, tools and community insights across LifeHubber.