image-to-campaign-funnel-generator

Skill by ara.so — Marketing Skills collection.

Orchestrates the Higgsfield CLI to generate a complete, brand-consistent German marketing funnel from one product image: a scroll-driven landing page, 3 Instagram Reels (9:16), and a styled blog article — all derived from a single approved Brand Brief.

What it does

This is a brief-first orchestration skill that:

Conducts a short interview about the product
Writes a comprehensive Brand Brief (identity, thesis, OKLCH palette, fonts, tone, CTA, Reel angles)
Shows you the brief + all asset prompts for approval before spending credits
Builds landing page → 3 Reels → blog autonomously
Reuses the landing page hero video (reframed to 9:16) for one Reel to save costs
Runs browser QA on the landing page
Delivers everything in a structured campaign folder

Prerequisites

Required:

Higgsfield account with credits: https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus
Higgsfield CLI installed and authenticated (higgsfield auth login)
Browser + static server (e.g. Python) for landing page preview
Internet access for CDNs, fonts, and Higgsfield API

Recommended companion skills:

higgsfield-generate — smarter model selection
higgsfield-product-photoshoot — prompt enhancer
higgsfield-soul-id — consistent presenter across Reels

Installation

Clone into your skills directory:

# Project-level
git clone https://github.com/Arnie936/image-to-campaign .agents/skills/image-to-campaign

# User-level
git clone https://github.com/Arnie936/image-to-campaign ~/.claude/skills/image-to-campaign

Authenticate Higgsfield CLI:

higgsfield auth login

Skill Structure

image-to-campaign/
  SKILL.md                  # Main orchestrator
  references/
    brand-brief.md          # Brief derivation + asset prompts
    landing-page.md         # Landing page spec + QA
    reels.md                # 3 Reel angles + caption format
    blog.md                 # German SEO article spec
  assets/
    brief-template.md
    blog-template.html
    campaign-readme-template.md

Core Orchestration Flow

Phase 1: Bootstrap & Interview

Ask up to 2 questions to gather:

Product name and core benefit
Target audience and key differentiation
Optional: brand voice preference (formal/casual)

Phase 2: Brand Brief Generation

Create brief.md containing:

# Brand Brief: [Product]

## Product Identity
- Name: [...]
- Category: [...]
- Core Benefit: [...]
- Target Audience: [...]

## Visual Identity
### Color Palette (OKLCH)
- Primary: oklch(...)
- Secondary: oklch(...)
- Accent: oklch(...)

### Typography
- Headline: [Google Font]
- Body: [Google Font]

## Verbal Identity
- Thesis Line: [single compelling statement]
- Tone: [formal/casual/balanced]
- Key Messages: [3 bullets]

## Call-to-Action
- Primary CTA: [text]
- URL: [demo or real]

## Asset Specifications

### Landing Page
- Hero: [video prompt]
- Middle: [video prompt]
- Gallery: [3 image prompts]

### Instagram Reels (9:16)
1. Hook: [prompt + caption angle]
2. Showcase: [prompt + caption angle]
3. Lifestyle: [prompt + caption angle]

### Blog Article
- SEO Title: [...]
- Focus Keywords: [...]
- Structure: [H2 outline]

Phase 3: Checkpoint

Display the brief and list all asset prompts (hero video, middle video, 3 gallery images, 3 Reels, blog images). Wait for explicit user approval before proceeding.

Phase 4: Build Assets

Landing Page First

Generate folder structure:

mkdir -p kampagne-{slug}/website/assets
mkdir -p kampagne-{slug}/reels
mkdir -p kampagne-{slug}/blog/assets

Generate assets using Higgsfield CLI:

# Hero video (16:9)
higgsfield generate video \
  --prompt "[hero prompt from brief]" \
  --aspect-ratio "16:9" \
  --duration 5 \
  --output kampagne-{slug}/website/assets/hero.mp4

# Middle video (16:9)
higgsfield generate video \
  --prompt "[middle prompt from brief]" \
  --aspect-ratio "16:9" \
  --duration 5 \
  --output kampagne-{slug}/website/assets/middle.mp4

