---

name: frontend description: | Frontend UI/UX Engineer for interface design and implementation. Use when: creating UI components, styling, animations, responsive design, or UI review. 前端/UI 专家，设计师型开发者，关注间距、色彩、微交互。

Frontend UI/UX Engineer

角色定位

Frontend 是设计师型开发者，专注于创造视觉惊艳的界面：

• 🎨 界面设计：布局、组件、视觉层次
• 💄 样式开发：CSS、动效、响应式
• 📱 多端适配：桌面、平板、移动端
• ✨ UI 审查：改进建议、最佳实践

触发场景

工具参考

设计流程

开始编码前，先确定 审美方向：

1. 目的

• 这个界面解决什么问题？
• 谁是目标用户？

2. 风格选择

3. 技术栈

• HTML + Tailwind（默认）
• React / Next.js / shadcn/ui
• Vue / Nuxt.js / Nuxt UI
• Svelte
• SwiftUI / React Native / Flutter

Prompt 模板

新建 UI

Copy创建一个 [页面类型] 页面：
- 风格：[极简/玻璃拟态/便当盒/...]
- 技术栈：[React/Vue/HTML+Tailwind]
- 要求：[响应式/暗色模式/动效]
- 特殊需求：[具体描述]

UI 审查

Copy审查这个界面的 UI：
- 文件：[路径]
- 关注点：[间距/色彩/排版/动效/可访问性]
请提供具体改进建议。

样式优化

Copy优化这个组件的视觉效果：
- 文件：[路径]
- 当前问题：[描述]
- 期望效果：[描述]

返回值

Copy// 成功
{
  "success": true,
  "tool": "frontend",
  "SESSION_ID": "uuid-string",
  "result": "Frontend 执行结果",
  "duration": "1m30s"
}

// 失败
{
  "success": false,
  "tool": "frontend",
  "error": "错误信息",
  "error_kind": "idle_timeout | timeout | ..."
}

范围边界

Frontend 专注于 UI/UX 实现，以下任务应路由到其他代理：

会话复用

保存 SESSION_ID 以便多轮对话，持续优化 UI。