30x-image

A Codex / Claude Code skill that generates on-brand marketing imagery via the built-in image_generation tool (gpt-image-2). Pairs a brand DESIGN.md profile with 8 prompt templates, combinatorial axes, and an anti-slop banned list to produce high-quality marketing creative without API keys, drift, or AI defaults.

Runtime requirement

This skill requires the OpenAI image_generation tool (gpt-image-2 via Responses API). It works out of the box in Codex (CLI, App, web).

If you're on Claude Code or another runtime without OpenAI tools, you'll need an MCP server that exposes image generation (e.g. an OpenAI MCP, or fal.ai / Replicate MCP). The skill detects when image_generation is missing and HARD-STOPS with remediation guidance, rather than falling back to HTML/CSS rendering (which would defeat the purpose).

Install

For user-global install (recommended — skill available across all projects):

cd ~ && npx skills add norahe0304-art/30x-image

For project-local install (only this project sees the skill):

cd /path/to/your/project && npx skills add norahe0304-art/30x-image

The skills CLI auto-detects scope based on cwd — run from your home directory for global, run from inside a project for local. After install, restart your Codex / Claude Code session and the skill loads automatically.

If you accidentally installed to project scope and want to move it to user-global: mv .agents/skills/30x-image ~/.agents/skills/30x-image.

Quickstart

After install, in your Codex / Claude Code session:

Use 30x-image. Generate an ad-creative for Stripe.

The agent picks the right template, pulls Stripe's brand profile, and generates 4 on-brand ad creatives in one call.

For your own brand:

Use 30x-image init for my brand.
URL: https://my-startup.com

The agent synthesizes a DESIGN.md for your brand, then you can use any of the 8 templates against it.

What it does

Takes a brand DESIGN.md (frontmatter token block + 9 markdown sections + a numeric taste: block) plus a template choice and a jobspec. Produces on-brand marketing images generated by gpt-image-2.

8 templates

| Template | What it makes | Default size | |----------|---------------|--------------| | logo | NEW original mark for a brand | 1024×1024 | | ad-creative | Polished social/digital ad | 1024×1536 | | slide | Single deck slide — pitch / data / metric | 1536×864 | | product-mockup | Product on clean background | 1536×1024 | | marketing-with-text | Billboard / poster / packaging | 1024×1536 | | lighting-transform | Re-stage existing image | source-preserve | | scene-with-person | Insert person into new scene | 1536×1024 | | carousel | LinkedIn / social carousel, 6-10 slides (N separate PNGs) | 1024×1024 / 1024×1280 |

Two paths to a brand profile

Only Stripe's profile is bundled in this repo; the other 60+ brands listed via npx getdesign list are fetched live from getdesign on request, not shipped with the skill.

1. Existing brand — name any of 60+ profiles (Stripe / Linear / Notion / Apple / Tesla / Nike / Spotify / Starbucks / etc.). Agent pulls automatically via npx getdesign add <brand>.
2. Your own brand — give the agent a URL, description, screenshot, Figma file, Tailwind config, tokens.json, or CSS. Agent runs init mode and synthesizes a 9-section DESIGN.md.

How it works

Three layers under the hood:

1. Cookbook templates — 8 prompt skeletons with default tool params, sourced from OpenAI's official cookbook plus a 30x-image extension for carousel.
2. Combinatorial axes — per-template axes (4-5 each, 33 total) with options that get committed at runtime, biased by the brand's taste: block (variance / density / art_direction / spacing / imagery_realism / text_density). Forces intent, kills AI default slop.
3. Anti-slop rules — universal banned list (no AI yellow-tint, no purple neon, no "Elevate / Unleash" copy, no pure black, no Acme/Nexus placeholders) augmented per-brand by Section 7 Don't from the brand's DESIGN.md.

Repo structure

30x-image/
├── README.md            # this file
├── LICENSE
├── RUN-IN-CODEX.md      # internal M0-M3 verification record, not shipped by the installer
└── skills/
    └── 30x-image/       # the skill — installed via `npx skills add`, which drops it in
                         # .agents/skills/30x-image/ (project) or ~/.agents/skills/30x-image/
                         # (global), then symlinks it into each agent's own skills folder
        ├── SKILL.md     # Codex / Claude Code skill entry
        ├── README.md    # in-skill docs
        ├── agents/openai.yaml
        ├── references/
        └── examples/

Status

• M0 ✅ — Stripe ad-creative end-to-end
• M1 ✅ — All 7 cookbook templates with axes; brand fidelity verified
• M1.5 ✅ — carousel template (8th, 30x-image extension) with parallel action=generate slides + Narrative Tension Curve axis
• M2 ✅ — init mode: 3-path generation (getdesign → Stitch MCP → LLM fallback), outputs 9-section format, validates with @google/design.md lint
• M3 ✅ — edit mode: surgical region edits via gpt-image-2's input_image_mask. Four region paths (natural language / bbox / user mask / global). Agent uses vision to find element bounds, generates masks programmatically, edits only the masked region while preserving the rest of the image 1:1.

License

MIT