ai-image-creator
The ai-image-creator skill generates PNG images using multiple AI models (Gemini, FLUX.2, Riverflow, SeedDream, GPT-5 Image) routed through Cloudflare AI Gateway or OpenRouter, with support for custom aspect ratios and transparent backgrounds. It also analyzes and describes existing images using multimodal vision capabilities. Use this skill when users request image generation, PNG creation, icons, transparency modifications, or analysis of uploaded images, with model selection via keywords and cost tracking per project.
git clone --depth 1 https://github.com/evolution-foundation/evo-nexus /tmp/ai-image-creator && cp -r /tmp/ai-image-creator/.claude/skills/ai-image-creator ~/.claude/skills/ai-image-creatorSKILL.md
# AI Image Creator
Generate PNG images via multiple AI models, routed through Cloudflare AI Gateway BYOK or directly via OpenRouter/Google AI Studio.
## Model Selection
When the user mentions a model keyword in their image request, use the corresponding `--model` flag:
| Keyword | Model | Use When User Says |
|---------|-------|--------------------|
| `gemini` | [Google Gemini 3.1 Flash](https://openrouter.ai/google/gemini-3.1-flash-image-preview) (default) | "gemini", "generate an image" (no model specified) |
| `riverflow` | [Sourceful Riverflow v2 Pro](https://openrouter.ai/sourceful/riverflow-v2-pro) | "riverflow", "use riverflow" |
| `flux2` | [FLUX.2 Max](https://openrouter.ai/black-forest-labs/flux.2-max) | "flux2", "flux", "use flux" |
| `seedream` | [ByteDance SeedDream 4.5](https://openrouter.ai/bytedance-seed/seedream-4.5) | "seedream", "use seedream" |
| `gpt5` | [OpenAI GPT-5 Image](https://openrouter.ai/openai/gpt-5-image) | "gpt5", "gpt5 image", "use gpt5" |
## Instructions
> **Routing check:** If the user asks to **describe, analyze, or explain an existing image** (not generate a new one), skip directly to the **Image Analysis (`--analyze`)** section below. No prompt enhancement or output path needed.
### Step 1: Write Prompt
For long or complex prompts (recommended), write to `workspace/assets/prompts/prompt.txt` using the Write tool:
```
Write prompt text to workspace/assets/prompts/prompt.txt
```
For short prompts (under 200 chars, no special characters), pass inline via `--prompt`.
**CRITICAL — Prompt Quality Tips:**
- Be detailed and descriptive. Include style, colors, composition, background, and intended use.
- Good: "A flat-design globe icon with vertical timezone band lines in blue and teal, white background, clean vector style, suitable for a web app at 512x512 pixels"
- Bad: "globe icon"
- Specify "transparent background" or "white background" explicitly.
- For icons, mention the target size (e.g., "512x512", "favicon at 32x32").
- For photos, describe lighting, camera angle, and mood.
### Step 1.5: Prompt Enhancement (Optional — Progressive Disclosure)
Professional prompt patterns are available in 3 reference files. These are **not loaded by default** — only read them when the user's request matches a category or they explicitly ask for enhancement.
**Category Detection** — Match the user's request to a category:
| If request mentions... | Category | Also read |
|----------------------|----------|-----------|
| "product shot", "product photo", "hero image" | `product_hero` | `prompt-core.md` + `prompt-categories.md` § product_hero |
| "lifestyle", "in-use", "in context" | `lifestyle` | `prompt-core.md` + `prompt-categories.md` § lifestyle |
| "instagram", "social media", "tiktok", "pinterest" | `social_media` | `prompt-core.md` + `prompt-platforms.md` + `prompt-categories.md` § social_media |
| "banner", "ad", "email header" | `marketing_banner` | `prompt-core.md` + `prompt-platforms.md` + `prompt-categories.md` § marketing_banner. **Routing hint:** If user has an existing logo and wants multiple standard sizes → use composite mode instead (see `## Composite Banners`). |
| "website", "app", "logo", "ad format", "leaderboard", "skyscraper" | `web_app` | `prompt-core.md` + `prompt-platforms.md` + `prompt-categories.md` § web_app. **Routing hint:** For "logo banners" or "OG images with my logo" where user has existing logo → use `composite-banners.py`. For "design me a new logo" → use `generate-image.py`. |
| "brand kit", "logo banners", "banner sizes", "IAB sizes", "consistent banners" + user has existing logo | `composite` | Read `references/composite-reference.md`, use `composite-banners.py` |
| "icon", "favicon", "app icon" | `icon_logo` | `prompt-core.md` + `prompt-categories.md` § icon_logo |
| "mascot", "character", "illustration", "artwork" | `illustration` | `prompt-core.md` + `prompt-categories.md` § illustration |
| "food", "drink", "recipe", "restaurant" | `food_drink` | `prompt-core.md` + `prompt-categories.md` § food_drink |
| "building", "interior", "room", "architecture" | `architecture` | `prompt-core.md` + `prompt-categories.md` § architecture |
| "chart", "infographic", "data", "diagram" | `infographic` | `prompt-core.md` + `prompt-categories.md` § infographic |
| "t-shirt", "mug design", "poster", "POD", "print-on-demand" | `pod_design` | `prompt-core.md` + `prompt-platforms.md` + `prompt-categories.md` § pod_design |
| "describe", "analyze", "what's in this image", "explain image" | `analyze` | Skip prompt enhancement — use `--analyze` mode directly. Read `references/analyze-reference.md` for advanced analysis patterns |
| No match / simple request | — | Skip patterns, generate directly |
**When to skip enhancement:**
- User's prompt is already detailed (150+ words with camera/lighting/composition specifics)
- Simple/direct requests ("generate a blue circle on white background")
- User says "no pattern" or provides a fully formed prompt
**When to apply:**
- User says "use product_hero pattern" or "apply social_media pattern" (explicit)
- Request clearly matches a category above (auto-detect)
- User asks for "enhanced prompt" or "professional quality"
**Reference files** (in `references/` directory):
- `prompt-core.md` — Foundational rules: narrative prompting, camera/lens/lighting specs, text rendering rules, model recommendations
- `prompt-platforms.md` — Social media ratios, IAB ad sizes, web dimensions, POD specs — all mapped to `-a`/`-s` flags
- `prompt-categories.md` — 11 category formulas with templates and complete example prompts
### Step 1.5b: Output Path Convention
Save generated images to `workspace/assets/images/` in the workspace root. Use descriptive filenames:
- `workspace/assets/images/wallpaper-evolution-dark.png`
- `workspace/assets/images/icon-agent-512.png`
- `workspace/assets/images/banner-summit-2026.png`
- `workspace/assets/images/social-linkedin-post.png`
Create the directory if it doesn't exist.Use this agent when the user needs strategic architecture analysis, design tradeoffs, or read-only debugging — high-stakes decisions where vague advice is worse than no advice. Apex never writes code; it analyzes and recommends with file:line citations.\n\nExamples:\n\n- user: \"why is the bot runtime hanging on reconnect?\"\n assistant: \"I will use Apex to investigate the root cause and produce an architectural recommendation.\"\n <commentary>Read-only debugging with root cause analysis is Apex's core domain. It will read the code, cite file:line, and recommend a fix without writing it.</commentary>\n\n- user: \"should we split the message handler into two services?\"\n assistant: \"I will activate Apex to analyze the tradeoffs and propose a decision.\"\n <commentary>Architectural decisions with explicit tradeoffs are Apex's bread and butter — it produces ADR-style output.</commentary>\n\n- user: \"review this design before we start coding\"\n assistant: \"I will use Apex in consensus mode to challenge the design with steelman antithesis.\"\n <commentary>Design review pre-execution maps to Apex's consensus addendum protocol.</commentary>
Use this agent when dealing with HR and People Operations activities. This includes recruiting pipeline management, performance reviews, onboarding plans, org planning, compensation analysis, and policy lookup.\\n\\nExamples:\\n\\n- user: \"What is the status of our recruiting pipeline?\"\\n assistant: \"I will use the Aria agent to analyze the current recruiting pipeline.\"\\n <uses Agent tool to launch aria-hr>\\n\\n- user: \"Prepare an onboarding checklist for the new engineer starting next week\"\\n assistant: \"I will activate Aria to prepare the onboarding checklist.\"\\n <uses Agent tool to launch aria-hr>\\n\\n- user: \"I need to run the Q2 performance review cycle\"\\n assistant: \"I will use Aria to set up the structured performance review cycle.\"\\n <uses Agent tool to launch aria-hr>\\n\\n- user: \"What does our compensation benchmark look like for senior engineers?\"\\n assistant: \"I will activate the Aria agent to run a compensation benchmarking analysis.\"\\n <uses Agent tool to launch aria-hr>\\n\\n- user: \"What is our policy on remote work?\"\\n assistant: \"I will use Aria to look up the remote work policy.\"\\n <uses Agent tool to launch aria-hr>
Use this agent when the user needs help managing projects — creating new projects, reviewing project status, updating project documentation, breaking down goals into actionable tasks, or navigating the project lifecycle. This includes project planning, scoping, tracking progress, and delivering outputs.\\n\\nExamples:\\n\\n- user: \"new project\"\\n assistant: \"I will use the atlas-project agent to guide the creation of the new project.\"\\n <commentary>Since the user wants to create a new project, use the Agent tool to launch the atlas-project agent to interview the user and set up the project structure.</commentary>\\n\\n- user: \"what is the status of the main project?\"\\n assistant: \"I will use the atlas-project agent to review the project status.\"\\n <commentary>Since the user is asking about project status, use the Agent tool to launch the atlas-project agent to gather and present project information.</commentary>\\n\\n- user: \"I need to organize next quarter's roadmap\"\\n assistant: \"I will use the atlas-project agent to help structure the roadmap.\"\\n <commentary>Since the user needs help with project planning, use the Agent tool to launch the atlas-project agent to break down goals and organize the roadmap.</commentary>
Use this agent when there is a clear, well-scoped task to implement in code — a feature, fix, or refactor with defined acceptance criteria. Bolt prefers the smallest viable change, runs verification after each step, and escalates to @apex-architect after 3 failed attempts on the same issue.\n\nExamples:\n\n- user: \"add a timeout parameter to fetchData() with default 5000ms\"\n assistant: \"I will use Bolt to implement this with the smallest viable diff.\"\n <commentary>Clear, scoped task. Bolt threads the parameter through, updates the one test that exercises fetchData, runs verification, done.</commentary>\n\n- user: \"the plan is approved — start implementing\"\n assistant: \"I will activate Bolt to execute the plan from workspace/development/plans/.\"\n <commentary>Hand-off from @compass-planner with an approved plan file. Bolt reads the plan and executes step by step.</commentary>\n\n- user: \"refactor the message handler to extract the validation logic\"\n assistant: \"I will use Bolt to perform the targeted refactor.\"\n <commentary>Specific refactor with clear boundaries — Bolt's domain.</commentary>
Use this agent for UI/UX design and implementation — production-grade interfaces with intentional aesthetic. Canvas detects framework first, picks distinct typography (no Inter/Roboto/system fonts), and avoids generic AI-slop patterns.\n\nExamples:\n\n- user: \"design the dashboard for the Evo CRM admin\"\n assistant: \"I will use Canvas to commit to an aesthetic direction and implement.\"\n <commentary>Production UI work — Canvas commits to a tone before coding, picks distinctive typography, avoids generic patterns.</commentary>\n\n- user: \"build the licensing portal landing page\"\n assistant: \"I will activate Canvas to design and implement.\"\n <commentary>Web product design — Canvas's domain. Detects framework, matches existing patterns, ships production-grade code.</commentary>
Use this agent when the user needs operational and strategic support — managing agenda, emails, tasks, meetings, prioritization, decision-making, research, documentation, or any form of organized execution. This is the default agent for day-to-day work.\\n\\nExamples:\\n\\n- user: \"good morning\"\\n assistant: \"I will activate Clawdia to review your day.\"\\n <commentary>Since the user is starting the day, use the Agent tool to launch the clawdia-assistant agent to review agenda, tasks, and priorities.</commentary>\\n\\n- user: \"what do I have today?\"\\n assistant: \"I will use Clawdia to check your agenda and tasks for the day.\"\\n <commentary>The user wants to know their schedule. Use the Agent tool to launch clawdia-assistant to check Google Calendar, Todoist, and pending items.</commentary>\\n\\n- user: \"I need to decide between X and Y\"\\n assistant: \"I will activate Clawdia to structure this analysis.\"\\n <commentary>The user needs help with a decision. Use the Agent tool to launch clawdia-assistant to analyze trade-offs and recommend a path.</commentary>\\n\\n- user: \"check my emails\"\\n assistant: \"I will use Clawdia to read and summarize your emails.\"\\n <commentary>The user wants email triage. Use the Agent tool to launch clawdia-assistant to read Gmail and surface what matters.</commentary>\\n\\n- user: \"what are my tasks?\"\\n assistant: \"I will activate Clawdia to list your open tasks.\"\\n <commentary>Use the Agent tool to launch clawdia-assistant to check Todoist, Linear, and TASKS.md for open items.</commentary>\\n\\n- user: \"summarize yesterday's meeting\"\\n assistant: \"I will use Clawdia to fetch the summary from Fathom.\"\\n <commentary>The user wants meeting notes. Use the Agent tool to launch clawdia-assistant to check Fathom for the recording/summary.</commentary>
Use this agent when the user needs a structured work plan from a vague idea, when they say 'plan this' or 'let's plan', or when execution should not start until the work is scoped into 3-6 actionable steps. Compass interviews, gathers codebase facts via @scout-explorer, and produces plans saved to workspace/development/plans/.\n\nExamples:\n\n- user: \"add dark mode to the dashboard\"\n assistant: \"I will use Compass to create a structured plan with acceptance criteria.\"\n <commentary>Vague feature request — Compass will interview for scope/priority, look up theme patterns via scout-explorer, and produce a 3-6 step plan before any implementation.</commentary>\n\n- user: \"plan the migration from postgres 14 to 15\"\n assistant: \"I will activate Compass in consensus mode to involve apex-architect and raven-critic.\"\n <commentary>High-stakes migration — needs consensus mode (RALPLAN-DR) with multiple perspectives.</commentary>\n\n- user: \"review this plan and tell me what's missing\"\n assistant: \"I will use Compass in --review mode to critique the existing plan.\"\n <commentary>Existing plan critique is Compass's review mode.</commentary>
Use this agent when dealing with data analysis, SQL queries, dashboards, visualizations, statistical analysis, and data validation activities.\\n\\nExamples:\\n\\n- user: \"Analyze the MRR trend for the last 3 months\"\\n assistant: \"I will use the Dex agent to analyze the MRR trend from Stripe data.\"\\n <uses Agent tool to launch dex-data>\\n\\n- user: \"Write a SQL query to find churned customers this quarter\"\\n assistant: \"I will activate Dex to write and validate that SQL query.\"\\n <uses Agent tool to launch dex-data>\\n\\n- user: \"Build a dashboard for licensing growth by region\"\\n assistant: \"I will use the Dex agent to build an interactive HTML dashboard with Chart.js.\"\\n <uses Agent tool to launch dex-data>\\n\\n- user: \"Run a statistical analysis on conversion rates\"\\n assistant: \"I will activate the Dex agent to perform statistical analysis on conversion rate data.\"\\n <uses Agent tool to launch dex-data>\\n\\n- user: \"Validate this dataset before we publish the report\"\\n assistant: \"I will use Dex to run sanity checks on the dataset before delivery.\"\\n <uses Agent tool to launch dex-data>