Menu
Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
务实的编码标准—— 简洁、直接、不做过度设计、不写无用注释（Pragmatic coding standards）
性能分析原则。测量、分析与优化技术。
API design principles and decision-making（API 设计原则与决策逻辑）。REST vs GraphQL vs tRPC selection（选择）、response formats（响应格式）、versioning（版本控制）、pagination（分页）。
App Builder（应用构建编排器）主编排器。根据自然语言请求创建全栈应用，确定项目类型、选择技术栈并协调智能体。
Project scaffolding templates（项目脚手架模板）。用于从零创建新项目。包含 12 个技术栈模板。
Architectural decision-making framework（架构决策框架）。Requirements analysis（需求分析）、trade-off evaluation（权衡评估）、ADR documentation（架构决策记录）。Use when making architecture decisions or analyzing system design（用于架构决策与系统设计分析）。
| name | frontend-design |
| description | Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。 |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
理念： 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。 核心原则： THINK（思考），不要死记硬背。ASK（提问），不要自作主张。
必须阅读必读文件，可选文件仅在需要时阅读：
| 文件 | 状态 | 何时阅读 |
|---|---|---|
| ux-psychology.md | [CRITICAL] 必读 | 必须先读！ |
| color-system.md | 可选 | 需要做配色/色盘决策时 |
| typography-system.md | 可选 | 需要选择/搭配字体时 |
| visual-effects.md | 可选 | 玻璃拟态、阴影、渐变相关 |
| animation-guide.md | 可选 | 需要动画时 |
| motion-graphics.md | 可选 | Lottie、GSAP、3D |
| decision-trees.md | 可选 | 场景化模板 |
[CRITICAL] ux-psychology.md = 必读。其他 = 仅在相关时阅读。
执行这些脚本用于审计（不要阅读，只需运行）：
| 脚本 | 用途 | 用法 |
|---|---|---|
scripts/ux_audit.py | UX 心理与无障碍审计 | python scripts/ux_audit.py <项目路径> |
停！如果用户需求是开放式的，不要默认你的偏好。
未指定颜色？ 问：
"你偏好哪类配色？（蓝/绿/橙/中性/其他？）"
未指定风格？ 问：
"你希望整体风格是什么？（极简/大胆/复古/未来感/有机？）"
未指定布局？ 问：
"你对布局有偏好吗？（单列/网格/非对称/全宽？）"
| AI 默认倾向 | 为什么不好 | 换个思路 |
|---|---|---|
| Bento Grids（盒状网格，现代陈词滥调） | 用得太多 | 为什么这个内容一定要用网格？ |
| Hero Split（左右分栏） | 可预测且乏味 | 能否用超大字或垂直叙事？ |
| Mesh/Aurora Gradients（网格/极光渐变） | “新式懒背景” | 能否做更大胆的色彩组合？ |
| Glassmorphism（玻璃拟态） | AI 眼中的“高级感” | 试试高对比纯色平面？ |
| Deep Cyan / Fintech Blue（深青/金融蓝） | 规避紫色禁令的安全色 | 为什么不用红、黑或霓虹绿？ |
| "Orchestrate / Empower" | AI 味文案 | 人类会怎么说？ |
| 深色背景 + 霓虹发光 | 过度使用的“AI 风” | 这个品牌真正需要什么？ |
| Rounded everything（全圆角） | 通用且安全 | 哪里可以使用锋利、粗粝的边？ |
[CRITICAL] “每一次选择安全结构，都会让你更接近一个模板化设计。敢于冒险。”
在任何设计工作之前，先回答或询问：
| 约束 | 问题 | 为什么重要 |
|---|---|---|
| 时间线 | 时间有多紧？ | 决定复杂度 |
| 内容 | 内容已准备好还是占位？ | 影响布局弹性 |
| 品牌 | 是否有既定规范？ | 可能限定颜色/字体 |
| 技术 | 技术栈是什么？ | 影响实现能力 |
| 受众 | 具体是谁？ | 决定视觉方向 |
| 受众 | 设计要点 |
|---|---|
| Gen Z（Z 世代） | 大胆、快速、移动优先、真实 |
| Millennials（千禧一代） | 干净、极简、价值导向 |
| Gen X（X 世代） | 熟悉、可信、清晰 |
| Boomers（婴儿潮一代） | 易读、高对比、简单 |
| B2B（企业服务） | 专业、数据导向、信任感 |
| Luxury（奢华） | 克制优雅、留白充足 |
| 定律 | 原则 | 应用 |
|---|---|---|
| Hick's Law（希克定律） | 选择越多 = 决策越慢 | 限制选项，渐进披露 |
| Fitts' Law（菲茨定律） | 更大更近 = 更易点击 | 合理设置 CTA（行动号召）尺寸 |
| Miller's Law（米勒定律） | 工作记忆约 7 项 | 内容分组组织 |
| Von Restorff（冯·雷斯托夫效应） | 差异 = 更易记忆 | CTA（行动号召）视觉突出 |
| Serial Position（首因-近因效应） | 首尾最易记住 | 关键信息放首尾 |
VISCERAL（直觉） -> 第一印象：颜色、图像、整体感受
BEHAVIORAL（行为）-> 使用过程：速度、反馈、效率
REFLECTIVE（反思）-> 使用后：“我喜欢它传达的价值”
用于比例和谐：
+-- 内容 : 侧栏 ≈ 62% : 38%
+-- 标题字号 = 上一级 × 1.618（营造戏剧感）
+-- 间距可按：sm -> md -> lg（每次 × 1.618）
所有间距与尺寸以 8 为倍数：
+-- Tight: 4px（微调半步）
+-- Small: 8px
+-- Medium: 16px
+-- Large: 24px, 32px
+-- XL: 48px, 64px, 80px
+-- 依据内容密度调整
| 元素 | 考量 |
|---|---|
| 触达目标 | 点击/触控的舒适最小尺寸 |
| 按钮 | 高度由重要性层级决定 |
| 输入框 | 与按钮高度对齐 |
| 卡片 | 内边距一致、留白充足 |
| 阅读宽度 | 45-75 字符最佳 |
60% -> 主色/背景（稳定、中性基底）
30% -> 次级色（支撑区域）
10% -> 点缀色（CTA（行动号召）、高亮、注意力）
| 需求 | 参考色系 | 避免 |
|---|---|---|
| 信任、平静 | 蓝色系 | 侵略性红色 |
| 成长、自然 | 绿色系 | 工业感灰色 |
| 能量、紧迫 | 橙/红 | 被动蓝色 |
| 奢华、创意 | 深青、金色、祖母绿 | 便宜感亮色 |
| 干净、极简 | 中性色 | 过度色彩 |
详细色彩理论见：color-system.md
| 内容类型 | 比例 | 质感 |
|---|---|---|
| 密集型 UI | 1.125-1.2 | 紧凑、高效 |
| 通用 Web | 1.25 | 平衡（最常见） |
| 编辑排版 | 1.333 | 易读、宽松 |
| Hero（首屏展示）/展示 | 1.5-1.618 | 强烈冲击 |
对比 + 协调：
+-- 足够不同以形成层级
+-- 足够相似以保持一致
+-- 常见：展示字体 + 中性字体，或衬线 + 无衬线
详细字体见：typography-system.md
关键属性：
+-- 半透明背景
+-- 背景模糊
+-- 轻微边框以界定层级
+-- [WARN] **警告：** 标准蓝/白玻璃拟态已成现代陈词滥调。要么做得激进，要么别用。
高度概念：
+-- 越高的元素 = 更大的阴影
+-- Y 轴偏移 > X 轴偏移（光从上方）
+-- 多层叠加 = 更真实
+-- 深色模式：可能需要改为发光
和谐渐变：
+-- 色轮相邻色（analogous）
+-- 或同色相不同明度
+-- 避免强烈互补色
+-- **禁止 Mesh/Aurora 渐变**（漂浮块）
+-- 不同项目要有明显差异
完整效果指南见：visual-effects.md
时长依据：
+-- 距离（更远更久）
+-- 尺寸（更大更慢）
+-- 重要性（关键动作要清晰）
+-- 场景（紧急更快，奢华更慢）
| 动作 | 缓动 | 原因 |
|---|---|---|
| 进入 | Ease-out（缓出） | 减速并稳定 |
| 离开 | Ease-in（缓入） | 加速离场 |
| 强调 | Ease-in-out（缓入缓出） | 平滑、克制 |
| 活泼 | Bounce（弹跳） | 有趣、活力 |
动画模式见：animation-guide.md，进阶见：motion-graphics.md
对每一次设计任务：
1. 约束
+-- 时间线、品牌、技术、受众？
+-- 不明确就提问
2. 内容
+-- 有哪些内容？
+-- 层级如何？
3. 风格方向
+-- 适合当前上下文吗？
+-- 不明确就提问（不要默认）
4. 执行
+-- 应用上述原则
+-- 对照反模式自检
5. 复审
+-- “是否服务用户？”
+-- “是否不同于我的默认模板？”
+-- “我会为这个设计感到自豪吗？”
更深层的指导：
| 技能 | 适用时机 |
|---|---|
| frontend-design（本技能） | 编码前 - 学习设计原则（配色、字体、UX 心理） |
| web-design-guidelines | 编码后 - 审计无障碍、性能与最佳实践 |
实现设计后，运行审计：
1. DESIGN（设计） -> 阅读 frontend-design 原则 <- 你在这里
2. CODE（编码） -> 实现设计
3. AUDIT（审计） -> 运行 web-design-guidelines 复审
4. FIX（修复） -> 修复审计发现
下一步： 编码后使用
web-design-guidelines技能审计无障碍、焦点状态、动画与性能问题。
记住： 设计是思考，不是抄写。每个项目都应基于其独特的上下文与用户重新做决定。远离现代 SaaS（软件即服务）的安全港！