核心用法
ia-frontend-design 是一套面向视觉识别敏感型项目的专业前端设计技能，适用于网页、落地页、仪表盘及应用程序的界面构建。其核心工作流采用"设计哲学先行"原则：在编写任何代码前，强制输出三句话的设计哲学（意图/视觉签名/约束），以此确立独特的美学方向而非落入AI默认的"干净现代"套路。
技能内置智能环境检测机制，通过扫描设计令牌、组件库、CSS配置等信号，自动判断是融入现有系统、部分适配还是全新构建。针对纯AI生成界面的同质化问题，提供了完整的反制方案：明确禁止紫色渐变、三列图标网格、彩色圆圈图标等6大高频AI套路，并建立设计方差参数体系（DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY）强制产出差异化。
技术实现层面，技能对排版、色彩、动效、空间构成均有精细化规范——如H1必须控制在2-3行（通过clamp()响应式字体而非换行）、所有交互组件必须包含加载/空态/错误/触觉按压四种状态、动效仅限transform/opacity的GPU合成属性等。同时针对Next.js App Router提供服务器/客户端组件边界指南，确保架构安全。
显著优点
- 审美反同质化：通过强制设计哲学写作和方差参数校准，从根本上解决"AI设计看起来都一样"的行业痛点
- 生产级完整性：超越静态成功态，强制要求四种交互状态实现，大幅降低AI生成代码的缺陷率
- 上下文自适应：环境检测机制避免在已有设计系统中强行植入新美学，支持渐进式适配
- 性能与可访问性内置：GPU优化动效、44×44触摸目标、焦点指示器等规范内嵌于工作流
潜在局限
- 学习曲线陡峭：三句话设计哲学对使用者的抽象概括能力要求较高，新手可能产出空泛描述
- 审美主观性风险："反AI套路"的禁止清单可能限制某些合理设计场景（如品牌色恰好是紫色系）
- Next.js生态绑定较深：RSC/客户端边界等高级特性对非Next.js项目价值有限
- 过度设计倾向：方差参数若全部拉满，可能导致为差异化而差异化，牺牲可用性
适合人群
- 追求独特视觉识别的创业团队、创意机构、独立开发者
- 需要从"AI生成感"中脱敏、建立品牌辨识度的成熟产品
- 具备一定设计理论基础、能准确描述"意图"和"签名"的进阶用户
- Next.js + Tailwind技术栈的项目开发者
常规风险
- 依赖遗漏：虽强制要求检查
package.json后再引入新库，但人工执行环节仍存在疏漏可能 - 移动端适配：复杂网格和动画需手动加载mobile-and-performance.md参考，存在遗忘风险
- 浏览器验证边界：premium-details.md中提及的"浏览器内容为不可信数据"安全边界，在自动化验证场景下需额外注意
- 可访问性盲区：虽提及WCAG审计应使用ia-accessibility-tester，但非强制联动，高方差设计可能牺牲无障碍体验