skills.rest
john-data-chen
john-data-chenCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill design-md-john-data-chen
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
billlzzz26billlzzz26
4

create-specification

Create machine-readable specification files with YAML frontmatter in a /spec/ directory.

Community
Advanced
SatangThevalueSatangThevalue

design-md

Lint, validate, and export DESIGN.md token specifications to Tailwind or DTCG JSON.

Community
Intermediate
superfhpsuperfhp

design-md

Create, validate, and export Google DESIGN.md files to Tailwind CSS or W3C DTCG JSON.

Community
Advanced
SignmanalSignmanal
1

design-md

Author, validate, and export DESIGN.md design token files to Tailwind or W3C DTCG JSON.

Community
Intermediate