skills.rest
lxh755818-bot
lxh755818-botCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Apr 30, 2026
Search Tags:#ui#accessibility#tailwind#tokens#design-system#DESIGN.md#dtcg
One-click install
npx skills add https://github.com/lxh755818-bot/obsidian-vault --skill design-md-lxh755818-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/lxh755818-bot/obsidian-vault/tree/main/backup/skills/creative/design-md
Command: npx skills add https://github.com/lxh755818-bot/obsidian-vault --skill design-md-lxh755818-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation, validation, and export of Google's DESIGN.md design system spec files, reducing manual effort and ensuring consistency across projects.

Core Features & Use Cases

  • Design Spec Creation: Author and validate design tokens and human-readable rationale in a single file.
  • Version Control: Compare and diff versions of design specs to detect regressions.
  • Export: Convert design specs to Tailwind CSS or W3C DTCG JSON for use in various tools.
  • Use Case: If you're a designer working on a UI component and need to maintain a consistent style guide across different projects, this skill can help you automate the process of creating and updating your DESIGN.md files.

Quick Start

Use the design-md skill to validate and export the 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 DESIGN.md files?▼

Automate design spec creation and validation by authoring tokens and rationale in a single DESIGN.md file, then running linting and WCAG contrast checks. This reduces manual effort and ensures UI consistency across projects.

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

Yes, you can export validated design tokens to Tailwind CSS or W3C DTCG JSON. This conversion allows direct integration of your design system specs into various frontend development tools.

How does WCAG contrast checking work for design tokens?▼

WCAG contrast checking validates your UI token combinations directly within the design spec file. This mechanism ensures your color choices meet accessibility standards before exporting to Tailwind CSS or JSON.

Do I need Python to validate Google's DESIGN.md format?▼

Yes, you need Python and the @google/design.md CLI tool installed to execute validation and export commands. These dependencies are required to process the design system spec files.

What is the best way to compare and diff design system spec versions?▼

Compare and diff design system spec versions to detect regressions by validating updated DESIGN.md files against previous versions. This helps maintain consistent style guides and prevents unintended visual changes across projects.

When do I need to use the W3C DTCG JSON format for design tokens?▼

You need the W3C DTCG JSON format when exporting design tokens for interoperability with standard design tools. Converting your spec to this format ensures broad compatibility across different design system ecosystems.

Related Skills

Explore More Design & Creative Skills→
zangjeicyzangjeicy

design-md

Lint and export Google DESIGN.md design tokens to Tailwind theme JSON.

Community
Intermediate
humanerd-drewhumanerd-drew
2

design-md

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

Official
Intermediate
josephblaisjosephblais

design-system

Validate design system tokens against WCAG AA/AAA accessibility standards.

Community
Advanced
Z43LZ43L

design-md

Lint, diff, and export DESIGN.md files to Tailwind or DTCG JSON.

Community
Advanced