design-system
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.
Design System translates images into structured design tokens and a dual-format style guide for both agents and humans.
AI-generated summary based on this skill's SKILL.md
Install
BuildGreatProducts/builder-os/design-system
git clone https://github.com/BuildGreatProducts/builder-os
cp -r builder-os/skills/design-system ~/.claude/skills/design-systemFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does design-system extract design tokens from screenshot?
Design System analyzes your screenshot, mockup, or Figma export to identify and extract design tokens—colors, 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.
What outputs does design-system produce?
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.
Can design-system convert Figma files to design tokens?
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.
What file formats does design-system accept as input?
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.
Is design-system open source?
Yes. Design System is released under the MIT license, making it free to use, modify, and distribute for both personal and commercial projects.
How does design-system prevent design drift?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
Design System — Image to design.md + design.html
This skill takes an image (or a set of image
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/design-system/SKILL.md