skills.rest
hungthinh04
hungthinh04COMMUNITY
Explore all skills by this author →
GitHub

design-md

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
One-click install
npx skills add https://github.com/hungthinh04/Hermes_AI_Agent --skill design-md-hungthinh04
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
davpatel605-beepdavpatel605-beep

design-md

Create and validate DESIGN.md design token specification files with YAML front matter.

Community
Intermediate
zeronx798zeronx798

design-md

Create, lint, and export design tokens via Google DESIGN.md.

Community
Intermediate
alex-voloshin-devalex-voloshin-dev
2

ui-ux-design

Standardize UI/UX design systems and WCAG 2.2 AA accessibility compliance through structured auditing and documentation workflows.

Community
Advanced
XyHalcyonXyHalcyon

design-md

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

Community
Advanced