skills.rest
ashiqcodeleaf
ashiqcodeleafCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Validate Google DESIGN.md design tokens and convert to Tailwind CSS or W3C DTCG JSON.

Updated Jun 22, 2026
Search Tags:#design tokens#visual identity#DESIGN.md#format conversion#WCAG compliance
One-click install
npx skills add https://github.com/ashiqcodeleaf/long-Run-Agents --skill design-md-ashiqcodeleaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/ashiqcodeleaf/long-Run-Agents/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/ashiqcodeleaf/long-Run-Agents --skill design-md-ashiqcodeleaf

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 simplifies the process of managing and maintaining Google's DESIGN.md visual identity files, allowing for easy validation, comparison, and conversion of design tokens.

Core Features & Use Cases

  • Design Tokens Management: Author, validate, and export Google's DESIGN.md files containing design tokens.
  • Version Comparison: Diff different versions of DESIGN.md files to identify regressions.
  • Accessibility Validation: Check for WCAG compliance on color contrasts within the design tokens.
  • Format Conversion: Export DESIGN.md files to Tailwind CSS or W3C DTCG JSON formats for use in various platforms.
  • Use Case: Suppose you are designing a new project that needs a consistent UI/brand identity. You can use this Skill to generate a new DESIGN.md file, validate its WCAG compliance, and convert it to Tailwind CSS for integration with your front-end.

Quick Start

Author a new DESIGN.md file using the provided template and run 'npx @google/design.md lint design.md' to validate its structure and tokens.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I convert DESIGN.md files to Tailwind CSS or W3C DTCG JSON?▼

You can convert DESIGN.md files to Tailwind CSS or W3C DTCG JSON by authoring and validating the file with this Skill. It exports design tokens directly into your desired format for seamless integration into front-end platforms.

Can I validate WCAG color contrast compliance for design tokens?▼

Yes, you can validate WCAG compliance for color contrasts within your design tokens. The Skill checks your DESIGN.md file to ensure your visual identity meets accessibility standards before you export it.

What is the best way to compare different versions of DESIGN.md files?▼

The best way to compare DESIGN.md file versions is using the Skill's version comparison feature. It diffs design token files to identify regressions and track changes across your visual identity system.

Do I need the @google/design.md CLI to manage design tokens?▼

Yes, you need the @google/design.md CLI installed to perform operations. The Skill requires this command-line tool to authorize, validate, and manage your text-based UI design system workflow.

How do I lint a DESIGN.md file to validate its structure?▼

You can lint a DESIGN.md file by authoring it with the provided template and running 'npx @google/design.md lint design.md'. This validates the structure and tokens to ensure your visual identity file is correctly formatted.

Related Skills

Explore More Design & Creative Skills→
zangjeicyzangjeicy

design-md

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

Community
Intermediate
shuff57shuff57

design-md

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

Community
Intermediate
seo-jinseokseo-jinseok

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 compliance.

Community
Advanced
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate