heroui-design-skill
Advanced UI/UX Design Skill using HeroUI and MCP Design Intelligence.
When & Why to Use This Skill
The HeroUI Design Intelligence skill transforms Claude into a high-level UI/UX designer and frontend engineer. By leveraging the HeroUI MCP Server, it enables the automated orchestration of responsive web layouts and the composition of production-ready components. This skill follows a 'Design-First' workflow, allowing users to generate sophisticated web sections with consistent branding, optimized information hierarchy, and modern visual styles like Glassmorphism and Minimalist design.
Use Cases
- Rapid Landing Page Prototyping: Convert business objectives into high-fidelity, structured layouts with a focus on conversion and user experience.
- Automated Design System Synchronization: Maintain global brand consistency by synchronizing colors, border radii, and dark/light modes across all UI components.
- Complex Section Composition: Generate advanced web sections such as Hero areas, feature grids, and pricing tables that are fully responsive and production-ready.
- Intelligent Layout Orchestration: Design structural page hierarchies based on priority (Conversion, Information, Aesthetic) rather than just generating atomic code snippets.
- Visual Style Customization: Apply specific design aesthetics—including Bold, Glassmorphism, and Flat styles—to ensure a harmonious and modern look and feel.
| name | heroui-design-skill |
|---|---|
| description | Advanced UI/UX Design Skill using HeroUI and MCP Design Intelligence. |
| version | 2.0.0 |
| tags | [ui, ux, heroui, design-intelligence, composition] |
HeroUI Design Intelligence Skill 🎨
This skill empowers Claude to act as a Senior UI/UX Designer by leveraging the HeroUI MCP Server. It goes beyond simple code generation by understanding design principles, layout orchestration, and component composition.
🚀 Core Capabilities
1. Layout Orchestration (orchestrate_layout)
- Understands the business purpose of a page.
- Designs information hierarchy based on priority (Conversion, Information, Aesthetic).
- Generates structural layouts that are responsive and production-ready.
2. Component Composition (compose_section)
- Composes complex sections (Hero, Features, Pricing) instead of just atomic components.
- Supports multiple visual styles: Minimal, Bold, Glassmorphism, and Flat.
- Ensures all sub-components work together harmoniously.
3. Theme Synchronization (configure_theme)
- Manages global design consistency.
- Synchronizes brand colors, border radius, and color modes (Dark/Light).
📂 Structure
script/: Contains validation and utility scripts for UI testing.reference/: Documentation and design system guidelines.asset/: Visual assets and design tokens.
🛠 How to Use with MCP
Claude should use this skill to:
- Analyze the user's requirement to determine the page purpose.
- Orchestrate the layout first to establish the structure.
- Compose individual sections with the chosen visual style.
- Refine the theme to match the brand identity.
This approach ensures a "Design-First" workflow that is far superior to manual coding in an IDE.