SKILL

---
name: ui-design-ref
description: 根据参考风格预设生成高质感UI应用。在设计APP时必须优先加载和遵循。当用户要求开发APP、设计页面、创建UI界面时，务必触发此skill来获取视觉设计参考和通用UI规范。
---

## 工作流程

### 第一步：分析用户需求，选择风格

根据用户的 APP 类型和需求，从以下 9 种风格中选择**最适配的 1 种**，然后读取对应的参考文件：

| 风格 | 适用场景 | 参考文件 |
|------|----------|----------|
| **柔和卡片风** | AI工具、生活服务、SaaS、在线教育、习惯养成、健康管理 | `./reference/柔和卡片.md` |
| **极光柔和风** | 冥想正念、助眠、呼吸训练、情绪日记、星座占卜 | `./reference/极光柔和.md` |
| **杂志风** | 新闻阅读、博客、长文笔记、Mook类内容 | `./reference/杂志风.md` |
| **克莱因蓝高定风** | 电商精品、奢侈品展示、邀请函/票务、高端会员系统 | `./reference/克莱因蓝高定风.md` |
| **自然有机风** | 环保/可持续、有机食品、花园管理、瑜伽、户外徒步 | `./reference/自然有机.md` |
| **3D黏土风** | 儿童教育、健康生活、社交娱乐、轻量工具、趣味电商 | `./reference/3D黏土风.md` |
| **暗黑科技风** | 游戏面板、加密货币、开发者工具、数据监控、极客社区 | `./reference/暗黑科技风.md` |
| **玻璃拟态风** | 天气/仪表盘、音乐播放器、社交资料页、金融概览、智能家居 | `./reference/玻璃拟态.md` |
| **纯白极简风** | 笔记/效率工具、阅读类、博客、极简电商、SaaS管理 | `./reference/纯白极简风.md` |

### 第二步：输出布局设计方案（文字描述）

**导航结构：**
- TAB数量、名称、图标
- 导航位置（底部TabBar / 顶部导航 / 侧边栏）

**各TAB内布局类型：**
- 卡片网格：等宽卡片排列，适合展示同类内容
- 瀑布流：不等高卡片，适合图片/内容长度不一
- 列表：单列信息流，适合时间线/消息
- 宫格：图标+文字入口，适合功能导航
- 轮播+卡片组合：顶部焦点+下方内容
- 详情页：大图+信息卡片+操作按钮

**配图策略：** 使用 unsplash 配图

### 第三步：生成代码

参考所选风格的预设文件，提取以下要素后生成代码：
- **配色方案**：主色、辅色、背景色、文字色等
- **核心样式手法**：阴影、圆角、渐变等特征
- **组件风格**：按钮、卡片、输入框、导航栏等

**重要：不需要完整复刻参考文件，可根据具体APP特点灵活调整配色和布局。**

### 第四步：验收标准

- UI质感与所选风格一致
- 核心功能完整可用
- 结合应用特点适当改造

---

## 九种设计风格速览

