Gemini UI Reviewer

Gemini UI Reviewer

Use Gemini's superior frontend aesthetic sense to review and optimize UI/CSS design. This skill leverages Gemini CLI for design review and CSS generation, while Claude handles integration, deployment, and engineering context.

Philosophy

• Gemini designs, Claude integrates — Gemini outputs polished CSS, Claude handles codebase integration
• Screenshot-driven review — Always send actual screenshots, not just code
• Concrete suggestions — Ask for specific CSS changes, not abstract feedback

Prerequisites

• gemini CLI installed and authenticated (which gemini)
• Chrome DevTools MCP for screenshots (optional, can use local file rendering)

Workflow

Step 1: Capture Current State

Take screenshots of the pages to review. Prefer local file rendering if the site is behind auth:

# Use Chrome MCP to navigate and screenshot
# navigate_page → file:///path/to/page.html
# take_screenshot → /tmp/screenshot.png

Step 2: Send to Gemini for Review

Use gemini -p (headless mode) with the CSS piped via stdin:

cat /path/to/style.css | gemini -p "你是一个资深 UI/UX 设计师，擅长现代 Web 设计和 Google Material Design。

请审阅以下 CSS 并给出具体改进建议。重点关注：
1. 视觉层次感（信息密度、留白、字号梯度）
2. 色彩运用（accent 色用法、状态色）
3. 交互反馈（hover、active、focus 状态）
4. 组件一致性（卡片、标签、按钮风格）
5. 排版（字体、行高、间距节奏感）

用中文回答，直接给结论和代码。" 2>&1 | grep -v '^\[' | grep -v '^unknown format' | grep -v '^Loading extension'

Step 3: Let Gemini Generate Complete CSS

Based on the review feedback, ask Gemini to output a complete replacement CSS:

cat /path/to/style.css | gemini -p "你是一个资深 UI/UX 设计师和前端工程师。

任务：请直接输出一份完整的、优化后的 CSS 文件。

设计目标：[描述目标风格]

你之前给的审阅意见（请全部落实）：
[粘贴上一步的建议要点]

额外要求：
- 保留所有现有的 CSS 类名
- 保留所有 CSS 变量名
- 输出完整的 CSS 文件内容，不要省略
- 不要输出解释文字，只输出纯 CSS 代码" 2>&1 | grep -v '^\[' | grep -v '^unknown format' | grep -v '^Loading extension'

Step 4: Claude Integrates

Claude handles:

1. Write the Gemini-generated CSS to the target file
2. Update any inline styles in Python/JS files that conflict
3. Run rebuild pipeline
4. Take new screenshots for comparison
5. Deploy

Step 5: Verify with Screenshots

Take new screenshots and compare before/after. Optionally send back to Gemini for a second pass.

Gemini CLI Notes

• Headless mode: gemini -p "prompt" — non-interactive, returns output and exits
• Pipe input: cat file | gemini -p "prompt" — file content becomes context
• Filter noise: 2>&1 | grep -v '^\[' | grep -v '^unknown format' | grep -v '^Loading extension' — removes extension loading warnings
• Screenshots: Gemini CLI can't receive image files in headless pipe mode. For visual review, describe the UI in text or use the interactive gemini with file arguments
• Timeout: Gemini can take 30-60s for complex CSS generation, set timeout accordingly

Prompt Templates

Quick Review (get suggestions only)

你是资深 UI/UX 设计师。审阅这个 CSS，给出 5-8 条具体改进建议。
重点：层次感、色彩、交互反馈、组件一致性、排版。
直接给结论和代码片段，不要废话。用中文。

Full Rewrite (get complete CSS)

你是资深前端工程师。基于以下审阅意见，直接输出一份完整优化后的 CSS 文件。
保留所有类名和变量名。只输出纯 CSS，不要解释。

Style Transfer (match a reference)

你是资深 UI/UX 设计师。我要把这个 CSS 改成 [目标风格] 的风格。
参照 [参考项目/网站] 的设计语言。直接输出完整替换 CSS。

Example Session

User: 让 Gemini review 一下 Wiki 的 UI

Jarvis:
1. Chrome MCP 截图 index/health/entity 页面
2. cat style.css | gemini -p "[review prompt]" → 收到 6 条建议
3. 展示建议给用户，确认后：
4. cat style.css | gemini -p "[rewrite prompt with suggestions]" → 完整 CSS
5. Write CSS → rebuild → deploy → 截图对比