# 30x Image

> |

- **Type:** Skill
- **Install:** `agentstack add skill-norahe0304-art-30x-image-30x-image`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [norahe0304-art](https://agentstack.voostack.com/s/norahe0304-art)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [norahe0304-art](https://github.com/norahe0304-art)
- **Source:** https://github.com/norahe0304-art/30x-image/tree/main/skills/30x-image

## Install

```sh
agentstack add skill-norahe0304-art-30x-image-30x-image
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 30x-image — Brand-driven marketing imagery via Codex

You are the operator of `30x-image`, a Codex skill that produces on-brand
marketing images via the built-in `image_generation` tool. You have access to:

- A library of `examples//DESIGN.md` files containing brand profiles
  (VoltAgent 9-section format + YAML frontmatter token block + `taste:` block).
- A `references/` library with: 7-template prompt taxonomy, combinatorial
  variation axes per template, and anti-slop banned rules.
- The Codex built-in `image_generation` tool — no API key needed.

## Quickstart — onboard the user when they invoke the skill

If the user just invoked `30x-image` without a clear jobspec (e.g. "use
30x-image" / "/30x-image" / vague brief), **surface this menu BEFORE
asking parameters one at a time**. Most users don't know what's available
until they see it.

**MANDATORY for the Quickstart response — do NOT abbreviate or drop any
of these four blocks:**

1. **The full 8-template table** — copy it literally with the "What it
   makes" column AND the "Default size" column. Bare template names
   (e.g. just `logo, ad-creative, slide, ...`) are NOT acceptable —
   users need to see what each makes to choose.
2. **BOTH brand paths** — Path A (existing brand, name one of the 59
   pre-built) AND Path B (your own brand via init mode). Never show only
   Path A. Path B is what makes 30x-image work for new brands not in the
   public library — dropping it cuts off half the user base.
3. **The full categorized brand list** (AI/Tooling + SaaS/Product +
   Fintech/Crypto + Consumer/Lifestyle + Auto/Hardware) — literally
   listed, not paraphrased to "60+ brands available".
4. **One concrete copy-paste example** — the Stripe ad-creative
   jobspec (or equivalent) so user sees the exact shape of input.

> **First time? Just try a popular brand.** `npx getdesign list` ships
> with 60+ ready-to-use brand profiles — Stripe, Linear, Notion, Apple,
> Tesla, Nike, Spotify, Starbucks, Figma, Cursor, Claude, and more. Pick
> any one you recognize, run a 5-minute test (e.g. `template: ad-creative`
> with that brand), and see what 30x-image actually does on a brand you
> already have a feel for. Way faster than describing your own brand
> from scratch on the first try.

**Response language:** mirror the user's conversation language (English
brief → English menu, Chinese brief → Chinese menu, etc.). BUT keep the
following as English literals in any language: template IDs (`logo` /
`ad-creative` / `slide` / `product-mockup` / `marketing-with-text` /
`lighting-transform` / `scene-with-person` / `carousel`), command syntax
(`npx getdesign list` / `npx getdesign add `), file paths, and
frontmatter field names (`template:` / `subject:` / `copy:` / `taste:` /
etc.). The prose around them translates; the technical identifiers don't.
This is separate from in-image copy language — that follows the user's
explicit jobspec / DESIGN.md / brief instruction.

### Minimal command shape

```
Use 30x-image. Generate a {template} for {brand}.
Brief: {subject + tagline + optional CTA + any size override}
DESIGN.md: {path or `npx getdesign add `}
```

### The 8 templates (pick the closest one)

| Template | What it makes | Default size |
|----------|---------------|--------------|
| `logo` | NEW original mark for a brand (NOT a copy of trademarked logos) | 1024×1024 |
| `ad-creative` | Polished social/digital ad with optional tagline | 1024×1536 |
| `slide` | Single deck slide — pitch / data / metric | 1536×864 |
| `product-mockup` | Product on clean background with realistic shadow | 1536×1024 |
| `marketing-with-text` | Billboard / poster / packaging with verbatim copy | 1024×1536 |
| `lighting-transform` | Re-stage existing image for new lighting/weather (`action=edit`) | source-preserve |
| `scene-with-person` | Insert person into new scene (`action=edit`) | 1536×1024 |
| `carousel` | LinkedIn/social carousel, 6-10 slides — N SEPARATE PNG files, never a composite | 1024×1024 or 1024×1280 |

### Two paths to a DESIGN.md

**Path A — Use an existing brand** (fastest, best for testing)
Just name the brand — Stripe, Linear, Notion, Apple, Tesla, Nike, Spotify,
Starbucks, Coinbase, Figma, Cursor, Claude, and 50+ more. The agent pulls
the brand profile automatically (~30 seconds, no command for the user to
run).

**Path B — Generate a DESIGN.md for your own brand**
Hand the agent whatever you have — URL, description, screenshot, Figma
file, Tailwind config, tokens.json, CSS, or any combination. The agent
runs init mode (Mode 1 below) and synthesizes a 9-section DESIGN.md
shaped like the Stripe canonical reference.

### Copy-paste example (Stripe ad-creative)

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

DESIGN.md path: ~/.agents/skills/30x-image/examples/awesome-vendor/stripe/DESIGN.md

Jobspec:
  template: ad-creative
  subject: Q2 product launch — new fraud detection feature
  copy:
    tagline: "Stop fraud before it starts."
    cta: "Try it free"
  size: 1024x1536
  quality: high
  n: 4
```

When user is empty-handed, ask along these three dimensions (in any
order — flex to what they actually want):

1. **Which template?** (or: free-form is OK — if the job doesn't fit any
   of the 8 templates, the agent falls back to cookbook generic skeleton
   + brand DESIGN.md + anti-slop, with no axis commitments. Slightly less
   deterministic but valid.)
2. **Which brand?** When asking, **literally list ALL pre-built brands**
   the user can pick from (do NOT paraphrase to a generic "you can name
   any brand"). Run `npx getdesign list` to get the live full set, OR use
   this confirmed snapshot of 60 brands (verify with `npx getdesign list`
   in case the upstream library expanded):

   > **AI / ML / Models (12):** Claude, Cohere, ElevenLabs, Lovable,
   > MiniMax, Mistral.ai, NVIDIA, Ollama, OpenCode.ai, Replicate, RunwayML,
   > Together.ai
   >
   > **Dev tools / Infra / Databases (15):** Composio, Cursor, Expo,
   > HashiCorp, IBM, PostHog, Raycast, Resend, Sentry, Superhuman, Supabase,
   > MongoDB, ClickHouse, Framer, Mintlify
   >
   > **SaaS / Product / Productivity (10):** Airtable, Cal, Figma, Intercom,
   > Linear, Miro, Notion, Sanity, Shopify, Stripe
   >
   > **Fintech / Crypto (5):** Binance, Coinbase, Kraken, Mastercard, Revolut
   >
   > **Consumer / Lifestyle / Media (10):** Airbnb, Apple, Meta, Nike,
   > Pinterest, PlayStation, Spotify, Starbucks, theVerge, Uber
   >
   > **Auto / Hardware (7):** BMW, Bugatti, Ferrari, Lamborghini, Renault,
   > SpaceX, Tesla
   >
   > **Creative agency (1):** Clay
   >
   > Just name any one and the agent runs `npx getdesign add `,
   > pulling a ready DESIGN.md in ~30 seconds.

   Or for your own brand: hand the agent a URL / description / screenshot /
   Figma file / Tailwind config / tokens.json / CSS — agent runs init mode
   (Mode 1) and synthesizes a DESIGN.md.
3. **What's the brief?** Subject + tagline + optional CTA. Or for
   carousel: per-slide subject/copy. Or for `lighting-transform` /
   `scene-with-person` / `product-mockup`: an input image to edit.

After generation: if any candidate is 90% there but has one detail to fix
(typo / wrong color / artifact), use **edit mode (Mode 3)**. Just say:
"in slide-3.png, change the headline to X" or "fix the CTA button in
candidate-2.png to be Stripe purple" — agent uses gpt-image-2's
`input_image_mask` to surgically modify just that region while keeping the
rest of the image pixel-identical.

---

## Runtime requirement (check this FIRST, before anything else)

**This skill requires the `image_generation` tool (gpt-image-2 via OpenAI
Responses API).** It is NOT optional and there is no code-rendering fallback.

**Step 0 — Verify tool availability:**

Before invoking `init` / `generate` / `edit`, check whether the
`image_generation` tool is exposed in the current session. If you cannot
call `image_generation` (the tool name isn't in your tools list, or the
provider doesn't expose it), **HARD-STOP and tell the user**:

> 30x-image requires gpt-image-2 via OpenAI's `image_generation` tool, which
> isn't available in this session. Without it I cannot generate images, only
> describe or mock them in code (which defeats the entire point of this skill).
>
> To fix:
>
> 1. **Use Codex** (CLI, App, or web) instead of Claude Code — Codex exposes
>    OpenAI's `image_generation` tool natively.
> 2. **If you're on Codex but still missing the tool**: ensure your OpenAI
>    account has gpt-image-2 access (paid tier, image-gen feature flag enabled).
> 3. **If you're on Claude Code or another runtime without OpenAI tools**:
>    install an MCP server that exposes image generation (e.g. an OpenAI MCP
>    server or a fal.ai / Replicate MCP that wraps gpt-image-2 / equivalent),
>    then restart your session.
>
> I will NOT silently fall back to generating images "from code" (HTML / CSS /
> Canvas / SVG) — that produces something that looks like a webpage rendering,
> not an on-brand marketing image, which is the opposite of what this skill
> exists to do.

**Forbidden fallbacks (do not do these):**

- Render the image with HTML / CSS / Canvas / SVG
- Compose images by stitching local assets / clip art
- Suggest the user "screenshot the agent's description"
- Generate a different artifact (e.g. a markdown spec) and call it the result

If the user wants ANY of those alternative outputs, that's a different ask
and they should explicitly request it. The 30x-image skill produces ONLY
gpt-image-2 generated PNGs. No exceptions.

---

## Three modes

### Mode 1: `init` — build a DESIGN.md from any input source

Multi-source input: URL / description / screenshot / Figma Variables /
Tailwind config / tokens.json / CSS custom props / existing DESIGN.md /
`npx getdesign add `. Output: a complete DESIGN.md in **our 9-section
format** (matching `examples/awesome-vendor/stripe/DESIGN.md` shape, NOT
Google's 8-section spec — we extend with `## 8. Responsive Behavior` and
keep our own section ordering). Saved to:
- `$HOME/.30x-image/profiles//DESIGN.md` if profile dir exists
- otherwise `./DESIGN.md` in cwd

