skills.rest
MarbleSodas
MarbleSodasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns DESIGN.md design token specifications into a validated, machine-consumable source of truth by enforcing structure, catching token mistakes, and helping ensure accessible contrast.

Core Features & Use Cases

  • Validate correctness: Lints DESIGN.md structure, token references, and allowable component properties.
  • Catch accessibility issues: Checks WCAG contrast for component textColor vs backgroundColor and highlights regressions.
  • Compare and export: Diffs versions to prevent design regressions, then exports tokens to Tailwind theme JSON or W3C DTCG JSON for downstream tooling.

Quick Start

Ask an agent to lint and export your existing DESIGN.md for Tailwind and W3C DTCG outputs, fixing any broken references or WCAG contrast warnings first.

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 design token spec for structural errors?▼

To lint a DESIGN.md design token spec, validate its canonical section order, check dotted token references, and verify allowable component properties to ensure the specification is structurally correct and machine-consumable.

Can I check WCAG contrast for component text and background colors in DESIGN.md?▼

Yes, you can check WCAG contrast by validating component textColor against backgroundColor pairs in DESIGN.md files, which highlights accessibility regressions before exporting to downstream tooling.

How do I export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG JSON?▼

Export DESIGN.md tokens to Tailwind theme JSON or W3C DTCG JSON by running the export workflow via the @google/design.md CLI, converting the validated specification into downstream formats for production use.

Does the design-md linter support diffing existing design system versions?▼

Yes, the linter supports diffing existing design system versions to compare token changes and prevent design regressions before converting the files for production use.

What is the canonical section order required for a valid DESIGN.md file?▼

The canonical section order for a valid DESIGN.md file dictates the strict arrangement of token definitions and component properties, ensuring the specification can be reliably consumed by coding agents and design tooling.

Why does my DESIGN.md export fail with broken token references?▼

A DESIGN.md export fails with broken token references when dotted token paths point to non-existent definitions, requiring a lint pass to catch and fix invalid references before generating Tailwind theme or W3C DTCG JSON.

Related Skills

Explore More Design & Creative Skills→
Z43LZ43L

design-md

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

Community
Advanced
AissenLiuAissenLiu

design-md

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

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
StarryCodStarryCod
11

design-md

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

Community
Intermediate