Design Better
buildgreatproducts/builder-os/skills/design-better作者 buildgreatproductsfb74cac0fc9dMIT228 个星标收录于 2026年10月8日更新于 2026年10月8日仓库3个月前更新
Use when the user is building or refactoring UI in their product codebase and wants designer-quality frontend code — not just functional code. Triggers on phrases like "design better", "make this UI feel more designed", "elevate the design quality", "build this with design best practices", "follow UX heuristics", "make this feel professional", "apply design polish", "review this for craft", or any request to apply UX/UI craft heuristics to code generation or review. Pairs with `docs/design.md` when it exists — the design system file owns **style** (colors, typography, spacing tokens, components), this skill owns **craft** (hierarchy, interaction, accessibility, motion, polish). Reference `docs/design.md` tokens by name for every visual decision; apply the 50-item heuristics catalogue and the Laws of UX catalogue below for every craft decision. When `docs/design.md` is absent, fall back to the codebase's existing design conventions and recommend the **Design System** skill. When a heuristic implies a token the
- fb74cac0fc9d当前提交 fb74cac发布于 2026年10月8日
来源与署名
来源：buildgreatproducts/builder-os位于skills/design-better提交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 System
buildgreatproducts
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.
Build Loop Cursor
buildgreatproducts
指导使用 Cursor 实现计划功能时，按构建、审查、测试、修复的循环纪律推进。
Build Loop Codex
buildgreatproducts
使用 OpenAI Codex CLI，为功能开发执行规范的构建、审查、测试与修复循环。
更多Design & Creative技能
Theme Factory
anthropics
提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。
Slack Gif Creator
anthropics
为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。
Frontend Design
anthropics
在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。
Canvas Design
anthropics
依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。
Brand Guidelines
anthropics
将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。
Frontend Design
anthropics
指导智能体为新界面或改版界面进行独特、有意图的视觉设计。