Laila Grainawi

Path Creatives

VP of Design, Launch Potato | 2026

Partnership 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:


The sample color on the page is such a nice detail that saves you from looking up hex codes or juggling apps. 
The modal fades out to the cursor, which acts as an eyedropper; click to sample, and then return to the modal to confirm the color. Tapping the central color swatch opens a picker UI.



View the live app →



More Vibe-Coded Projects