# Gallery images (1:1)
higgsfield generate image \
  --prompt "[gallery-1 prompt]" \
  --aspect-ratio "1:1" \
  --output kampagne-{slug}/website/assets/g1.jpg

Build index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Product] – [Thesis Line]</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=[Headline-Font]&family=[Body-Font]&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
  <style>
    :root {
      --primary: [oklch from brief];
      --secondary: [oklch from brief];
      --accent: [oklch from brief];
      --headline: '[Headline Font]', sans-serif;
      --body: '[Body Font]', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--body); background: var(--primary); color: white; }
    
    .hero {
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    .hero video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(transparent 40%, rgba(0,0,0,0.7));
      text-align: center;
      padding: 2rem;
    }
    .hero h1 {
      font-family: var(--headline);
      font-size: clamp(2rem, 6vw, 4rem);
      margin-bottom: 1rem;
    }
    .hero p {
      font-size: clamp(1rem, 2vw, 1.5rem);
      margin-bottom: 2rem;
      max-width: 600px;
    }
    .cta {
      background: var(--accent);
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 2rem;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    
    .section {
      min-height: 100vh;
      padding: 4rem 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .benefits { background: var(--secondary); }
    .showcase { background: var(--primary); }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      max-width: 1200px;
    }
    .gallery img {
      width: 100%;
      border-radius: 1rem;
    }
  </style>
</head>
<body>
  <section class="hero">
    <video autoplay muted loop playsinline>
      <source src="assets/hero.mp4" type="video/mp4">
    </video>
    <div class="hero-overlay">
      <h1>[Product Name]</h1>
      <p>[Thesis Line]</p>
      <a href="[CTA URL]" class="cta">[CTA Text]</a>
    </div>
  </section>

  <section class="section benefits">
    <div>
      <h2>[Key Benefit 1]</h2>
      <p>[Explanation from brief]</p>
    </div>
  </section>

  <section class="section showcase">
    <video autoplay muted loop playsinline style="max-width: 800px; width: 100%; border-radius: 1rem;">
      <source src="assets/middle.mp4" type="video/mp4">
    </video>
  </section>

  <section class="section">
    <div class="gallery">
      <img src="assets/g1.jpg" alt="[Gallery 1 alt]">
      <img src="assets/g2.jpg" alt="[Gallery 2 alt]">
      <img src="assets/g3.jpg" alt="[Gallery 3 alt]">
    </div>
  </section>

  <script>
    gsap.registerPlugin(ScrollTrigger);
    gsap.utils.toArray('.section').forEach(section => {
      gsap.from(section.children, {
        opacity: 0,
        y: 50,
        duration: 1,
        scrollTrigger: {
          trigger: section,
          start: "top 80%",
          toggleActions: "play none none reverse"
        }
      });
    });
  </script>
</body>
</html>

Browser QA

Start local server and verify:

cd kampagne-{slug}/website
python -m http.server 8000
# Open http://localhost:8000 and verify:
# - Videos load and play
# - Fonts render correctly
# - Colors match brief
# - Scroll animations work
# - CTA is clickable

Generate Reels

Reel 1 (Hook) — new generation:

higgsfield generate video \
  --prompt "[reel-1 hook prompt from brief]" \
  --aspect-ratio "9:16" \
  --duration 7 \
  --output kampagne-{slug}/reels/reel-1-hook.mp4

Reel 2 (Showcase) — reuse hero video reframed:

higgsfield reframe \
  --input kampagne-{slug}/website/assets/hero.mp4 \
  --aspect-ratio "9:16" \
  --output kampagne-{slug}/reels/reel-2-showcase.mp4

Reel 3 (Lifestyle) — new generation:

higgsfield generate video \
  --prompt "[reel-3 lifestyle prompt from brief]" \
  --aspect-ratio "9:16" \
  --duration 7 \
  --output kampagne-{slug}/reels/reel-3-lifestyle.mp4

Create captions.md:

# Instagram Reel Captions

## Reel 1: Hook
**Hook Text (first 2 sec):** "[attention-grabbing statement]"

**Caption:**
[Engaging first line with emoji]

[Core benefit explanation]

[Call to curiosity or action]

**Hashtags:** #[product] #[category] #[benefit1] #[benefit2] #[targetAudience]

**CTA:** [CTA text] → [URL]

---

## Reel 2: Showcase
[Same structure for Reel 2]

---

## Reel 3: Lifestyle
[Same structure for Reel 3]

Generate Blog

higgsfield generate image \
  --prompt "[blog hero image prompt from brief]" \
  --aspect-ratio "16:9" \
  --output kampagne-{slug}/blog/assets/hero.jpg

Create blog.html using blog-template.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[SEO Title from brief]</title>
  <meta name="description" content="[Meta description with focus keywords]">
  <link href="https://fonts.googleapis.com/css2?family=[Body-Font]&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: '[Body Font]', sans-serif;
      line-height: 1.7;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      color: #333;
    }
    h1 { font-size: 2.5rem; margin-bottom: 1rem; }
    h2 { font-size: 1.8rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--primary); }
    img { width: 100%; border-radius: 1rem; margin: 2rem 0; }
    .meta { color: #777; margin-bottom: 2rem; }
  </style>
</head>
<body>
  <article>
    <h1>[SEO Title]</h1>
    <div class="meta">Von [Brand] | [Date]</div>
    <img src="assets/hero.jpg" alt="[Alt text with keywords]">
    
    <p>[Introduction paragraph with focus keyword in first 100 words]</p>
    
    <h2>[H2 from outline]</h2>
    <p>[Content derived from brief's key messages]</p>
    
    <h2>[H2 from outline]</h2>
    <p>[Content]</p>
    
    <h2>Fazit</h2>
    <p>[Conclusion with CTA: [CTA Text] unter [URL]]</p>
  </article>
</body>
</html>

Phase 5: Deliver

Copy brief.md to campaign root and create README.md:

# Kampagne: [Product Name]

Generiert am [Date]

## Struktur

- `brief.md` – Die genehmigte Brand Brief
- `website/` – Landing Page (index.html + assets/)
- `reels/` – 3 Instagram Reels + captions.md
- `blog/` – Blog-Artikel (blog.html + assets/)

## Landing Page lokal anschauen

```bash
cd website
python -m http.server 8000
# Öffne http://localhost:8000

Reels hochladen

Datei auf Handy übertragen
In Instagram als Reel hochladen
Caption aus reels/captions.md kopieren

Blog deployen

blog/blog.html auf deinen Webserver hochladen oder in dein CMS integrieren.


Output final summary:

✅ Kampagne erstellt: kampagne-[slug]/

📁 Inhalt:

Landing Page: 1 HTML + 5 Assets (2 Videos, 3 Bilder)
Instagram Reels: 3 Videos (9:16) + Captions
Blog: 1 HTML + Hero-Bild

🌐 Landing Page lokal testen: cd kampagne-[slug]/website && python -m http.server 8000

📊 Higgsfield Credits verbraucht: ~[estimate based on generations]


## Configuration & Customization

### Locked Defaults (change in SKILL.md if needed)

```markdown
## Locked defaults

- **Language:** German (de)
- **CTA default:** "Jetzt Demo anfordern" → https://example.com/demo
- **Reel duration:** 7 seconds (hook/lifestyle), 5 seconds (showcase reframe)
- **Color space:** OKLCH for perceptual uniformity
- **Landing page animations:** GSAP + ScrollTrigger from CDN

Brief Template Customization

Edit assets/brief-template.md to change:

Color palette structure (add tertiary, neutral colors)
Verbal identity fields (add brand values, tagline)
Asset prompt sections (add email header, social cards)

Landing Page Template

Edit the HTML structure in references/landing-page.md:

Add navigation bar
Add footer with social links
Change grid layout for gallery
Swap GSAP for Framer Motion (if building React version)

Reel Angles

Edit references/reels.md to change the 3 default angles:

Hook (problem/curiosity) → Feature (benefit demo) → Testimonial
Day-in-life → Quick tip → Product showcase
Before/After → Process → Result

Higgsfield CLI Commands Reference

Generate Video

higgsfield generate video \
  --prompt "Cinematic shot of [product], [scene details]" \
  --aspect-ratio "16:9" \
  --duration 5 \
  --model "runway-gen3" \
  --output path/to/output.mp4

Aspect ratios: 16:9 (landscape), 9:16 (portrait), 1:1 (square)
Duration: 5 or 10 seconds
Models: runway-gen3, kling-1.5, minimax-video-01 (auto-selected by higgsfield-generate skill)

Generate Image

higgsfield generate image \
  --prompt "Product photography of [product] on [background]" \
  --aspect-ratio "1:1" \
  --model "flux-1.1-pro" \
  --output path/to/output.jpg

Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
Models: flux-1.1-pro, recraft-v3, ideogram-v2

Reframe Video

higgsfield reframe \
  --input path/to/16-9-video.mp4 \
  --aspect-ratio "9:16" \
  --output path/to/9-16-video.mp4

Intelligently crops/pans to new aspect ratio while keeping subject in frame.

Check Credits

higgsfield credits

Returns remaining credits for image and video generations.

Troubleshooting

"Higgsfield CLI not found"

Install manually:

curl -sSL https://install.higgsfield.ai/install.sh | sh
higgsfield auth login

On Windows, run the installer in Git Bash or WSL.

"Generation failed: insufficient credits"

Check credits:

higgsfield credits

Top up at https://higgsfield.ai/settings/billing

Landing page fonts not loading

Ensure internet connection (fonts from Google Fonts CDN). If deploying offline, download fonts and update CSS:

@font-face {
  font-family: 'CustomHeadline';
  src: url('./fonts/headline.woff2') format('woff2');
}

Videos not playing in browser

Check video file exists: ls kampagne-*/website/assets/
Verify MIME type: server must serve .mp4 as video/mp4
Test in different browser (Safari sometimes needs playsinline attribute)

Reel 2 (reframe) looks cropped wrong

The reframe algorithm centers on detected subjects. If output is off:

# Regenerate instead of reframing
higgsfield generate video \
  --prompt "[same prompt as hero but vertical composition]" \
  --aspect-ratio "9:16" \
  --duration 5 \
  --output kampagne-{slug}/reels/reel-2-showcase.mp4

Brief checkpoint interrupted

Resume by pointing to existing brief:

# In orchestrator logic:
if exists("kampagne-{slug}/brief.md"):
    brief = read("kampagne-{slug}/brief.md")
    skip to Phase 4 (build assets)

Real-World Usage Patterns

Pattern 1: E-commerce Product Launch

User: "Create campaign for this sneaker image: ./sneaker.jpg"
→ Interview: target (fashion-conscious 18-30), benefit (comfort + style)
→ Brief: bold OKLCH palette, modern sans-serif, casual tone
→ Landing page: hero = product spin, middle = wear test, gallery = 3 colorways
→ Reels: 1) Unboxing hook, 2) Styling showcase, 3) Street lifestyle
→ Blog: "Die perfekten Sneaker für Stadt und Freizeit"

