skills.rest
InverterNetwork
InverterNetworkOFFICIAL
Explore all skills by this author →
Website𝕏@inverternetworkGitHub

design-md

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

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

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 machine-readable, human-friendly specification for design tokens that ensures consistency across codebases and design tools.

Core Features & Use Cases

  • Token Specification: Author and maintain Google's DESIGN.md spec files which combine YAML tokens with Markdown rationale.
  • Validation & Accessibility: Automatically lint files for structure, broken references, and WCAG contrast compliance.
  • 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 validate design tokens for WCAG color contrast compliance?▼

You validate design tokens for WCAG color contrast by linting your DESIGN.md file, which automatically checks structural integrity, broken references, and color contrast compliance to ensure UI accessibility.

How do I convert design tokens to Tailwind CSS theme configuration?▼

Convert design tokens to Tailwind CSS by exporting your validated DESIGN.md specification into a tailwind.theme.json file, enabling seamless integration of your visual design system into your development workflow.

What is the Google DESIGN.md specification for design systems?▼

The DESIGN.md specification is a machine-readable, human-friendly format that combines YAML design tokens with Markdown rationale, solving visual identity fragmentation by ensuring consistency across codebases and design tools.

Can I export design tokens to W3C DTCG JSON format?▼

Yes, you can export design tokens to W3C DTCG JSON format, alongside CSS variables and Tailwind CSS themes, ensuring cross-platform implementation and seamless design-to-code handoffs.

Why do my design tokens break when handing off to developers?▼

Design tokens break during handoff due to fragmented visual identity and structural inconsistencies; authoring them within the DESIGN.md specification standardizes token definitions and lints broken references before export.

Do I need any dependencies to lint and export DESIGN.md files?▼

No dependencies are required to lint and export DESIGN.md files; the skill operates independently to validate token structure, check WCAG contrast compliance, and convert tokens into Tailwind CSS or W3C DTCG formats.

Related Skills

Explore More Design & Creative Skills→
LamseyahEliasLamseyahElias

design-md

Author, validate, and export DESIGN.md tokens to Tailwind or DTCG JSON.

Community
Intermediate
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
xrehpicxxrehpicx
2

tailwind-design-system

Build and maintain Tailwind CSS v4 design systems with design tokens and responsive patterns.

Community
Advanced
AissenLiuAissenLiu

design-md

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

Community
Advanced