让 AI 产出质量稳定的真实界面
NiceUI 是一套面向网页与应用界面的设计、实现和审查工作流。任何 AI 模型（GPT、DeepSeek、Claude 等）都能通过它产出可用的真实产品界面。
核心能力
从字号约束到防模板检查，NiceUI 提供了覆盖设计全流程的规则体系。
22px 字号上限
通过字重、留白和颜色建立层级，不使用超大标题。全页面任何文字计算字号不得超过 22px。
反模式清单
9 条常见模板组合自动拒绝——暖灰+赤陶、后台侧栏模板、登录卡片模板等，防止 AI 套用通用骨架。
防巨型 UI
卡片使用限制、首屏信息量检查、密度按页面类型匹配，防止将"高级感"错误理解为"放大一切"。
领域内容模型
编码前要求推导产品核心内容类型：音乐平台需歌手/专辑/曲目，电商需规格/价格/加购，不空摆组件。
5 秒自检
交付前强制输出检查结果：最大字号、图片真实性、交互过渡、产品指纹、信息密度等，防止遗漏。
平台适配
Web（CSS 原生）、React/Vue、Flutter 各有一套独立实现门禁。自动检测项目框架后加载对应规则。
硬性门禁
以下规则不满足即为不合格，不进入审美审查环节。
字号上限 22px
全页面任何文字计算字号不得超过 22px。通过字重、行高、留白建立层级。
自定义表单控件
select、复选框、单选框必须使用自定义 accessible 组件，禁止暴露原生控件外观。
真实图片
禁止 CSS 渐变替代产品图、头像、封面等视觉素材。使用 picsum/unsplash 等免费图源。
平滑过渡
所有 hover/focus/active/disabled/弹出/收起状态变化必须使用 150–300ms 平滑过渡。
矢量图标
禁止使用 Emoji 替代功能图标。导航、操作、状态等必须使用统一图标库的矢量图标。
反模式拒绝
暖灰+赤陶、后台模板、登录页模板等 9 种常见 AI 模板组合必须拒绝并重新推导。
六步工作流
从理解任务到验证结果，NiceUI 定义了完整的设计执行流程。
理解任务
明确目标用户、核心任务和交付边界。推导领域内容模型，不空摆组件。
检查项目
识别技术栈、入口和组件库。自动检测框架并加载对应的实现规则。
确定方向
选择 3–5 个气质维度作为视觉目标。避免模板化，拒绝通用骨架。
完整实现
覆盖正常、悬停、聚焦、加载、空数据、错误和成功状态。使用真实内容。
验证结果
运行类型检查、测试和构建。完成视觉门禁和首屏识别检查。
迭代优化
从失败结果提炼可复用规则。修改 Skill 后用独立页面验证。
快速使用
只需几步，让任何 AI 模型遵循 NiceUI 规则。
npm 安装
项目内安装，支持全局 CLI 输出技能内容。
配置到 AI 工具
将 SKILL.md 作为系统提示词，或在 opencode.json 中配置。
CLI 命令
终端直接使用，快速查看技能内容。
提出设计需求
AI 模型自动按 6 步工作流执行——理解任务、检查项目、确定方向、完整实现、验证结果、迭代。
适合的场景
网站首页
着陆页、品牌展示
后台管理
仪表盘、数据表格
电商平台
商品、购物车、订单
内容平台
音乐、视频、文章
博客网站
文章列表、详情
移动应用
Flutter 界面
设计系统
组件库、规范
AI 生成
任何需 AI 出 UI 的场景