AI 生成界面，先过这 5 道门禁
NiceUI 是一套面向网页与应用界面的设计、实现与审查工作流。把这份 SKILL.md 交给任何 AI 模型，它产出的界面会默认通过 5 项硬性门禁，不依赖运气。
GATE-CHECK · 5 秒自检
0 / 5
点选门禁，体验模型交付前的自检流程
核心能力
NiceUI 把「做界面」从玄学变成可执行的规则清单，每条规则都有可验证的门禁。
C1
字号门禁
全页面任何文字计算字号不超过 22px，靠字重、留白和颜色建立层级，而不是把标题越做越大。
C2
反模式拒绝
暖灰+赤陶、后台侧栏模板、登录卡片模板等 9 种常见 AI 组合直接推翻，不进入审美审查。
C3
领域内容模型
编码前先推导产品的核心内容类型：音乐平台需要歌手与曲目，电商需要规格与库存，不空摆组件。
C4
防巨型 UI
卡片使用限制、首屏信息量、密度按页面类型匹配，防止把「高级感」误解为「放大一切」。
C5
平台适配
Web、React、Flutter 各有一套独立实现门禁，自动检测技术栈后加载对应规则。
C6
5 秒自检
每次交付前强制输出检查清单，把「该检查的都检查了」变成一道写死的工序。
它拒绝的模板
同一套骨架，换多少配色都不是新设计。以下组合一旦出现，判定不合格并重新推导方向。
暖灰底色 + 赤陶强调 + 衬线标题 + 三卡片
近黑底色 + 荧光强调色 + 等宽眉题 + 大号标题
深色侧栏 + 白色内容区 + 靛蓝强调 + 头像菜单
居中白卡 + 渐变背景 + 两个输入框 + 一个按钮
胶囊标签 + 双按钮 CTA + 右侧 Mockup + 三特征卡
作品
这些界面全部由 AI 按 NiceUI 规则生成，就放在本站的 example 目录里，点卡片即可直接打开。
开始使用
安装后把规则交给你的 AI，它就会按同一套工作流产出界面。
npm install ui-nice-skill
01
opencode
在 opencode.json 里启用，AI 会自动加载整套规则。
{ "skills": ["ui-nice-skill"] }
02
Cursor / Windsurf
把 SKILL.md 放进 .cursorrules，编辑器生成代码时自动遵循。
$ cp SKILL.md .cursorrules
03
ChatGPT / Claude
直接把 SKILL.md 内容作为系统提示词，然后提出设计需求。
$ cat SKILL.md | pbcopy
6-STEP WORKFLOW
- 01理解任务
- 02检查项目
- 03确定方向
- 04完整实现
- 05验证结果
- 06迭代规则