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，为功能开发执行规范的构建、审查、测试与修复循环。