design-md

Create, validate, and export Google DESIGN.md files with YAML front matter.

Updated May 11, 2026
One-click install
npx skills add https://github.com/richardnguyen0715/keep-it-real --skill design-md-richardnguyen0715
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/richardnguyen0715/keep-it-real/tree/main/refer-projects/hermes-agent/skills/creative/design-md
Command: npx skills add https://github.com/richardnguyen0715/keep-it-real --skill design-md-richardnguyen0715

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for a streamlined process to author, validate, and export Google's DESIGN.md token spec files, ensuring consistency and accessibility in UI/brand across projects.

Core Features & Use Cases

  • Author/Validate/Export: Create, validate, and export DESIGN.md files, which include design tokens and rationale.
  • Token Spec Management: Handle YAML front matter for machine-readable design tokens and Markdown body for human-readable rationale.
  • Use Case: For a project requiring a cohesive design system, use this Skill to create a DESIGN.md file that defines colors, typography, and components, ensuring accessibility compliance.

Quick Start

Run the design-md skill to generate a new DESIGN.md file based on the provided project requirements.

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 identity for coding agents?

A DESIGN.md file defines a project's visual identity for coding agents by combining YAML front matter for machine-readable design tokens and Markdown for human-readable rationale, ensuring UI consistency across projects.

How do I create and validate design tokens for my project's design system?

You can create and validate design tokens by generating a DESIGN.md file that specifies colors, typography, and components. The file uses YAML front matter to manage machine-readable tokens and Markdown for rationale.

Does the design token validation process check for WCAG compliance?

Yes, validating the DESIGN.md token spec files ensures WCAG compliance and UI accessibility. The process checks the defined visual identity tokens to guarantee accessibility standards are met across the project.

What's the best way to manage machine-readable design tokens alongside human-readable documentation?

Managing machine-readable design tokens alongside human-readable documentation is best handled by using a DESIGN.md file. This format separates YAML front matter for tokens from the Markdown body for rationale.

Do I need the @google/design.md CLI tool to export design system files?

Yes, you need the @google/design.md CLI tool installed to use this Skill. It is a required dependency for managing, validating, and exporting the DESIGN.md token spec files.

Can I use DESIGN.md to enforce UI consistency across multiple coding agent projects?

Yes, you can use DESIGN.md to enforce UI consistency across multiple projects. By defining a cohesive design system with tokens and rationale, coding agents apply the same visual identity standards everywhere.