#### Procedure

**Step 1 — Pick the generation path (priority order):**

1. **`npx getdesign add `** — if user's brand is in the 60+ public
   library (Stripe / Linear / Notion / Apple / Tesla / Nike / Spotify /
   Starbucks / etc.), pull the ready DESIGN.md. **This is the highest
   quality path** — use it whenever possible. Augment with a `taste:` block
   (see Step 3).

2. **Stitch MCP** — Google's free official tool (350 generations/month),
   handles URL / screenshot / description natively. Setup:
   - User generates an API Key from Stitch Settings (https://stitch.withgoogle.com)
     → API section
   - User installs Stitch MCP per Stitch's official docs (search "Stitch MCP
     setup") and provides the API Key to their Codex session
   - User restarts Codex; agent now has Stitch MCP available
   - Agent calls Stitch MCP with the user's input (URL / screenshot /
     description), receives a DESIGN.md, normalizes it to our 9-section
     format (see Step 2)
   - **Fallback if user can't / won't set up Stitch:** drop directly to LLM
     init (path 3 below). Don't block on Stitch.

3. **LLM init (agent self-synthesis)** — when neither getdesign nor Stitch
   applies (or user is in a hurry). Agent reads the input source and
   writes a DESIGN.md from scratch following the Stripe DESIGN.md shape:
   - **URL** → fetch the page; extract palette from CSS / ``;
     extract typography from `font-family` declarations; take a screenshot
     and visually verify atmosphere; write 9 sections of prose
   - **Description** → LLM-only inference; lower confidence; mandatory
     `# auto-inferred, please review` markers on every value
   - **Screenshot only** → vision-LLM extracts colors + typography vibes
   - **Tailwind config / tokens.json / CSS custom props** → direct parse
     into frontmatter, then LLM writes prose Sections 1-8 grounded in those
     tokens
   - **Figma Variables** → REST API call (user-supplied token), parse
     variables into frontmatter, then LLM prose
   - **Existing DESIGN.md (Google format / external source)** → convert
     section names to our 9-section format, augment with `taste:` block

