skills.rest
Cyapstaye
CyapstayeCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Create, lint, and export DESIGN.md design tokens to Tailwind themes or W3C DTCG JSON.

9|Updated Jul 1, 2026
Search Tags:#ui#accessibility#wcag#tailwind#tokens#design-system
One-click install
npx skills add https://github.com/Cyapstaye/Adame_ver.open --skill design-md-cyapstaye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Cyapstaye/Adame_ver.open/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/Cyapstaye/Adame_ver.open --skill design-md-cyapstaye

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

  • Token Specification: Author and maintain DESIGN.md files that combine machine-readable YAML tokens with human-readable design rationale.
  • Validation & Accessibility: Automatically lint files for structural integrity and verify color contrast against WCAG accessibility standards.
  • Multi-Format Export: Convert design tokens into Tailwind CSS themes or W3C DTCG JSON for seamless integration into development workflows.

Quick Start

Ask the agent to lint the current DESIGN.md file in your project root to check for token errors and accessibility compliance.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate design tokens for WCAG accessibility compliance?▼

You can validate design tokens for WCAG accessibility by linting a DESIGN.md file, which automatically checks color contrast standards and structural integrity using the @google/design.md CLI.

Can I export design tokens to a Tailwind CSS theme?▼

Yes, you can export design tokens to a Tailwind CSS theme. The DESIGN.md specification supports multi-format conversion, transforming YAML tokens into Tailwind themes or W3C DTCG JSON for development integration.

What is the best way to standardize visual identity documentation across codebases?▼

Standardizing visual identity documentation is best achieved through DESIGN.md, a machine-readable format combining YAML design tokens with human-readable rationale to ensure consistent application across software projects.

Do I need Node.js to lint and convert design system tokens?▼

Yes, you need Node.js to lint and convert design system tokens. The validation and transformation processes require the Node.js environment to execute the @google/design.md CLI.

How does the DESIGN.md specification handle design system fragmentation?▼

The DESIGN.md specification handles design system fragmentation by providing a standardized, machine-readable format for design tokens, ensuring visual identity consistency across different codebases and design tools.

Are there limitations when using DESIGN.md for UI development token transformation?▼

The primary limitation is the Node.js requirement to execute the @google/design.md CLI, which is necessary for structural validation and transforming tokens into formats like Tailwind CSS or W3C DTCG JSON.

Related Skills

Explore More Design & Creative Skills→
Quill-AgentQuill-Agent
3

design-md

Create, validate, and export DESIGN.md files with YAML front matter.

Community
Intermediate
liumeixinliumeixin
4

design-md

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

Community
Advanced
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
InverterNetworkInverterNetwork

design-md

Author, validate and export DESIGN.md tokens to Tailwind CSS and W3C DTCG formats.

Official
Intermediate