Design System
buildgreatproducts/builder-os/skills/design-systemby buildgreatproductsfb74cac0fc9dMIT228 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 months ago
Translates an image (or a set of image references — screenshots, mockups, Figma URLs, live websites) into two mirrored design-system artifacts: `docs/design.md` (YAML tokens + prose, following Google's open [design.md](https://github.com/google-labs-code/design.md) format, for the coding agent) and `docs/design.html` (a self-contained, token-driven style guide rendering every token and component live, for the human to read). Reads the imagery, asks targeted clarifying questions, derives the design tokens (colors, typography, spacing, rounded, components), and writes both files. Fully standalone — requires no other document or skill. Use when the founder says "create a design system", "design from image", "translate image to design", "create design.md", "image to design system", "extract design tokens", or shares an image with no other clear intent.
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| SKILL.md | 19 KB | text/markdown |
Source and attribution
Source:buildgreatproducts/builder-osinskills/design-systemat commitfb74cac
License: MIT
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from buildgreatproducts/builder-os
Product Planner
buildgreatproducts
Vision intake conversation followed by generation of three product documents — `docs/product-vision.md` (strategy and brand), `docs/prd.md` (technical spec for coding agents), and `docs/product-roadmap.md` (phased build plan with task checkboxes). Also captures the founder's answers as `docs/VISION.md`. Use when the founder says "plan my product", "plan a product", "define my vision", "generate a PRD", "create a roadmap", "spec out my idea", "help me build something", or wants to convert an idea into shippable spec documents.
Idea Validator
buildgreatproducts
Pressure-tests a product idea, producing a validation report with flaws, competition, MVP test and a verdict.
Idea Generator
buildgreatproducts
Guides a founder through a structured conversation to discover a product idea and writes it to docs/product-idea.md.
Design Better
buildgreatproducts
Applies UX/UI craft heuristics to frontend code generation and review, deferring visual style to a design system file.
Build Loop Cursor
buildgreatproducts
Guides a disciplined build, review, test and fix loop for implementing planned features with Cursor.
Build Loop Codex
buildgreatproducts
Runs a disciplined build, review, test and fix loop for feature work using the OpenAI Codex CLI.