Path Creatives
VP of Design, Launch Potato | 2026Partnership creatives · from a single URL
Path Creatives turns a partnership landing-page URL into finished, on-brand ad creatives. Paste a link — scrape logos/colors, pull headlines/offers/tone, draft a brief, name the project from the company.
The Challenge
Partner creative required hand-assembly: brief, brand pull, layout, QC — repeated per URL
The Solution
A five-step gated wizard: URL → approve brief → approve assets → generate ads → compile with partner mark.
Stack
Figma, Cursor, Vanilla JS, Supabase, OpenRouter, Netlify
View the live site ->
Proof of Concept: end-to-end generation works. Auth + project history not shipped yet.
Gated Pipeline
The tool is a guided wizard with five steps. Each unlock is an approval gate — the model doesn’t advance until a human signs off.New Project (paste URL) → Brief (AI-drafted copy, you edit/approve) → Assets (AI scrapes logos & colors, you edit/approve) → Design (AI generates ads, you edit/approve) → Compile (AI applies partner logos, you edit/approve) -> History.
User Tasks & Flows
Happy path of completion + mapped failure edges, including: bad URL, weak scrape, rejected brief, incomplete asset set. Approval is controls the progress through to finished creative ads.
Sketches & Inspo
Early lo-fi thinking on site design and exploration of the project's extensibility. Before code exploration: where a URL-in tool could grow (batch partners, templates, brand kits) without breaking the core guided wizard.
Mood Board & Site Styles
The Launch Potato rebrand didn't have a full component library yet — but it had the parts that matter for AI ingestion: page designs for a proposed new corporate site, the detailed brand guidelines I'd written, and typography and color tokens I'd already mapped for exactly this kind of handoff. Enough to build LP sites and spin up the internal Path Creatives tool fully on-brand.
Creating the DESIGN.md file
I fed the guidelines and tokens into Cursor to create a single DESIGN.md that the model could build from — so the generated screens stayed on brand. Then I used the design.md plus descriptive user flows, and inspiration and sketches, to build r1 drafts of every page.
Software Architecture
Built in Cursor. Vanilla JS modules manage wizard state, design data, and AI generation via OpenRouter. Project state persists in browser storage and syncs to Supabase.
Step access is gated (URL set → brief approved → assets approved → design approved).
OpenRouter, as the model router, enables the project to swap providers (from copy to image generation) without rewriting the wizard. Hosted on Netlify.
Prompting Process
Most prompt work wasn’t aesthetic, as brand guidelines were cleanly mapped to the site. It was wiring: scrape → structured fields → OpenRouter generation → Supabase logs, plus detailed UX so humans could correct what the model got wrong.
Here’s a sample of my workflow to optimize just a portion of the Brand Assets scraping experience:
View the live app →
More Vibe-Coded Projects
More Vibe-Coded Projects