skills.rest
i-bebsi
i-bebsiCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Author, lint, and export Google's DESIGN.md design token specification files.

Updated Jun 17, 2026
Search Tags:#design system#design tokens#wcag#tailwind#lint#design.md#dtcg
One-click install
npx skills add https://github.com/i-bebsi/hermes-agent --skill design-md-i-bebsi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/i-bebsi/hermes-agent/tree/main/hermes-config/skills/creative/design-md
Command: npx skills add https://github.com/i-bebsi/hermes-agent --skill design-md-i-bebsi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Maintaining a consistent visual identity across projects and AI coding agents is difficult when design decisions live in scattered documents. This Skill creates and validates DESIGN.md files — Google's open spec that combines machine-readable design tokens with human-readable rationale in a single file. ## Core Features & Use Cases - Authoring: Generate DESIGN.md files with YAML front matter tokens (colors, typography, spacing, rounded corners, components) plus canonical Markdown sections. - Validation & Linting: Run the @google/design.md CLI to catch broken token references, duplicate sections, invalid colors, and WCAG contrast failures. - Exporting: Convert tokens to Tailwind theme JSON or W3C DTCG format for direct use in build pipelines. - Use Case: A team wants their AI coding agent to always use the same brand palette. They create a DESIGN.md, lint it for WCAG AA contrast compliance, and export a tailwind.theme.json so the tokens flow into their frontend build. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color, then lint it and export it to Tailwind format.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a DESIGN.md design token file?▼

Write a Markdown file with YAML front matter containing token groups like colors, typography, rounded, spacing, and components, followed by canonical prose sections such as Overview, Colors, and Typography. Always include name and colors, and quote hex values and negative dimensions so YAML parses them correctly.

How do I validate design tokens and check WCAG contrast?▼

Run npx -y @google/design.md lint DESIGN.md to validate structure, token references, and color formats. The wcag-contrast rule checks component textColor against backgroundColor against WCAG AA (4.5:1) and AAA (7:1) ratios, returning exit code 1 on errors.

Can I export DESIGN.md tokens to Tailwind or DTCG format?▼

Yes, the CLI supports both exports. Use npx @google/design.md export --format tailwind for a Tailwind theme JSON, or --format dtcg for W3C Design Tokens Format Module JSON. All commands also accept stdin via the dash argument.

Why does my DESIGN.md lint fail on component variants?▼

The spec forbids nested variant syntax like button-primary.hover. Variants such as hover, active, and pressed must be separate sibling component keys, for example button-primary-hover, using only whitelisted properties like backgroundColor, textColor, rounded, and padding.

When should I use DESIGN.md instead of a regular style guide?▼

Use DESIGN.md when coding agents or build tools need to consume your design system programmatically, since it pairs normative token values with rationale prose. For purely visual inspiration or one-off HTML prototypes, a formal token spec is unnecessary overhead.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
MarbleSodasMarbleSodas

design-md

Validate, diff, and export DESIGN.md files to Tailwind or W3C DTCG JSON.

Community
Intermediate
nexu-ionexu-io
93.2k

hand-drawn-diagrams

Generate hand-drawn Excalidraw diagrams from text prompts for visual documentation and prototyping.

Official
Basic
lxh755818-botlxh755818-bot

design-md

Create, validate, and export Google DESIGN.md design system specs.

Community
Advanced