Pattern 2: SaaS Tool

User: "Build funnel for this dashboard screenshot: ./app.png"
→ Interview: B2B audience (marketing managers), benefit (save 10h/week)
→ Brief: professional blue palette, clean sans-serif, formal tone
→ Landing page: hero = UI walkthrough, middle = data viz animation, gallery = 3 features
→ Reels: 1) "Verbringst du zu viel Zeit mit Reports?", 2) Feature demo, 3) Customer testimonial
→ Blog: "Wie Marketing-Teams mit [Tool] Zeit sparen"

Pattern 3: Food Product

User: "Make campaign for this organic coffee bag: ./coffee.jpg"
→ Interview: health-conscious consumers, benefit (organic + fair trade)
→ Brief: earthy green/brown palette, organic serif, warm tone
→ Landing page: hero = brewing closeup, middle = farm origin, gallery = 3 serving suggestions
→ Reels: 1) Morning ritual hook, 2) Farm-to-cup story, 3) Latte art lifestyle
→ Blog: "Warum Bio-Kaffee besser schmeckt"

Integration with Other Skills

With `higgsfield-product-photoshoot`

Enhance product image prompts before generation:

# In brief asset prompts, add:
"Use higgsfield-product-photoshoot to enhance this prompt before generating."

The photoshoot skill adds professional lighting, composition, and material rendering guidance.

