The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
From prompt to prototype to live experience.
I challenged myself to create a landing page for Rocio Sereno's AHA Peeling Concentrate ā Weekly Skin Reset for Smoother, Clearer Skin using an AI-powered design workflow from start to finish.
My process looked like this:
š¹ Started with research and creative direction using @openai
š¹ Used detailed prompts to define the landing page structure, product positioning, benefits, usage flow, results section, video experience, and animation concepts
š¹ Brought the concept into @stitchbygoogle where I transformed the idea into a visual UI and interactive prototype
š¹ Refined layouts, visual hierarchy, product presentation, user flow, and motion interactions
š¹ Added animations and micro-interactions to create a more immersive skincare experience
š¹ Exported the design into @lovable.dev and @boltdotnew to further develop the experience into a functional UX and live product page
Live Version (Lovable):
https://frame-fusion-spark.lovable.app/product
Live Version (Bolt):
https://app-build-html-scree-wx0b.bolt.host/
Tools Used:
@openai
@stitchbygoogle
@lovable.dev
@boltdotnew
This project was a great example of how AI-assisted workflows can accelerate the journey from concept ā UI design ā prototype ā animation ā live deployment while still leaving room for creative decisions and UX refinement.
#GoogleStitch #StitchByGoogle #UIDesign #UXDesign #ProductDesign #WebDesign #AIWorkflow #Lovable #BoltNew #OpenAI #Prototype #LandingPageDesign #SkincareBrand #DesignProcess #CreativeWorkflow
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Bringing ideas to life faster with Google Stitch āØ
For this challenge, I explored how Stitch can transform a simple concept into a fully interactive creative experience using AI-powered workflows.
The project started with just two things:
š a custom design.md creative direction file
š¼ļø a logo image for the project identity
Using Stitchās new capabilities, the entire website was generated directly inside the canvas through streaming generations ā turning concepts into a live experience in real time.
But it didnāt stop at generation.
I continued refining the project using:
ā© prompt-based in-place AI editing
š±ļø point-and-click interactions directly inside Stitch
š„ native motion, animation, shaders, and hover states on HTML canvas
š one-click export support directly to Netlify
What makes this even more impressive is how Stitch combines the workflow of 4ā5 different creative applications into one single platform ā generation, editing, interaction design, motion, prototyping, and deployment all inside one experience.
From concept ā iteration ā interaction ā deployment, the entire workflow stayed inside Stitch.
This experience shows how AI can dramatically speed up creative production while still allowing full artistic control and experimentation.
link for the project:
Live Website :Website
Google Stitch Workflow :Google Stitch
This is impressive and incredible
Just completed another modern landing page project focused on speed, clean UI, and user experience. š
MotoGo is designed to connect users with fast and reliable delivery riders through a simple and intuitive platform. The goal was to create a responsive, user-friendly interface that feels modern, smooth, and conversion-focused.
Excited to keep building digital products that solve real-world problems with design and technology. š„
#WebDesign #FrontendDevelopment #UIDesign #LandingPage #ReactJS #WebDevelopment #Tech #BuildInPublic
Dropping this comment because excellence deserves recognition.
Exploring "How We Work" section
Which colour is best (both colours are the main colour guide)?
37 voted
54%
31 voted
46%
68 votes
Closed
Personally leaning towards the dark blue-green version.
The cooler tone feels more aligned with trust and clarity especially for a āHow We Workā section. The Dark brown version has a strong cinematic mood, but the blue-green helps the structure and content breathe a bit more to me.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid.Ā Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?