qiyang-job 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
设计依据按以下优先级读取：
- 用户当前明确要求
- 项目里的
design.md - 项目里的约束文件与上下文文件
- 项目已有页面风格 / 组件系统
- 本 skill 的视觉与交互原则
- 审慎默认值
如果 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. 先做结构，再做视觉，再做动效
按这个顺序推进：
- 先修正信息架构和页面结构
- 再建立视觉层级和统一样式语言
- 再补交互反馈与微动效
- 最后做细节打磨与性能约束
不要一开始就堆颜色、阴影和动画。
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 时，默认先输出：
- 本轮界面目标
- 已读取的设计依据
- 目标视觉气质 / 关键词
- 页面结构与信息层级方案
- 关键交互与反馈方案
- 动效策略
- 文案语气与克制边界
- 需要重点打磨的组件 / 页面
- 边界状态与验收重点
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 公开实践的对照结果