design-md

Automate authoring, linting, versioning, and exporting of Google DESIGN.md design tokens.

1|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill design-md-brittaniebuffiecsu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/brittaniebuffiecsu/zerogravityclaw/tree/main/src/hermes-core/skills/creative/design-md
Command: npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill design-md-brittaniebuffiecsu

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 token spec files, ensuring consistency and accessibility in UI design systems.

Core Features & Use Cases

  • Design Spec Creation: Facilitates the development of visual identity tokens in a structured format.
  • Accessibility Validation: Lints files for WCAG contrast compliance and provides accessibility insights.
  • Version Comparison: Compares different versions of DESIGN.md files to identify regressions.
  • Exporting Tokens: Converts tokens into Tailwind or W3C DTCG JSON formats for further use.
  • Use Case: When creating a new design system or updating an existing one, this Skill can help maintain a consistent look and feel across all products.

Quick Start

Use the design-md skill to lint the DESIGN.md file 'brand-style.md' for potential issues.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate WCAG contrast compliance for design tokens?

You can validate WCAG contrast compliance by linting DESIGN.md token spec files to automatically check accessibility standards and identify visual regressions in your UI design system.

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

Export design tokens by converting structured DESIGN.md specifications into Tailwind or W3C DTCG JSON formats, enabling seamless integration of your visual identity tokens into frontend frameworks.

What is the best way to compare different versions of design token files?

Comparing different versions of DESIGN.md files identifies token regressions and ensures structured UI design specifications remain consistent across updates to your design system.

Do I need Node.js to author and lint DESIGN.md token spec files?

Yes, authoring and linting DESIGN.md token spec files requires Node.js and the @google/design.md CLI to process the structured UI design specifications and run accessibility validation.

Can I use design token specs to maintain a consistent look across multiple products?

Yes, automating the authoring and versioning of DESIGN.md design tokens streamlines the creation of a structured design system, ensuring a consistent look and feel across all products.

Why does my design system need structured token spec files?

Structured token spec files solve the problem of inconsistent UI design systems by providing a standardized format for visual identity tokens, WCAG accessibility validation, and automated version comparison.