{"enrichment":{"faq":[{"a":"Design System analyzes your screenshot, mockup, or Figma export to identify and extract design tokens\u2014colors, typography, spacing, and component patterns. It then structures these tokens in Google's design.md YAML format, creating a machine-readable spec that coding agents can implement without ambiguity or manual interpretation.","q":"How does design-system extract design tokens from screenshot?"},{"a":"Design System generates two synchronized files: a design.md file containing YAML-formatted tokens for developers, and a self-contained design.html style guide for visual reference and human review. Both files stay in sync and serve as a single source of truth for your design system.","q":"What outputs does design-system produce?"},{"a":"Yes. Design System accepts Figma exports, screenshots, mockups, and other visual references. It translates your visual design into standardized design tokens covering color, typography, spacing, and components, then outputs both machine-readable and human-readable documentation.","q":"Can design-system convert Figma files to design tokens?"},{"a":"Design System works with images, screenshots, mockups, and Figma files. Any visual reference you provide is analyzed to extract design tokens and generate your design.md and design.html outputs.","q":"What file formats does design-system accept as input?"},{"a":"Yes. Design System is released under the MIT license, making it free to use, modify, and distribute for both personal and commercial projects.","q":"Is design-system open source?"},{"a":"Design System creates a single source of truth by synchronizing your design.md token spec with your design.html style guide. Both files are generated from the same visual reference, ensuring your documentation, tokens, and implementation guidance never diverge.","q":"How does design-system prevent design drift?"}],"shadow_tags":["token-extraction","design-documentation","visual-to-code","style-guide-generation","design-automation","component-library","design-specification","brand-system","figma-integration","design-standardization"],"summary_rewrite":"Design System converts visual references into two synchronized outputs: a YAML token spec in Google's design.md format for coding agents, and a self-contained HTML style guide for human review. Reads imagery, derives tokens for color, typography, spacing, and components, then generates both files as a single source of truth that never drifts."},"files":[{"bytes":19467,"path":"skills/design-system/SKILL.md","sha256":"c3c1410699a0c8a6bb2a8f0106df18be669740d1162ec93ce2058b7af9c33bd9","url":"https://skillfed.io/files/BuildGreatProducts/builder-os/design-system/d50d80ba/SKILL.md"}],"id":"BuildGreatProducts/builder-os/design-system","links":{"html":"https://skillfed.io/BuildGreatProducts/builder-os/design-system","md":"https://skillfed.io/BuildGreatProducts/builder-os/design-system.md","repo":"https://github.com/BuildGreatProducts/builder-os"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":31,"language":null,"last_updated":"2026-07-07","license":"MIT","name":"design-system","publisher":"BuildGreatProducts","stars":168},"relations":{"similar":[{"id":"BuildGreatProducts/builder-os/design-better"},{"id":"BuildGreatProducts/builder-os/product-planner"},{"id":"vudovn/ag-kit/design-spec"},{"id":"BuildGreatProducts/builder-os/build-loop-cursor"},{"id":"BuildGreatProducts/builder-os/build-loop-claude-code"},{"id":"BuildGreatProducts/builder-os/build-mvp"},{"id":"BuildGreatProducts/builder-os/build-loop-codex"},{"id":"BuildGreatProducts/plaid/plaid"},{"id":"glebis/claude-skills/design-tokens"},{"id":"BuildGreatProducts/builder-os/launch-checklist"}]},"slug":{"owner":"BuildGreatProducts","repo":"builder-os","skill":"design-system"},"version":"d50d80ba"}