skills.rest
freedomw1987
freedomw1987COMMUNITY
Explore all skills by this author →
𝕏@davidaasmGitHub

design-md

Create DESIGN.md files and export design tokens to Tailwind or W3C DTCG JSON.

2|Updated May 10, 2026
Search Tags:#accessibility#wcag#tailwind#design-system#design-tokens#dtcg#google-design
One-click install
npx skills add https://github.com/freedomw1987/tree_monstor --skill design-md-freedomw1987
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/freedomw1987/tree_monstor/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/freedomw1987/tree_monstor --skill design-md-freedomw1987

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the manual effort and inconsistency of creating design system specifications that are readable by both humans and AI coding agents, ensuring design tokens are accurately implemented across projects without misalignment between design and development teams.

Core Features & Use Cases

  • Author DESIGN.md files: Create valid, spec-compliant DESIGN.md files with structured design tokens (colors, typography, spacing, components) and human-readable rationale following Google's open standard.
  • Validate existing specs: Lint DESIGN.md files to catch broken token references, WCAG accessibility contrast failures, duplicate sections, and invalid token values.
  • Export tokens: Convert DESIGN.md files to Tailwind theme JSON or W3C DTCG format for direct use in frontend development workflows.
  • Use Case: A product design team can use this Skill to create a shared brand DESIGN.md, validate that all color combinations meet WCAG AA accessibility standards, and export the final tokens to their project's Tailwind config for consistent implementation across all web properties.

Quick Start

Use the design-md skill to create a valid DESIGN.md file for my SaaS product's design system with a primary blue color, Inter font, and 4px spacing baseline.

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 machine-readable design system spec for AI coding agents?▼

To create a machine-readable design system spec, you author a DESIGN.md file with structured design tokens for colors, typography, and spacing. This generates a standardized specification readable by both humans and AI coding agents.

How do I validate WCAG color contrast in my design tokens?▼

You validate WCAG color contrast by linting your DESIGN.md file to catch accessibility contrast failures. This process identifies broken token references and invalid color values to ensure your design system meets WCAG AA standards.

Can I export design tokens to Tailwind theme JSON from a DESIGN.md file?▼

Yes, you can export design tokens to Tailwind theme JSON by converting your DESIGN.md file. This generates interoperable frontend configuration files ready for direct use in your development workflow.

What is the Google DESIGN.md spec structure used for?▼

The Google DESIGN.md spec structure is used for authoring standardized, machine-readable design system specifications. It enforces structured design tokens and human-readable rationale to prevent misalignment between design and development teams.

Does this design token validation tool output W3C DTCG format?▼

Yes, the design token validation tool outputs W3C DTCG format. It converts your validated DESIGN.md files into interoperable JSON token files for direct use in frontend development workflows.

What are the limitations of linting DESIGN.md files for design system errors?▼

Linting DESIGN.md files catches broken token references, duplicate sections, and invalid token values, but it focuses strictly on structural and WCAG accessibility validation rather than subjective visual design choices.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
seo-jinseokseo-jinseok

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 compliance.

Community
Advanced
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic
SignmanalSignmanal
1

design-md

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

Community
Intermediate