design-md

Create, lint, and export Google DESIGN.md design tokens to Tailwind or W3C DTCG formats.

Updated Jul 6, 2026
One-click install
npx skills add https://github.com/ghufronbagaskara/agent-im --skill design-md-ghufronbagaskara
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/ghufronbagaskara/agent-im/tree/main/hermes-home/skills/creative/design-md
Command: npx skills add https://github.com/ghufronbagaskara/agent-im --skill design-md-ghufronbagaskara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill solves the fragmentation of design systems by providing a standardized, machine-readable format that bridges the gap between visual identity and implementation.

Core Features & Use Cases

  • Standardized Spec Authoring: Create and maintain DESIGN.md files that combine design tokens with human-readable rationale.
  • Automated Validation: Lint files for structure, token references, and WCAG accessibility contrast ratios.
  • Multi-format Export: Convert design tokens into Tailwind theme JSON or W3C DTCG formats for seamless developer handoff.

Quick Start

Use the design-md skill to lint the current project DESIGN.md file and export the tokens to 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 export design tokens for Tailwind and W3C DTCG formats?

You can export design tokens for Tailwind and W3C DTCG formats by authoring a standardized DESIGN.md file and using automated conversion to generate a tailwind.theme.json file for seamless developer handoff.

How do I validate WCAG accessibility contrast ratios in my design system?

To validate WCAG accessibility contrast ratios, you lint your DESIGN.md files to check structural integrity and automatically verify that UI color tokens meet compliance standards across design artifacts.

What is the best way to document visual identity for cross-platform UI systems?

The best way to document visual identity for cross-platform UI systems is standardizing documentation through the Google DESIGN.md specification, which bridges visual identity and implementation with a machine-readable format.

Do I need Node-based CLI tools to lint DESIGN.md files?

Yes, you need Node-based CLI tools to lint DESIGN.md files, as the validation process integrates with these tools to ensure structural integrity and token reference accuracy across design artifacts.

Why does my design system documentation suffer from fragmentation?

Design system documentation suffers from fragmentation when it lacks a standardized, machine-readable format to bridge the gap between visual identity rationale and developer implementation tokens.

Can I use design-md to lint the current project DESIGN.md file?

Yes, you can use the design-md skill to lint the current project DESIGN.md file, checking for structure, token references, and WCAG contrast ratios before exporting the tokens.