Design System
buildgreatproducts/builder-os/skills/design-system作者 buildgreatproductsfb74cac0fc9dMIT228 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 個月前更新
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.
僅公開檔案列表。將技能安裝到工作區後即可檢視檔案內容。
| 路徑 | 大小 | 類型 |
|---|---|---|
| SKILL.md | 19 KB | text/markdown |
來源與署名
來源：buildgreatproducts/builder-os位於skills/design-system提交fb74cac
授權條款： MIT
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多來自 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
對產品構想進行壓力測試，產出包含致命缺陷、競爭、MVP 測試與結論的驗證報告。
Idea Generator
buildgreatproducts
引導創業者透過結構化對話發掘產品構想，並寫入 docs/product-idea.md。
Design Better
buildgreatproducts
將 UX/UI 工藝啟發式套用於前端程式碼生成與審查，視覺風格交由設計系統檔案決定。
Build Loop Cursor
buildgreatproducts
指導使用 Cursor 實作計畫功能時，依循建置、審查、測試、修正的循環紀律。
Build Loop Codex
buildgreatproducts
使用 OpenAI Codex CLI，為功能開發執行嚴謹的建置、審查、測試與修正循環。