{"enrichment":{"faq":[{"a":"design-spec teaches you to create a DESIGN.md file as your project's single source of truth for visual language. Start by structuring it with canonical sections: colors, typography, spacing, rounded, and components. Use YAML front matter to define design tokens with their type, value, and optional description. This machine-readable format lets you establish all design decisions before writing UI code, ensuring consistency across web and mobile projects.","q":"How do I write a design.md file for my project?"},{"a":"design-spec defines a YAML token schema covering colors, typography, spacing, rounded, and components. Each token has a type (like color or dimension), a value (hex code, pixel size, or reference), and optional metadata. The schema supports token references\u2014using one token's value inside another\u2014and composite values for complex design decisions. This structured format makes your design tokens machine-readable and exportable to tools like Tailwind or Figma.","q":"What is the design token schema for YAML front matter?"},{"a":"design-spec specifies a canonical section order for DESIGN.md: colors first, then typography, spacing, rounded, and finally components. Each section contains tokens defined in YAML with consistent naming conventions. This standardized structure ensures all team members follow the same organization, making the design source of truth predictable and easy to navigate when defining or referencing design tokens across your project.","q":"What should the file structure and canonical section order be?"},{"a":"design-spec enables you to build a machine-readable design source of truth by encoding all visual language decisions in DESIGN.md's YAML token schema. Once structured this way, your design tokens can be linted, exported, or converted to formats like JSON or Tailwind config files. This approach eliminates manual sync between design and code, making your design language authoritative and programmatically accessible before you build any UI components.","q":"How can design-spec help create a machine-readable design source?"},{"a":"design-spec provides canonical naming conventions for design tokens to keep your design language consistent and discoverable. Token names should reflect their purpose and category\u2014for example, color tokens might use descriptive names, typography tokens should indicate scale or role, and spacing tokens should follow a predictable pattern. Following these conventions makes token references clearer and helps teams collaborate on the same design source of truth.","q":"What design token naming conventions does design-spec recommend?"},{"a":"design-spec's YAML token schema is designed to be exportable and convertible to other formats. Tokens defined in your DESIGN.md can be transformed into JSON, Tailwind config files, or synced with Figma variables through linters and exporters. This flexibility means you define your design tokens once in design-spec format and reuse them across your entire design and development workflow for web and mobile projects.","q":"Can design-spec tokens be converted to Figma variables or Tailwind?"}],"shadow_tags":["token-system","design-source-truth","ui-specification","yaml-frontmatter","design-to-code","visual-language","component-tokens","design-documentation"],"summary_rewrite":"design-spec is a guide to creating DESIGN.md, the single source of truth for a project's visual language. It covers the YAML token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order\u2014all required before writing any UI code. Use it when defining design tokens or establishing a design source-of-truth for web or mobile projects."},"files":[{"bytes":7373,"path":".agents/skills/design-spec/SKILL.md","sha256":"ca2d60c173c15622baab0fdde86a9437a462234809e0d40a08a1d86fc8927ee9","url":"https://skillfed.io/files/vudovn/ag-kit/design-spec/e6560822/SKILL.md"}],"id":"vudovn/ag-kit/design-spec","links":{"html":"https://skillfed.io/vudovn/ag-kit/design-spec","md":"https://skillfed.io/vudovn/ag-kit/design-spec.md","repo":"https://github.com/vudovn/ag-kit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":1512,"language":"TypeScript","last_updated":"2026-07-26","license":"MIT","name":"design-spec","publisher":"vudovn","stars":8011},"relations":{"similar":[{"id":"mateaix/mateclaw/design-md"},{"id":"NousResearch/hermes-agent/design-md"},{"id":"ibelick/ui-skills/create-design-md"},{"id":"dadbodgeoff/drift/design-tokens"},{"id":"BuildGreatProducts/builder-os/design-system"},{"id":"pedronauck/skills/design-spec-extraction"},{"id":"glebis/claude-skills/design-tokens"},{"id":"organvm/a-i--skills/frontend-design-systems"},{"id":"sanky369/vibe-building-skills/typography-system"},{"id":"bmad-code-org/BMAD-METHOD/ux-coach"}]},"slug":{"owner":"vudovn","repo":"ag-kit","skill":"design-spec"},"version":"e6560822"}