Design Taste
Teach your AI assistant how to build polished, production-quality mobile UIs with HeroUI Native
The Design Taste skill teaches AI agents how to properly use the HeroUI design system to produce polished, production-quality mobile interfaces.
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 — tab bars, stack navigators, and drawer patterns that feel native to mobile
- Accessibility — accessible labels, roles, VoiceOver/TalkBack support, and touch target sizing
- 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 screen" — gets the design right |
| Native Pro Skill | Teaches what components exist and their APIs | "Use a BottomSheet with snap points" — gets the implementation right |
| MCP Server | Real-time access to heroui-native-pro docs and theme variables | "What props does Button accept?" — gets the details right |
Together they produce UIs that are correctly implemented, beautifully designed, and accurately documented.
Start Prompting
Review this screen and improve the spacing, typography, and color usageBuild a profile screen with avatar, stats row, action buttons, and a scrollable activity feedAudit this screen 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-native-prodocumentation and theme variables - UI for Agents — Overview of all AI tools