返回首页
查看全部
支持平台
Claude CodeCursorCodex
安全等级
低风险
安装难度
需要基础命令行最后验证
2026年7月2日01/功能概览
功能概览
React 生态颜值天花板之一，设计审美在线，主题系统灵活，支持明暗模式和自定义设计令牌，Next.js SSR 完美兼容。
- 需要高颜值的 React 组件库
- 主题系统不够灵活
- 和 Next.js SSR 兼容性差
02/使用场景
使用场景
- 做 Next.js 品牌官网
- 做产品站
- 做内部系统
- 需要明暗模式的项目
03/适合人群
适合谁用
- 用 Next.js 的前端
- 做品牌官网的人
- 做内部系统的团队
04/不适合人群
不适合谁
- 不用 React 的人
- 用 Vue 的人
普通人版解释
用大白话说这个库组件好看、主题灵活，能做官网前台也能做内部系统。和 Next.js 配合好，支持暗黑模式和自定义颜色。
专业版解释
给 Claude Code / Codex 用户HeroUI（原 NextUI）是 React 生态颜值天花板之一，设计审美在线，主题系统极其灵活，支持明暗模式、自定义设计令牌，和 Next.js 服务端渲染完美兼容。组件覆盖从按钮、导航到卡片、表单的全场景，既能做官网前台，也能延伸做内部系统。
07/安装方式
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
安装命令
npm install @heroui/react
08/SKILL.md 预览
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
暂无 SKILL.md 内容预览。
09/使用示例
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
使用示例（直接发给 AI）
- 1.请用 HeroUI 搭一个 Next.js 品牌官网
- 2.请用 HeroUI 做一个支持明暗模式的产品站
- 3.请用 HeroUI 做内部系统后台
10/安全说明
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 否 | 不建议新手 |
低风险
可以放心安装使用，适合所有用户。11/相关技能包
相关技能包
s
shadcn/ui 组件库
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
R
React 动画技能包
让 AI 在 React / Next.js 里正确使用 GSAP：useGSAP hook、清理、SSR 不报错。
前
前端设计技能包
让 AI 做有辨识度的前端视觉设计：美学方向、字体、避免模板化的廉价感。
W
Web 组件构建技能包
让 AI 用 React、Tailwind、shadcn/ui 构建复杂的多组件 claude.ai HTML artifacts。
N
Nuxt UI 组件库
Vue/Nuxt 生态官方旗舰 UI 库，基于 Tailwind，原生支持 SSR/SSG，对 SEO 和首屏加载友好，自带无障碍和暗黑模式。
网
网页动画核心技能包
让 AI 正确使用 GSAP 核心 API：做网页动画、SVG 动画、React/Vue 动画时不再写错代码。