**Step 2 — Output structure (always our 9-section format):**

```yaml
---
version: alpha
name: 
description: 
colors:
  primary: 
  secondary: 
  ...
typography:
  headline-display:
    fontFamily: 
    fontSize: 
    fontWeight: 
    ...
rounded: { sm: ..., md: ..., lg: ..., full: ... }
spacing: { xs: ..., sm: ..., md: ..., lg: ..., xl: ... }
components:
  button-primary: { ... }
taste:
  variance: 
  density: 
  art_direction: 
  spacing: 
  imagery_realism: 
  text_density_in_image: 
---

# Design System Inspired by 

## 1. Visual Theme & Atmosphere
[2-3 paragraphs of brand atmosphere prose — what does this brand FEEL like?]

## 2. Color Palette & Roles
[Every color from frontmatter named + assigned a role]

## 3. Typography Rules
[Font family + hierarchy table + principles]

## 4. Component Stylings
[Buttons / cards / badges / inputs / nav specs]

## 5. Layout Principles
[Spacing system / grid / whitespace philosophy / radius scale]

## 6. Depth & Elevation
[Shadow system + decorative depth]

## 7. Do's and Don'ts
[Lists of explicit prescriptions and prohibitions]

## 8. Responsive Behavior
[Breakpoints / touch targets / collapsing strategy]

## 9. Agent Prompt Guide
[OPTIONAL — leave this empty or omit for new brands. Section 9 is
redundant: frontmatter + Sections 1/2/3/7 are sufficient for axis-driven
prompt assembly. See memory/30x-image-section9-redundant.md.]
```

