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
Decision gist · record as of 2026-07-07
Design System translates images into structured design tokens and a dual-format style guide for both agents and humans. 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.
Use it when
- Design System generates two synchronized files: a design.md file containing YAML-formatted tokens for developers.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
BuildGreatProducts/builder-os/design-system
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/design-system/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Extract design tokens and create a structured design system from visual references”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Design Better applies timeless UX/UI craft heuristics—drawn from Nielsen Norman, Laws of UX, WCAG, and modern AI-product patterns—to separate polished interfaces from merely functional code. It pairs with your design system tokens for visual decisions while owning hierarchy, interaction, accessibility, and motion craft. Use it when building or refactoring UI and want design best practices baked into code generation and review.
Product Planner walks you through a structured vision intake, then generates three documents: a product vision statement, a technical PRD for coding agents, and a phased roadmap with task checkboxes. It picks up where you left off if interrupted, pre-fills from any existing idea capture, and validates all sections before proceeding to document generation.
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—all required before writing any UI code. Use it when defining design tokens or establishing a design source-of-truth for web or mobile projects.
Build MVP works through your product roadmap task by task, implementing, testing, and verifying each phase before moving forward. It reads your PRD and design tokens, marks tasks complete as it goes, and stops only when the entire app is built and working end to end. When finished, it initializes git and offers to connect a remote repository.
Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
Launch Checklist audits your codebase to identify everything needed for production, then generates a personalized deployment guide in plain language. Each step is marked as your responsibility, your agent's task, or a collaboration, with all technical terms explained for non-technical founders. The result is a clear path from working code to customers using your product.
More skills Design Spec Extraction (unlicensed) · design-md-validator (MIT) · design-context-extract (MIT) · idea-generator (MIT) · design-md (MIT) · design-md (Apache-2.0)