design-md

Author, validate, and export DESIGN.md token specs to Tailwind or W3C DTCG JSON.

4|Updated May 18, 2026
One-click install
npx skills add https://github.com/ZardLi1115/zedclaw --skill design-md-zardli1115
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/ZardLi1115/zedclaw/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/ZardLi1115/zedclaw --skill design-md-zardli1115

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DESIGN.md files often drift in structure, token correctness, and accessibility requirements, making it hard for agents and teams to trust and reuse design tokens reliably.

Core Features & Use Cases

  • Structure + token validation: Lints DESIGN.md for correct anatomy, broken token references, and invalid token types.
  • Accessibility checks: Evaluates WCAG contrast for component color pairs (e.g., textColor vs backgroundColor).
  • Diffing + exports: Compares versions for regressions and exports tokens to Tailwind theme JSON or W3C DTCG JSON.
  • Use cases: Port an existing brand/style guide into a canonical DESIGN.md, extend a token set safely, or sanitize an imported spec before downstream tooling consumes it.

Quick Start

Ask the agent to lint and export your DESIGN.md to Tailwind and report any WCAG contrast issues.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I lint and validate DESIGN.md token specs for broken references?

Lint DESIGN.md token specs to enforce canonical section order, resolve dotted token references, and validate token/property types. This ensures correct anatomy and prevents broken token references in your design-token-driven development workflow.

How do I export design tokens from a markdown spec to Tailwind theme JSON?

Export design tokens from a DESIGN.md spec to Tailwind theme JSON or W3C DTCG JSON. This allows downstream tooling to consume sanitized, validated tokens directly from your canonical markdown specification.

Can I check WCAG contrast ratios for component color pairs in a DESIGN.md file?

Check WCAG contrast for component color pairs directly within a DESIGN.md file. The linter evaluates textColor versus backgroundColor pairs to ensure UI accessibility requirements are met during token validation.

How do I diff design token revisions to prevent regressions?

Diff design token revisions by comparing versions of your DESIGN.md files to prevent regressions. This identifies structural and token-level changes, ensuring updates to your token specs do not break existing downstream configurations.

What is the best way to port an existing style guide into a canonical DESIGN.md format?

Port an existing style guide into a canonical DESIGN.md format by authoring a new spec and running validation checks. This sanitizes imported tokens, resolving references and validating types before exporting to Tailwind or W3C DTCG JSON.