skills.rest
srivtx
srivtxCOMMUNITY
Explore all skills by this author →
Website𝕏@srivtxGitHub

design-md

Create and manage DESIGN.md files with WCAG token validation and Tailwind CSS export.

Updated Jun 13, 2026
Search Tags:#branding#accessibility#ui design#design-system#token specification
One-click install
npx skills add https://github.com/srivtx/supercharger-opencode --skill design-md-srivtx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/srivtx/supercharger-opencode/tree/main/design/design-md
Command: npx skills add https://github.com/srivtx/supercharger-opencode --skill design-md-srivtx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating, maintaining, and converting Google's DESIGN.md files, which define a visual identity for coding agents.

Core Features & Use Cases

  • Design File Creation: Generate DESIGN.md files for branding and UI consistency across projects.
  • Token Validation: Check the integrity of tokens against WCAG contrast standards.
  • File Conversion: Export design specifications to Tailwind CSS or W3C DTCG JSON for consumption by agents.
  • Use Case: For a new product, use this Skill to create a DESIGN.md file, ensuring brand consistency and accessibility.

Quick Start

Generate a new DESIGN.md file for your brand, including tokens and typography.

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 DESIGN.md file for brand consistency and UI tokens?▼

To create a DESIGN.md file, generate a new specification including your brand tokens and typography. This establishes visual identity and UI consistency for coding agents across projects.

Can I validate WCAG contrast compliance for design tokens?▼

You can validate WCAG contrast compliance by checking token integrity against accessibility standards. This ensures your design system meets required visual accessibility guidelines for UI components.

How do I export design tokens to Tailwind CSS or W3C DTCG formats?▼

Export design tokens by converting DESIGN.md specifications into Tailwind CSS or W3C DTCG JSON formats. This allows design systems to be consumed directly by coding agents and frameworks.

What do I need to know before authoring a DESIGN.md token specification?▼

Authoring a DESIGN.md token specification requires foundational knowledge of design tokens and brand guidelines. Understanding these concepts is necessary to define UI consistency and accessibility rules effectively.

Why validate token integrity when maintaining a design system?▼

Validating token integrity ensures your design system maintains structural correctness and WCAG compliance. This prevents visual inconsistencies and accessibility issues when coding agents consume the exported tokens.

Does design-md work for managing existing design system files?▼

The tool manages existing design system files by validating structure, WCAG compliance, and token integrity. It streamlines maintaining and converting DESIGN.md specifications for ongoing brand consistency.

Related Skills

Explore More Design & Creative Skills→
moshi-azzmoshi-azz
2

ckm:brand

Manage brand voice, visual identity, and asset validation using design tokens.

Community
Advanced
liumeixinliumeixin
4

design-md

Generate, validate, and export DESIGN.md files to Tailwind CSS and W3C DTCG JSON.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
cxnaivecxnaive

design-md

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

Community
Intermediate