Frontend Design 深度评估
核心用法
Frontend Design 是一个面向前端界面的视觉设计技能，主要服务于网页、落地页、仪表盘和应用程序的美学构建。其核心工作流程遵循"Write First, Code Second"原则：在编写任何代码前，先撰写三句话设计哲学（意图/签名/约束），确保设计具有明确的美学方向而非AI默认输出。
技能内置智能环境检测：通过扫描项目中的设计信号（设计令牌、组件库、CSS框架配置等），自动判定是匹配现有系统（4+信号）、混合补全（1-3信号）还是全新设计（0信号）。这种上下文感知机制避免了设计系统的冲突。
显著优点
1. 反AI趋同的设计策略
技能明确识别并禁止6大"AI slop"模式：紫紫渐变、三列图标网格、彩色圆圈图标装饰、居中大段文字、统一圆角、通用英雄文案。这种自我约束机制有效对抗了当前AI生成设计的同质化问题。
2. 系统化的美学参数
引入 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY 三大可调参数（1-10量表），强制设计者在执行前校准风格取向，从机制上杜绝"每个AI设计看起来都一样"。
3. 完整的交互状态覆盖
强制要求所有交互组件具备四种状态：Loading（骨架屏）、Empty（空状态指引）、Error（内联错误）、Tactile Press（物理按压感）。这解决了LLM输出最常见的"静态成功状态"缺陷。
4. 严格的性能护栏
明确规定仅使用 transform/opacity 动画、固定层颗粒滤镜、z-index节制使用等规则，从架构层面预防GPU重绘和移动端卡顿。
5. 精细的排版系统
提供具体的字体选择建议（Geist、Outfit、Cabinet Grotesk 替代 Inter/Roboto）、字号层级（text-4xl 起步）、字重对比（500/600 介入）等可执行规范，超越泛泛的"清晰现代"。
潜在缺点与局限性
- 学习曲线陡峭：三句话哲学、参数校准、状态完整实现等要求对使用者有较高认知负荷，不适合快速原型场景
- 审美主观性：虽禁止AI模式，但推荐的"反常规"选择（如特定字体组合）仍需人工判断是否适合品牌
- 框架绑定较深：Tailwind、Next.js App Router、React 的专用规则（如 RSC 边界）降低了跨框架通用性
- 未覆盖设计交付环节：聚焦代码实现，缺少与 Figma/设计令牌工作流的集成说明
- 安全报告为占位符：提供的认证报告未实际执行安全扫描，无法作为可信安全依据
适合人群
- 追求差异化视觉识别的产品团队，厌倦AI默认美学
- 具备一定设计判断力、希望系统化提升前端实现质量的开发者
- 使用 React/Next.js + Tailwind 技术栈的项目
- 需要生产级、高完成度界面而非快速原型的场景
常规风险
- 过度设计风险：高 MOTION_INTENSITY 配置在数据密集工具中可能干扰效率
- 可访问性依赖外部：虽提及 WCAG 审计需调用 accessibility-tester，但自身未内置无障碍检查
- 团队协作摩擦：强烈的主观美学选择可能与现有设计系统或团队规范冲突
- 维护成本：独特的动画模式、非标准字体组合可能增加长期维护复杂度