Frontend UI/UX Engineer Skill

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。

Agent Skills: Frontend UI/UX Engineer

Install this agent skill to your local

Skill Files