design-md

Lint DESIGN.md token structure, references, and WCAG compliance.

Updated May 2, 2026
One-click install
npx skills add https://github.com/AlvaroBiano/hermes-agent --skill design-md-alvarobiano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/AlvaroBiano/hermes-agent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/AlvaroBiano/hermes-agent --skill design-md-alvarobiano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DESIGN.md tokens describe a visual identity in a machine-readable form and rationale. This skill helps authors validate structure, lint integrity, and export tokens for integration with tooling.

Core Features & Use Cases

  • Lint structure, token references, and WCAG contrast checks with the Google's DESIGN.md CLI.
  • Diff versions to track design-system evolution and export to Tailwind theme JSON or W3C DTCG JSON.
  • Port a brand style into a formal spec file for multiple projects or design-system repositories.

Quick Start

Run the DESIGN.md CLI to lint DESIGN.md and generate Tailwind or DTCG exports for your project.

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 and check WCAG contrast in a DESIGN.md file?

You validate design tokens by running a CLI that lints the DESIGN.md structure, checks token references, and enforces WCAG contrast compliance. This ensures your visual identity maintains accessibility standards and correct token resolution.

Can I export design tokens to Tailwind theme JSON or W3C DTCG formats?

Yes, you can export design tokens to Tailwind theme JSON or W3C DTCG JSON formats. The tool parses your validated DESIGN.md file and generates the appropriate configuration output for direct integration with your tooling.

What is the best way to track design system evolution across different versions?

The best way to track design system evolution is by diffing DESIGN.md versions. This highlights structural and token changes over time, allowing you to monitor updates and maintain consistency across multiple project repositories.

Does the DESIGN.md format require a specific structure for colors and typography?

Yes, the DESIGN.md format enforces a strict frontmatter structure requiring version, name, colors, typography, and allowed sections. This mandatory schema ensures machine-readable consistency for your brand style and component whitelist.

How do I lint a design system spec to ensure token integrity before exporting?

You lint a design system spec by applying the DESIGN.md CLI to analyze token structure and validate references. This process identifies structural errors and verifies WCAG compliance before you export to Tailwind or DTCG.