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

Existing brand — name any of 60+ pre-built profiles (Stripe / Linear
/ Notion / Apple / Tesla / Nike / Spotify / Starbucks / etc.). Agent
pulls automatically via npx getdesign add <brand>.
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:

Cookbook templates — 8 prompt skeletons with default tool params,
sourced from OpenAI's official cookbook plus a 30x-image extension for
carousel.
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.
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
└── skills/
    └── 30x-image/       # the skill — installed into ~/.claude/skills/30x-image/
        ├── SKILL.md     # Codex / Claude Code skill entry
        ├── README.md    # in-skill docs
        ├── RUN-IN-CODEX.md
        ├── 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