| name | fe-ui-design |
| description | 当需要构建 web 组件、页面或应用界面时使用；提供设计原则、反模式约束和参考文档。 |
| argument-hint | <页面/组件需求|设计目标> |
构建符合设计原则的前端界面，避免 AI 生成的典型视觉问题。
写任何 UI 代码前，先用 5-8 行锁定设计契约；已有 design system 时读取并沿用，没有时生成临时契约。
→ 契约模板见 design-contract
UI 任务开工前先找项目级 DESIGN.md：
/fe-ui-design-system 提取临时 DESIGN.md contract。[推断] 的临时方向，不能把临时审美当成项目事实。参考规范：refs/google-labs-code/design.md/docs/spec.md。参考样本库：refs/voltagent/awesome-design-md。
DESIGN.md 不是最终验收。实现后仍需要截图、CRAP 检查、overflow 检查和状态覆盖证据。
必填：
--bg / --surface / --fg / --muted / --border / --accent / display/body font每次生成或修改 UI 时，先用这四条自检：
→ 可执行检查表见 layout-principles
→ 完整规则见 anti-ai-slop
#6366f1、#4f46e5、#4338ca、#3730a3、#8b5cf6、#7c3aed、#a855f710x faster、99.9% uptime、3x productiveoverflow-hidden 掩盖文本溢出；真正修布局→ 详细规则见 overflow
min-width: 0→ 详细参考 typography
DO: 用 modular type scale + fluid sizing (clamp()) 建立字号层次
DO: 用字重和大小变化创造清晰的视觉层次
DON'T: 使用过度泛滥的字体 — Inter, Roboto, Arial, Open Sans, system defaults
DON'T: 用等宽字体作为"技术感"的偷懒手段
DON'T: 在每个标题上方放大圆角图标 — 看起来像模板
→ 详细参考 color
DO: 使用 OKLCH 色彩空间（感知均匀） DO: 给中性色加品牌色微调（tinted neutrals），哪怕 chroma 只有 0.01 DON'T: 灰色文字放在彩色背景上 — 用背景色的深色调代替 DON'T: 使用纯黑 #000 或纯白 #fff — 永远加一点色调 DON'T: 使用 AI 调色盘：cyan-on-dark、紫蓝渐变、霓虹暗底 DON'T: 渐变文字做"冲击力" — 装饰性而非功能性 DON'T: 默认暗色模式 + 发光强调色 — 不需要真正的设计决策就能"看起来酷"
→ 详细参考 spatial
DO: 使用 4pt 基础间距系统（4, 8, 12, 16, 24, 32, 48, 64px）
DO: 用 varied spacing 创造节奏 — 紧密分组 + 宽松分隔
DO: 用 clamp() 做流体间距
DON'T: 把所有东西包在卡片里 — 不是所有内容都需要容器
DON'T: 卡片嵌套卡片 — 视觉噪音，扁平化层级
DON'T: 相同大小的卡片网格无限重复 — icon + heading + text 的模板
DON'T: 全部居中 — 左对齐 + 不对称布局更有设计感
DON'T: 到处使用相同间距 — 没有节奏的布局是单调的
DON'T: 到处用 glassmorphism — 模糊效果、玻璃卡片、发光边框缺乏目的性 DON'T: 圆角元素 + 一侧粗彩色边框 — 偷懒的强调，几乎从不显得有意 DON'T: 用 sparkline 做装饰 — 看起来精致但不传达信息 DON'T: 圆角矩形 + 通用阴影 — 安全、无记忆点，典型 AI 输出 DON'T: 用 modal 除非真的没有更好的选择
→ 详细参考 motion
DO: 用 exponential easing（ease-out-quart/quint/expo）做自然减速
DO: 对高度动画使用 grid-template-rows 而非直接动画 height
DON'T: 动画 layout 属性（width, height, padding, margin）— 只用 transform + opacity
DON'T: 使用 bounce 或 elastic easing — 过时且俗气，真实物体平滑减速
→ 详细参考 interaction
DO: 每个交互元素设计 8 种状态（default/hover/focus/active/disabled/loading/error/success） DO: 设计有意义的空状态 — 不只是"暂无内容" DON'T: 不要把每个按钮都做成 primary — 用 ghost、text link、secondary 建立层级 DON'T: 重复用户已能看到的信息
→ 详细参考 responsive
DO: 用 container queries 做组件级响应式 DON'T: 在移动端隐藏关键功能 — 适配界面，不要截肢
→ 详细参考 ux-writing
DO: 按钮文案用「动词 + 名词」— "保存更改" 而非 "确定" DO: 错误信息回答三个问题：发生了什么？为什么？怎么修？
来源细则见 OpenAI codex base_instructions / Frontend guidance；本 skill 主流程只保留交付契约：
关键质量检查：如果你把这个界面展示给人，说"AI 做的"，他们会立刻相信吗？如果会，那就是问题。
不要把某一年的流行禁忌当成永久规则；判断依据是任务目标、信息层级、可访问性、响应式和项目既有风格。
[HINT] Download the complete skill directory including SKILL.md and all related files