Author, lint, and export Google's DESIGN.md design token specification files.
npx skills add https://github.com/superfhp/lumi-agent-body --skill design-md-superfhp
Please help me install this Agent Skill. Skill: design-md Source: https://github.com/superfhp/lumi-agent-body/tree/main/skills/creative/design-md Command: npx skills add https://github.com/superfhp/lumi-agent-body --skill design-md-superfhp
npx @google/design.md lint to catch broken token references, duplicate sections, invalid values, and WCAG AA/AAA contrast failures. - Export & Diff: Convert tokens to Tailwind theme JSON or W3C DTCG JSON, and diff two versions to detect regressions. - Use Case: A user pastes their brand palette and asks for a design system spec; the Skill writes DESIGN.md, lints it for contrast issues, and exports tailwind.theme.json for their existing project. ## Quick Start Ask the agent to create a DESIGN.md design token spec for your brand with your accent color and font, then lint it and export it to Tailwind format.High-intent search queries and answers about installing and using this skill.
Write a Markdown file with YAML frontmatter containing name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Components. Use token references like {colors.primary} in component definitions instead of repeating hex values.
Run npx -y @google/design.md lint DESIGN.md to validate structure, token references, and color formats. The wcag-contrast rule checks component textColor against backgroundColor for WCAG AA (4.5:1) and AAA (7:1) ratios, reporting warnings or info.
Yes, the CLI exports to both formats. Use npx @google/design.md export --format tailwind for a Tailwind theme JSON, or --format dtcg for W3C Design Tokens Format Module JSON. All commands also accept stdin via the - argument.
Broken-ref errors occur when a token reference like {colors.missing} points to a non-existent token. References resolve by full dotted path, so {colors.primary} works but {primary} does not. Also quote hex colors and negative dimensions to avoid YAML parsing issues.
Define variants as separate sibling component entries with related key names, such as button-primary-hover alongside button-primary. Nesting variants like button-primary.hover is invalid and rejected by the spec.
Use DESIGN.md when coding agents or multiple tools need machine-readable tokens plus rationale in one file. For pure visual inspiration or one-off prototype design, a formal token spec is unnecessary overhead.
Spectra29115Generate brand identity kits with logos, color palettes, typography, and style guides.
Monjyu1101Validate DESIGN.md token specs and export to Tailwind or W3C DTCG JSON.
yournextstoreAnalyze interface layouts, typography, color, hierarchy, and accessibility to identify usability flaws.
hungthinh04Create self-contained HTML design artifacts for landing pages and prototypes.