AI导哈

设计与多媒体

design-system

buildgreatproducts/builder-os

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.

  • 1854 次安装
  • 233 星标
  • 收录于

安装命令

npx skills add https://github.com/buildgreatproducts/builder-os --skill design-system

SKILL.md

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

Modes

No image provided yet: Ask for one (or more) before doing anything else. Don't draft a design.md from imagination.

相关 Skills

product-plannerbuildgreatproducts/builder-osVision 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.智能体工作流1715idea-validatorbuildgreatproducts/builder-osPressure-tests a product idea before the founder invests in planning, building, or launching. Surfaces fatal flaws, tests whether the problem is real, maps real competition (including current behavior), plans first 10 customers, defines a 2-week MVP test, returns a strong/weak/pivot verdict, then sharpens `docs/product-idea.md` based on the founder's direction calls. Use when the founder says "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "stress test my idea", or otherwise wants to evaluate an idea before committing.测试与安全1709launch-checklistbuildgreatproducts/builder-osUse when the user's product is built (or nearly built) and they want to get it live and accessible to customers. Triggers on phrases like "create my launch checklist", "how do I deploy this", "help me launch", "get this live", "put this in production", "ship it to customers", "what do I need to do to go live", or any request for a step-by-step path from working code to a product customers can use. Audits the current codebase — stack, services, environment variables, payments, deploy config — then writes a plain-English, step-by-step launch guide to `docs/launch-checklist.md`. Every step is marked as something the user must do themselves, something their coding agent can do, or both together, and all technical terms are explained for non-technical founders.部署与运维1704idea-generatorbuildgreatproducts/builder-osGuided discovery of a product idea by mining what the founder already knows or already does — covers source selection (business vs. expertise), context capture, pattern synthesis, candidate scorecard, and writes `docs/product-idea.md`. Use when the founder says "generate an idea", "help me find an idea", "what should I build", "product idea from my business", "product idea from my expertise", or otherwise needs to discover a product concept worth building.其他1702build-loop-claude-codebuildgreatproducts/builder-osUse when building features with **Claude Code** in any codebase and the work should go through a disciplined build → review → test → fix loop. Triggers on "run the build loop", "build the next task", "continue the plan", "build this feature properly", or any request to implement work from a plan file or a direct feature prompt. Builds from the plan (or the prompt if no plan exists), runs Claude Code's `/review` (plus `/security-review` for sensitive surfaces) and fixes every issue found, tests and verifies the feature end to end, fixes anything testing surfaces, and reports back once complete. Repeats until all plan tasks are checked off.智能体工作流1671build-mvpbuildgreatproducts/builder-osUse inside a product repository when the user wants the full MVP built from their BuilderOS spec documents. Triggers on phrases like "build my MVP", "build the app", "execute the roadmap", "start the build", "work through the whole roadmap", "build everything", or any request to implement the entire plan rather than a single task or phase. Requires `docs/prd.md` and `docs/product-roadmap.md` (plus `docs/product-vision.md` and `docs/design.md` for context). Works through every roadmap task in order — implementing, testing, and verifying each before moving on, marking checkboxes and updating the status line — and runs until all tasks are complete and the magic moment works end to end, then initializes git with an initial commit and offers to connect a remote repo.智能体工作流1638