skills.rest
zhouboyu-xreal
zhouboyu-xrealCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Jun 9, 2026
Search Tags:#branding#design system#UI design#token management#DESIGN.md
One-click install
npx skills add https://github.com/zhouboyu-xreal/Hermes-Memory --skill design-md-zhouboyu-xreal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/zhouboyu-xreal/Hermes-Memory/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/zhouboyu-xreal/Hermes-Memory --skill design-md-zhouboyu-xreal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, yaml, jinja2, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the complexities of working with Google's DESIGN.md files, providing a streamlined process for authoring, validating, and exporting these design system specifications.

Core Features & Use Cases

  • Author/Validate/Export: Create, validate, and export Google's DESIGN.md files for consistent UI/branding across projects.
  • Token Management: Manage design tokens, including colors, typography, layout, and components.
  • Accessibility: Lint for WCAG contrast and ensure compliance with accessibility standards.
  • Export Formats: Export to Tailwind CSS or W3C DTCG JSON for further use in development environments.
  • Use Case: A designer or developer needs to maintain a consistent design language across multiple projects. This skill can automate the process of generating and managing DESIGN.md files.

Quick Start

Run the 'design-md' skill to create a new DESIGN.md file for your brand, and use the 'export' subcommand to convert it into a Tailwind theme JSON file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I automate creating and validating DESIGN.md files for a design system?▼

To automate DESIGN.md file creation and validation, this skill parses design tokens and enforces consistent UI specifications. It streamlines authoring and formatting for design systems requiring structured documentation.

Can I export design tokens to Tailwind CSS from a DESIGN.md file?▼

Yes, you can export design tokens to Tailwind CSS. This skill converts DESIGN.md specifications into a Tailwind theme JSON file, facilitating direct integration into your development environment.

Does this DESIGN.md automation tool check WCAG contrast for accessibility compliance?▼

Yes, this tool checks WCAG contrast for accessibility compliance. It lints design tokens within the DESIGN.md file to ensure color combinations meet required accessibility standards.

Do I need Python to manage design tokens and generate DESIGN.md specifications?▼

Yes, you need Python installed to manage design tokens and generate DESIGN.md specifications. This skill relies on Python, yaml, and jinja2 dependencies for token parsing and file formatting.

What is the best way to maintain a consistent UI branding language across multiple projects?▼

The best way to maintain consistent UI branding is to centralize specifications in a DESIGN.md file. This skill automates token management and exports standard formats like W3C DTCG JSON for consistent implementation.

Related Skills

Explore More Design & Creative Skills→
liumeixinliumeixin
4

design-md-preview-generator

Generate HTML previews from DESIGN.md files and capture screenshots with Playwright.

Community
Intermediate
shuff57shuff57

design-md

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

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate
XyHalcyonXyHalcyon

design-md

Author, validate, and export Google DESIGN.md files to Tailwind or W3C DTCG JSON.

Community
Advanced