🎨 Vibe Ads — AI Ad Creative Engine

A stunning demo showcasing AI-powered ad creative generation. Paste any website URL, and the system analyzes the brand's identity, extracts their DNA (colors, voice, positioning), then generates ad concepts across 6 high-converting formats — instantly.

⚡ Quick Start

# 1. Set your Anthropic API key
export ANTHROPIC_API_KEY=$(op item get "Anthropic API Key" --fields password --reveal)

# 2. Start the server
node server.js

# 3. Open in browser
open http://localhost:8895

🎯 How It Works

Paste a URL — Any website you want to generate ads for
AI Analyzes — Claude extracts brand colors, voice, tone, positioning, and audience
Generates Creative — 6 unique ad formats, each with tailored copy
Renders Mockups — Beautiful CSS-rendered mockups of each format

📐 Ad Formats Generated

Format	Description
🖼️ Meme	Top/bottom text overlay meme style
💬 iMessage	Fake chat conversation — native word-of-mouth
𝕏 Tweet	Twitter/X post with engagement metrics
📊 Stat Card	Bold infographic-style data highlight
⭐ UGC Review	Authentic-sounding user testimonial
🏗️ Billboard	Large statement text on gradient background

🏗️ Architecture

index.html     → Single-page app (HTML + CSS + JS, no build step)
server.js      → Node.js proxy server (port 8895)
                  ├── GET /          → Serves index.html
                  ├── POST /api/fetch-url  → Fetches & strips target website
                  └── POST /api/generate   → Proxies to Claude API

🔑 Requirements

Node.js 18+ (uses native fetch)
Anthropic API Key (Claude claude-sonnet-4-20250514)

💡 Features

Real AI calls — Not mocked; actually calls Claude for brand analysis
Website scraping — Fetches target URL content for accurate analysis
Demo fallback — Pre-generated results if API is unavailable
Dark glassmorphism UI — Professional, modern design
Mobile responsive — Looks great on all screen sizes
Zero dependencies — No npm install needed

📝 License

Built for spec work demonstration purposes.

2.3 KiB Raw Permalink Blame History Unescape Escape