Menü
Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
务实的编码标准—— 简洁、直接、不做过度设计、不写无用注释（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（软件即服务）的安全港！