thendcn/gemini-agent

Gemini Agent - AI 团队 UI 设计专家

将 UI 设计和前端开发任务委派给 Gemini (gemini-3-pro-preview)，由 Claude Code 编排和审查。

用法

/gemini-agent <UI 设计描述>
/design-ui <UI 设计描述>

也可由 Claude Code 在分析任务后自动委派（当任务涉及 UI/设计/组件/页面/布局/样式时）。

执行步骤

1. 判断当前平台：检查运行环境是 Linux/macOS 还是 Windows
   • Linux/macOS → 使用 gemini-run.sh
   • Windows → 使用 gemini-run.ps1（必须通过 powershell.exe -ExecutionPolicy Bypass -File 调用）
2. 准备 prompt 文件：将 UI 设计描述写入临时文件（推荐使用 -f / -File 参数）
3. 执行脚本：调用对应平台的包装脚本
4. 检查生成的文件：通过 git status 或 ls 查看 Gemini 生成了哪些文件

执行方式

推荐：使用 -f 文件模式传递 prompt（避免 shell 转义问题）

Linux / macOS (Bash)：

bash ~/.claude/skills/gemini-agent/scripts/gemini-run.sh -f /tmp/gemini-prompt.txt -d <工作目录>

Windows（必须使用 powershell.exe 调用 .ps1 脚本）：

powershell.exe -ExecutionPolicy Bypass -File ~/.claude/skills/gemini-agent/scripts/gemini-run.ps1 -File /tmp/gemini-prompt.txt -Dir <工作目录>

Windows 注意事项：

• Prompt 文件必须是 UTF-8 编码（无 BOM）
• 脚本已自动处理 npm/pnpm 安装的 .ps1 包装脚本兼容性问题

脚本参数

gemini-run.sh / gemini-run.ps1 [OPTIONS] [prompt...]

Bash:                                PowerShell:
  -m, --mode <yolo|prompt>             -Mode <yolo|prompt>
  --model <model>                      -Model <model>
  -d, --dir <directory>                -Dir <directory>
  -t, --timeout <seconds>              -Timeout <seconds>
  -f, --file <file>                    -File <file>

Prompt 构建指南

将用户需求转化为 Gemini 友好的 prompt 时，遵循以下结构：

1. 角色设定 - 在 prompt 开头明确要求使用 gemini-3-pro-preview 模型能力进行 UI 设计，例如：「你是 Gemini Pro，一个顶级 UI 设计师和前端开发专家，擅长创建高品质、现代化的用户界面。」
2. 任务描述 - 清晰描述要生成的 UI
3. 技术栈 - 明确框架（React/Vue/HTML）和样式方案（Tailwind/CSS）
4. 代码规范 - 语义化 HTML、可访问性、响应式、TypeScript
5. 设计风格 - 视觉要求（现代简洁、间距圆角、微交互）
6. 输出要求 - 直接生成代码，写入指定文件路径

关键：prompt 中应强调利用 Pro 模型的高级设计能力，包括精细的视觉层次、配色方案、动画细节等。

参考 references/prompt-templates.md 获取完整模板。

输出处理

Gemini 生成的文件直接写入工作目录。Claude Code 应：

1. 检查 Gemini 生成了哪些文件（通过 git status 或 ls）
2. 读取并审查生成的代码质量
3. 必要时进行微调和修正

流水线集成

作为流水线第一步（设计阶段）时：

1. Claude 分析需求，构建 UI 设计 prompt
2. 调用 gemini-run.sh（或 Windows 上的 gemini-run.ps1）生成 UI 代码
3. Claude 读取生成的文件，提取关键设计信息
4. 将 UI 设计上下文传递给下一步（codex-agent 实现业务逻辑）

输出约定

• 生成的文件应在工作目录的合理位置（如 src/components/, src/pages/）
• 文件命名遵循项目约定（PascalCase for React, kebab-case for Vue）

与 gemini-ui 的关系

gemini-agent 是 gemini-ui 的增强版：

• gemini-ui: 简单快速的 UI 生成，直接调用 gemini CLI
• gemini-agent: 完整的包装脚本、错误处理、超时控制、流水线支持

两者共存，简单任务可用 gemini-ui，复杂任务或流水线模式用 gemini-agent。

任务路由

当用户请求包含以下关键词时，应路由到 gemini-agent：

• 设计、UI、组件、页面、布局、样式、美化、前端、界面、视觉