saas-visual-generator

SaaS Visual Generator

You are Step 2 of the flow. You turn brand.json + saas-context.json into actual visual assets via the Higgsfield MCP and write a brand-guidelines.md.

Inputs (must exist)

• brands/<slug>/brand.json
• brands/<slug>/saas-context.json

If either is missing, hand back to saas-brand-intake.

Outputs (final state after step 2 completes)

brands/<slug>/
├── assets/
│   ├── logo/
│   │   ├── v1/color.png
│   │   ├── v2/color.png
│   │   ├── v3/color.png
│   │   └── <primary>/                   # only the user-picked variant gets crops
│   │       ├── color.png                # (same as the draft above)
│   │       ├── mono.png
│   │       └── favicon.png
│   └── moodboard/                       # brand identity board (9 tiles)
│       ├── 01-logo-primary.png          # uses the picked logo as image input
│       ├── 02-logo-dark.png             # uses the picked logo as image input
│       ├── 03-app-icon.png              # derived from the picked logo
│       ├── 04-color-palette.png         # swatches with exact hex labels
│       ├── 05-typography.png            # display + body specimen
│       ├── 06-avatar-favicon.png        # picked logo at 4 sizes
│       ├── 07-ui-system.png             # buttons + form preview
│       ├── 08-direction.png             # photography / illustration direction
│       └── 09-stationery.png            # picked logo on business card
├── brand-guidelines.md                  # editable source (focused on picked primary only)
├── brand-guidelines.html                # intermediate render
└── brand-guidelines.pdf                 # ◄ THE SHIPPING DELIVERABLE

All image generation uses gpt_image_2 (locked) — see ../higgsfield-recipes/prompts.md for the model selection and default params.

Flow shape (token-efficient)

2a. Generate 3 logo COLOR drafts only          (3 calls)
2b. User picks primary via AskUserQuestion     (0 calls — just a prompt)
2c. Generate mono + favicon for ONLY picked    (2 calls)
2d. Generate 9-tile identity board, with the
    picked logo passed as `medias` reference   (9 calls)
2e. Extract palette + type, write guidelines   (0 calls)
                                       ------
                                       14 calls total

Old flow was 22 calls (4 logos × 3 crops + 9 tiles + 1 hero poster). The hero poster moved to step 4. Step 2 alone went from 21 → 14 image calls. ~33% credit savings AND the identity board feels far more cohesive because the tiles reference the EXACT picked logo, not a "logo for X" description.

How to generate

2a. Logo drafts — 3 color variants only

For each variant, call mcp__higgsfield__generate_image once (color only — no mono, no favicon yet):

• Prompt built from brand.json (name, mood, color anchors, logoType, tone) — see logo-prompts.md.
• Distinct approach per variant — variants must be meaningfully different, not minor tweaks:
  • v1 — Most literal interpretation of the chosen logoType
  • v2 — More geometric / structured (or expressive / illustrative — whichever contrasts v1)
  • v3 — Reductive / minimal alternative

Save under brands/<slug>/assets/logo/v<n>/color.png. That's 3 image calls total.

2b. User picks the primary — HARD PAUSE

Stop and ask the user. Use AskUserQuestion:

{
  "question": "Which logo should be the primary? I'll generate mono + favicon crops and the identity board around it.",
  "header": "Pick logo",
  "options": [
    { "label": "v1 — <one-line intent>", "description": "<image-relative path>" },
    { "label": "v2 — <one-line intent>", "description": "<image-relative path>" },
    { "label": "v3 — <one-line intent>", "description": "<image-relative path>" },
    { "label": "Regenerate one of them", "description": "Tell me which variant to redo and what to change" }
  ],
  "multiSelect": false
}

Do NOT proceed past this step until the user picks (or asks to regenerate). If they want a regen, route through /regen-logo v<n> for the one variant only — never redo all three.

Once the user picks, write the choice to brands/<slug>/approval.json:

{
  "approved": false,
  "primaryLogo": "v2",
  "primaryPickedAt": "<iso>"
}

approved stays false — the approval gate (Step 3) covers the assembled brand, not just the logo.

2c. Crops for the picked variant only

For the picked <primary> (e.g. v2):

• Generate mono.png — same prompt with "single-color version, pure black on white, no gradients". Save to brands/<slug>/assets/logo/<primary>/mono.png.
• Generate favicon.png — same prompt with "tight square crop, just the central mark, optimized for 32×32 legibility, no background". Save to brands/<slug>/assets/logo/<primary>/favicon.png.

2 image calls total. The other (un-picked) variants stay color-only as drafts.

2d. Brand identity board — 9 tiles, with the picked logo as input

This is not a vibes-only Pinterest board. It's a real brand identity board — the kind a brand studio would ship. Every tile leans into gpt_image_2's strength at text-in-image (hex labels, type specimens, button labels, brand name).

First, upload the picked logo as a media input so the tiles can reference the actual artwork:

1. Call mcp__higgsfield__media_upload with the path brands/<slug>/assets/logo/<primary>/color.png.
2. Call mcp__higgsfield__media_confirm to finalize.
3. Capture the returned media UUID — pass it as medias: [{ value: "<uuid>", role: "image" }] on tiles that feature the logo.

Then call mcp__higgsfield__generate_image once per tile (all model: "gpt_image_2"):

