design-md

Lint DESIGN.md files and export design tokens to Tailwind or DTCG formats.

Updated Jun 25, 2026
One-click install
npx skills add https://github.com/Rheasilvia/hermes-desktop --skill design-md-rheasilvia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Rheasilvia/hermes-desktop/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/Rheasilvia/hermes-desktop --skill design-md-rheasilvia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and includes assets (resource) components.

What problem does it solve?

This Skill solves the fragmentation of visual identity by providing a standardized, machine-readable format for design tokens that ensures consistency across codebases and design systems.

Core Features & Use Cases

  • Standardized Spec: Author visual identity specs using Google's DESIGN.md format, combining YAML tokens with Markdown rationale.
  • Automated Validation: Lint files for WCAG accessibility compliance, broken token references, and canonical structure.
  • Multi-Format Export: Convert design tokens into Tailwind CSS themes, W3C DTCG JSON, or CSS variables for seamless integration into development workflows.

Quick Start

Use the design-md skill to lint the current DESIGN.md file in the project root and export it to a tailwind.theme.json file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I export design tokens to a Tailwind CSS theme?

You can export design tokens to a Tailwind CSS theme by authoring a visual identity spec using the DESIGN.md format and converting the YAML tokens into a tailwind.theme.json file for direct integration into your development workflow.

What is the DESIGN.md specification for design systems?

The DESIGN.md specification is a standardized, machine-readable format that combines YAML design tokens with Markdown rationale to document visual identity and ensure consistent token application across UI components and codebases.

How do I validate design tokens for WCAG accessibility compliance?

You can validate design tokens for WCAG accessibility compliance by using the @google/design.md CLI tool to lint your DESIGN.md file, checking for broken token references, structural integrity, and contrast standards.

Do I need the @google/design.md CLI tool to lint design tokens?

Yes, the @google/design.md CLI tool is required to enforce structural integrity, lint files for broken token references, and validate WCAG contrast standards within your project's design system.

Can I convert design tokens into W3C DTCG JSON?

Yes, you can convert design tokens into W3C DTCG JSON, Tailwind CSS themes, or CSS variables, enabling seamless integration of your visual identity specs into various cross-platform development workflows.

What is the best way to standardize visual identity documentation across codebases?

Standardizing visual identity documentation is best achieved by using a machine-readable format like DESIGN.md, which provides a consistent structure for design tokens and rationale to prevent fragmentation across different codebases and design systems.