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
添加到 SourceWeft 工作区
- 在控制台中打开该技能，并将它添加到工作区。
- 为需要使用它的对话启用该技能。
该技能仅含说明：不附带任何可执行的脚本。
添加到 SourceWeft系统会先要求你登录，然后直接带你回到这个技能。
让你的智能体来安装
把这段提示词粘贴到 Claude Code、Codex、Cursor 或其他能运行命令的智能体中，也可以粘贴到 SourceWeft 对话里。智能体会阅读这个技能的安装说明，向你展示它的来源、许可证和脚本情况，在你同意后用 SourceWeft CLI 安装。
阅读 https://sourceweft.com/skills/gh-buildgreatproducts-builder-os-design-better/install.md 中的说明，按说明安装这个技能。安装前先告诉我它的来源、许可证以及是否附带脚本，等我确认。修改我电脑上的其他任何内容之前也要先问我。用命令行自行安装
适用于 Claude Code、Codex、Cursor 及其他本地智能体。SourceWeft CLI 会从源代码仓库中获取此处扫描过的那次提交，并根据扫描时记录的哈希值逐一校验每个文件。只要有任何不一致，就不会写入任何内容。
npx @sourceweft/cli skills install @buildgreatproducts/design-better添加 --agent claude-code、codex、cursor 或 universal 来选择安装给哪个智能体（默认为 Claude Code）。
上游安装器——未经 SourceWeft 校验
开源的 skills 安装器会获取同一个固定的提交，但不会根据 SourceWeft 记录的哈希值校验文件。
npx skills add https://github.com/buildgreatproducts/builder-os/tree/fb74cac0fc9d2d0ed920432ae64630b011029f9b/skills/design-better来源与署名
来源：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
指导智能体为新界面或改版界面进行独特、有意图的视觉设计。