skills.rest
humanerd-drew
humanerd-drewOFFICIAL
Explore all skills by this author →
GitHub

design-md

Create and validate DESIGN.md files for UI/branding systems with accessibility linting.

2|7|Updated Jun 19, 2026
Search Tags:#design#ui#accessibility#specification#tokens
One-click install
npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill design-md-humanerd-drew
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill design-md-humanerd-drew

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation, validation, and export of Google's DESIGN.md token spec files, ensuring consistency and accessibility in UI/branding across projects.

Core Features & Use Cases

  • Design Spec Creation: Author and validate visual identity tokens in a structured YAML format.
  • Accessibility Validation: Lint for WCAG contrast and version differences for regressions.
  • Export to Formats: Export tokens to Tailwind CSS or W3C DTCG JSON for integration with various tools.
  • Use Case: A designer wants to create a consistent design system for a new product, including color palettes, typography, and components.

Quick Start

Use the design-md skill to create a new DESIGN.md file for your project and validate it for accessibility.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create and validate a DESIGN.md token spec file for my UI?▼

To create and validate a DESIGN.md token spec, author your visual identity tokens in a structured YAML format, then run linting to ensure accessibility and token consistency across your UI and branding systems.

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

Yes, you can export design tokens from your DESIGN.md file directly to Tailwind CSS or W3C DTCG JSON formats, enabling seamless integration of your UI specifications with various development tools.

How does accessibility validation work for design system tokens?▼

Accessibility validation lints your design tokens against WCAG contrast standards and checks version differences to catch accessibility regressions, ensuring your UI specifications maintain proper visual contrast.

Do I need YAML parsing capabilities to use the DESIGN.md specification format?▼

Yes, YAML parsing and file manipulation capabilities are required to author, validate, and process the structured YAML format used for defining visual identity tokens within the DESIGN.md specification.

What is the best way to prevent token regressions when updating a design system?▼

The best way to prevent token regressions is to validate version differences by comparing updated design tokens against previous iterations, allowing you to identify and resolve visual inconsistencies before deployment.

When do I need a structured DESIGN.md file for my branding system?▼

You need a structured DESIGN.md file when establishing a new UI or branding system, ensuring consistent color palettes, typography, and component specifications are documented and validated for accessibility.

Related Skills

Explore More Design & Creative Skills→
hungthinh04hungthinh04

design-md

Author and validate DESIGN.md token spec files with YAML front matter.

Community
Advanced
shuff57shuff57

design-md

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

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

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

Community
Advanced
guccangguccang
3

design-md

Create and validate DESIGN.md design system specification files with YAML tokens.

Community
Intermediate