design-better
Design Better applies timeless UX/UI craft heuristics—drawn from Nielsen Norman, Laws of UX, WCAG, and modern AI-product patterns—to separate polished interfaces from merely functional code. It pairs with your design system tokens for visual decisions while owning hierarchy, interaction, accessibility, and motion craft. Use it when building or refactoring UI and want design best practices baked into code generation and review.
Design Better applies 50 UX/UI craft heuristics to generate or review UI code with designer-quality polish.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-07
Design Better applies 50 UX/UI craft heuristics to generate or review UI code with designer-quality polish. Design Better applies timeless UX/UI craft heuristics—drawn from Nielsen Norman, Laws of UX, WCAG, and modern AI-product patterns—to separate polished interfaces from merely functional code. It pairs with your design system tokens for visual decisions while owning hierarchy, interaction, accessibility, and motion craft. Use it when building or refactoring UI and want design best practices baked into code generation and review.
Use it when
- Yes.
- Design-better references your design tokens and flags missing patterns for your design system.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Similar skills
Install
BuildGreatProducts/builder-os/design-better
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does design-better help me make my frontend feel more designed?
Design-better applies designer-quality craft heuristics to your code, focusing on visual hierarchy, interaction states, and accessibility. It draws from Nielsen Norman principles, Laws of UX, and WCAG standards to elevate interfaces beyond merely functional—ensuring your frontend has polish, intentional motion, and professional-grade interaction patterns that feel intentional rather than generic.
Can design-better help refactor UI for better visual hierarchy?
Yes. Design-better specializes in reviewing and refactoring UI to strengthen visual hierarchy, contrast, and information architecture. It flags missing patterns, suggests interaction state improvements, and ensures empty states, forms, and motion align with established design heuristics—transforming layouts that feel flat into experiences with clear focal points and user guidance.
What design system support does design-better provide?
Design-better references your design tokens and flags missing patterns for your design system. It bridges the gap between token definitions and implementation, ensuring color, spacing, typography, and component choices stay consistent while identifying gaps where new tokens or patterns should be added to strengthen your system's coverage.
How do I apply UX best practices to my code with design-better?
Design-better embeds Laws of UX and Nielsen Norman heuristics directly into code generation and review. When you build or refactor components, it applies principles like consistency, feedback, error prevention, and recognition over recall—plus accessibility best practices and AI-product UI patterns—so craft decisions aren't left to chance.
Does design-better cover interaction design and motion?
Yes. Design-better reviews forms, empty states, motion, and interaction design patterns as core concerns. It ensures state transitions feel responsive, disabled and hover states are clear, loading patterns guide users, and motion serves purpose rather than distraction—all aligned with accessibility and craft heuristics.
What license does design-better use?
Design-better is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects with minimal restrictions.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
name: design-better
description: 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 design system doesn't have, flag it as a New Pattern to add via the Design System skill — never invent a value inline. Fully
(truncated - see the full file via the links below)
File tree — 1 file
skills/design-better/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate or review UI code with designer-quality craft heuristics applied”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Apply proven usability principles to audit interfaces and pinpoint friction. This skill scores your design against Krug's core laws—clarity, confidence-building navigation, and concise copy—plus Nielsen's heuristics for system feedback and user control. Get severity ratings for each issue and specific fixes to reach 10/10.
impeccable shapes production frontend interfaces through design iteration, critique, and craft. It handles everything from visual hierarchy and accessibility to responsive layouts, design systems, and micro-interactions—grounded in project context via PRODUCT.md and DESIGN.md. Real working code, committed design choices.
Product Planner walks you through a structured vision intake, then generates three documents: a product vision statement, a technical PRD for coding agents, and a phased roadmap with task checkboxes. It picks up where you left off if interrupted, pre-fills from any existing idea capture, and validates all sections before proceeding to document generation.
Idea Generator walks founders through structured discovery to uncover product concepts grounded in what they already know or do. It captures context through targeted questions, synthesizes patterns into candidate directions, scores each against five key axes, and writes a shareable product-idea.md document that feeds into downstream planning skills.
Design System converts visual references into two synchronized outputs: a YAML token spec in Google's design.md format for coding agents, and a self-contained HTML style guide for human review. Reads imagery, derives tokens for color, typography, spacing, and components, then generates both files as a single source of truth that never drifts.
Build MVP works through your product roadmap task by task, implementing, testing, and verifying each phase before moving forward. It reads your PRD and design tokens, marks tasks complete as it goes, and stops only when the entire app is built and working end to end. When finished, it initializes git and offers to connect a remote repository.
More skills launch-checklist (MIT) · ui-design-system (MIT)