skills.rest
FlyFireF
FlyFireFCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Jul 8, 2026
Search Tags:#accessibility#color palette#design-system#DESIGN.md#ui specification
One-click install
npx skills add https://github.com/FlyFireF/PersonalAgentAPP --skill design-md-flyfiref
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/FlyFireF/PersonalAgentAPP/tree/main/growth-companion/skills/creative/design-md
Command: npx skills add https://github.com/FlyFireF/PersonalAgentAPP --skill design-md-flyfiref

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of creating, validating, and exporting Google's DESIGN.md spec files, which are essential for maintaining consistent UI/brand across projects.

Core Features & Use Cases

  • Authoring DESIGN.md: Generate and update DESIGN.md files that describe visual identities to coding agents.
  • Validating Structure and WCAG Contrast: Lint files for structure and WCAG compliance, ensuring accessibility.
  • Exporting to Tailwind and DTCG: Convert spec files to Tailwind theme JSON or W3C DTCG JSON for further use.

Quick Start

Use the design-md skill to generate a new DESIGN.md file for your project.

Frequently Asked Questions about design-md

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

FAQPage Schema
What is a DESIGN.md file and how does it define visual identities for coding agents?▼

A DESIGN.md file defines visual identities for coding agents to maintain consistent UI and branding across projects. It specifies design system parameters and color palettes that AI agents can read and apply during code generation.

How do I create and validate a DESIGN.md file for my project?▼

To create and validate a DESIGN.md file, use this Skill to generate the specification and then lint it for structural compliance. Validation checks structure and WCAG color contrast for accessibility using the npx @google/design.md CLI tool.

Can I export a DESIGN.md spec file to a Tailwind theme JSON configuration?▼

Yes, you can export a DESIGN.md spec file to Tailwind theme JSON. The Skill converts your validated visual identity specifications into Tailwind theme JSON or W3C DTCG JSON formats for direct integration into your development workflow.

Does the DESIGN.md validation check WCAG contrast for accessibility compliance?▼

Yes, DESIGN.md validation checks WCAG contrast for accessibility compliance. The Skill lints your spec files to ensure that color palettes and visual specifications meet WCAG accessibility standards during the validation process.

Do I need the npx @google/design.md CLI tool to lint and export spec files?▼

Yes, you need the npx @google/design.md CLI tool to lint and export spec files. The Skill requires this CLI dependency to perform structural validation, WCAG contrast checks, and conversion to Tailwind or DTCG JSON formats.

Related Skills

Explore More Design & Creative Skills→
lengoctuong2005lengoctuong2005
5

design-md

Manage and validate Google DESIGN.md spec files for visual identity tokens.

Community
Intermediate
liumeixinliumeixin
4

design-md

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

Community
Advanced
christopherlouetchristopherlouet
5

dev-shadcn

Set up and customize shadcn/ui React components with Radix primitives and theme variables.

Community
Intermediate
lxt070409lxt070409
1

design-md

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

Community
Intermediate