skills.rest
zangjeicy
zangjeicyCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Lint and export Google DESIGN.md design tokens to Tailwind theme JSON.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and includes assets (resource) components.

What problem does it solve?

This skill solves the fragmentation of visual identity by providing a single, machine-readable source of truth for design tokens, ensuring consistency across codebases and design tools.

Core Features & Use Cases

  • Token Specification: Author and maintain visual identity specs using Google's DESIGN.md format.
  • Automated Validation: Lint files for structure, broken references, and WCAG accessibility contrast compliance.
  • Multi-format Export: Convert design tokens into Tailwind theme configurations or W3C DTCG JSON for seamless integration into development workflows.

Quick Start

Use the design-md skill to lint the current project's DESIGN.md file 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 validate design tokens for WCAG accessibility compliance?▼

You can validate design tokens for WCAG accessibility compliance by linting your DESIGN.md file to automatically check structural integrity, broken references, and color contrast ratios.

How do I export design tokens to a Tailwind theme configuration?▼

You can export design tokens to a Tailwind theme configuration by converting the DESIGN.md specification into Tailwind theme JSON, ensuring seamless integration of your visual identity into development workflows.

What is the best way to maintain a single source of truth for UI design tokens?▼

Using a machine-readable format like Google's DESIGN.md provides a single source of truth for UI design tokens, solving fragmentation by ensuring consistency across different codebases and design tools.

Do I need Node.js to lint and export DESIGN.md token files?▼

Yes, you need a Node.js environment to execute the @google/design.md CLI, which handles the structural validation, linting, and format conversion of your design token files.

Can I convert DESIGN.md tokens to W3C DTCG JSON for cross-platform use?▼

Yes, you can convert DESIGN.md tokens to W3C DTCG JSON format, facilitating cross-platform export of your design system for broad integration into various development environments.

Related Skills

Explore More Design & Creative Skills→
CyapstayeCyapstaye
9

design-md

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

Community
Intermediate
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
shuff57shuff57

design-md

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

Community
Intermediate
InverterNetworkInverterNetwork

design-md

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

Official
Intermediate