Frontend UI/UX Engineer

角色定位

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

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

触发场景

场景	示例
新建页面/组件	"创建一个登录页面"
样式优化	"优化这个卡片的视觉效果"
动效开发	"添加页面切换动画"
响应式适配	"让这个布局适配移动端"
设计稿转代码	"根据这个设计稿实现界面"
UI 审查	"审查这个页面的 UI 问题"

工具参考

参数	默认值	说明
PROMPT	-	前端/UI 任务描述（必填）
cd	-	工作目录（必填）
sandbox	workspace-write	沙箱策略
timeout	180	空闲超时（秒）
max_duration	3600	总时长上限（秒）
max_retries	1	自动重试次数

设计流程

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

1. 目的

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

2. 风格选择

风格	特点
极简主义	简洁、留白、专注内容
玻璃拟态	透明、模糊、层次感
粘土拟态	柔和、圆润、3D 感
新拟态	凹凸、阴影、触感
便当盒布局	网格、卡片、模块化
野蛮主义	原始、大胆、反传统

3. 技术栈

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

Prompt 模板

新建 UI

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

UI 审查

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

样式优化

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

返回值

// 成功
{
  "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 实现，以下任务应路由到其他代理：

任务	路由
后端逻辑实现	Coder
代码审查	Reviewer
架构设计	Advisor
代码搜索	Librarian

会话复用

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