design-md

Create, validate, and export Google DESIGN.md token specifications.

2|Updated Apr 25, 2026

Search Tags:#wcag #tailwind #lint #export #design-tokens #design-md #dtcg

Ready to run

npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill design-md-john-data-chen

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/john-data-chen/hermes-agent-backup/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill design-md-john-data-chen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Google DESIGN.md defines design tokens and structure. This skill provides tooling to author, validate, and export DESIGN.md token specs to ensure consistency, linting, and easy integration across projects.

Core Features & Use Cases

Author YAML-frontmatter based DESIGN.md tokens with versioned metadata.
Lint DESIGN.md for structure, token references, and WCAG contrast.
Diff DESIGN.md versions to identify regressions.
Export tokens to Tailwind theme JSON or W3C DTCG JSON for integration with design systems.

Quick Start

Lint DESIGN.md to validate its structure and token references.

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 in a DESIGN.md file?▼

You can validate design tokens by running a lint process on your DESIGN.md file to check its structure, token references, and WCAG contrast compliance. This ensures your token specifications maintain consistency and accessibility standards across projects.

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

Yes, you can export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG JSON. This enables seamless integration of your design-token specifications into existing design systems and frameworks.

What is the best way to identify regressions between different design token versions?▼

The best way to identify regressions is to diff DESIGN.md versions. Comparing versioned metadata highlights structural and token reference changes, preventing unintended visual or accessibility updates across your design system.

Do I need a specific file format to author DESIGN.md tokens?▼

Yes, you need a DESIGN.md file at your project root containing valid YAML frontmatter with name and description fields. This structured format is required for automated linting, diffing, and export processing.

How does WCAG contrast checking work with design tokens?▼

WCAG contrast checking works by linting your DESIGN.md token references to validate color accessibility compliance. This automated process ensures your design system meets formal accessibility standards during the validation phase.

What are the limitations of using DESIGN.md for design system management?▼

DESIGN.md processing requires a valid YAML frontmatter structure at the project root. Without this specific file format, the automated linting, diffing, and export to Tailwind or DTCG cannot be executed properly.