skills.rest
rickyananda
rickyanandaCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Create and validate DESIGN.md specification files with YAML front matter and WCAG contrast checks.

1|Updated May 18, 2026
Search Tags:#accessibility#design tokens#visual identity#wcag#tailwind#design.md#token export
One-click install
npx skills add https://github.com/rickyananda/hermes-skills --skill design-md-rickyananda
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/rickyananda/hermes-skills/tree/main/creative/design-md
Command: npx skills add https://github.com/rickyananda/hermes-skills --skill design-md-rickyananda

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns brand direction into a structured DESIGN.md spec that coding agents can reliably read, validate, and apply. It removes ambiguity from visual identity decisions by combining exact design tokens with written guidance.

Core Features & Use Cases

  • Authoring: Create a new DESIGN.md file from a brand name, mood, color palette, and typography direction.
  • Validation: Check token structure, section order, token references, and accessibility contrast before the spec is used downstream.
  • Version Control: Compare two spec versions to catch regressions in color, typography, or component choices.
  • Exporting: Convert the spec into Tailwind theme JSON or W3C DTCG token JSON for implementation.
  • Use Case: A team can define one shared visual system for multiple projects and keep design choices consistent across tools and agents.

Quick Start

Use the design-md skill to create or validate a DESIGN.md file for my product brand and ensure the tokens and sections are consistent.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create a structured design specification file for UI handoff?▼

To create a structured design specification file, you can author a DESIGN.md document containing exact design tokens and written visual identity guidance. This structured spec removes ambiguity for coding agents by combining exact color, typography, and component properties into a readable format.

How do I validate WCAG contrast and design token structure before implementation?▼

You can validate WCAG contrast and design token structure by running a linting check against your specification file. This process verifies YAML front matter, canonical section ordering, token reference resolution, and component properties to ensure accessibility compliance before downstream use.

Can I export design tokens to Tailwind theme JSON from a markdown spec?▼

Yes, you can export design tokens to Tailwind theme JSON directly from a validated markdown specification. The export workflow converts the visual identity system defined in your DESIGN.md file into implementation-ready Tailwind theme JSON or W3C DTCG token JSON formats.

What is the best way to compare two versions of a visual identity system?▼

The best way to compare two versions of a visual identity system is through version comparison against your spec file. This workflow catches regressions in color, typography, or component choices by analyzing the differences between two DESIGN.md specification versions.

Do I need YAML front matter to define design tokens in a markdown file?▼

Yes, YAML front matter is required to define design tokens in this markdown specification format. The validation process explicitly checks for YAML front matter containing the name and description fields to ensure the visual identity system is structurally valid for coding agents.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
paxlabs-incpaxlabs-inc
7

design-md

Author, validate, and export design tokens using Google DESIGN.md.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

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

Community
Advanced
ghufronbagaskaraghufronbagaskara

design-md

Create, lint, and export Google DESIGN.md design tokens to Tailwind or W3C DTCG formats.

Community
Intermediate