skills.rest
icyzh
icyzhCOMMUNITY
Explore all skills by this author →
Website𝕏@icyzhbeGitHub

design-md

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve?

This skill solves the fragmentation of design systems by providing a unified, machine-readable format for design tokens that ensures consistency across UI components and accessibility compliance.

Core Features & Use Cases

  • Token Specification: Author and maintain visual identity tokens using Google's DESIGN.md spec.
  • Accessibility Validation: Automatically lint color palettes against WCAG contrast requirements.
  • Multi-Format Export: Convert design tokens into Tailwind CSS themes, W3C DTCG JSON, or CSS variables for seamless integration into development workflows.

Quick Start

Use the design-md skill to lint the current DESIGN.md file in the project root and export the tokens to a tailwind.theme.json file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I standardize design tokens for cross-platform UI consistency?▼

Standardize design tokens by authoring a machine-readable DESIGN.md specification that defines your visual identity. This unifies your design system to ensure UI consistency across different platforms and components.

Can I automatically validate color palettes against WCAG contrast requirements?▼

Yes, you can validate color palettes against WCAG contrast requirements by linting your DESIGN.md file. This accessibility validation automatically checks your design tokens to ensure compliance with standard contrast ratios.

How do I export design tokens to Tailwind CSS and W3C DTCG JSON formats?▼

Export design tokens to Tailwind CSS and W3C DTCG JSON formats by converting the DESIGN.md specification. This multi-format export enables seamless integration of your visual identity tokens into development workflows.

Do I need the Google design.md CLI to lint and validate a design system?▼

Yes, the Google design.md CLI is required to perform structural validation, WCAG contrast checks, and format conversion. It processes the DESIGN.md file to lint design tokens and export theme configurations.

What is the best way to maintain visual identity tokens for development workflows?▼

The best way to maintain visual identity tokens is using a unified, machine-readable format like the DESIGN.md specification. This approach solves design system fragmentation by linking token maintenance directly to development exports.

How do I convert CSS variables from a design system specification?▼

Convert CSS variables from a design system by processing the DESIGN.md specification through format conversion. This transforms your standardized visual identity tokens into CSS variables for direct development integration.

Related Skills

Explore More Design & Creative Skills→
shuff57shuff57

design-md

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

Community
Intermediate
curiositechcuriositech
181

design-system-generator

Generate design system tokens as CSS, Tailwind config, and DTCG JSON from design trend descriptions.

Official
Advanced
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
lxt070409lxt070409
1

design-md

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

Community
Intermediate