Frontend Premium 技能
该技能帮助代理生成高质量的前端界面，通过以下方式实现：
强制创建设计文档（Google Stitch 风格）以保持一致性
遵循 2026 年的 UI/UX 趋势（玻璃效果、便当网格、微动画）
确保 WCAG 2.1 AA 无障碍标准的遵守
提供质量验证和建议
建议现代技术栈（Motion、Lucide/Phosphor 图标、Tailwind、RSC）
核心工作流
在处理前端任务时，该技能强制执行以下流程：
首先生成设计文档 - 记录设计系统（颜色、字体、间距、组件）
遵循设计文档 - 所有 UI 生成必须参考和遵循该文件
应用 2026 年趋势 - 结合玻璃效果、便当布局、微动画
确保无障碍 - WCAG 2.1 AA、键盘导航、焦点管理
验证质量 - 检查设计系统和最佳实践的遵守
生成的文件
设计文档（必需）- 一个 Google Stitch 风格的设计系统文档，作为视觉决策的单一来源。
结构：
颜色
- 主色：#HEXVALUE
- 次色：#HEXVALUE
- 背景色：#HEXVALUE
- 表面色：#HEXVALUE
- 错误色：#HEXVALUE
- 文本主色：#HEXVALUE
- 文本次色：#HEXVALUE
字体
- 字体家族：Inter、sans-serif（或类似）
- 标题 1：SIZEpx、WEIGHT weight
- 标题 2：SIZEpx、WEIGHT weight
- 正文：SIZEpx、WEIGHT weight
- 标题：SIZEpx、WEIGHT weight
间距
- 基础单位：4px 或 8px
- 值：4、8、16、24、32、48px
组件
- 按钮边框半径：VALUEpx
- 卡片边框半径：VALUEpx
- 卡片阴影：OFFSET BLUR SPREAD COLOR
- 输入边框：WIDTHpx solid #HEXVALUE
质量检查文档（生成）- 一个验证清单，用于验证生成的代码是否符合设计系统。
2026 年趋势
布局和视觉
玻璃效果和霜化玻璃 - 背景滤镜、半透明表面
便当网格布局 - 受苹果启发的不对称、卡片式布局
微交互 - 微妙的悬停、焦点和动画状态
暗黑模式优先 - 默认为暗黑模式，亮色为变体
渐变细腻 - 软、自然渐变而不是粗糙过渡
大胆字体 - 表达式、层次化字体
新拟物主义软 - 软阴影和高光
骨架加载器 - 内容占位符而不是旋转器
交互
交互悬停状态 - 所有交互元素响应悬停/焦点
运动原理 - 缓动、时序、弹簧物理
滚动触发动画 - 元素在进入视口时动画
触摸友好目标 - 最小 48x48px 点击目标
无障碍要求
视觉
WCAG 2.1 AA 最小对比度
文本大小调整支持（最高 200%）
色盲友好调色板
可见焦点指示器（最小 2px 外框）
交互
全键盘导航
逻辑选项卡顺序
跳过导航链接
非文本内容的 ARIA 标签
错误识别和建议
性能
首次内容绘制 < 1.8s
交互时间 < 3.5s
累积布局偏移 < 0.1
优化图像和资源
推荐技术栈
框架和渲染
Next.js 15（应用路由器、服务器组件）
React 19 具有并发功能
RSC 优先（React 服务器组件，用于性能）
样式
Tailwind CSS - 实用优先、设计令牌友好
Motion（framer-motion）- 生产级动画
CSS 变量 - 用于设计令牌消费
图标
Lucide - 清洁、统一的 SVG 图标（默认）
Phosphor - 多重权重/样式，包括双色调
Iconiq - 动力驱动的动画图标（用于高级交互）
开发
TypeScript - 严格模式，用于安全
ESLint + Prettier - 代码质量和格式
Vitest - 组件测试
Playwright - 端到端测试
质量验证清单
生成代码时，验证：
设计系统
所有颜色来自设计文档的一致使用
字体比例严格遵循
间距值匹配基础单位倍数
组件样式匹配规格
无障碍
颜色对比度 ≥ 4.5:1（文本）、≥ 3:1（UI）
所有交互元素都可以使用键盘访问
焦点可见且样式化
需要时使用 ARIA 标签
语义 HTML 元素
性能
加载期间无布局偏移
图像优化和延迟加载
CSS/JS 最小化
内联关键 CSS
应用趋势
玻璃效果或霜化元素存在
悬停/焦点上的微交互
响应式设计（移动优先）
考虑暗黑模式变体
参考
请参阅 references/ 以获取：
设计令牌示例
无障碍清单
2026 年趋势深入分析
技术栈比较
使用提示
始终从设计文档开始 - 在生成任何 UI 组件之前生成它
不断参考它 - 对每个决定都问“它是否与我的设计文档相符？”
迭代设计 - 更新设计文档，随着学习的进展，然后重新生成
尽早测试无障碍 - 不要在最后才添加它
保持微妙 - 2026 年趋势偏爱精致而不是浮夸
常见陷阱
❌ 在没有设计系统的情况下生成 UI
by