Anti Slop Image Direction

anti-slop-image-direction

Generated reference images break a model out of its default layouts (centered hero over dark mesh, three equal cards). They are also paid, slow, and full of the same tells we ban. This skill keeps the benefit and drops the risk: images are an opt-in direction aid, distilled into a written brief, and the mockup loop's gates still decide.

Authority: advisory. Findings feed the frontend-mockup-loop FIX step and never override a WCAG-AA or severity gate. The direction brief is one input to GROUND; documented public rules and the WCAG gates still win over anything an image suggests.

When it applies

All of these must hold, otherwise generate nothing:

1. The declared profile (anti-slop-frontend Design Read) is marketing or new-site.
2. The user explicitly asked for image direction (or passed an explicit flag).
3. The user confirmed the plan in step 1.

Image direction is forbidden for product-ui. When asked for a dashboard, admin panel, editor or any app screen, refuse image generation, say that image direction does not apply to product UI, and offer a text-only direction brief instead.

Images are experimental; the text brief is primary

The text-only brief (see Fallback) is the primary, always-available path. Images are an experimental extra. pi-nano-banana ships as a TypeScript bin: a global npm / pi install copy does not run as a plain command (ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING). Resolve the runner like this:

Probe: run $NB with no arguments; it prints a usage: pi-nano-banana ... line. No usage line → the backend is unavailable → Fallback.

Never run an unpinned npx tsx outside the monorepo: npx would fetch whatever tsx the registry serves and execute it with your permissions.

Backends: gemini (default, needs GEMINI_API_KEY in the environment or a .env) or pi (--backend pi, an OpenRouter credential inside pi; a different bill).

Procedure

1. Plan, then confirm

• Resolve <mockupDir> the same way the mockup loop's MOCKUP step does: in the pi-agent-dashboard repo, openspec/changes/<name>/mockups/ when a change exists, else mockups/<slug>/; elsewhere, the loop's mockup directory. References go in <mockupDir>/refs/.
• List the page sections. Plan one image per section.
• Pick the variation axes for each section (below).
• Confirm with ask_user, stating: the image count, the backend (gemini or pi), and that generation is paid. No confirmation → generate nothing.
• Headless rule: interactivity is judged by whether the ask_user tool is in your tool list. If it is absent (subagent, CI, headless run), the run is headless: generate nothing and write the text-only brief.

2. Generate

• One image per planned section, using only the backend named in the confirmed plan:

  $NB "<prompt>" --output <mockupDir>/refs/<nn>-<section>.png            # gemini
  $NB "<prompt>" --output <mockupDir>/refs/<nn>-<section>.png --backend pi

• A backend change requires a new confirmation. If the confirmed backend fails (e.g. Gemini key missing) and the other one is available, stop, re-plan naming the new backend, and ask again. Never switch the backend silently.

• Re-generating an image, or adding images beyond the confirmed count, also needs a new confirmation.

• Every prompt carries its section's variation axes and the Part A bans: no purple/violet glow, no neon gradient, no div-style fake dashboard, no stock "Jane Doe" faces, no em-dashes in any rendered text.

• Describe copy, never quote it: "a short two-line headline about release speed", not the headline itself.

3. Analyze → refs/direction.md

Read every image and write <mockupDir>/refs/direction.md with, per section and for the set:

• Layout family and composition anchor.
• Spacing rhythm (tight / regular / airy, section scale).
• Palette as hex values sampled from the image.
• Type character (geometric sans, grotesk, mono, editorial serif, ...).
• Observed tells: every Part A tell seen in an image (e.g. AI-purple glow, fake UI panel, pure black). Observed tells are listed and excluded: they never carry into the palette or layout direction.
• Consistency across images: one neutral temperature, one accent family.