frontend-design 是一套面向网页界面的设计思维与决策方法，用于设计组件、布局、配色方案、字体排版，或打造有审美主张的界面。
核心理念
- 每个像素都有目的，克制即奢华，用户心理驱动决策。
- 思考而非背诵，询问而非假设。
使用方式与文件阅读规则 该技能以一组参考文件和脚本组成。阅读规则为强制项：ux-psychology.md 必须首先阅读；color-system.md、typography-system.md、visual-effects.md、animation-guide.md、motion-graphics.md、decision-trees.md 为可选项，仅在涉及配色、字体、特效、动画、动态图形或场景模板时按需查阅。 运行时脚本用于审计而非阅读，直接执行即可：python scripts/ux_audit.py <project_path>，用途为 UX 心理学与可访问性审计。
需求澄清原则 当用户请求较为开放时，技能要求先提问而非套用个人偏好：未指定配色时询问偏好色板（蓝/绿/橙/中性/其他）；未指定风格时询问方向（极简/大胆/复古/未来/自然）；未指定布局时询问偏好（单栏/网格/非对称/全宽）。
约束分析 设计前先明确或询问时间线、内容是否就绪、品牌规范、技术栈与目标受众。受众会影响设计取向，例如 Z 世代偏向大胆、快速、移动优先；千禧一代偏向简洁、极简、价值导向；X 世代偏向熟悉、可信、清晰；婴儿潮一代偏向可读、高对比、简单；B2B 偏专业、数据导向、可信；奢侈品类偏克制优雅与留白。
UX 心理学 技能归纳了若干核心定律：希克定律（选项越多决策越慢，应限制选项并渐进披露）、菲茨定律（越大越近越易点击）、米勒定律（工作记忆约 7 项，应分块）、冯·雷斯托夫效应（与众不同更易记忆，CTA 应视觉突出）、序列位置效应（首尾更易被记住）。并区分情感设计的三个层次：本能层（第一印象）、行为层（使用体验）、反思层（使用后的自我认同）。信任建设方面包括敏感操作的安全提示、社会证明、清晰的联系与支持入口、一致专业的设计和透明的政策。
布局原则 介绍黄金比例（φ=1.618）用于内容与侧栏比例、标题级差和间距递进；8 点网格概念以 8 的倍数为间距与尺寸基准（4px 作为微调半步，8/16/24/32/48/64/80 等递进，按内容密度调整）；以及触控目标最小尺寸、按钮高度体现重要性层级、输入框与按钮高度对齐、卡片内边距一致、正文阅读宽度 45–75 字符等要点。
色彩原则 60-30-10 规则：60% 主色/背景、30% 辅助色、10% 强调色（CTA、高亮）。色彩心理用于决策：信任与平静考虑蓝色系、避免攻击性红；成长与自然考虑绿色系；能量与紧迫考虑橙红；奢华与创意考虑深青、金、祖母绿；干净极简用中性色。选择流程为：先看行业缩小范围，再看情绪确定主色，再定明暗模式基础；未指定时须询问用户。
字体原则 按内容类型选择比例：密集 UI 用 1.125–1.2，通用网页用 1.25，编辑类用 1.333，大标题/展示用 1.5–1.618。字体配对讲究对比与和谐：层级上足够不同，整体上足够统一，常见组合为展示字体配中性字体，或衬线配无衬线。可读性规则包括行宽 45–75 字符、正文行高 1.4–1.6、检查 WCAG 对比度、网页正文不小于 16px。
视觉特效与动画 玻璃拟态需谨慎，标准蓝白玻璃拟态被视为现代陈词滥调，应极端化使用或干脆不用；阴影遵循高度概念，越高阴影越大，Y 偏移大于 X 偏移，可多层叠加更真实，暗色模式可能需要发光替代；渐变应使用邻近色或同色不同明度，避免生硬互补色，明确禁止 Mesh/Aurora 浮动光斑渐变。动画时长依据距离、尺寸、重要性和语境；进入用 ease-out、离开用 ease-in、强调用 ease-in-out、俏皮用弹跳；性能上只动画 transform 与 opacity，尊重减少动态偏好，在低端设备上测试。
质量清单与反模式 “惊艳感”清单包含充足留白、细微层次、平滑有目的的动画、细节一致性、视觉节奏、非默认的自定义元素；信任构建包括安全提示、社会证明、清晰价值主张、专业图像与一致设计语言；情感触发包括唤起预期情绪的首屏、人物元素、进度与成就提示、惊喜时刻。反模式分为三类：懒惰设计（无考虑的默认系统字体、不匹配的图库素材、间距不一致、颜色过多、无层级的文字墙、不可访问的对比度）；AI 倾向模式（每个项目同样配色、默认暗色加霓虹、万物紫色、简单落地页也用 Bento 网格、Mesh 渐变与发光、同质布局与 Vercel 克隆、不询问用户偏好）；不道德暗模式（隐藏费用、虚假紧迫、强制操作、欺骗性 UI、确认羞辱）。
决策流程 每个设计任务按五步推进：约束分析（不清则问）、内容梳理（已有内容与层级）、风格方向（合适语境，不清则问、不默认）、执行（应用上述原则并对照反模式）、评审（是否服务用户、是否区别于自身默认、是否值得自豪）。
适用场景与限制 该技能适合在网页 UI 设计早期进行方向决策、配色与字体选择、布局与动效规划，以及用脚本做 UX 与可访问性审计。它提供的是方法与原则，不包含具体的框架代码、组件实现或部署步骤；具体项目中的品牌规范、时间线与技术栈仍需使用者自行确认。分类上归入前端与建站，因为其明确用途是网页界面设计。