# Premium UI Experience

> 当用户对 UI 质量要求很高，希望界面更有产品感、视觉更精致、交互更顺滑、动画更自然，并且希望 AI 严格依据 `design.md`、项目约束和已有界面风格工作、减少 AI 痕迹与随意发挥时使用。适用于“做得更高级”“先读 design.md 再设计”“去 AI 味”“提升产品体验”“把交互和视觉一起打磨好”等场景。

- Skill: `qiyang-job/premium-ui-experience` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add qiyang-job/premium-ui-experience`
- Raw SKILL.md: https://api.skillmd.com/api/skills/qiyang-job/premium-ui-experience/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: qiyang-job (https://skillmd.com/u/qiyang-job)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/qiyang-job/premium-ui-experience

---


# Premium UI Experience

## Skill Goal

将“做一个能用的界面”提升为“做一个更像成熟产品的界面”，同时尽量避免出现明显的 AI 模板感、随机拼装感和过度自我发挥。

优先提升以下能力：

- 视觉层级更清晰
- 页面布局更有节奏
- 组件细节更完整
- 交互反馈更顺滑
- 动效更自然且不过度
- 状态设计更完整
- 产品整体气质更统一
- 文案和界面表达更自然、更像真实产品团队产出

## Use This Skill When

在以下场景优先启用本 skill：

- 用户明确要求更高质量 UI / UX
- 用户要求“去 AI 味”“不要模板感”“不要随意发挥”
- 页面已经能用，但视觉和体验还比较普通
- 需要先读 `design.md` 再设计或改界面
- 需要统一项目中的视觉风格、交互原则和动效基线
- 需要打磨页面结构、文案层级、组件状态与微交互

## Do Not Use This Skill When

以下场景不要强行启用：

- 只是纯后端或无界面任务
- 只是一次很小的逻辑修复，与界面质量无关
- 用户明确要求“先只做功能，不做 UI 打磨”

## Design Source Priority

设计依据按以下优先级读取：

1. 用户当前明确要求
2. 项目里的 `design.md`
3. 项目里的约束文件与上下文文件
4. 项目已有页面风格 / 组件系统
5. 本 skill 的视觉与交互原则
6. 审慎默认值

如果 `design.md` 存在，优先读取后再动手。

## Anti-Random-Play Rule

不要把“高质量设计”理解成自由发挥。

默认遵守：

- 先复用项目已有设计语言，再新增新表达
- 没有依据时，不要凭空发明新风格
- 没有 `design.md` 时，先建立最小设计基线，再开始大改界面
- 没有明确理由时，不要突然切换视觉体系
- 不要把多个流行风格随机混搭到同一页面
- 不要为了“更惊艳”牺牲可用性、一致性和性能

## Anti-AI-Flavor Rule

尽量避免明显的 AI 痕迹，尤其是以下典型问题：

- 所有页面都长得像同一套创业模板
- 为了显得高级而默认堆渐变、玻璃、发光、霓虹、悬浮卡片
- 首页 Hero 区文案空泛、抽象、像宣传口号生成器
- 所有模块同样重要，缺少主次层级
- 图标、阴影、圆角、间距风格彼此不一致
- 动效过多、过慢、过装饰
- 文案过于饱满、夸张、解释腔、像 AI 讲解

优先追求：

- 更像真实产品，而不是“AI 演示稿”
- 更像长期迭代的系统，而不是“一次性效果图”
- 更像有克制判断的设计师，而不是“把流行元素全加上”

## Required Inputs

开始设计或改 UI 前，优先收集这些信息：

- 项目目标与目标用户
- 当前页面所处主链路
- `design.md` 中的品牌感、视觉关键词、交互原则、文案语气、禁忌
- 项目的技术栈与组件约束
- 当前已有页面 / 组件的风格基线

如果项目没有 `design.md`，优先使用 `scripts/init_design_md.py` 初始化一个最小模板。

## Default Working Workflow

### 1. 先读取约束与设计基线

优先读取：

- `design.md`（如果存在）
- 项目约束文件，例如 `AGENTS.md`、`CLAUDE.md`、项目规范文件
- 项目上下文文件，例如 `.ai-context/00-current-context.md`、`.ai-context/07-conventions.md`
- 当前任务相关页面、组件、样式文件

### 2. 先定义本轮 UI 目标

在改代码前，先明确：

- 页面要传达的气质
- 主要用户任务
- 视觉主层级
- 核心操作路径
- 关键状态与反馈
- 动效是否必要、应当轻还是强
- 文案应当更直接、克制还是更温和
- 哪些地方绝对不能随意发挥

### 3. 先做结构，再做视觉，再做动效

按这个顺序推进：

1. 先修正信息架构和页面结构
2. 再建立视觉层级和统一样式语言
3. 再补交互反馈与微动效
4. 最后做细节打磨与性能约束

不要一开始就堆颜色、阴影和动画。

### 4. 保持组件级完整性

改界面时，必须同时考虑：

- 默认态
- hover / focus / active
- loading / empty / error / success
- 禁用态
- 文本溢出
- 小屏 / 大屏适配

不要只做“截图好看”的单一状态。

### 5. 动效遵守克制原则

动效必须服务于：

- 状态变化可感知
- 层级变化更自然
- 操作反馈更明确
- 页面更有连续性

不要用动效掩盖结构问题，不要用大幅动画增加噪音。

### 6. 文案遵守自然原则

界面文案优先做到：

- 清楚
- 简短
- 直接
- 自然
- 不解释过度
- 不口号化

避免：

- 空泛大词
- 过度营销腔
- 机械重复句式
- 为了显得专业而堆概念词
- 一眼看出是 AI 生成的“高级感描述”

### 7. 收尾前做一轮设计审视

收尾前至少检查：

- 视觉层级是否清楚
- 页面节奏是否舒服
- 组件状态是否完整
- 交互反馈是否及时
- 动效是否自然且不过度
- 文案、图标、间距、圆角、阴影是否统一
- 是否还有明显 AI 模板感
- 性能是否被动画或特效拖垮

## Optional Skill Stacking

在 CodeBuddy 提供相关技能时，可按需叠加使用：

- 用 `frontend-design` 生成高质量首版界面
- 用 `arrange` 调整布局与空间节奏
- 用 `typeset` 提升排版层级
- 用 `colorize` 提升配色表达
- 用 `animate` 增加必要微交互与动效
- 用 `clarify` 优化界面文案与提示语
- 用 `polish` 做最后细节打磨
- 用 `harden` 补边界状态与健壮性
- 用 `optimize` 控性能与加载体验
- 用 `audit` 做最终体验检查

如果当前任务目标明确，不必把所有设计技能都叠满。优先选最能补当前短板的那一个或几个。

## Project `design.md` Contract

建议项目根目录维护一个 `design.md`，至少描述：

- 产品定位与目标用户
- 气质关键词
- 参考产品 / 参考页面
- 配色方向与禁忌
- 字体 / 排版基线
- 圆角、阴影、边框、间距语言
- 交互原则
- 动效原则
- 组件风格偏好
- 文案语气与禁用表达
- 明确哪些地方不要自由发挥
- 移动端 / 桌面端偏好
- 明确不要做成什么样

详细规范见 `references/02-design.md使用规范.md`。

## Required Output Contract

触发本 skill 时，默认先输出：

1. **本轮界面目标**
2. **已读取的设计依据**
3. **目标视觉气质 / 关键词**
4. **页面结构与信息层级方案**
5. **关键交互与反馈方案**
6. **动效策略**
7. **文案语气与克制边界**
8. **需要重点打磨的组件 / 页面**
9. **边界状态与验收重点**

## Success Criteria

如果本 skill 运作正确，应出现这些变化：

- 页面更像成熟产品，而不是默认模板拼接
- 视觉层级更清晰，阅读与操作更顺
- 组件状态更完整，细节更统一
- 动效更自然，界面更有连续性
- 文案更自然，不像 AI 自动补全出来的口号
- 审美更稳定，项目整体风格更统一

## References

按需读取以下文件：

- `00-先读我.md`：如何把这个 skill 投放到项目中使用
- `references/01-UI质量目标与工作方式.md`：本 skill 的核心设计方法
- `references/02-design.md使用规范.md`：项目级 `design.md` 的推荐结构与写法
- `references/03-视觉设计原则.md`：视觉层级、配色、排版、节奏原则
- `references/04-交互与动效原则.md`：交互反馈、状态变化、动效基线
- `references/05-页面结构与信息层级.md`：页面结构、模块优先级、阅读路径
- `references/06-组件状态与细节打磨.md`：组件状态、细节与一致性检查
- `references/07-验收清单.md`：最终质量检查清单
- `references/08-与其他skill协同方式.md`：如何和前两个 skill 及设计类技能搭配使用
- `references/09-去AI味与反模板化原则.md`：如何降低 AI 味、模板感和随机拼装感
- `references/10-GitHub最佳实践对齐评估.md`：当前版本与 GitHub 公开实践的对照结果