design-md

Name: design-md
Availability: InStock
Author: hungthinh04

Author and validate DESIGN.md token spec files with YAML front matter.

Updated May 12, 2026

Search Tags:#accessibility #wcag #tailwind #design-system #design-tokens #design-md #dtcg

Ready to run

npx skills add https://github.com/hungthinh04/Hermes_AI_Agent --skill design-md-hungthinh04

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns brand direction into a structured DESIGN.md specification, eliminating inconsistency when teams need a single source of truth for visual identity.

Core Features & Use Cases

Authoring: Create DESIGN.md files with YAML front matter, token values, and clear rationale for colors, typography, spacing, shapes, and components.
Validation: Check token structure, section order, references, and accessibility concerns such as WCAG contrast.
Exporting: Convert a design spec into Tailwind theme data or DTCG JSON for downstream implementation.
Use Case: A product designer can define a brand palette and component rules once, then reuse the same spec across multiple apps and handoff workflows.

Quick Start

Ask the skill to draft a DESIGN.md for your project using your brand tone, palette, typography, and component guidance, then validate it for token consistency and accessibility.

Frequently Asked Questions about design-md

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

FAQPage Schema

How do I create a structured design-token specification for a brand style guide?▼

You can author a structured design-token specification by generating a DESIGN.md file with YAML front matter, canonical token types, and rationale for colors, typography, and spacing.

How do I validate design tokens for WCAG contrast and reference resolution?▼

Validate design tokens by checking section order compliance, resolving token references, and running automated WCAG contrast checks directly against the DESIGN.md specification file.

Can I export my design system tokens into Tailwind theme data or DTCG JSON?▼

Yes, you can export validated DESIGN.md token specs into Tailwind theme data or DTCG JSON formats for downstream implementation in web product and component workflows.

What is the best way to maintain a single source of truth for visual identity across multiple apps?▼

Defining a DESIGN.md specification acts as a single source of truth for visual identity, allowing you to reuse the same brand palette and component rules across multiple apps and handoff workflows.

Does this design-token authoring process require structured YAML front matter?▼

Yes, the design-token authoring process requires structured YAML front matter to define canonical token types and ensure section order compliance within the DESIGN.md file.

Why does my design system validation fail during token reference resolution?▼

Design system validation fails when token references within the DESIGN.md file cannot be resolved, breaking the structural integrity required for exporting to Tailwind or DTCG JSON.