image-to-campaign-funnel-generator

# image-to-campaign-funnel-generator > Skill by [ara.so](https://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: 1. Conducts a short interview about the product 2. Writes a comprehensive Brand Brief (identity, thesis, OKLCH palette, fonts, tone, CTA, Reel angles) 3. Shows you the brief + all asset prompts for approval **before spending credits** 4. Builds landing page → 3 Reels → blog autonomously 5. Reuses the landing page hero video (reframed to 9:16) for one Reel to save costs 6. Runs browser QA on the landing page 7. 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: ```bash # 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: ```bash 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: ```markdown # 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: ```bash mkdir -p kampagne-{slug}/website/assets mkdir -p kampagne-{slug}/reels mkdir -p kampagne-{slug}/blog/assets ``` Generate assets using Higgsfield CLI: ```bash # 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`: ```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: ```bash 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: ```bash 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: ```bash 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: ```bash 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`: ```markdown # 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 ```bash 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`: ```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); }