HeroUI（原 NextUI）是基于 React Aria 与 Tailwind CSS v4 的 React 组件库，v3 全面重写，自称 MUI、Chakra UI 与 shadcn/ui 的现代替代。它的设计主张是「默认就美、按需定制」：可访问性由 React Aria 兜底，CSS 变量搭配 OKLCH 色彩，纯 CSS 动画零运行时开销，组件遵循复合 API 且无需 Provider 包裹，默认样式自带微渐变、玻璃拟态与精致阴影。适合现代 React 产品界面。
React开发者工具Glassmorphism
提示词模板
基础模板
Design a HeroUI-inspired interface. - Modern React components built on React Aria for accessibility; - Tailwind CSS v4 integration with CSS variables and OKLCH colors; - Smooth CSS animations with zero JavaScript runtime; - Compound component API: no provider wrapper needed; - Beautiful default styles with micro-gradients, glassmorphism, and refined shadows. Colors: #006FEE, #17C964, #F31260, #722ED1 with #006FEE accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with HeroUI aesthetics. Use HeroUI color identity with #006FEE accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with HeroUI style. Use HeroUI color identity with #006FEE accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with HeroUI design language. Use HeroUI color identity with #006FEE accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with HeroUI visual identity. Use HeroUI color identity with #006FEE accents. Compelling, conversion-focused.
使用示例
HeroUI Web 应用
Web 端Build a web app with HeroUI design language, React Aria components, and #006FEE color system.
HeroUI 仪表板
仪表板Create a dashboard using HeroUI style with beautiful default components and Tailwind CSS v4.
✅ 适合场景
- 框架生态
- React 项目
- React 轻量产品界面
❌ 不适合场景
- 完全静态的纯 CSS 站点
- 复古像素风游戏页
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。