skills.rest
blueskies1818
blueskies1818COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Generates, validates, and exports WCAG-compliant design tokens to multiple formats.

1|Updated May 21, 2026
Search Tags:#accessibility#WCAG#design system#design tokens#tailwind css#DESIGN.md#dtcg
One-click install
npx skills add https://github.com/blueskies1818/hermesALIone --skill design-md-blueskies1818
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/blueskies1818/hermesALIone/tree/main/Agent/skills/creative/design-md
Command: npx skills add https://github.com/blueskies1818/hermesALIone --skill design-md-blueskies1818

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation, validation, and export of Google's DESIGN.md files, allowing you to easily maintain design consistency across your projects.

Core Features & Use Cases

  • DESIGN.md Authoring: Simplify the process of writing and managing design tokens for your projects.
  • WCAG Contrast Linting: Ensure that your color palettes meet accessibility standards.
  • Version Control & Diffing: Track changes and identify regressions between design versions.
  • Export to Tailwind or DTCG: Convert design tokens into formats usable by development tools.

Quick Start

Author a new DESIGN.md file for your project using the design-md skill.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I generate and validate Google DESIGN.md files for my project?▼

This Skill streamlines DESIGN.md authoring by generating and validating design specifications. It requires the @google/design.md CLI tool to function and outputs validated files for your project.

Can I export design tokens to Tailwind CSS or W3C DTCG format?▼

Yes, you can export design tokens to Tailwind CSS or W3C Design Tokens Format (DTCG). The Skill converts validated DESIGN.md specifications directly into formats usable by your development tools.

How do I check if my color palette meets WCAG contrast standards?▼

You check WCAG contrast standards by running the built-in linting feature on your DESIGN.md color palettes. This validates that your design tokens meet accessibility requirements before exporting.

Do I need the @google/design.md CLI tool to lint and export design tokens?▼

Yes, you need the @google/design.md CLI tool installed. The Skill requires this dependency to execute core tasks like validating specifications and exporting to Tailwind CSS or DTCG.

What is the best way to track changes and identify regressions between design versions?▼

The best way to track design changes is using the version control and diffing feature. It compares different DESIGN.md file versions to identify regressions in your design tokens.

Related Skills

Explore More Design & Creative Skills→
heysuhasheysuhas
2

design-md

Lint, diff, and transform design tokens into Tailwind or W3C DTCG formats.

Community
Intermediate
humanerd-drewhumanerd-drew
2

design-md

Create and validate DESIGN.md files for UI/branding systems with accessibility linting.

Official
Intermediate
openobserveopenobserve
20.6k

ui-architect

Enforce O2 component library and design token standards for Vue interfaces.

Official
Advanced
paxlabs-incpaxlabs-inc
7

design-md

Author, validate, and export design tokens using Google DESIGN.md.

Community
Advanced