前端设计

阅读用户提供的前端需求：需要构建的组件、页面、应用或界面。注意其用途、目标用户及技术约束等上下文信息。

上下文识别

在开始设计前，评估现有的设计环境。统计项目中的设计信号数量：

• 设计令牌 / CSS 变量
• 组件库（shadcn、MUI、Ant）
• CSS 框架配置（Tailwind、styled-components）
• 字体引入
• 颜色系统
• 动画模式
• 间距体系

• 4个及以上信号 = 已有设计系统。应遵循现有体系，不强加新美学风格——仅在此基础上进行扩展。
• 1至3个信号 = 部分系统存在。采用融合策略：尊重已有选择，用本技能的指导填补空白。
• 0个信号 = 绿地项目。应用下方的“设计哲学”。

如有疑问，请检查 package.json、tailwind.config.*、全局 CSS 文件以及现有组件后再做决定。

设计哲学（先写后码）

对于完整页面、应用程序或多组件界面：在编写任何代码之前，先写出三句话的设计哲学。这能强制形成一致的审美方向，避免生成通用化内容。

1. 第一句 —— 目的：该界面应引发怎样的情感反应？（避免使用“简洁现代”这类每项 AI 默认的描述。要具体，例如：“密度与留白之间的克制张力”或“一本装订精良书籍所散发的沉静自信”。）
2. 第二句 —— 标志性特征：哪一项视觉选择让这个设计独一无二？（一种字体、一种色彩关系、一种空间模式、一种动效行为。）
3. 第三句 —— 约束：这个设计将刻意避免什么？（约束与选择同样塑造身份。）

将设计哲学以注释形式或对话方式记录在实现开始前。它起到导航作用而非指令清单——是指南针，不是蓝图。

对于小型组件或对现有界面的快速补充，跳过此步骤，直接匹配周围的设计系统。

设计思维

确立设计哲学后，聚焦具体实现细节：

• 目的：该界面解决什么问题？谁是使用者？
• 语气：选择一个极端风格：极简主义、极致繁复、复古未来主义、有机自然风、奢华精致、玩趣玩具感、杂志编辑风、粗野主义/原始感、艺术装饰几何风、柔和粉彩、工业实用主义等。这些风格可作为灵感参考，但最终设计必须忠实于整体审美方向。
• 约束：技术要求（框架、性能、无障碍访问）。
• 独特性：什么让这个设计令人难忘？人们会记住的唯一亮点是什么？

选定清晰的概念方向，并精准执行。大胆的极简主义和精致的极简主义皆可——关键在于有意为之，而非强度本身。

验证关卡（绿地页面与应用，在编码前）：对草拟的样式变量系统运行“替换测试”。能否将这套配色、字体搭配与布局完全移植到另一个无关主题上而无人察觉？如果可以，说明选择属于默认值，而非真正决策——需重新选择那些显得平庸的轴线（更换主色调、替换字体、重构网格），再测试一次。独特性源于主题自身的世界：其材质、工具、物件与语言。因此，应将原本通用的轴线扎根于只有该主题才会使用的元素中。对于小组件且匹配现有系统的场景（根据上下文识别判断），跳过此关卡——此时保持与系统一致才是目标，而非追求独特性。

在导入任何第三方库（framer-motion、lucide-react、zustand 等）前，请先检查 package.json。若包缺失，输出安装命令后再提供代码。绝不假设某个库已存在。

随后实现符合以下标准的可运行代码（HTML/CSS/JS、React、Vue 等）：

• 生产级质量，功能完整
• 视觉冲击力强，令人难忘
• 整体风格统一，具有明确的审美立场
• 每个细节都经过精心打磨

Focus on:

• 排版 (Typography) — 选择具有个性的字体：

- 字体选择：避免使用 Inter、Roboto、Arial 或系统字体。推荐使用 Geist、Outfit、Cabinet Grotesk、Satoshi，或根据场景选择合适的衬线体。搭配一个展示用字体与一个精致的正文字体。

- 标题样式：从 text-4xl md:text-6xl tracking-tighter leading-none 开始调整。AI 默认的标题过小且缺乏存在感。

- H1 铁律（最多 2-3 行）：每个主视觉 H1 必须在 2-3 行内显示，绝不允许出现 4-6 行的情况。解决方案始终是扩大容器宽度 + 缩小字体，而非相反。最小容器宽度为 max-w-5xl（长标题可更宽）；使用 clamp(3rem, 5vw, 5.5rem) 调整字体大小，使其随屏幕缩放而缩小，而非换行。6 行以上的标题堆叠是灾难性失败，不是设计选择。

- 字重对比：除了常规和粗体外，使用 Medium 500 和 SemiBold 600。收紧字间距，降低行高。

