UI/UX 设计规范

技能文档

---
name: impeccable-uxui
title: UI/UX 设计规范
category: 开发工具
description: 让 AI 前端设计摆脱"模板味"的设计语言：排版、配色、空间、动效、交互、响应式、UX 文案七大领域参考与精选反模式清单，指导产出有辨识度、可上线的前端界面。当用户提到 UI 设计、UX 设计、前端界面美化、设计走查、界面风格制定、配色排版方案时触发。
---

# UI/UX 设计规范

本技能指导创建有辨识度、生产级的前端界面，避免千篇一律的"AI 模板审美"。实现真正可运行代码的同时，对美学细节与创意选择保持极致关注。

## 技能工作流

### 步骤1：收集设计上下文

设计技能在缺乏项目上下文时只会产出平庸结果。任何设计工作开始前，必须确认以下上下文：

- **目标受众**：谁在什么场景使用这个产品？
- **使用场景**：他们要完成什么任务？
- **品牌个性/基调**：界面应该给人什么感觉？

**关键**：无法通过阅读代码推断这些上下文——代码只说明"建了什么"，不说明"为谁而建、应该是什么感觉"。只有需求方才能提供。

**收集顺序：**

1. **检查当前指令（即时）**：已加载的指令中若已含「设计上下文」章节，直接开始。
2. **检查 .impeccable.md（快速）**：读取项目根目录的 `.impeccable.md`，若存在且包含所需上下文，直接开始。
3. **运行 teach-impeccable（必须）**：两处都没有时，必须先运行 teach-impeccable 收集上下文，不要跳过，也不要试图从代码库推断。

### 步骤2：确定设计方向

确定一个大胆的美学方向：

- **目的**：这个界面解决什么问题？谁在用？
- **基调**：选一个极致方向——极简主义、极繁混沌、复古未来、自然有机、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰艺术/几何、柔和粉彩、工业实用等。这些仅作灵感参考，要设计出忠于自己方向的作品。
- **约束**：技术要求（框架、性能、无障碍）。
- **差异化**：让人过目不忘的是什么？

**关键**：选定清晰的概念方向并精准执行。大胆的极繁主义与克制的极简主义都能成立——关键是有意图，而不是有强度。

### 步骤3：按审美准则实现

按下方七大领域的准为实现可运行代码，需要细节时查阅 references/ 下的对应参考文档。

### 步骤4：质量自检

用「AI 模板审美测试」检验成果，对照反模式清单逐项排查。

## 前端审美准则

### 排版

→ 详细的比例、搭配与加载策略见 [排版参考](references/typography.md)

选择漂亮、独特、有趣的字体。用有个性的展示字体搭配克制正文字体。

- ✅ 使用模块化字阶配合流式尺寸（clamp）
- ✅ 通过字重和字号变化建立清晰的视觉层级
- ❌ 滥用大路货字体——Inter、Roboto、Arial、Open Sans、系统默认字体
- ❌ 把等宽字体当"技术感"的偷懒符号
- ❌ 在每个标题上方放带圆角的大图标——几乎不增加价值，只会让网站像模板

### 配色与主题

→ OKLCH、调色板与暗色模式见 [配色参考](references/color-and-contrast.md)

坚持统一调色板。大胆的主色配锐利强调色，胜过怯懦、平均分配的配色。

- ✅ 使用现代 CSS 颜色函数（oklch、color-mix、light-dark）构建感知均匀、易维护的调色板
- ✅ 让中性色向品牌色相偏移——哪怕一丝迹象也能带来潜意识层面的统一
- ❌ 在彩色背景上用灰色文字——显得褪色，应改用背景色的深色变体
- ❌ 使用纯黑（#000）或纯白（#fff）——永远带一点色偏，自然界不存在纯黑纯白
- ❌ 使用"AI 调色板"：暗底青色、紫蓝渐变、暗背景霓虹强调
- ❌ 用渐变文字制造"冲击力"——尤其用在指标或标题上，那是装饰不是表达
- ❌ 默认暗色模式加发光强调——不需要真正的设计决策就能显得"酷"

### 布局与空间

→ 网格、韵律与容器查询见 [空间设计参考](references/spatial-design.md)

用变化的间距创造视觉节奏，而不是到处一样的留白。拥抱不对称与出人意料的构图，为强调而有意打破网格。

- ✅ 用变化间距创造视觉节奏——紧凑成组、疏朗分隔
- ✅ 使用 clamp() 流式间距，在大屏上有呼吸感
- ✅ 使用不对称和意外构图；为强调有意打破网格
- ❌ 什么都包进卡片——不是所有内容都需要容器
- ❌ 卡片套卡片——视觉噪音，拍平层级
- ❌ 千篇一律的等大卡片网格——图标 + 标题 + 文本无限重复
- ❌ 套用英雄指标版式——大数字、小标签、辅助统计、渐变强调
- ❌ 全部居中——左对齐配不对称布局更显设计感
- ❌ 到处用相同间距——没有节奏，布局单调

### 视觉细节

