skills.rest
DarkArty07
DarkArty07COMMUNITY
Explore all skills by this author →
GitHub

design-md

Create DESIGN.md design token specs and export to Tailwind or W3C DTCG JSON.

3|Updated Apr 21, 2026
Search Tags:#accessibility#wcag#tailwind#design-system#design-tokens#spec-validation#ui-consistency
One-click install
npx skills add https://github.com/DarkArty07/Aether-Agents --skill design-md-darkarty07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/DarkArty07/Aether-Agents/tree/main/home/skills/creative/design-md
Command: npx skills add https://github.com/DarkArty07/Aether-Agents --skill design-md-darkarty07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of inconsistent, inaccessible design implementations across projects by providing a standardized, machine-readable format for design tokens that coding agents can reliably interpret and apply, ensuring brand consistency and WCAG compliance out of the box.

Core Features & Use Cases

  • Author compliant DESIGN.md files: Create Google's open DESIGN.md spec files with structured design tokens, component definitions, and brand rationale for agent consumption.
  • Validate and lint specs: Automatically check for broken token references, WCAG contrast failures, and structural errors to catch accessibility and consistency issues early.
  • Export design tokens: Convert DESIGN.md files to Tailwind theme JSON or W3C DTCG JSON for seamless integration into development workflows.
  • Use Case: A design team building a new product can use this Skill to create a shared DESIGN.md file for their brand, validate that all color combinations meet WCAG AA standards, and export the tokens directly to their Tailwind config for consistent implementation across web and mobile apps.

Quick Start

Use the design-md skill to create a compliant DESIGN.md file for my SaaS product's design system, including primary/secondary colors, Inter typography tokens, and primary button component definitions, then lint it for WCAG accessibility issues.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create machine-readable design tokens for coding agents?▼

You create machine-readable design tokens for coding agents by authoring standardized DESIGN.md specification files. These files define structured design tokens, component definitions, and brand rationale that coding agents can reliably interpret and apply across projects.

How do I validate WCAG color contrast in a design token spec?▼

To validate WCAG color contrast in a design token spec, you run an automated linting process against your DESIGN.md file. This process automatically checks for broken token references and WCAG contrast failures to catch accessibility issues early.

Can I export design tokens to a Tailwind theme JSON config?▼

Yes, you can export design tokens to a Tailwind theme JSON config. The DESIGN.md specification can be directly converted into Tailwind theme JSON or W3C DTCG JSON formats for seamless integration into your development workflows.

What is the best way to enforce brand consistency across web and mobile apps?▼

The best way to enforce brand consistency across web and mobile apps is by maintaining a shared DESIGN.md file. This standardized, machine-readable format ensures all team members and coding agents apply identical design tokens and component definitions.

Does design token linting check for broken token references in the spec?▼

Yes, design token linting checks for broken token references in the spec. In addition to catching structural errors, the validation process automatically detects broken references and WCAG contrast failures to ensure accessibility and consistency.

When do I need to use the W3C DTCG JSON format for design tokens?▼

You need to use the W3C DTCG JSON format for design tokens when integrating your design system into workflows requiring standard open formats. The DESIGN.md spec exports directly to W3C DTCG JSON or Tailwind theme JSON to accommodate different development environments.

Related Skills

Explore More Design & Creative Skills→
shhubbhshhubbh
1

design-consultation

Generate a DESIGN.md documenting typography, color palettes, layout, spacing, and motion guidelines.

Community
Advanced
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
cxnaivecxnaive

design-md

Manage Google DESIGN.md token specifications for design system documentation.

Community
Intermediate
hawkyrehawkyre
30

design-master

Create a design system blueprint with tokens, components, and accessibility rules.

Community
Advanced