核心用法
ia-frontend-design 是一套面向前端界面的视觉设计与美学方向技能，适用于构建网页、落地页、仪表盘或应用程序等需要视觉身份识别的场景。
设计哲学驱动（Write First, Code Second）
核心创新在于强制要求在编写任何代码之前，先撰写三句话的设计哲学：
1. Intent（意图）：界面应激发什么情感反应？（避免"简洁现代"这类AI默认表述）
2. Signature（标志性）：哪个视觉选择使其无可替代？
3. Constraint（约束）：设计刻意不做什么？
环境感知与分级响应
通过检测设计信号（design tokens、组件库、CSS配置等）分级处理：
- 4+信号：现有系统，严格匹配扩展
- 1-3信号：部分系统，融合现有选择
- 0信号：全新项目，完整应用设计哲学
美学指导体系
- 排版：拒绝Inter/Roboto等AI默认字体，推荐Geist、Outfit、Cabinet Grotesk；H1严格执行2-3行规则
- 色彩：单一强调色，饱和度低于80%，中性色系统一色调（暖或冷）
- 动效：CSS优先，React项目使用Motion库；专注编排良好的入场动画而非分散的微交互
- 空间构成：非对称布局、网格突破元素、Bento网格模式、反卡片过度使用
强制完整性要求
- 四状态交互：加载、空态、错误、触觉按压（解决最常见的AI UI缺陷）
- 差异化参数：DESIGN_VARIANCE（1-10）、MOTION_INTENSITY（1-10）、VISUAL_DENSITY（1-10）防止审美趋同
- 禁止模式检测：紫色渐变、三列图标网格、图标圆圈装饰、居中重布局等AI套路
显著优点
1. 方法论革新：将设计思维流程化，强制"写作先于编码"，避免直接生成代码导致的视觉平庸
2. 反趋同机制：通过三参数校准和明确禁止模式，有效解决"所有AI设计看起来都一样"的行业痛点
3. 生产级完整性：强制四状态交互、依赖检查、移动端适配、性能护栏，减少后期返工
4. 上下文自适应：智能检测现有设计系统，避免破坏性引入新美学
5. 概念深度：提供12种具体的设计调性选择（极简直觉、极繁混乱、复古未来主义等），超越"简洁现代"的模糊描述
潜在缺点与局限性
1. 认知负担：三句话设计哲学和参数校准增加了前期思考成本，对于快速原型可能过于沉重
2. 主观性风险：设计哲学的质量高度依赖执行者的审美判断力，方法论本身不保证好结果
3. 技术栈偏向：Motion库、Next.js App Router等参考内容显示React/Next.js生态倾向，对其他框架覆盖不足
4. 验证难度："Swap Test"（替换测试）等概念性验证依赖人工判断，难以自动化
5. 字体可用性：推荐的字体（如Cabinet Grotesk）可能需要额外授权或配置，非开箱即用
适合人群
- 追求差异化视觉识别度的产品团队：厌倦千篇一律的AI生成界面
- 有一定审美基础的前端开发者：需要系统化方法将模糊的设计意图转化为代码
- 设计系统维护者：需要在现有系统基础上扩展或统一多项目视觉语言
- 创意型项目开发者：作品集、品牌网站、创意工具等需要强视觉个性的场景
常规风险
- 过度设计（Over-engineering）：高方差参数下可能产生视觉噪音，影响可用性
- 性能隐患：复杂的动效和视觉效果需严格遵循GPU合成规则（transform/opacity only），否则导致卡顿
- 无障碍性遗漏：虽提及WCAG审计，但核心文档对色彩对比度、键盘导航等覆盖有限
- 移动端失效：复杂布局（非对称、旋转、密集网格）需主动加载mobile-and-performance.md，存在遗忘风险
- 字体加载失败：自定义字体未加载时的降级策略未明确说明
来源说明
技能文档结构完整、概念体系成熟，包含大量内部引用（motion-patterns.md、banned-ai-patterns.md等），显示为专业设计工程团队维护的内部技能库，但缺乏外部公开验证渠道。