- ✅ 使用有意图、有目的、强化品牌的装饰元素
- ❌ 到处玻璃拟态——模糊、玻璃卡片、发光边框沦为装饰堆砌
- ❌ 圆角元素加单侧粗彩色边——偷懒的强调，几乎从不显得有意图
- ❌ 迷你折线图当装饰——看起来精致，实际不传达任何信息
- ❌ 圆角矩形配通用投影——安全、健忘，像任何 AI 的输出
- ❌ 动不动用弹窗——除非真的没有更好替代，弹窗是偷懒

### 动效

→ 时长、缓动与减弱动态见 [动效设计参考](references/motion-design.md)

聚焦高影响力时刻：一次编排良好的页面载入（交错呈现）胜过散落的微交互。

- ✅ 用动效传达状态变化——进入、退出、反馈
- ✅ 指数缓动（ease-out-quart/quint/expo）带来自然减速
- ✅ 高度动画用 grid-template-rows 过渡，不直接动 height
- ❌ 动画布局属性（width、height、padding、margin）——只用 transform 和 opacity
- ❌ 弹跳/弹性缓动——过时且俗气，真实物体平滑减速

### 交互

→ 表单、焦点与加载模式见 [交互设计参考](references/interaction-design.md)

让交互感觉快。使用乐观 UI——立即更新，稍后同步。

- ✅ 渐进式披露——从简单开始，通过交互展现深度（基础选项前置，高级项收进展开区；悬停揭示次级操作）
- ✅ 设计能教会用户界面的空状态，而不是只说"这里什么都没有"
- ✅ 让每个可交互表面都有意图、有响应
- ❌ 重复同样信息——冗余的标题、复述标题的引言
- ❌ 所有按钮都是主按钮——用幽灵按钮、文字链接、次级样式，层级很重要

### 响应式

→ 移动优先、流式设计与容器查询见 [响应式设计参考](references/responsive-design.md)

- ✅ 用容器查询（@container）实现组件级响应
- ✅ 为不同情境改造界面——而不是简单缩小
- ❌ 在移动端隐藏关键功能——改造界面，不要截肢

### UX 文案

→ 标签、报错与空状态见 [UX 文案参考](references/ux-writing.md)

- ✅ 让每个字都挣得自己的位置
- ❌ 重复用户已经能看到的信息

## AI 模板审美测试

**关键质量检查**：如果把界面展示给别人并说"这是 AI 做的"，对方会立刻相信吗？如果会，问题就在这。

有辨识度的界面应该让人问"这是怎么做的？"，而不是"这是哪个 AI 做的？"

复查上面的 ❌ 条目——它们就是 2024-2025 年间 AI 生成作品的指纹。

## 实现原则

让实现复杂度匹配美学愿景。极繁设计需要带大量动画与效果的精细代码；极简或精致设计需要克制、精准，以及对间距、排版和微妙细节的专注。

发挥创意解读需求，做出真正"为这个情境设计"的意外选择。不要每次设计都雷同。在明暗主题、不同字体、不同美学之间变化。绝不向常见选择收敛。

记住：当前 Agent 完全有能力做出卓越的创意工作。不要束手束脚——跳出框架、彻底忠于一个独特愿景时能创造出什么，就展现什么。

## 按需查阅参考资料

| 领域 | 文档 |
|------|------|
| 排版（字阶、字体搭配、加载策略、OpenType） | [references/typography.md](references/typography.md) |
| 配色与对比（OKLCH、调色板、暗色模式、无障碍） | [references/color-and-contrast.md](references/color-and-contrast.md) |
| 空间设计（间距系统、网格、层级、容器查询） | [references/spatial-design.md](references/spatial-design.md) |
| 动效设计（时长、缓动、减弱动态、感知性能） | [references/motion-design.md](references/motion-design.md) |
| 交互设计（八态、焦点环、表单、弹层定位） | [references/interaction-design.md](references/interaction-design.md) |
| 响应式设计（移动优先、断点、安全区、响应式图片） | [references/responsive-design.md](references/responsive-design.md) |
| UX 文案（按钮标签、报错公式、空状态、术语一致性） | [references/ux-writing.md](references/ux-writing.md) |

使用说明

# UI/UX 设计规范

让 AI 前端设计摆脱"模板味"：七大领域设计参考 + 反模式清单，指导产出有辨识度、可直接上线的界面代码。

## 使用

```text
帮我把这个落地页的视觉升级一下，要有编辑杂志风的辨识度
审查一下这个组件库的配色和排版，按设计规范给出改进清单
```

技能会先收集设计上下文（受众、场景、品牌基调，缺失时引导补全），再确定美学方向，按排版/配色/空间/动效/交互/响应式/文案七大准则实现并自检。

## 工作原理

- 先上下文后设计：强制确认目标受众、使用场景与品牌个性，避免产出千篇一律的结果
- 七大领域各配参考文档（references/），主文档保留 DO/DON'T 准则速查
- 内置「AI 模板审美测试」与反模式指纹清单，逐项排查 AI 生成感

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。