skills.rest
heximao
heximaoCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Automate creation, linting, diffing, and exporting of Google DESIGN.md files.

Updated May 11, 2026
Search Tags:#automation#accessibility#design tokens#UI design#DESIGN.md
One-click install
npx skills add https://github.com/heximao/agents --skill design-md-heximao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/heximao/agents/tree/main/skill-archive/docker-hermes/.archive/design-md
Command: npx skills add https://github.com/heximao/agents --skill design-md-heximao

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the authoring, validation, and export of Google's DESIGN.md files, simplifying the process of managing design tokens across projects.

Core Features & Use Cases

  • Automate Design Token Management: Create, validate, and export design token specifications for consistent visual identities.
  • Version Control: Track changes and diffs across different versions of the DESIGN.md file to avoid regressions.
  • Accessibility Validation: Check color palettes for WCAG compliance to ensure accessible designs.
  • Use Case: Use this Skill when creating a new DESIGN.md file, want to update or lint existing files, or port a style guide to a machine-readable format.

Quick Start

Validate and export the design tokens from your DESIGN.md file using 'npx @google/design.md'.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate my design tokens for WCAG accessibility compliance?▼

You can validate design tokens for WCAG accessibility compliance by using the design.md CLI to run structural checks and color palette validation against your DESIGN.md specification files.

What is the best way to automate linting of Google's DESIGN.md files?▼

Automating linting of DESIGN.md files is best achieved by running the design.md CLI, which performs structural checks to ensure your design token specifications maintain consistent UI/UX standards across multiple projects.

Can I export design tokens from DESIGN.md to Tailwind and DTCG JSON formats?▼

Yes, you can export design tokens from DESIGN.md to Tailwind and DTCG JSON formats by utilizing the design.md CLI, enabling machine-readable style guide integration into your software design systems.

How do I track changes and avoid regressions across different DESIGN.md file versions?▼

You can track changes and avoid regressions across DESIGN.md file versions by using the design.md CLI to diff design token specifications, ensuring consistent visual identities throughout version control updates.

Does this design token validation process work for existing style guides?▼

Yes, the design token validation process works for existing style guides by porting them into the DESIGN.md format, allowing you to lint and export machine-readable design token specifications for consistent UI/UX.

Related Skills

Explore More Software Engineering Skills→
zangjeicyzangjeicy

design-md

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

Community
Intermediate
robert-hoffmannrobert-hoffmann
6

ub-css

Map DTCG design tokens to CSS variables with layered cascades and native nesting.

Community
Advanced
ArieGoldkinArieGoldkin
10

design-system-starter

Generate design tokens, React component templates, and WCAG 2.1 accessibility documentation.

Community
Advanced
PlaidmustachePlaidmustache

design-md

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

Community
Intermediate