skills.rest
juliuss1907
juliuss1907COMMUNITY
Explore all skills by this author →
𝕏@juliuss1907GitHub

design-md

Create, validate, and export Google DESIGN.md files with YAML front matter and WCAG checks.

Updated Apr 15, 2026
Search Tags:#accessibility#UI design#export#design spec#DESIGN.md
One-click install
npx skills add https://github.com/juliuss1907/knowledge-base --skill design-md-juliuss1907
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/juliuss1907/knowledge-base/tree/main/.hermes/skills/creative/design-md
Command: npx skills add https://github.com/juliuss1907/knowledge-base --skill design-md-juliuss1907

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and 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 files, ensuring consistency and accessibility in UI/branding across projects.

Core Features & Use Cases

  • Design Spec Creation: Generate comprehensive design specs with YAML front matter and Markdown body.
  • Validation and Linting: Check for structure, token references, and WCAG contrast.
  • Version Comparison: Identify regressions between different versions of the design spec.
  • Export to Formats: Output design tokens in Tailwind or W3C DTCG JSON for further use.
  • Use Case: For a UI/UX designer, this Skill can automate the process of creating a DESIGN.md file for a new project, validate it for accessibility, and export it to Tailwind CSS for integration into development tools.

Quick Start

Use the design-md skill to create a new DESIGN.md file for your project 'MyBrand'.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I automate design spec creation and validation for UI projects?▼

Automating design spec creation involves generating DESIGN.md files with YAML front matter, validating structure and token references, and running WCAG contrast checks to ensure UI accessibility and consistency.

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

Exporting design tokens to Tailwind CSS or W3C DTCG JSON requires the @google/design.md CLI tool, which processes the validated Markdown body and outputs the tokens for development integration.

Does the design-md Skill check WCAG contrast and identify version regressions?▼

Yes, the Skill validates WCAG contrast during linting and performs version comparison to identify regressions between different iterations of your design spec.

Do I need the @google/design.md CLI tool to lint and export DESIGN.md files?▼

Yes, the @google/design.md CLI tool is a required dependency for validating structure and exporting design tokens to formats like Tailwind CSS or W3C DTCG JSON.

What is the best way to compare different versions of a design spec for regressions?▼

The best way to compare design spec versions is using the version comparison feature, which identifies regressions between different iterations of the DESIGN.md file structure and token references.

Related Skills

Explore More Design & Creative Skills→
lxh755818-botlxh755818-bot

design-md

Create, validate, and export Google DESIGN.md design system specs.

Community
Advanced
humanerd-drewhumanerd-drew
2

design-md

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

Official
Intermediate
anxiety135790anxiety135790

design-md

Create and validate DESIGN.md specs with YAML tokens and WCAG checks.

Community
Advanced
RheasilviaRheasilvia

design-md

Lint DESIGN.md files and export design tokens to Tailwind or DTCG formats.

Community
Intermediate