design-md
design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
design-md authors and validates Google's DESIGN.md token spec files for consistent design systems.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-26
design-md authors and validates Google's DESIGN.md token spec files for consistent design systems. design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
Use it when
- Yes.
- design-md can export your DESIGN.md tokens directly to Tailwind configuration format.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
mateaix/mateclaw/design-md · repository language: Java
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I write a design.md token spec?
design-md provides tooling to author DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens with human-readable rationale. The CLI guides you through creating token sections (colors, typography, spacing, etc.), validates syntax, and ensures all tokens are properly structured. You can start from a template or port an existing style guide into the spec format.
Can design-md validate my DESIGN.md file for errors?
Yes. design-md includes a linter that checks your DESIGN.md files for structural errors, missing required fields, and malformed token definitions. It also performs regression detection by diffing two versions to catch unintended changes. The CLI reports all issues with line numbers and remediation hints.
How do I export design tokens to Tailwind?
design-md can export your DESIGN.md tokens directly to Tailwind configuration format. The export command transforms your design system into a Tailwind-compatible config file, letting you use your tokens immediately in your build pipeline. You can also export to W3C DTCG JSON format for broader ecosystem compatibility.
Does design-md check WCAG contrast compliance?
design-md includes accessibility validation that checks color token contrast ratios against WCAG AA and AAA standards. When you lint your DESIGN.md file, it automatically flags color pairs that fail to meet your target compliance level, helping you catch accessibility issues before deployment.
What formats can design-md export to?
design-md supports export to Tailwind configuration and W3C Design Token Community Group (DTCG) JSON formats. Both exports preserve your token structure and metadata, letting you integrate your design system into different toolchains and frameworks.
Can I convert an existing style guide to design-md?
design-md helps port existing style guides into machine-readable DESIGN.md spec format. While the conversion process requires mapping your current tokens and rationale into the spec structure, the CLI provides validation and export tools to ensure the result is complete and correct.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
DESIGN.md Skill
DESIGN.md is Google's open spec (Apache-2.0, google-labs-code/design.md) for
describing a visual identity to coding agents. One file combines:
- YAML front matter — machine-readable design tokens (normative values)
- Markdown body — human-readable rationale, organized into canonical sections
Tokens give exact values. Prose tells agents why those values exist and how to
apply them. The CLI (npx @google/design.md) lints structure + WCAG contrast,
diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON.
When to use this skill
- User asks for a DESIGN.md file, design tokens, or a design system spec
- User wants consistent UI/brand across multiple projects or tools
- User pastes an existing DESIGN.md and asks to lint, diff, export, or extend it
- User asks to port a style guide into a format agents can consume
- User wants contrast / WCAG accessibility validation on their color palette
For purely visual
(truncated - see the full file via the links below)
File tree — 2 files
mateclaw-server/src/main/resources/skills/design-md/SKILL.md
mateclaw-server/src/main/resources/skills/design-md/templates/starter.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Author and validate design token specification files”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-md helps you create and maintain formal design token specifications using Google's open DESIGN.md format. Write machine-readable tokens in YAML paired with human-readable guidance, then lint for WCAG contrast compliance, diff versions for regressions, and export to Tailwind or W3C DTCG JSON formats.
Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
design-spec is a guide to creating DESIGN.md, the single source of truth for a project's visual language. It covers the YAML token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order—all required before writing any UI code. Use it when defining design tokens or establishing a design source-of-truth for web or mobile projects.
This skill validates DESIGN.md files using Google's @google/design.md specification, catching structural errors, broken token references, and design-system quality issues. It runs a bundled Node script to lint YAML front matter, component properties, and WCAG contrast ratios, then reports findings with actionable fixes. Use it to verify design tokens before shipping or to compare versions for regressions.
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
specify-solution guides you through building solution design documents (SDDs) that capture how your system will be built. It structures your architecture decisions as traceable ADRs, validates that every requirement maps to a component, and ensures your design is complete and conflict-free before implementation begins.
More skills design-system (MIT) · Design Spec Extraction (unlicensed) · design-context-extract (MIT)