design-md
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-md creates and validates Google's DESIGN.md token spec files for consistent design systems across projects.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
design-md creates and validates Google's DESIGN.md token spec files for consistent design systems across projects. 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.
Use it when
- Yes.
- design-md generates Tailwind or DTCG JSON exports directly from your design.md file.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
NousResearch/hermes-agent/design-md · repository language: Python
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
What is design-md and what can it do?
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.
Can design-md validate design tokens and check WCAG compliance?
Yes. design-md lints your design token files to catch errors and regressions, and ensures design system colors meet WCAG accessibility contrast standards. You can validate your tokens before exporting them to other tools or sharing across projects.
How do I export design tokens to Tailwind from design-md?
design-md generates Tailwind or DTCG JSON exports directly from your design.md file. Once you've authored your tokens in the DESIGN.md format, the tool can convert them to Tailwind configuration or W3C DTCG JSON for use in your projects.
What export formats does design-md support?
design-md supports export to Tailwind configuration and W3C DTCG JSON formats. This lets you standardize UI and brand tokens across multiple projects and tools while maintaining a single source of truth in your DESIGN.md file.
How does design-md help with design system version control?
design-md includes diff and linting capabilities to catch regressions and errors when you update your design token files. You can track changes across versions and ensure your design system stays consistent as it evolves.
Is design-md open source and what license does it use?
Yes, design-md is open source under the MIT license, making it free to use, modify, and distribute in both commercial and personal projects.
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
(truncated - see the full file via the links below)
File tree — 2 files
skills/creative/design-md/SKILL.md
skills/creative/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 › “Create, validate, and export a formal design token specification file”
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 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-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.
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 Extraction converts visual inputs—screenshots, mockups, and design exports—into structured JSON specifications following W3C Design Tokens standards. The skill uses a 7-pass serial architecture to extract layout, colors, typography, components, spacing, accessibility data, and state information, writing each phase to disk for validation and resumption.
Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
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.
More skills figma-design-handoff (MIT) · design-system (MIT) · google-workspace (MIT)