With `higgsfield-soul-id`

Keep the same presenter across all 3 Reels:

# Generate Reel 1 with UGC presenter
higgsfield generate video --prompt "[...] featuring a young woman with [description]" --output reel-1.mp4

# Extract Soul ID
higgsfield soul-id extract --input reel-1.mp4 --output presenter.soul

# Apply to Reel 2 and 3
higgsfield generate video --prompt "[reel-2 prompt]" --soul-id presenter.soul --output reel-2.mp4
higgsfield generate video --prompt "[reel-3 prompt]" --soul-id presenter.soul --output reel-3.mp4

With `higgsfield-generate`

Automatic model selection based on prompt:

# Instead of --model flag, let higgsfield-generate choose:
higgsfield generate video --prompt "[complex cinematic shot]"
# → selects runway-gen3 for motion quality

higgsfield generate video --prompt "[UGC style selfie video]"
# → selects kling-1.5 for speed + cost

Best Practices

Always approve the brief checkpoint — once assets are generated, credits are spent.
Reuse the landing page hero — the reframe to 9:16 for Reel 2 saves one full video generation.
Test locally before deploying — browser QA catches font/video issues before going live.
Keep prompts brief-consistent — reference the brief's visual identity in every asset prompt (colors, style, mood).
Version your briefs — if iterating, save brief-v1.md, brief-v2.md to track what changed.
Use environment variables for real CTAs:

