63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
# 🎨 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
|
||
|
||
```bash
|
||
# 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
|
||
|
||
1. **Paste a URL** — Any website you want to generate ads for
|
||
2. **AI Analyzes** — Claude extracts brand colors, voice, tone, positioning, and audience
|
||
3. **Generates Creative** — 6 unique ad formats, each with tailored copy
|
||
4. **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.
|