skills.rest
liumeixin
liumeixinCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Generate, validate, and export DESIGN.md files to Tailwind CSS and W3C DTCG JSON.

4|Updated May 14, 2026
Search Tags:#ui#accessibility#tokens#design-system#design-specification
One-click install
npx skills add https://github.com/liumeixin/hermes-skills --skill design-md-liumeixin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/liumeixin/hermes-skills/tree/main/creative/design-md
Command: npx skills add https://github.com/liumeixin/hermes-skills --skill design-md-liumeixin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need to create, validate, and export Google's DESIGN.md token spec files, providing a standardized approach to design systems and UI specifications.

Core Features & Use Cases

  • Design System Creation: Author and structure visual identity specifications in the DESIGN.md format.
  • Validation: Ensure correct structure and WCAG compliance of spec files.
  • Exporting: Convert spec files to Tailwind CSS and W3C DTCG JSON for integration with other tools.
  • Use Case: For a design team looking to maintain a consistent brand and UI across multiple projects, this Skill streamlines the process of creating and managing DESIGN.md files.

Quick Start

Generate a new DESIGN.md file for your brand using the 'design-md' skill.

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 design token specification in DESIGN.md format?▼

To create a design token specification, generate a DESIGN.md file using the design-md skill to author and structure visual identity specifications. It structures your UI tokens into Google's standardized DESIGN.md format.

Can I convert design tokens to Tailwind CSS and W3C DTCG JSON?▼

Yes, you can export and convert design tokens to Tailwind CSS and W3C DTCG JSON. The conversion feature allows direct integration of your DESIGN.md spec files into frontend frameworks.

How do I validate a design specification file for WCAG compliance?▼

You can validate a design specification by running linting checks and WCAG compliance checks on the DESIGN.md file. This ensures your visual identity specifications meet accessibility standards.

What is the best way to manage design system tokens across multiple projects?▼

The best way to manage design system tokens is to maintain a standardized DESIGN.md file for your brand. This approach streamlines creating, validating, and exporting UI specifications across projects.

Does the design token export process support version comparison?▼

Yes, the design token export process supports version comparison. You can compare different versions of DESIGN.md files to track changes in your visual identity specifications over time.

Do I need YAML parsing to use DESIGN.md files?▼

Yes, YAML parsing is required to process DESIGN.md files. The skill requires YAML parsing to correctly read, validate, and export your design token specifications.

Related Skills

Explore More Design & Creative Skills→
RSHVRRSHVR
1

elite-brand-design

Convert brand identity inputs into structured design tokens and style guidelines.

Community
Advanced
aivos-xieaivos-xie
1

design-md

Generate and validate Google DESIGN.md design tokens with WCAG accessibility checks.

Community
Intermediate
hnabyz-bothnabyz-bot

moai-domain-uiux

Unify enterprise UI/UX design systems with tokens and WCAG/ARIA compliance.

Community
Advanced
RheasilviaRheasilvia

design-md

Lint DESIGN.md files and export design tokens to Tailwind or DTCG formats.

Community
Intermediate