skills.rest
SriRamkunamsetty
SriRamkunamsettyCOMMUNITY
Explore all skills by this author →
𝕏@SriRam41258GitHub

design-md

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

Updated May 20, 2026
Search Tags:#design#wcag#diff#tokens#lint#export#design-md
One-click install
npx skills add https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent --skill design-md-sriramkunamsetty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent/tree/main/hermes-agent/skills/creative/design-md
Command: npx skills add https://github.com/SriRamkunamsetty/SITA2.0-HermesAgent --skill design-md-sriramkunamsetty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams need a single, verifiable spec system for UI tokens; DESIGN.md provides a structured, front-matter driven spec that combines machine-readable tokens with human prose to guide design decisions and automation.

Core Features & Use Cases

  • Lint DESIGN.md files to ensure correct token frontmatter, references, and WCAG-related properties.
  • Diff two DESIGN.md versions to track regressions and changes in tokens, typography, and color tokens.
  • Export tokens to downstream formats such as Tailwind theme JSON and W3C DTCG-compatible JSON for design-system pipelines.
  • Use Case: Teams author, validate, and publish a design system spec that can drive UI components and accessibility checks across products.

Quick Start

Lint DESIGN.md to validate structure, then export tokens to Tailwind or DTCG JSON.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I lint DESIGN.md files to validate design token structure?▼

You can lint DESIGN.md files to validate YAML frontmatter schemas, token types, token references, and WCAG-related properties. This ensures your token-based design specs maintain correct structure and accessibility compliance across web and app design systems.

Can I export design tokens to Tailwind or W3C DTCG JSON formats?▼

Yes, you can export validated DESIGN.md tokens to downstream formats including Tailwind theme JSON and W3C DTCG-compatible JSON. This enables seamless integration of your design system spec into UI component pipelines and automation workflows.

How do I diff two versions of a design token spec to track changes?▼

You can diff two DESIGN.md versions to track regressions and changes in tokens, typography, and color tokens. This helps teams maintain consistency and monitor modifications across design system iterations during collaborative development.

What is a DESIGN.md token spec and when do I need it for my design system?▼

A DESIGN.md token spec is a structured, frontmatter-driven document combining machine-readable tokens with human prose to guide design decisions. You need it when creating, validating, and maintaining verifiable UI token specs across teams requiring consistent naming and WCAG compliance.

Does the DESIGN.md linter check WCAG compliance for color tokens?▼

Yes, the DESIGN.md linter validates WCAG-related properties within token frontmatter. It checks color tokens to ensure accessibility compliance, helping teams maintain verifiable design system specs that meet WCAG standards across products and components.

Related Skills

Explore More Design & Creative Skills→
john-data-chenjohn-data-chen
2

design-md

Create, validate, and export Google DESIGN.md token specifications.

Community
Intermediate
aivos-xieaivos-xie
1

design-md

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

Community
Intermediate
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced