メニュー
Get UI/UX design feedback from OpenAI by sending app screenshots. Use when asked to "review the UI", "improve the design", "make it look better", "get design feedback", or when evaluating visual quality of app screens.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Generate and iterate on weekly meal plans using the BradOS CLI. Use when asked to "plan meals", "make a meal plan", "what should I eat this week", "generate a meal plan", or any meal planning request. Handles the full workflow: generate draft, present it, iterate on feedback via critique, finalize, and produce a shopping list.
Build a new health metric history view page following the established HRV/RHR/Sleep pattern. Use when adding a new metric history screen (e.g., weight, VO2 max, body fat, steps). Handles the ViewModel, View, navigation wiring, and XcodeGen regeneration.
Aurora Glass design system for all Brad OS UI work. Use this skill whenever building, modifying, or reviewing SwiftUI views in the iOS app. Applies to: creating new screens, editing existing views, adding components, reviewing UI consistency, or any task that touches Theme.swift or visual elements. This is the single source of truth for colors, typography, spacing, glass surfaces, aurora glows, components, and interaction patterns.
| name | ui-design-review |
| description | Get UI/UX design feedback from OpenAI by sending app screenshots. Use when asked to "review the UI", "improve the design", "make it look better", "get design feedback", or when evaluating visual quality of app screens. |
| allowed-tools | Bash(node *), mcp__ios-simulator__screenshot, mcp__ios-simulator__ui_view, mcp__playwright__browser_take_screenshot |
Hand off UI design review to OpenAI's vision model by capturing screenshots and sending them for expert analysis.
The OPENAI_API_KEY environment variable must be set. If it's not set, tell the user:
Set your OpenAI API key:
export OPENAI_API_KEY=sk-...
Determine the platform and capture relevant screens:
For iOS app:
# Take a screenshot of the current simulator view
mcp__ios-simulator__screenshot --output_path /tmp/ui-review-{screen-name}.png
Capture multiple screens if reviewing a flow (e.g., list view + detail view + empty state).
ALWAYS use --output to persist the review to a markdown file. This ensures the feedback survives if the session is interrupted.
node .claude/skills/ui-design-review/scripts/review-ui.mjs \
/tmp/ui-review-*.png \
--prompt "context about what the screen shows or specific concerns" \
--output /tmp/ui-review-YYYY-MM-DD-screen-name.md
Use a descriptive filename with the date and screen name, e.g. /tmp/ui-review-2025-06-15-meal-plan.md.
Options:
--prompt "text" — Add context like "This is the meal plan screen, focus on readability"--model gpt-5.2 — Change the model (default: gpt-5.2, options: gpt-4o, gpt-5, gpt-5.2)--output path.md — Always use this. Save the full review (prompt, model, feedback) to a markdown fileAfter receiving the design feedback:
Review current iOS screen:
User: "How does this screen look? Can you get design feedback?"
→ Take screenshot → Run review script → Present findings
Review specific flow:
User: "Review the meal planning UI"
→ Navigate to meal plan screens → Capture 2-3 key screens → Run review → Present findings
Focused review:
User: "The colors feel off on this page"
→ Take screenshot → Run review with --prompt "Focus on color palette and contrast" → Present findings