Laila Grainawi

Launch Potato (Internal Tools)

VP of Design | 2026

Repeatable Creatives
The Path Creatives project turns a single partnership landing-page URL into finished, on-brand ad creatives. Paste a link, and the tool analyzes the page, scrapes the partner's logos and colors, pulls headlines, offers, and tone, and drafts a project brief — automatically naming the project after the company in the link.


The Challenge
Creative assembly for partnership ads was slow and repetitive. 

The Solution
I wanted to compress "URL → brief → on-brand ads" into one guided flow the team could run in minutes.


    Stack


    Figma, Cursor, Vanilla JS, Supabase, OpenRouter, Netlify

    View the live site ->


    *This site is a prototype to explore mapping branding to a vibe-coded site, and integrating the OpenRouter API and Supabase backend. 

    It is fully functional, but it does not require logins or store projects to history in its current state. I consider it a proof of concept. 


    Site flow


    The tool is a guided wizard with five steps, gated so that each step unlocks as the previous one is approved:

    New Project (paste URL) → Brief (AI-drafted, you approve) → Assets (scraped logos & colors) → Design (ads generated) → Compile (partner logo applied) -> History. 



    User Tasks & Flows


    Detailed flow charts describing the interaction patterns as users create partner ads using the site.




    Sketches & Inspo


    Early lo-fi thinking on site design and exploration of the project's extensibility. 





    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). 

    Hosted on Netlify.




    Prompting Process


    I drove the build and ad generation with prompts — almost all of my energy went into connecting real functionality to generate ads using OpenRouter AI APIs and logs on the Supabase backend. Most of the aesthetic choices mapped cleanly from my brand guidelines and Figma design systems. There was a small amount of UX cleanup to improve the experience and to ensure the right details were being parsed to the AI to analyze.

    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.



    *This site is a prototype to explore with mapping branding to a vibe-coded site, and integrating the OpenRouter API and Supabase backend. 
    It is fully functional, but it does not require logins or store projects to history in its current state. I consider it a proof of concept. 

    Explore the published site →


    More Vibe-Coded Projects