HeroUI（原 NextUI）是基於 React Aria 與 Tailwind CSS v4 的 React 元件庫，v3 全面重寫，自稱 MUI、Chakra UI 與 shadcn/ui 的現代替代。它的設計主張是「預設就美、按需客製」：可存取性由 React Aria 把關，CSS 變數搭配 OKLCH 色彩，純 CSS 動畫零執行時開銷，元件遵循複合 API 且無需 Provider 包裹，預設樣式自帶微漸層、玻璃擬態與精緻陰影。適合現代 React 產品介面。
HeroUI前端框架
提示詞範本
基礎範本
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 程式設計工具使用。