export CAMPAIGN_CTA_URL="https://shop.example.com/product"
export CAMPAIGN_CTA_TEXT="Jetzt kaufen"

Then reference in brief template: [CTA URL] → ${CAMPAIGN_CTA_URL}

Output Structure

kampagne-product-name/
├── brief.md                    # Single source of truth
├── README.md                   # Usage instructions
├── website/
│   ├── index.html
│   └── assets/
│       ├── hero.mp4           # 16:9, 5s
│       ├── middle.mp4         # 16:9, 5s
│       ├── g1.jpg             # 1:1
│       ├── g2.jpg             # 1:1
│       └── g3.jpg             # 1:1
├── reels/
│   ├── reel-1-hook.mp4        # 9:16, 7s, new generation
│   ├── reel-2-showcase.mp4    # 9:16, 5s, reframed from hero
│   ├── reel-3-lifestyle.mp4   # 9:16, 7s, new generation
│   └── captions.md            # Hook, caption, hashtags, CTA per Reel
└── blog/
    ├── blog.html
    └── assets/
        └── hero.jpg           # 16:9

Total Higgsfield cost per campaign:

4 video generations (2 landing, 2 reels) × ~50 credits = 200 credits
1 video reframe (reel 2) × ~10 credits = 10 credits
4 image generations (3 gallery + 1 blog) × ~5 credits = 20 credits
Total: ~230 credits

Related Skills

higgsfield-generate — smart model selection
higgsfield-product-photoshoot — prompt enhancement for product visuals
higgsfield-soul-id — consistent presenter identity across videos
higgsfield-video-editor — post-generation trimming, speed adjustments
german-seo-copywriter — SEO-optimized blog content expansion

Support

For Higgsfield CLI issues: https://docs.higgsfield.ai
For skill bugs/features: https://github.com/Arnie936/image-to-campaign/issues

Next steps after campaign generation:

cd kampagne-{slug}/website && python -m http.server — QA landing page
Transfer Reels to phone → upload to Instagram with captions from reels/captions.md
Deploy blog/blog.html to your site or integrate into CMS
Track conversions and iterate on brief for next campaign