DESIGN.md plugin
A plugin and npx CLI that scaffold DESIGN.md from the official google-labs-code/design.md templates
- 9 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs an npm package via npx
- Downloads example templates from the network
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/design-mdDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs an npm package via npx
- Downloads example templates from the network
This is third-party code. Review the repository files before installing.
What it does
The /design-md:create command writes a DESIGN.md into the project: YAML design tokens plus prose rationale that any agent can read before building UI. You can start from a blank template or one of three official examples. The same function is available via npx claude-plugin-design-md for agents that can run shell commands.
Who it is for. For designers and frontend developers who want to capture a product's visual identity in a format agents can read.
Good fit when
- You need a design system spec in DESIGN.md format
- An agent builds UI and should stick to shared tokens
- You want YAML tokens to export to Tailwind or DTCG
Not a fit when
- The project already has its own design system format and you do not plan to switch to DESIGN.md
Example request
Create a DESIGN.md based on the atmospheric-glass exampleLimitations
It only scaffolds the file; you still fill in the product-specific content. Requires Node 18+. Official examples are downloaded from the network.
How to disable. Uninstall the design-md plugin via /plugin in Claude Code. For other agents, remove the added rule or the AGENTS.md section.
FAQ
Which templates are available?
blank by default, plus the official atmospheric-glass, paws-and-paths and totality-festival examples.
How do I validate the file?
Run npx @google/design.md lint DESIGN.md. The same package can export tokens to Tailwind and DTCG.
Discussion
No questions or reviews yet.
Related
PluginsDESIGN.md by Google Labs
DESIGN.md
The DESIGN.md format for agents and a CLI: lint contrast and references, diff versions, export tokens to Tailwind and DTCG
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Awesome Claude Design
awesome-claude-design
A collection of ready DESIGN.md files that Claude Design expands into an interface scaffold: colors, type, components. Take as inspiration
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
README in short
The project ships a Claude Code plugin with a create slash command, a universal skill file and an npx CLI. The README shows how to wire the instruction into Cursor, Cline, Windsurf, OpenCode, and via AGENTS.md for Codex, Gemini CLI and others. The --out and --force flags set the path and overwrite behavior. The package is published to npm by GitHub Actions on version tags.
README badge
Original SKILL.md
--- name: create-design-md description: Use when the user asks to create a DESIGN.md, scaffold a design system spec for AI coding agents, add YAML design tokens, or set up the google-labs-code/design.md format in a project. Runs the claude-plugin-design-md npx CLI so the file is written verbatim from the official templates, not rewritten from memory. --- # Scaffold a DESIGN.md via `claude-plugin-design-md` A `DESIGN.md` is a design-system specification AI coding agents can read to produce UI that matches an intended visual identity. It follows the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) spec: YAML front matter with design tokens plus markdown prose that explains the rationale. ## When to activate Trigger this skill when the user asks for any of: - a `DESIGN.md` file - a design system spec that AI agents can read - design tokens in YAML form - the `google-labs-code/design.md` format - a visual-identity brief that an AI coding agent can consume ## Do not write the file from scratch Templates are versioned upstream by Google Labs. Rewriting them from memory drifts from the spec. Always delegate to the packaged CLI. ## How to run ```bash npx -y claude-plugin-design-md [source] [--out path] [--force] ``` Requires Node 18+. No install needed — `npx` caches the package.