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
Install
BuildGreatProducts/builder-os/design-better
git clone https://github.com/BuildGreatProducts/builder-os
cp -r builder-os/skills/design-better ~/.claude/skills/design-betterFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/design-better/SKILL.md