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.
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.
Without design taste, AI assistants produce functional but generic UIs. This skill fixes that across 10 categories:
bg-surface, text-muted, bg-accent) instead of arbitrary values| 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.
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 hierarchy@heroui-pro/react documentation and CSS system