#	Tile	Uses logo input?
01	01-logo-primary.png — canonical lockup on neutral surface	✓
02	02-logo-dark.png — logo on dark/inverse surface	✓
03	03-app-icon.png — rounded-square app icon on a phone home screen	✓
04	04-color-palette.png — 5 swatches with exact hex code labels	✗
05	05-typography.png — display + body specimen with sample pitch	✗
06	06-avatar-favicon.png — mark at 4 sizes (256 / 64 / 32 / 16)	✓
07	07-ui-system.png — primary button "Join the waitlist" + secondary + input	✗
08	08-direction.png — photography or illustration direction	✗
09	09-stationery.png — business card or email signature in context	✓

See moodboard-prompts.md for the full prompt patterns + aspect ratios per tile + which ones pass the logo medias.

2e. Palette + typography extraction

After generating, look at the moodboard and propose:

• A 5-color palette with role (primary, accent, neutral-bg, neutral-fg, warning/cta), hex, usage notes.
• A 2-family typography pairing (display + body). Recommend specific fonts (Google Fonts or system-safe).

2f. Write brand-guidelines.md (editable source)

Use guidelines-template.md as the structure. Fill in:

• Logo lockup paths (relative to the brand folder)
• Color palette
• Typography
• Voice & tone (from brand.json)
• Visual personality (one paragraph synthesizing mood + palette)
• Moodboard tile list with one-line notes each

2g. Render brand-guidelines.pdf — the shipping deliverable

The PDF is the canonical brand guidelines artifact — the file the founder shares with engineers, designers, marketers, investors. It's designed (not "markdown printed to PDF"), brand-aware, focused entirely on the user-approved primary logo.

Steps:

1. Write the HTML. Use templates/brand-guidelines.html.hbs as the template. Interpolate ONLY the picked primary logo's paths (approval.json.primaryLogo's color.png / mono.png / favicon.png), the palette extracted in 2e, the typography pairing, the 9 identity-board tiles, and the voice & tone from brand.json. Save to brands/<slug>/brand-guidelines.html.

   The HTML CSS variables (--c-primary, --c-accent, --font-display, --font-body) MUST be filled with the actual brand palette + typography pairing — the PDF inherits the brand's identity.

2. Use relative paths inside the HTML. Images reference paths like assets/logo/v2/color.png and assets/moodboard/01-logo-primary.png — relative to the HTML file's own directory. Do NOT embed base64 — keeps the file small and lets the user swap assets without re-rendering.

3. Render to PDF. Run:

   "${CLAUDE_PLUGIN_ROOT}/tools/html-to-pdf.sh" \
     "brands/<slug>/brand-guidelines.html" \
     "brands/<slug>/brand-guidelines.pdf"
   

   The script uses Chrome/Chromium headless. If it's missing, the script exits with a clear install hint — surface that to the user verbatim.

4. Verify. PDF must exist and be > 50 KB (cover + asset embeds). Open size check via stat. If empty, debug the HTML in a browser first, then retry.

5. Keep the MD. brand-guidelines.md stays as the editable source. brand-guidelines.pdf is the deliverable.

End-of-step messages

After 2a (3 color drafts ready)

"Generated 3 logo drafts at brands/<slug>/assets/logo/v1..v3/color.png. Pick one and I'll generate the rest (mono, favicon, identity board) around it."

Then immediately call AskUserQuestion per step 2b.

After 2d (identity board ready)

"Logo <primary> is finalized, identity board is at brands/<slug>/assets/moodboard/. Rendering brand guidelines PDF now."

After 2g (PDF ready)

*"Brand guidelines deliverable ready:

• brands/<slug>/brand-guidelines.pdf — the shipping artifact (PDF, designed)
• brands/<slug>/brand-guidelines.md — editable source
• brands/<slug>/brand-guidelines.html — intermediate render

Reply /approve-brand to continue, or tell me what to change. (/regen-moodboard 02 for one tile, or say "switch primary to v3" to re-pick.)"*

Regeneration commands

• /regen-logo <variant> — re-generate one logo variant only (color draft). Variant id is v1, v2, or v3.
• /regen-moodboard <slot> — re-generate one tile only. Slot id like 02.
• "switch primary to v3" — re-pick the primary; agent regenerates crops + identity tiles that referenced the old logo.
• "redo all" or /generate-visuals — full re-run from scratch.

Hard rules

1. Higgsfield MCP only. If mcp__higgsfield__* tools are unavailable or return an auth error, stop and tell the user:

   "Higgsfield MCP is not authenticated. Run /mcp and authenticate higgsfield, then retry."

2. No placeholder assets. Don't generate SVG logos by hand. Don't use stock images.
3. No moodboard from text. Each tile is a real generated image.
4. Check balance first. Call mcp__higgsfield__balance once at the start. If the user has low/zero credits, surface that before running.

Delegation

The full step-2 run (3 color drafts → user pick → 2 crops → 9 identity tiles = 14 image calls, all gpt_image_2) can be delegated to agents/visual-generator.md to keep the main context light. The agent runs 2a as a single batch, hands the pick decision back to the main agent (which calls AskUserQuestion), then resumes for 2c–2f once the choice is in.

See also

• logo-prompts.md
• moodboard-prompts.md
• guidelines-template.md
• ../higgsfield-recipes/SKILL.md