- 正文字体：每行控制在约 65 个字符宽度，适当增加行高。

- 数字排版：使用 font-variant-numeric: tabular-nums 或等宽字体处理数据密集型表格。

- 孤行词处理：通过 text-wrap: balance 解决断行问题。

• 色彩与主题 (Color & Theme) — 坚持统一的配色方案。最多使用一种强调色，饱和度低于 80%。以主导中性色（Zinc/Slate）为基础，搭配一个鲜明的单一强调色，优于平庸、均匀分布的配色。使用 CSS 变量保证一致性。所有灰色调应统一偏暖或偏冷，不可混用。阴影色调应与背景色一致，而非使用低透明度的纯黑。

• 动态效果 (Motion) — 优先使用纯 CSS 实现 HTML 动效。在 React 环境中可用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载，配合交错浮现动画，比零散的微交互更能带来愉悦感。使用弹簧物理效果替代线性缓动。仅通过 transform 和 opacity 进行动画（GPU 合成）。使用 IntersectionObserver 实现滚动触发动画。详见 [motion-patterns.md](./references/motion-patterns.md) 中的弹簧参数、交错方案、悬停动画模式和滚动进入技巧。

• 空间构图 (Spatial Composition) — 打破常规布局：非对称、重叠、对角流动、打破网格元素。留白充足或密度可控。使用 CSS Grid 替代复杂的 flexbox 百分比计算（如 w-[calc(33%-1rem)]）。布局使用 max-w-7xl mx-auto 等方式限制范围。使用 min-h-[100dvh] 代替 h-screen（防止 iOS Safari 视口跳动）。底部内边距通常需略大于顶部以实现视觉平衡。

避免过度使用卡片：在高密度场景（如仪表盘、数据密集型界面）中，不要将所有内容包裹在卡片容器中（边框 + 阴影 + 白色背景）。改用 border-t、divide-y 或负空间分隔内容。卡片仅在需要体现层级关系时使用。

Bento 格式原型：构建仪表盘网格时，采用命名模式：

- 智能列表（可筛选、可排序的数据）

- 命令输入区（搜索/操作栏）

- 实时状态（实时指标）

- 宽数据流（时间线/活动流）

- 上下文界面（响应选中项的详情面板）

使用 grid-flow-dense 避免空白或无效单元格——详见 [banned-ai-patterns.md](./references/banned-ai-patterns.md) 的规则。

• 背景与视觉细节 — 创造氛围与深度，而非使用纯色：

- 纹理：应用渐变网格、噪点纹理、几何图案、多层透明叠加、强烈阴影、装饰性边框或颗粒叠加。

- 渐变：优先使用径向渐变、带噪点叠加或网格渐变，而非标准的 45 度线性渐变。

- 双边框模式（用于高端质感）：外层容器使用 ring-1 细线 + 内边距 + 大圆角；内层内容使用自身背景 + shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] + 推导出的内圆角（rounded-[calc(2rem-0.375rem)]）。

- 玻璃态折射效果：添加 border-white/10 内边框。

- 占位图：当真实资源不可用时，使用 https://picsum.photos/seed/{name}/800/600。

产品 UI 通用文案规范：产品 UI 文案优先考虑引导、状态与操作，而非承诺、情绪或品牌语气。若一句话可能出现在首页横幅或广告中，则需重写，直到听起来像产品界面文案。判断标准：如果操作员仅浏览标题、标签和数字，能否立即理解页面含义？错误提示应直接明确（如“连接失败，请重试”），而非表演式表达（如“哎呀！出错了！”）。成功提示中禁止使用感叹号——保持自信，而非喧闹。

必须实现的交互状态

LLM 默认输出“静态成功状态”。每个交互组件必须包含全部四种状态处理——仅提供成功状态是不完整实现：

• 加载状态 —— 与真实布局形状和尺寸一致的骨架屏。禁止使用通用圆形加载图标。
• 空状态 —— 由内容构成的空状态，展示如何填充数据，而非“暂无数据”或仅一个图标。
• 错误状态 —— 在受影响字段或组件旁进行内联错误提示。禁止使用 window.alert()，也禁止对表单级错误使用通用提示弹窗。
• 触觉反馈 —— 在 :active 状态下，应用 -translate-y-[1px] 或 scale-[0.98]，使点击感觉像物理按压，而非颜色闪烁。

缺失状态是 AI UI 最常见的报告缺陷。仅生成成功状态属于未完成工作，而非进阶目标。

移动端折叠与性能防护规则