**Step 3 — Infer the `taste:` block:**

Source files give colors / typography / spacing (objective) but the 5-7
numeric `taste:` parameters are subjective brand judgment. Agent strategy:

- Read all available evidence (frontmatter values, prose sections,
  screenshots if any)
- Score each parameter 1-10 with a brief rationale
- Mark each as `# auto-inferred, please review` so user knows to verify
- Default scoring rubric (in comments):
  - `variance`: 1=perfectly symmetric / 10=highly asymmetric
  - `density`: 1=airy whitespace / 10=info-packed
  - `art_direction`: 1=safe commercial / 10=bold experimental
  - `spacing`: 1=tight / 10=generous breathing room
  - `imagery_realism`: 1=flat illustration / 10=editorial photoreal
  - `text_density_in_image`: 1=minimal text / 10=copy-heavy

**Step 4 — Validate with `@google/design.md` lint:**

After writing the DESIGN.md, run:
```
npx @google/design.md lint 
```

Surface findings to the user, prioritized:
- `error`: broken-ref (token references that don't resolve) — must fix
- `warning`: missing-primary / contrast-ratio / orphaned-tokens / section-order — flag
- `info`: token-summary — show to user

If `broken-ref` errors appear, attempt one auto-fix pass (resolve missing
references using nearest token), then re-lint. If still broken, surface
to user with the JSON findings and ask for guidance.

**Step 5 — Report to user:**

- Path of the saved DESIGN.md
- Quality summary: "Generated via {getdesign / Stitch / LLM-init}; lint:
  {N errors, M warnings}; auto-inferred fields: {list}"
- Suggested next step: "Run `30x-image generate template=ad-creative
  brand=` to test this DESIGN.md immediately"
- For LLM-init paths: explicitly tell user "review the auto-inferred
  fields (`taste:` block + Section 7 Don't list) before committing to
  this profile — the lower the input fidelity, the more guesswork"

### Mode 2: `generate` — produce on-brand image (M0/M1 focus)
Read DESIGN.md + jobspec → assemble prompt with combinatorial axes + anti-slop
banned → invoke `image_generation` tool → save image + manifest.

### Mode 3: `edit` — surgical region edit on an already-generated image (M3)
Take an existing PNG (typically from a previous Mode 2 run) + a region
specifier + a new prompt → produce a new PNG where ONLY the specified
region has changed, all other pixels pre

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [norahe0304-art](https://github.com/norahe0304-art)
- **Source:** [norahe0304-art/30x-image](https://github.com/norahe0304-art/30x-image)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** yes
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-norahe0304-art-30x-image-30x-image
- Seller: https://agentstack.voostack.com/s/norahe0304-art
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.