Verified:GitHub

design-md

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

Updated Sep 9, 2026

Search Tags:#design system #design tokens #wcag #tailwind #lint #design.md #dtcg

One-click install

npx skills add https://github.com/luckybbjason1/trading --skill design-md-luckybbjason1

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/luckybbjason1/trading/tree/main/.hermes/skills/creative/design-md
Command: npx skills add https://github.com/luckybbjason1/trading --skill design-md-luckybbjason1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Teams struggle to keep visual identity consistent across projects and coding agents. This Skill creates and validates DESIGN.md files — Google's open spec that combines machine-readable design tokens with human-readable rationale — so colors, typography, and components stay single-sourced and accessible. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md with YAML token frontmatter (colors, typography, rounded, spacing, components) and canonical Markdown sections in the enforced order. - Linting & Accessibility: Run `npx @google/design.md lint` to catch broken token references, duplicate sections, invalid values, and WCAG AA/AAA contrast failures. - Export & Diff: Convert tokens to Tailwind theme JSON or W3C DTCG JSON, and diff two versions to detect regressions. - Use Case: A user pastes their brand palette and asks for a design system; the Skill writes DESIGN.md, lints it for contrast issues, and exports `tailwind.theme.json` for their existing project. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color, then lint it and export a Tailwind theme.

Frequently Asked Questions about design-md

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

FAQPage Schema

When should I use DESIGN.md instead of a visual design tool?▼

Use DESIGN.md when you need a formal, machine-readable spec that coding agents can consume across projects. For visual inspiration or one-off prototypes, layout galleries or freeform design processes fit better than a normative token spec.