skills.rest
Z43L
Z43LCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Lint, diff, and export DESIGN.md files to Tailwind or DTCG JSON.

Updated May 5, 2026
Search Tags:#design tokens#wcag#design-md#dtcg#ui accessibility#tailwind export#token linting
One-click install
npx skills add https://github.com/Z43L/zeus-agent --skill design-md-z43l
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Z43L/zeus-agent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/Z43L/zeus-agent --skill design-md-z43l

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you produce correct, consistent, and accessibility-aware DESIGN.md design-spec files that agents and toolchains can reliably consume.

Core Features & Use Cases

  • Structure, token, and rules validation: Ensures the file follows the required canonical section order and catches invalid tokens, broken references, and unknown component properties.
  • Version regression detection: Diffs two DESIGN.md files to fail on regressions in normative values and component definitions.
  • Export for integration: Converts DESIGN.md into Tailwind theme JSON or W3C DTCG JSON for downstream UI and design-token pipelines, plus a JSON “spec” view for prompt injection.
  • WCAG contrast checks: Evaluates component foreground/background color pairs against WCAG AA/AAA thresholds to prevent inaccessible UI states.

Quick Start

Ask the agent to lint, diff, and export your DESIGN.md into Tailwind JSON and DTCG tokens.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I lint a DESIGN.md file for token and structure validation?▼

You can export DESIGN.md specs into Tailwind theme JSON for UI integration or W3C DTCG JSON for design-token pipelines, plus a JSON spec view for prompt injection.

Can I check WCAG color contrast issues in my design specs?▼

Yes, WCAG contrast checks evaluate component foreground and background color pairs against WCAG AA and AAA thresholds to prevent inaccessible UI states within your DESIGN.md file.

How do I export design tokens from DESIGN.md to Tailwind or DTCG JSON?▼

You can export DESIGN.md specs into Tailwind theme JSON for UI integration or W3C DTCG JSON for design-token pipelines, plus a JSON spec view for prompt injection.

What is the best way to diff two DESIGN.md files for version regressions?▼

Diffing two DESIGN.md files detects version regressions by failing on changes to normative values and component definitions, ensuring design spec consistency across updates.

Does design-md work without external dependencies?▼

Yes, the Skill operates with no listed dependencies, using the @google/design.md CLI to parse, lint, and export your design-spec files directly within your environment.

Related Skills

Explore More Design & Creative Skills→
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
lxt070409lxt070409
1

design-md

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

Community
Intermediate
Marcus-Mok-GHMarcus-Mok-GH

design-tokens

Generate and maintain design tokens across project surfaces with WCAG compliance.

Community
Advanced
StarryCodStarryCod
11

design-md

Parse and validate Google DESIGN.md token spec files for structure and references.

Community
Intermediate