design-md

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

Updated May 9, 2026
One-click install
npx skills add https://github.com/LuminaVault/LuminaVaultServer --skill design-md-luminavault
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/LuminaVault/LuminaVaultServer/tree/main/Sources/App/Resources/Skills/creative/design-md
Command: npx skills add https://github.com/LuminaVault/LuminaVaultServer --skill design-md-luminavault

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation, validation, and export of Google's DESIGN.md token spec files, streamlining the process of defining and implementing visual identities.

Core Features & Use Cases

  • Authoring DESIGN.md Files: Build comprehensive design systems with YAML front matter and Markdown body.
  • Validation and Linting: Ensure structural integrity and WCAG compliance with built-in checks.
  • Exporting to Tailwind or DTCG: Convert design tokens to Tailwind CSS or W3C DTCG JSON for integration into development workflows.
  • Use Case: Suppose you need to create a design system for a new project. Use this Skill to author a DESIGN.md file, validate it for errors, and export it to Tailwind CSS for use in your project.

Quick Start

Use the design-md skill to create a new DESIGN.md file for your brand, including colors, typography, and components.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create a DESIGN.md file for my UI design system?

To create a DESIGN.md file, you define your visual identities using YAML front matter and a Markdown body. This process generates a structured token spec file that establishes your project's foundational design system.

Can I export design tokens to Tailwind CSS from a Markdown file?

Yes, you can export design tokens to Tailwind CSS. By validating your structured Markdown file, the tool converts the defined visual identities into a Tailwind CSS configuration ready for development integration.

Does the DESIGN.md spec validate WCAG compliance for accessibility?

Yes, the DESIGN.md validation process includes built-in linting for WCAG compliance. This ensures your UI design tokens meet accessibility standards and maintain structural integrity before you export them.

Do I need Node.js to generate Google's DESIGN.md token spec files?

Yes, you need Node.js installed to generate Google's DESIGN.md token spec files. The Skill relies on the @google/design.md CLI dependency to execute the authoring, validation, and export processes.

What is the best way to convert design tokens to W3C DTCG JSON?

The best way to convert design tokens to W3C DTCG JSON is by authoring a DESIGN.md file and running the built-in export function. This translates your YAML and Markdown definitions into the standardized JSON format.

Why does my design system export fail structural integrity checks?

Your design system export fails structural integrity checks when the DESIGN.md file contains formatting errors in the YAML front matter or Markdown body. Use the built-in linting feature to identify and resolve these structural issues before exporting.