Design System
Takes screenshots, mockups, Figma URLs, or live site references and generates two files in lockstep: a design.md with YAML tokens in Google's open format (for the agent to implement from) and a self-contained design.html that renders every token and component live in the browser (for humans). It walks through a structured interview,what colors map to primary vs. accent, what the spacing scale should be, how rounded corners should feel,then writes both artifacts so they never drift. The approach is opinionated: if your references conflict or feel thin, it will say so and ask you to pick a direction. Useful when you need to move from visual inspiration to a token spec an agent can actually build against without guessing.
- skills.sh installs
- 1.9K
- GitHub stars
- 233
- last updated
- Aug 21, 2026
Install
$ npx -y skills add buildgreatproducts/builder-os --skill design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
Design System — Image to design.md + design.html
This skill takes an image (or a set of image references) and translates them into a design system captured as two mirrored files:
docs/design.md— a YAML token block in Google's open design.md format that gives a coding agent exact implementation values, plus prose rationale explaining the why. This is the source of truth.docs/design.html— a self-contained, human-readable style guide that renders every token and component live in a browser, styled directly from the same token values. This is the mirror the human reads.
Same design system, two audiences: the agent reads the .md, the human opens the .html. They must always be written and updated together so they never drift.
When to Use This
- Founder shares a screenshot, mockup, Figma file, inspiration board, or live website and wants it captured as a structured design system
- Founder needs design tokens a coding agent can implement without guessing
- Founder wants a precise token spec to supplement an existing product vision or PRD
- Fully standalone — does not require any other document
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/buildgreatproducts/builder-os
- Categories
- Frontend Development, Git & Pull Requests, Documentation, Code Review & Quality, AI & Agent Building, Design & UI/UX
- First seen
- Jul 14, 2026
More from buildgreatproducts/builder-os
All 9Recommended
More Frontend Development
tanstack-storetanstack-skills/tanstack-skillsFramework-agnostic, immutable reactive data store with framework adapters for React, Vue, Solid, Angular, and Svelte.1.8Kskills.sh installs
responsiveness-checkjezweb/claude-skillsTest website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects l1.8Kskills.sh installs
multi-tenant-architecturemblode/agent-skillsProvides architecture guidance for multi-tenant SaaS platforms on Cloudflare or Vercel. Covers platform choice, domain strategy, tenant identification and isola1.8Kskills.sh installs
web-developmenttencentcloudbase/skillsUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React1.8Kskills.sh installs
quick-mockupscivitai/civitaiCreate multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantin1.7Kskills.sh installs
code-reviewadobe/skillsUse this when reviewing AEM Edge Delivery Services (EDS, Franklin, Helix) code, either self-review at the end of development before opening a PR, or reviewing a1.7Kskills.sh installs