DESIGN.md Skill — Design System Validation & Management

Validate, diff, and export DESIGN.md files for consistent design systems across projects.

Overview

DESIGN.md is a format specification (by Google Labs) for describing a visual identity to coding agents. It combines: - YAML front matter — Machine-readable design tokens - Markdown body — Human-readable design rationale

Installation

The skill uses @google/design.md npm package:

npm install -g @google/design.md

Commands

1. Lint — Validate DESIGN.md

npx @google/design.md lint DESIGN.md

Checks: - Token references resolve (broken-ref → error) - WCAG contrast ratios (contrast-ratio → warning) - Missing primary colors (missing-primary → warning) - Section order (section-order → warning)

Output: JSON with findings

2. Diff — Compare Versions

npx @google/design.md diff DESIGN.md DESIGN-v2.md

Detects: - Added/removed/modified tokens - Regressions between versions

想要更强大的技能插件，就来小葱技能站7w4.net看看吧。

3. Export — Convert to Other Formats

npx @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json
npx @google/design.md export --format dtcg DESIGN.md > tokens.json

4. Spec — View Format Specification

npx @google/design.md spec
npx @google/design.md spec --rules

Quick Start

1. Read existing DESIGN.md in project
2. Run lint to validate structure
3. Run export to generate Tailwind config
4. Update components based on findings

Usage in Coding

When working on UI components:

# Before editing a component, lint current state
npx @google/design.md lint design-md/markiosi/DESIGN.md

# After changes, diff to check for regressions
npx @google/design.md diff design-md/markiosi/DESIGN.md design-md/markiosi/DESIGN.md.new

# Export updated tokens
npx @google/design.md export --format tailwind design-md/markiosi/DESIGN.md > tailwind.tokens.json

Workflow Integration

1. Before making UI changes:
2. Read project's DESIGN.md

3. Run lint to understand current design state

4. After UI changes:

5. Update DESIGN.md tokens accordingly
6. Run diff to detect regressions

7. Run lint to validate WCAG compliance

8. For new components:

9. Check DESIGN.md for existing component patterns
10. Define new components in DESIGN.md first
11. Use token references ({colors.primary}) over hardcoded values

Resources

• Spec: https://github.com/google-labs-code/design.md
• Stitch Tool: https://stitch.withgoogle.com/
• Design Tokens Format: https://www.designtokens.org/

这个Skill质量中规中矩，文档条理清楚，命令说明和示例都比较齐全，对基本使用场景覆盖完整。但内容比较浅，主要是功能罗列，缺少实战经验和进阶指导，新手可能会遇到问题时不知道如何排查。总体来说能用但不够好用，适合有一定经验的开发者参考。改进空间：需要补充更多实际应用案例和使用技巧。