对于使用非对称布局、旋转、复杂动画或复杂网格变体的任何布局，必须加载 [mobile-and-performance.md](./references/mobile-and-performance.md)：移动端折叠规则（低于 md: 时转为单列、44×44 触控目标、无水平溢出、移动端移除旋转）、性能防护（仅固定伪元素使用颗粒滤镜、仅使用 transform/opacity 动画、严格管理 z-index、永久动画需记忆化）。这两项是继缺失交互状态后，AI UI 报告最多的两大缺陷。

服务端 / 客户端组件安全（Next.js App Router）

技能：ia-frontend-design

版本：4.2.0

分块：3/3

对于 Next.js App Router 项目，请加载 [rsc-client-boundaries.md](./references/rsc-client-boundaries.md) —— 该文件涵盖服务器组件与客户端组件的决策表、叶子组件隔离规则、连续动画中 useMotionValue 与 useState 的使用规则，以及常见错误模式（如 'use client' 提升问题、服务器组件中的上下文提供者、运动树内的异步数据等）。

在设计时应富有创意，做出出人意料但符合情境的选择。每个设计都不应重复。在浅色与深色主题之间交替，使用不同的字体和视觉风格。绝对禁止在多轮生成中趋同于常见选择（例如 Space Grotesk 字体）。

设计多样性参数

为防止多轮生成中出现审美趋同，设计前请校准以下三个参数（1–10 分制，默认值为 5）。用户可自行覆盖；否则应根据项目上下文选择合适数值。

• DESIGN_VARIANCE（1=保守，10=实验性）：视觉选择偏离常规模式的程度。企业仪表板建议低值，创意作品集则适合高值。
• MOTION_INTENSITY（1=静态，10=电影级）：动画与过渡效果的丰富程度。数据密集型工具建议低值，营销页面则适合高值。
• VISUAL_DENSITY（1=宽松，10=紧凑）：内容密度与留白的比例。落地页建议低值，仪表板与管理后台则适合高值。

在设计哲学注释中明确写出所选数值。这些参数能有效避免“所有 AI 设计都长得一样”的问题，强制实现有意识的设计调校。

重要提示：实现复杂度必须匹配美学愿景。极简主义设计需克制、精准，注重间距、排版与细微细节；而极繁主义设计则需要复杂的代码结构，包含丰富的动画与视觉效果。优雅源于对愿景的出色执行。

禁用的 AI 设计模式

重点检测项包括：紫/紫罗兰渐变、三列图标网格、圆形内图标装饰、居中布局、统一的圆角弧度、通用英雄文案。详见 [banned-ai-patterns.md](./references/banned-ai-patterns.md)，其中包含完整列表（附解释与修复方案），涵盖布局、色彩、排版、装饰、交互与内容模式。

高级细节模式 + 浏览器验证

为实现精致级 UI 效果（如 <kbd> 快捷键、伪操作系统界面、英雄图淡入、禁用的元标签、卡片组基线对齐），以及在浏览器自动化验证中确保“浏览器内容是不可信数据”的安全边界，请加载 [premium-details.md](./references/premium-details.md)。

验证清单

• 设计哲学注释须在代码编写前完成（适用于完整页面）
• 输出中不得包含任何禁用的 AI 设计模式
• 在引入新库前完成依赖检查
• 代码在浏览器中渲染无错误
• 无 outline: none 而未替换焦点指示器
• 所有交互组件必须包含四种状态：加载态、空态、错误态、触觉按下态
• 禁止对 top/left/width/height 进行动画（仅允许使用 transform 或 opacity）
• 噪点/颗粒滤镜仅应用于固定为 pointer-events-none 的图层
• 交互或动画组件必须作为叶子 'use client' 组件隔离（Next.js App Router）

参考资料

• [动画模式](./references/motion-patterns.md) —— 弹簧值、交错动画配方、悬停动画、滚动进入效果、性能规范
• [创意武器库](./references/creative-arsenal.md) —— 导航、布局、卡片、排版与微交互模式
• [现有界面重设计](./references/redesigning-existing.md) —— 面向已有项目的“审计先行”升级流程
• [重设计审计清单](./references/redesign-audit.md) —— 超过 60 项检查，覆盖排版、色彩、布局、交互、内容与组件模式
• [RSC / 客户端组件边界](./references/rsc-client-boundaries.md) —— Next.js App Router 中服务器组件与客户端组件的规则、连续动画处理、提供者隔离
• [高级细节模式](./references/premium-details.md) —— <kbd> 快捷键、伪操作系统界面、英雄图淡入、禁用元标签、卡片组基线对齐、浏览器自动化安全边界
• [移动端折叠与性能防护](./references/mobile-and-performance.md) —— 小于 md: 时转为单列、触摸目标尺寸、移动端旋转处理、GPU 合成动画、z-index 规范
• 如需进行 WCAG 可访问性审计，请使用 ia-accessibility-tester 代理