Frontend UI System

用途

为网站、后台、移动端分别设计专业的 UI 系统。 避免 AI 味界面：不要千篇一律的紫色渐变 + 圆角卡片 + emoji 满天飞。

使用场景

• 开始写前端代码之前
• 需要决定视觉风格和组件规范时
• 发现界面看起来"像 AI 生成的"时

核心原则

1. 四态必须完整

每个数据展示区域/组件都必须有四种状态：

• loading：骨架屏 或 spinner（不是空白）
• empty：空状态插图 + 说明文字 + 引导操作
• error：错误提示 + 重试按钮（不是红色 toast）
• success：正常展示内容

2. 操作四态

每个按钮/表单提交都必须有四种状态：

• idle：正常可点击状态
• submitting/loading：禁用 + spinner + "提交中..."
• success：成功反馈（toast 或 内联提示）
• failed：失败反馈 + 保留用户输入

3. 网站类型 UI（content-site）

• 配色：克制（主色+辅色+中性色，不超过 3 个主色）
• 排版：大标题 + 适当留白 + 清晰的层级
• 图片：高质量，不要用 emoji 代替图片
• 动画：少而精，Framer Motion 的 fade/slide 即可
• 移动端：375px 下要能正常阅读

4. 后台类型 UI（fullstack-admin）

• 以信息密度优先，不要太空也不要太挤
• 表格：斑马纹、可点击行、固定表头
• 表单：标签在上方、必填标红星、校验信息及时显示
• 侧边栏：可折叠、当前页高亮、不超过 2 级
• 空状态：列表空时显示引导，不要空白

5. 移动端类型 UI（mobile-app / miniapp）

• 触控友好：最小点击区域 44x44px
• 底部 Tab 不超过 5 个
• 安全区域适配（刘海屏）
• 列表项之间有分隔
• 返回按钮在左上角或左滑返回

避免 AI 味界面

• ❌ 紫色渐变背景
• ❌ 到处都是 emoji
• ❌ 无意义的发光/阴影叠加
• ❌ 所有卡片都是大圆角（border-radius: 20px+）
• ❌ 字体太大或太小
• ✅ 参考真实产品的设计模式
• ✅ 配色有品牌感
• ✅ 信息层级清晰

输出格式

## UI 系统设计

### 配色
- 主色：#XXXXXX
- 辅色：#XXXXXX
- 中性色：#XXXXXX

### 排版
- 标题字体/大小
- 正文字体/大小

### 组件规范
- 按钮：大小、圆角、状态
- 卡片：阴影、间距
- 表单：标签位置、校验样式
- 表格：样式、空状态

### 四态设计
- loading：[描述]
- empty：[描述]
- error：[描述]
- success：[描述]