以人为本的 UI
构建那些看起来像是由有品味的人制作的界面——而不是模板堆砌，也不是 AI 的默认输出。本技能涵盖了当用户明确要求 UI 看起来不像 AI 生成时所需的设计原则、反模式检查以及工具工作流。
何时使用
- 用户说 UI“看起来像是由 ChatGPT 制作的”或“看起来是 AI 生成的”
- 用户想要“简约、高级、人性化”的外观
- 用户提及 Emil Kowalski、Impeccable、21st.dev、webmxerz 或类似的设计质量信号
- 构建或审查任何外观重要的 Web UI
核心原则
1. 不使用表情符号作为图标
用表情符号作为图标是 AI 生成的最大标志。请使用文本标签、简单的 CSS 形状或内联 SVG。表情符号属于内容，而不是界面装饰。
2. 按钮上不使用发光阴影
在交互元素上使用带有颜色发光（尤其是强调色）的 box-shadow 是 AI 生成 UI 的典型特征。仅使用扁平边框和悬停状态变化。
3. 不使用弹跳/弹簧动画
滑动点、弹跳加载器、弹簧缩放的悬停效果——这些都是装饰，而非功能。适度的悬停过渡（120-150ms ease）是可以的。弹跳则不行。
4. 没有带有图标磁贴的启动屏欢迎卡片
欢迎屏幕应该是页面上的简单文本，而不是装饰有图标磁贴和提示框（样式化为功能卡片）的卡片。
5. 对比度优先
在深色背景上，浅色文本仍需达到 4.5:1 的对比度（WCAG AA）。常见的 AI 默认值（如 #5a5a5a 在 #0d0d0d 上）会严重失败。请使用 Impeccable 测试。
6. 正文文本下限：14px 最小，16px 理想
10-11px 仅用于装饰性微标签（如带字母间距的节标题、时间戳、页脚状态文本）。承载内容的文本必须至少 12px，正文文本应为 14-16px。
7. 清晰的字体层级
使用更少的字号且间隔更大。不要有 6 种不同的字号，而应使用 3-4 个间隔明显的层级。目标是标签/次要/正文/标题字号之间有清晰的区分。
8. 一种强调色，首选暖色
在深色中性背景上使用一种暖色强调色（金色/琥珀色）会显得有意图且高级。紫色/蓝色渐变是应避免的 AI 默认配色。
9. 移动优先
为手机设计。汉堡菜单、覆盖侧边栏、大的触摸目标、无需缩放即可阅读的文本。不要先做桌面版再压缩。
工作流
步骤 1：检查技能库
在开始构建之前，检查是否可用 webmxerz 或 impeccable：
# WebMXERZ（设计智能：颜色、排版、样式、UX 模式）
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<查询>" --domain <样式|排版|颜色|UX|产品|...> -n 5
# 如果尚未克隆：
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz
推荐：使用 --design-system 一次性获取完整系统，而非按领域搜索：
# 完整的系统，并根据项目调整设计刻度
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<描述>" \
--design-system \
--variance <1-10> \
--motion <1-10> \
--density <1-10> \
-p <项目-slug> \
-n 5
对多页面项目进行持久化：
# 保存 MASTER.md（以及可选的页面覆盖）
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<查询>" \
--design-system -p <项目> --persist -o <项目目录> [--page <页面名称>]
然后处理特定页面时，首先检查 design-system/<项目>/pages/<页面>.md —— 其规则会覆盖 design-system/<项目>/MASTER.md。
步骤 2：搜索设计方向
# 找到符合用户需求的样式
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<描述>" --domain style -n 3
# 找到字体
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<氛围>" --domain typography -n 3
# 为产品类型找到配色方案
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<产品类型>" --domain color -n 3
# 找到 UX 模式
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<模式>" --domain ux -n 5
根据实际技术栈调整结果。如果项目是纯 HTML/CSS/JS（而非 React/Tailwind），则提取设计原则（颜色、字体、间距、模式）并用纯 CSS 实现。不要复制 React 组件代码。
步骤 3：根据原则构建
- 从搜索结果中选择一种符合用户品味的样式
- 选择一种字体配对
- 选择一个配色方案（根据用户偏好调整强调色）
- 在实际项目技术栈中实现
- 保持简约：间距和排版发挥作用，而非装饰
步骤 4：使用 Impeccable 检查
npx impeccable detect templates/ static/css/ 2>&1
检查每个发现。修复被标记的内容。退出代码 0 表示干净。退出代码 2 表示仍有发现。
步骤 5：与用户迭代
展示结果。如果用户说它仍然看起来像 AI 生成或不对，具体询问哪儿有问题（颜色、大小、间距、某个组件）并修复那一个点。不要根据模糊反馈进行整体重新设计。
已知陷阱
- 过度装饰以“修复”AI 外观： 添加更多装饰并不会让它看起来像人类——只会让它看起来装饰过度。克制才是信号。
- 在非 React 项目中使用 webmxerz React 代码： 技能的数据（styles.csv、colors.csv、typography.csv、ux-guidelines.csv）与技术栈无关且有用。其 React 组件示例则不然。提取原则，跳过组件代码。
- 将 Impeccable 用作设计评审： 它能捕捉技术反模式（对比度、大小、层级）。它不会判断品位、平衡或整体美感是否人性化。将其用作 lint 检查，而非设计判断的替代。
- 在非 React 项目中使用 21st.dev 组件： 21st.dev 是 React + Tailwind 组件库。其组件无法直接放入 Flask/Jinja2/原生 HTML 项目。仅用于视觉灵感浏览。
- 搜索结果中的固定颜色值： 搜索结果中的调色板提供的十六进制值是起点，而非最终答案。根据用户实际喜欢的颜色调整强调色。
- 从其他来源移植设计系统（Lovable、Figma 导出、其他项目的 CSS）： 始终检查浅色/微弱/低对比度的 token（
--text-faint、muted-foreground、次要文本）在你实际背景上的 WCAG AA 合规性。设计师在工具中设置得太低，因为它们看起来微妙——但在真实的深色背景上，它们对于 14px 以下的文本对比度检查会失败。在发货前，将深色背景上的弱化文本至少提升到#8a8886。 - Lovable 构建的布局作为起点，而非替代品： Lovable 布局提供了干净的结构和设计系统，但它不会有你项目的额外功能（API 槽编辑器、工具面板、语音切换、会话重命名、记忆标签）。移植设计，保留功能。
参考文件
references/impeccable-findings.md—— 来自 Sayip 会话的 Impeccable 扫描结果（发现了什么、修复了什么、如何运行）references/webmxerz-quickref.md—— webmxerz 搜索领域、标志、设计刻度、--persist、推理契约以及 Sayip 派生调色板（含对比度修复）的快速参考references/lovable-port-checklist.md—— 将 Lovable 构建的布局移植到现有项目中的清单（克隆、审计 token、移植结构、保留功能、lint、测试）
相关技能
software-development:codebase-inspection—— 当你需要在重新设计前检查已构建的内容时lovable-port—— 将 Lovable 构建的布局移植到现有 Flask/原生项目中的类级别技能