### 1. 柔和卡片风 (Soft Card UI)
**感觉：** 科技、高效、通透、友好
**核心特征：**
- 新拟态双层阴影（凸起/凹陷效果）
- 大圆角卡片 (borderRadius: 24)
- 暖灰白背景 (#F0F0F3)
- 渐变按钮 + 有色投影

### 2. 极光柔和风 (Aurora Style)
**感觉：** 治愈、梦幻、情绪化、艺术感
**核心特征：**
- 深空暗底 (#0D1026)
- 极光渐变辉光 (紫/青/粉)
- 毛玻璃卡片（backdrop-filter blur）
- 大圆角 (borderRadius: 28)

### 3. 杂志风 (Editorial Style)
**感觉：** 文艺、专业、阅读沉浸
**核心特征：**
- 极简黑白排版
- 衬线字体 + 强留白
- 无阴影，靠线条区分层级
- 编辑红点缀 (#C8102E)

### 4. 克莱因蓝高定风 (Klein Blue Luxury)
**感觉：** 高端、奢华、精致
**核心特征：**
- 克莱因蓝 (#002FA7) + 香槟金 (#C9A96E)
- 直角/小圆角设计
- 极细字重 + 大字间距
- 金色细线装饰

### 5. 自然有机风 (Organic Nature)
**感觉：** 温暖、自然、亲切
**核心特征：**
- 大地色系（森林绿、陶土棕）
- 有机不规则圆角（叶片/鹅卵石形）
- 米黄暖白背景 (#FDF8F0)
- 手绘虚线装饰

### 6. 3D黏土风 (Clay 3D)
**感觉：** 可爱、柔软、趣味、安全感
**核心特征：**
- 柔和粉彩配色（黏土紫、黏土粉）
- 黏土凸起阴影 + 白色内描边高光
- 大圆角胶囊感 (borderRadius: 24)
- 弹性动画入场

### 7. 暗黑科技风 (Cyber Tech)
**感觉：** 硬核、极客、未来感、赛博朋克
**核心特征：**
- 纯黑底 (#0A0A0F) + 霓虹发光
- 电光青 (#00F0FF) + 霓虹紫 (#BF00FF)
- 霓虹发光边框 + 同色扩散阴影
- 等宽字体 (JetBrains Mono)

### 8. 玻璃拟态风 (Glassmorphism)
**感觉：** 轻盈、通透、现代、科技感
**核心特征：**
- 深空渐变背景
- 毛玻璃卡片 (rgba + blur)
- 高光内描边模拟光照折射
- 光斑装饰点缀

### 9. 纯白极简风 (Minimal White)
**感觉：** 克制、高级、专注、空气感
**核心特征：**
- 纯白大留白 (#FFFFFF)
- 极细线条分割（无阴影）
- 黑白灰为主 + 微妙强调色
- 排版为王，无多余装饰

---

## 样式属性安全规范 [CRITICAL]

动态计算样式值时必须兜底防止非法值导致渲染异常或崩溃。

**动态计算样式值时必须兜底**，如：
- `fontSize`/`lineHeight`：必须 > 0，用 `value || 14` 兜底
- `width`/`height`/`borderRadius`：不能为负，用 `Math.max(value, 0)` 兜底
- `opacity`：必须在 0-1 之间，用 `Math.min(Math.max(value, 0), 1)` 兜底

---

## 现代移动端 UI 设计原则 [CRITICAL]

生成页面时**必须**遵循以下 6 大设计法则。**Agent 需首先分析 App 的业务类型（如金融、社交、AI、健康），并根据「法则 1」选择或自行拓展符合当前开发场景的配色方案。**

### 1. 场景化色彩美学
> "拒绝千篇一律的蓝。根据业务性格，定制色彩情绪。"

*   **智能配色策略**：根据当前 App 类型选择配色方案，或者根据用户需求自行拓展更符合当前场景的配色，**严禁在组件中硬编码色值**，必须统一管理主题变量。

*   **色彩融合铁律 (Critical)**：
    *   **拒绝死白**：当根背景为暖色（如 Orange/Yellow/Rose）或明显冷色（Green/Teal）时，卡片背景**严禁**使用 `#FFFFFF`。必须混合 2%~5% 的主色调，或者使用 80%~90% 透明度的白色（确保层级正确）。
    *   **有色阴影**：
        *   **禁止**使用纯黑阴影 (`#000000`)。
        *   **必须**使用与主色调一致的颜色作为阴影色（参考表格 `Shadow Tone`），并设置极低透明度 (`opacity: 0.06` ~ `0.1`)。
        *   *原理*：黑色阴影在彩色背景上看起来像脏污，有色阴影才通透。
        *   使用有色阴影实现，例如：`box-shadow: 0px 4px 6px rgba(79,70,229,0.1), 0px 1px 3px rgba(0,0,0,0.05)`
    *   **文字适配**：
        *   在**暖色背景**（如日记）上，文字尽量不要用冷灰 (`#4B5563`)，而要用**暖灰/棕褐**（如 `#422006` 或 `#78350F`）来保持画面的温润感。

### 2. 图标与符号系统
> "图标不是素材，是 UI 的一部分。"

*   **容器化**：
    *   **禁止裸奔**：不要直接放置一个孤立的 Icon。
    *   **禁止使用 Emoji 作为 ICON**，必须使用项目所选图标库中的矢量图标。
    *   **做法**：为图标创建一个容器，设置三级背景色或主色（10% 透明度）作为背景，设置圆角（如 `12px`），将图标居中放置。
    *   容器参考尺寸：`48×48`，圆角 `12px`，图标尺寸 `24px`，颜色使用主文字色。
*   **视觉一致性**：图标的线宽建议统一设为 `2` 或 `1.5`，保持精致感。

### 3. 物理质感与深度
> "拒绝扁平，建立悬浮。"

*   **Hero Header 视觉锚点**：
    *   顶部使用主色大色块建立品牌基调。
    *   下方内容区域使用**负 Margin** 向上重叠覆盖 Header，营造前后景深。
*   **弥散阴影**：
    *   拒绝黑且硬的默认阴影。使用大范围 (`radius: 12-24`)、低透明度 (`opacity: 0.08-0.12`)、含环境色倾向的柔和阴影。

### 4. 极致的排版对比
> "用户不是在阅读，而是在扫描；只有大和小，没有中间态。"

*   **夸张的字号差**：
    *   **核心数据/标题**：极大、极粗。使用一级/二级标题尺寸 (32px-40px)，字重 Bold/Heavy。数字建议使用等宽字体增加专业感。
    *   **辅助标签**：极小、极淡。使用说明文字尺寸 (11px-13px)，颜色使用弱化文字色。

### 5. 容器化设计与去线化
> "线框是束缚，容器是包裹；用空间代替线条。"

*   **输入框去线化**：
    *   抛弃描边风格。输入框使用三级背景色（浅灰/浅色背景）+ 圆角 `12-16px`，配合深色文字形成内嵌感。
*   **卡片封装**：列表项拒绝使用全通分割线，应封装为独立的圆角卡片，卡片之间通过间距属性分隔。

### 6. 奢侈的留白与呼吸感
> "空间即质感；不要怕浪费屏幕。"

*   **Padding 是奢侈品**：
    *   容器内部 Padding 起步为 20px-24px，甚至更大。
    *   如果内容看起来像 Excel 表格，说明 Padding 不够。
*   **布局间距**：全面使用 Flexbox 的 `gap` 属性来保证子元素间距的绝对统一。