Author, lint, and export Google's DESIGN.md design token specification files.
npx skills add https://github.com/xu1713/openhorse --skill design-md-xu1713
Please help me install this Agent Skill. Skill: design-md Source: https://github.com/xu1713/openhorse/tree/main/openhorse/openhorse/skills/creative/design-md Command: npx skills add https://github.com/xu1713/openhorse --skill design-md-xu1713
npx @google/design.md lint to catch broken token references, duplicate sections, invalid colors/dimensions, and WCAG AA/AAA contrast failures; diff two versions to detect regressions. - Export: Convert the spec to Tailwind theme JSON or W3C DTCG tokens.json for use in existing projects. - Use Case: A user pastes their brand palette and asks for a design system. You write DESIGN.md using token references like {colors.primary}, lint it, fix a contrast warning on button-primary, and export tailwind.theme.json next to it. ## Quick Start Ask the agent to create a DESIGN.md design token file for your brand with a primary color and typography, then lint it and export Tailwind theme JSON.High-intent search queries and answers about installing and using this skill.
Write a Markdown file with YAML frontmatter containing version, name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Typography. Always quote hex colors and negative dimensions, and use token references like {colors.primary} in component definitions.
Run npx -y @google/design.md lint DESIGN.md to validate structure, token references, and color formats. The linter reports WCAG contrast findings for component textColor versus backgroundColor against AA (4.5:1) and AAA (7:1) ratios, exiting with code 1 on errors.
Yes, the CLI exports to both formats. Use npx @google/design.md export --format tailwind DESIGN.md for a Tailwind theme JSON, or --format dtcg for W3C Design Tokens Format Module JSON. All commands also accept stdin via the dash argument.
Broken references occur when a token path like {colors.missing} points to a non-existent token. References resolve by full dotted path, so {colors.primary} works but {primary} does not. Also ensure hex colors and negative dimensions are quoted strings so YAML parses them correctly.
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. Component properties are limited to a whitelist including backgroundColor, textColor, typography, rounded, padding, size, height, and width.
mike-coulbournTranslate brand strategy into visual identity direction with mood boards and logo briefs.
nickstradBuild scalable design systems with Tailwind CSS and design tokens.
AYin-ZCreate design specifications for web and mini-program projects before coding.
LuminaVaultDesign custom HTML artifacts like landing pages and prototypes.