Design Taste
Teach your AI assistant how to build polished, production-quality UIs with HeroUI
The Design Taste skill teaches AI agents how to properly use the HeroUI design system to produce polished, production-quality interfaces. It encodes 78 design principles across 10 categories — learned from iterative human feedback — so your AI generates UIs you'd actually ship.
These principles apply across the full HeroUI ecosystem: @heroui/react, @heroui-pro/react, @heroui/native, @heroui-pro/native.
Installation
curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-tasteReplace your_token with your token from the Pro dashboard. The installer places the skill into the correct directory for your tools.
What It Teaches Your AI
Without design taste, AI assistants produce functional but generic UIs. This skill fixes that across 10 categories:
- Spacing — consistent padding, margins, and gaps using the design token scale
- Typography — proper font weights, sizes, and line heights for hierarchy
- Color — semantic token usage (
bg-surface,text-muted,bg-accent) instead of arbitrary values - Cards — correct anatomy with proper slot composition and shadow usage
- Forms — field grouping, label patterns, and validation styling
- Buttons — variant hierarchy (primary > secondary > tertiary > ghost)
- Icons — consistent sizing, semantic colors, and proper placement
- Navigation — sidebar, tabs, and segment patterns that feel native
- Accessibility — focus rings, ARIA attributes, and keyboard navigation
- General — minimalism, no duplicate representations, prefer built-in components
Better Together
| Tool | What it does | When to use |
|---|---|---|
| Design Taste | Teaches how to design — spacing, color, typography, polish | "Build a settings page" — gets the design right |
| React Pro Skill | Teaches what components exist and their APIs | "Use a Sheet with snap points" — gets the implementation right |
| MCP Server | Real-time access to @heroui-pro/react docs, CSS system, and theme variables | "What props does Command accept?" — gets the details right |
Together they produce UIs that are correctly implemented, beautifully designed, and accurately documented.
Start Prompting
Review this page and improve the spacing, typography, and color usageBuild a pricing page with three plan cards, a feature comparison, and a FAQ sectionAudit this page for design consistency — check color token usage, spacing scale, and typography hierarchyRelated
- Skills — Install guide and full skills reference
- MCP Server — Live access to
@heroui-pro/reactdocumentation and CSS system - Building with AI — Overview of all AI tools