design-md

Manage, validate, and convert Google DESIGN.md design tokens to Tailwind CSS and W3C formats.

Updated May 13, 2026

Search Tags:#accessibility #design system #design tokens #file conversion #DESIGN.md

Ready to run

npx skills add https://github.com/skkeoriw/hermes-brain --skill design-md-skkeoriw

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The design-md Skill addresses the need for efficient creation, validation, and manipulation of Google's DESIGN.md token spec files, streamlining design system management.

Core Features & Use Cases

Token Specification Management: Author, validate, and export DESIGN.md files for a consistent visual identity.
Accessibility and Linting: Ensures WCAG compliance and provides detailed linting reports for design tokens.
Format Conversions: Export DESIGN.md files to Tailwind or W3C DTCG JSON for use in various design tools.
Use Case: For a UI/UX designer working on a complex project, this skill can automate the generation of a DESIGN.md file and ensure it adheres to best practices, saving time on manual validation.

Quick Start

Create and validate a new DESIGN.md file using the design-md skill with the command: npx @google/design.md lint DESIGN.md

Frequently Asked Questions about design-md

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

FAQPage Schema

How do I validate design tokens for WCAG accessibility compliance?▼

You can automate WCAG accessibility linting for design tokens by running a validation command that checks the DESIGN.md spec against compliance standards. This generates detailed reports highlighting non-compliant visual identity values.

Can I export design tokens to Tailwind CSS or W3C DTCG JSON?▼

Yes, exporting design tokens to Tailwind CSS or W3C DTCG JSON is supported through automated file conversion. The system parses DESIGN.md specifications and translates them directly into your chosen framework format for immediate use.

What is a DESIGN.md token specification file?▼

A DESIGN.md token specification file is a markdown-based format used to manage design system structures. It defines the visual identity tokens that can be authored, validated, and exported to maintain consistent UI implementation across projects.

How do I automate authoring and linting of design system tokens?▼

Automate authoring and linting of design system tokens by executing Node.js scripts that parse markdown files to validate structure. Running the lint command processes your DESIGN.md file and outputs detailed reports for token specification management.

Does the design token validation process require Node.js?▼

Yes, the design token validation process requires Node.js to parse and process markdown files. The toolchain utilizes the Node.js environment to execute scripts necessary for automated authoring, WCAG linting, and format conversions.

Are there limitations when converting design tokens to Tailwind CSS?▼

Limitations when converting design tokens to Tailwind CSS depend on the structure of your DESIGN.md files. The conversion requires properly validated token specifications; incorrect markdown formatting may prevent successful export to the target framework.