UI mockup generation via Gemini image model
Generate UI mockups using Gemini's image model. Specify aspect ratios (1:1, 16:9, etc.) and resolutions (1K, 2K, 4K) to create visual designs. Use it when you need quick UI concepts, wireframes, or design mockups without leaving the terminal.
/plugin marketplace add paddo/claude-tools/plugin install gemini-tools@paddo-toolssonnetGenerate UI mockups using Gemini 3 Pro Image.
Delegate to a subagent to isolate token usage:
Task(
subagent_type: "general-purpose",
model: "haiku",
prompt: "Generate image with Gemini API. Run this bash command and return the output file path:
P=\"YOUR_PROMPT\" A=\"16:9\" R=\"2K\" O=\"/tmp/nb-$(date +%s)\"
RESP=$(curl -s \"https://generativelanguage.googleapis.com/v1beta/models/gemini-3-pro-image-preview:generateContent\" \\
-H \"x-goog-api-key: $GEMINI_API_KEY\" -H \"Content-Type: application/json\" \\
-d \"$(jq -n --arg p \"$P\" --arg a \"$A\" --arg r \"$R\" '{contents:[{parts:[{text:$p}]}],generationConfig:{responseModalities:[\"TEXT\",\"IMAGE\"],imageConfig:{aspectRatio:$a,imageSize:$r}}}')\")
IMG=$(echo \"$RESP\"|jq -r '.candidates[0].content.parts[]|select(.inlineData)|.inlineData')
[[ $(echo \"$IMG\"|jq -r '.data') == \"null\" ]] && { echo \"$RESP\"|jq -r '.error.message//.candidates[0].content.parts[].text' >&2; exit 1; }
EXT=$(echo \"$IMG\"|jq -r 'if .mimeType==\"image/png\" then \"png\" elif .mimeType==\"image/webp\" then \"webp\" else \"jpg\" end')
echo \"$IMG\"|jq -r '.data'|base64 -d > \"$O.$EXT\" && echo \"$O.$EXT\"
Return ONLY the output file path.",
description: "Generate UI mockup"
)
CRITICAL: Do NOT run the API directly via Bash - always delegate to the Task subagent. This avoids shell parsing issues with parentheses and special characters in prompts.
pngpaste /tmp/nb-input.pngopen the result for user to viewUse this agent when analyzing conversation transcripts to find behaviors worth preventing with hooks. Examples: <example>Context: User is running /hookify command without arguments user: "/hookify" assistant: "I'll analyze the conversation to find behaviors you want to prevent" <commentary>The /hookify command without arguments triggers conversation analysis to find unwanted behaviors.</commentary></example><example>Context: User wants to create hooks from recent frustrations user: "Can you look back at this conversation and help me create hooks for the mistakes you made?" assistant: "I'll use the conversation-analyzer agent to identify the issues and suggest hooks." <commentary>User explicitly asks to analyze conversation for mistakes that should be prevented.</commentary></example>