DESIGN.md

Install

/plugin marketplace add eveiljuice/claude-plugin-design-md
/plugin install design-md@eveiljuice

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.

Example request

Create a DESIGN.md based on the atmospheric-glass example

Limitations

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.

Security check

• Runs an npm package via npx
• Downloads example templates from the network

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.

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.

Related