design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

1|Updated May 12, 2026

Search Tags:#design #ui #accessibility #tailwind #tokens #dtcg

Ready to run

npx skills add https://github.com/projectedanx/hermes-agent --skill design-md-projectedanx

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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 tools.

Core Features & Use Cases

Standardized Spec: Author and maintain Google's DESIGN.md token specification files.
Automated Validation: Lint structure, verify token references, and perform WCAG accessibility contrast checks.
Multi-format Export: Convert design tokens into Tailwind theme JSON or W3C DTCG compliant formats 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 the tokens to a tailwind theme 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 theme file?▼

Export design tokens to a Tailwind theme by linting a standardized DESIGN.md specification file and using automated format conversion to generate the JSON output. This provides seamless integration of your visual identity into Tailwind development workflows.

What is the best way to validate WCAG accessibility contrast for design tokens?▼

The best way to validate WCAG accessibility for design tokens is to use automated linting that performs contrast checks against your token specifications. This ensures your UI components meet compliance standards before format conversion and integration into codebases.

How does W3C DTCG format conversion work for UI design systems?▼

W3C DTCG format conversion works by automatically transforming machine-readable design token specifications into compliant structures. This facilitates cross-platform UI consistency and ensures seamless integration with W3C standards.

Can I use a DESIGN.md file to maintain cross-platform UI consistency?▼

Yes, you can use a DESIGN.md file to maintain cross-platform UI consistency by standardizing visual identity documentation in a machine-readable format. This manages design tokens and component specifications to satisfy structured design system requirements.

Does automated design token linting verify token references and structure?▼

Automated design token linting verifies token references and validates the file structure of your specification. This ensures your machine-readable token definitions are accurate before exporting to formats like Tailwind theme JSON or W3C DTCG.

When do I need machine-readable design tokens for my project?▼

You need machine-readable design tokens when your project requires standardized visual identity documentation and cross-platform UI consistency. This solves fragmentation by ensuring token specifications integrate seamlessly into development workflows.