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.
新增到 SourceWeft 工作區
- 在儀表板中開啟該技能，並將它新增到工作區。
- 為需要使用它的對話啟用該技能。
該技能僅含說明：不附帶任何可執行的腳本。
新增到 SourceWeft系統會先要求你登入，然後直接帶你回到這個技能。
讓你的代理程式來安裝
把這段提示詞貼上到 Claude Code、Codex、Cursor 或其他能執行命令的代理程式中，也可以貼上到 SourceWeft 對話裡。代理程式會閱讀這個技能的安裝說明，向你展示它的來源、授權條款和腳本情況，在你同意後用 SourceWeft CLI 安裝。
閱讀 https://sourceweft.com/skills/gh-buildgreatproducts-builder-os-design-system/install.md 中的說明，按說明安裝這個技能。安裝前先告訴我它的來源、授權條款以及是否附帶腳本，等我確認。修改我電腦上的其他任何內容之前也要先問我。用命令列自行安裝
適用於 Claude Code、Codex、Cursor 及其他本機代理程式。SourceWeft CLI 會從原始碼儲存庫中取得此處掃描過的那次提交，並根據掃描時記錄的雜湊值逐一驗證每個檔案。只要有任何不一致，就不會寫入任何內容。
npx @sourceweft/cli skills install @buildgreatproducts/design-system新增 --agent claude-code、codex、cursor 或 universal 來選擇安裝給哪個代理程式（預設為 Claude Code）。
上游安裝器——未經 SourceWeft 驗證
開源的 skills 安裝器會取得同一個固定的提交，但不會根據 SourceWeft 記錄的雜湊值驗證檔案。
npx skills add https://github.com/buildgreatproducts/builder-os/tree/fb74cac0fc9d2d0ed920432ae64630b011029f9b/skills/design-system來源與署名
來源：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，為功能開發執行嚴謹的建置、審查、測試與修正循環。