Open Source Alternatives LogoOpen Source Alternatives
AlternativesBlogAdvertise
Open Source Alternatives LogoOpen Source Alternatives

Stay Updated

Subscribe to our newsletter for the latest news and updates about Alternatives

Open Source Alternatives LogoOpen Source Alternatives

Handpicked Open Source Alternatives to Paid Softwares

Product
  • Search
  • Categories
  • Tag
  • Sign In
Resources
  • Blog
  • Collection
  • Submit
  • Advertise your tool
Company
  • Privacy Policy
  • Terms of Service
  • Refund Policy
  • Sitemap
Copyright © 2026 All Rights Reserved.
Home/Categories/Design & Creative/design.md
icon of design.md

design.md

Connect coding agents to design-system tokens and rationale through DESIGN.md files. Apache-2.0 licensed with an npm CLI for lint, diff, and export.

23K starsTypeScriptApache-2.0Active this month
Visit websiteGitHub repo
image of design.md
Contents
  1. 01Who design.md is for
  2. 02The problem it solves
  3. 03How it solves it
  4. 04Strengths and trade-offs
  5. 05design.md vs alternatives
  6. 06Tech stack
  7. 07FAQ
  8. 08Similar open-source tools
TL;DR

design.md is an Apache-2.0 specification and CLI for describing visual identity to coding agents. It combines YAML design tokens with markdown rationale so generated UI can follow brand colors, typography, spacing, and component rules from a durable file in the repo.Apache-2.0 · TypeScript · 23K stars · Active this month

who it's for

Who design.md is for#

Agent-generated UI in product repos

Use DESIGN.md when coding agents regularly create pages or components and need a shared visual identity file.

Skip if:

You only use agents for backend code or one-off prototypes with no design-system expectations.

Design-system handoff

Use it to turn brand rules and component choices into a file that engineering agents can lint and apply.

Skip if:

Your team requires designers to approve every pixel directly in a visual editor before implementation.

Token regression review

Use the diff command when design tokens change and you want agents to explain what shifted.

tech stack · detected from GitHub

What it's built on#

Languages
TypeScript
frequently asked

FAQ#

What is DESIGN.md?
What license does DESIGN.md use?
How do you validate a DESIGN.md file?
also worth a look

Similar open-source tools#

deer-flow

deer-flow

Build super agents with DeerFlow's powerful framework

75.4KPythonMIT

Repository

Stars
23K
Forks
1.8K
License
Apache-2.0
Latest
0.3.0
Last commit
13 days ago
Last verified
Jun 29, 2026
Repo
google-labs-code/design.md ↗

Additional details

Language
TypeScript
Open issues
55
Contributors
17
First release
2026

Categories

Design & CreativeWeb DevelopmentAI & Machine Learning

Tags

UI/UX DesignAI Coding AssistantLow-codeDeveloper Tools

Skip if:

Your design tokens already have mature internal validation and no agent handoff gap.

the problem

The problem it solves#

Coding agents can generate usable interfaces, but they often lose visual consistency because design context lives outside the repo or inside one-off prompts. Teams need a source file that gives agents exact token values and the reasoning behind them, so every generated component follows the same visual system.

how design.md solves it

How it solves it#

Token and rationale format

A DESIGN.md file combines YAML front matter for exact token values with markdown sections that explain the design intent behind those values.

Agent-ready linting

The @google/design.md CLI validates DESIGN.md files and returns structured JSON findings that agents can act on during implementation.

Design drift detection

The diff command compares two DESIGN.md files and reports added, removed, and modified token groups before UI regressions spread.

Export paths for implementation

The CLI can export tokens to Tailwind-oriented JSON, Tailwind v4 CSS variables, and DTCG token JSON for downstream build systems.

Portable markdown contract

Because the format is plain markdown plus YAML, teams can version it beside application code and update it through normal review flows.

strengths · trade-offs

Strengths and trade-offs#

Strengths

  • Clear fit for agent workflowsThe project is built specifically for coding agents, which makes it more direct than asking agents to infer design rules from screenshots or broad brand docs.
  • Readable by people and toolsDesigners can explain choices in prose while engineers and agents consume exact token values from the same file.
  • Permissive licenseApache-2.0 licensing keeps adoption straightforward for internal tools, commercial products, and agency workflows.

Trade-offs

  • -Specification, not a design appDESIGN.md does not replace Figma, Sketch, or a design review process. It documents implementation rules for agents after design direction exists.
  • -Early format discipline requiredTeams need to maintain the file as the design system changes, or agents will faithfully follow stale tokens.
  • -Best with tokenized systemsThe format works best when a team can express its visual identity through named colors, typography, spacing, rounding, and component tokens.
versus alternatives

design.md vs alternatives#

Compared to Figma

Figma is the better place to explore layouts visually, collaborate on mockups, and hand off designed screens. DESIGN.md is better when the design direction already exists and coding agents need a durable file they can read inside the repo. Use Figma for visual creation; use DESIGN.md to preserve design-system rules during agent-assisted implementation.

The official README shows the @google/design.md CLI. Run npx @google/design.md lint DESIGN.md to validate a file and return structured findings.

Does DESIGN.md replace Figma?

No. DESIGN.md is a repo-friendly contract for agents and implementation workflows, not a visual design canvas.

page-agent

page-agent

AI-powered GUI Agent for your website

20.6KTypeScriptMIT
palmier-pro

palmier-pro

AI video editing made seamless and efficient

9.4KSwiftGPL-3.0
OpenMontage

OpenMontage

Turn your AI coding assistant into a video studio

10.1KPythonAGPL-3.0
freeCodeCamp

freeCodeCamp

Join the FreeCodeCamp community and contribute!

450.6KTypeScriptBSD-3-Clause
iroh

iroh

Connect devices seamlessly without relying on the cloud.

10.5KRustApache-2.0

DESIGN.md is a markdown-based specification for describing a design system to coding agents. It combines YAML tokens with prose rationale so agents know both the exact values and the design intent.

GitHub metadata reports the DESIGN.md repository as Apache-2.0 licensed.