Design Better
buildgreatproducts/builder-os/skills/design-betterby buildgreatproductsfb74cac0fc9dMIT228 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 months ago
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
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| SKILL.md | 23 KB | text/markdown |
Source and attribution
Source:buildgreatproducts/builder-osinskills/design-betterat commitfb74cac
License: MIT
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from 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
Pressure-tests a product idea, producing a validation report with flaws, competition, MVP test and a verdict.
Idea Generator
buildgreatproducts
Guides a founder through a structured conversation to discover a product idea and writes it to 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
Guides a disciplined build, review, test and fix loop for implementing planned features with Cursor.
Build Loop Codex
buildgreatproducts
Runs a disciplined build, review, test and fix loop for feature work using the OpenAI Codex CLI.
More in Design & Creative
Theme Factory
anthropics
Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.
Slack Gif Creator
anthropics
Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.
Frontend Design
anthropics
Guidance for distinctive, intentional visual design when building or reshaping a user interface.
Canvas Design
anthropics
Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.
Brand Guidelines
anthropics
Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.
Frontend Design
anthropics
Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.