skills.rest
anilcan-kara
anilcan-karaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Validate and manage design tokens in DESIGN.md via the @google/design.md CLI.

Updated Jun 17, 2026
Search Tags:#design#wcag#tokens#lint#design-system#export
One-click install
npx skills add https://github.com/anilcan-kara/nozich-agent --skill design-md-anilcan-kara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/anilcan-kara/nozich-agent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/anilcan-kara/nozich-agent --skill design-md-anilcan-kara

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validate and manage design tokens described in DESIGN.md to ensure consistency across projects.

Core Features & Use Cases

  • YAML front matter tokens provide a machine-readable design spec that drives tooling.
  • Markdown body conveys rationale, usage notes, and accessibility considerations.
  • Lint, diff, and export workflows via the @google/design.md CLI to ensure token integrity and easy integration with Tailwind or DTCG.
  • Use case: port brand guidelines into a codebase and keep designs in sync with implementation.

Quick Start

Create a DESIGN.md in your project root with a name and color palette, then lint it with the CLI to ensure token validity and optionally export to Tailwind or DTCG.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I lint design tokens for consistency across projects?▼

You can lint design tokens by defining them in a DESIGN.md file with YAML frontmatter and running the @google/design.md CLI. This validates the canonical schema and ensures token integrity across your codebase.

Can I export design tokens to Tailwind or DTCG JSON?▼

Yes, you can export design tokens to Tailwind or DTCG JSON using the @google/design.md CLI. The tool reads the validated YAML frontmatter from your DESIGN.md file to generate the output.

What is the best way to port brand guidelines into a codebase?▼

The best way to port brand guidelines is to define your color palette and typography in a DESIGN.md file. This provides a machine-readable spec that keeps designs in sync with implementation through lint and export workflows.

How do I diff design token versions to track changes?▼

You can diff design token versions using the @google/design.md CLI. It compares the structured markdown body and YAML frontmatter to identify changes in colors, typography, and other token values.

Does the design token validation enforce a specific schema structure?▼

Yes, validation enforces a canonical frontmatter schema requiring version, name, colors, and typography fields. The markdown body must also follow a structured format to pass linting checks.

Related Skills

Explore More Design & Creative Skills→
jparkerwebjparkerweb
87

ai-assist-design-creator

Reverse-engineer a website's visual design into a DESIGN.md file with YAML tokens.

Community
Advanced
GDSDNGDSDN
3

extract-tokens

Extract design tokens from consolidated patterns into W3C DTCG-compliant JSON.

Community
Advanced
ClaudioCeppi83ClaudioCeppi83

tailwind-design-system

Create reusable UI components and theme variables with Tailwind CSS.

Community
Advanced
zengbaochengzengbaocheng

design-md

Create, validate, and export DESIGN.md token spec files.

Community
Intermediate