skills.rest
LynxLabVN
LynxLabVNOFFICIAL
Explore all skills by this author →
GitHub

design-md

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

Updated Jul 3, 2026
Search Tags:#ui#accessibility#tokens#google#design-system
One-click install
npx skills add https://github.com/LynxLabVN/office-agent --skill design-md-lynxlabvn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/LynxLabVN/office-agent/tree/main/agent-core/skills/creative/design-md
Command: npx skills add https://github.com/LynxLabVN/office-agent --skill design-md-lynxlabvn

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, enhancing design consistency and accessibility across projects.

Core Features & Use Cases

  • Authoring: Create and manage design tokens and associated prose in a single file.
  • Validation: Ensure structural integrity, token references, and WCAG compliance.
  • Exporting: Convert design tokens to Tailwind CSS or W3C DTCG JSON for integration.
  • Use Case: When developing a design system, use this Skill to maintain and enforce a consistent visual identity across multiple projects.

Quick Start

Use the design-md skill to lint the DESIGN.md file for structure and WCAG compliance.

Frequently Asked Questions about design-md

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

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

Lint a DESIGN.md file to validate design tokens for WCAG compliance. This process checks structural integrity, token references, and accessibility standards to ensure visual identities meet compliance requirements.

Can I export design tokens to Tailwind CSS from a DESIGN.md file?▼

Export design tokens to Tailwind CSS from a DESIGN.md file by converting defined visual identities. The Skill outputs Tailwind CSS or W3C DTCG JSON formats for direct project integration.

What is a DESIGN.md file for coding agents?▼

A DESIGN.md file defines visual identities for coding agents using design tokens and associated prose. It streamlines design system specification creation and management to maintain consistency across multiple projects.

Do I need the @google/design.md CLI tool to lint a DESIGN.md file?▼

Yes, the @google/design.md CLI tool is required to lint a DESIGN.md file. The Skill depends on this CLI to perform structural validation, WCAG compliance checks, and token reference verification.

What's the best way to maintain a consistent design system across multiple projects?▼

Author and manage design tokens in a single DESIGN.md file to maintain a consistent design system across multiple projects. Enforce visual identity standards through validation and export integration.

Does design-md support exporting to W3C DTCG JSON format?▼

Yes, design-md supports exporting to W3C DTCG JSON format. The Skill converts design tokens from DESIGN.md files into W3C DTCG JSON or Tailwind CSS for development workflow integration.

Related Skills

Explore More Design & Creative Skills→
FlyFireFFlyFireF

design-md

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

Community
Intermediate
LuminaVaultLuminaVault

design-md

Generate and validate Google DESIGN.md files with YAML front matter and Markdown body.

Official
Intermediate
LamseyahEliasLamseyahElias

design-md

Author, validate, and export DESIGN.md tokens to Tailwind or DTCG JSON.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

design-md

Author, validate, and export design tokens using Google DESIGN.md.

Community
Advanced