I joined the Google Stitch x Contra Challenge by creating LÚMIA Beauty, a landing page for a fictional premium makeup and fragrance brand, built around the challenge theme: creating interfaces that feel alive.

The idea was to build an immersive, glossy, highly visual beauty experience where the interface didn’t feel like a static e-commerce page, but like a brand universe full of light, motion, and texture.

For the project, I created a complete visual identity with a pink, shiny, glowy color palette. I also worked with a collection of AI-generated product and model images, including perfumes, lip gloss, blush, editorial visuals, and the LÚMIA Beauty logo.

The landing page includes:

- A hero section with a liquid, glossy, interactive background that reacts to mouse movement.

- Product sections for perfumes, blush, and lip gloss.

- A “Shop by Aura” experience to discover products through different visual moods.

- Cards with hover states, glow, shimmer, and subtle motion.

- An editorial section with models and a beauty campaign aesthetic.

- A ritual builder to combine products into a beauty routine.

- Reviews, FAQ, final CTA, and responsive footer.

- Final deploy published on Netlify.

I used Google Stitch as a central part of the workflow. First, I prepared a DESIGN.md file to define the brand’s visual direction: colors, style, tone, components, motion, layout, and glossy/liquid aesthetic. Then I uploaded the product images, model images, and logo so Stitch could generate a landing page that felt consistent with the LÚMIA Beauty identity.

From there, I used Stitch to create the first version of the page, iterate on specific sections, adjust the composition, improve the hero, add visual effects, and include interactions such as motion, hover states, shimmer, liquid backgrounds, and cursor-reactive behavior.

After that, I exported the project using the copy-code-to-clipboard option. From there, I worked on the generated file to adjust specific parts of the page, especially structure details, responsive behavior, and small visual refinements. Once I had the final version, I inserted the finished index.html file back into the Stitch project board to keep the final result documented within the same workflow.

I also prepared two videos for the submission:

1) A video showing my workflow inside Stitch.

2) A demo video showing the final LÚMIA Beauty experience.

What I liked most about Stitch was how quickly it helped me move from a brand idea to a visually solid interface. The DESIGN.md workflow helped a lot with consistency, and the in-context edits made the process feel closer to designing directly on the product.

As feedback, I would love to see Stitch keep improving fine control over responsive details, specific animations, and component consistency, but the overall experience was very fluid and useful for prototyping a high-impact landing page in a short amount of time.

Live project: https://LÚMIABeauty.netlify.app/

Stitch project: https://stitch.withgoogle.com/projects/4725329965472555948

@stitchbygoogle

#GoogleStitch #Contra #UIDesign #UXDesign #AIDesign #WebDesign #ProductDesign #BeautyBrand #LandingPage #BuildInPublic

Wow, Carola, this is an absolutely stunning project! The "Shop by Aura" feature is such a creative way to lean into the "interfaces that feel alive" theme, and a cursor-reactive, liquid glossy background sounds beautiful.

I love that you used a meticulous DESIGN.md file to keep...

Reinventing the wheel 🛞 for Google.

Designed with Google Stitch for all platforms Desktop, Mobile, and Tablets.

I’m a engineer and founder with tech experience but not design, and going into this challenge, my real question was simple: Can an AI-native interface builder actually handle deep-time narrative storytelling and high-fidelity, scroll-linked interactions without turning into a complete mess?

To stress test the absolute limits of the platform, I didn't feed it an established design, or any files right away. I wanted to see exactly how Stitch thinks, handles design drift, and iterates from scratch. I gave it a massive, conceptually complex prompt: Build a highly cinematic, ultra-polished, deep-time historical timeline mapping the evolution of the wheel, from primitive Mesopotamian stone discs to active, computational morphing hub systems in 2026.

How Stitch Fit into the Workflow

The streaming generation on the canvas is easily one of the most hypnotic interactions I've seen in a design tool. It genuinely feels like watching a remote design partner building on your screen through AnyDesk. Instead of staring at a loading spinner and waiting for a static layout, I was reacting to a living interface taking shape in real time.

Instead of keeping things static, I ended up executing three distinct modes across this project to see how Stitch adapts to different workflow mindsets:

I pushed a light but descriptive prompt system to build out a strict, zero-color, high-contrast monochrome design philosophy titled "Liquid Slate." Stitch completely conquered the blank page problem, mapping out an editorial-style landing page with absolute black layouts and deep-etched glass elements.

The Codebase Sync via Antigravity (The Engineering Bridge) is where it killed it, To see if this could handle a real-world production loop, I leveraged the new MCP skills. I imported stitch into Antigravity straight from Stitch's HTML native canvas, synced those changes, and published a React Website in Minutes to Netlify which was bug free and ready for a Run.

The motion authoring surprised me the most. I didn't have to jump out into a secondary motion app or wrestle with standard transition bugs, the native hover states, custom text blur modules (BlurInText), and smooth continuous wheel rotations were all handled seamlessly on the HTML canvas before exporting the build.

New Features I Leaned On

Streaming generations to canvas: Watched the entire layout materialize and iterated on components before they were even finished rendering.

In-place AI edits via prompts + point-and-click: Controlled fine-grain text styles and layout spacing directly on the artboard. Redesign : Got the same design in 3 colours, just wow.

Native motion, hover states, and shaders on HTML canvas: Authored complex scroll-linked component rotations and aesthetics.

Antigravity Code Integration via MCP: Ran a perfect, bi-directional round-trip sync between my code editor and the visual design canvas.

MCP Export: One-click, zero-friction final production deployment.

Feedback on the Platform

Google Stitch shifts the entire AI design paradigm because it collapses the classic "describe, wait, judge, re-prompt" delay loop into an interaction that feels like direct manipulation. In-place edits genuinely feel like real design work.

Two things I'd love to see in future updates: Option to upload/generate videos: it makes it easier for a designer to have their backdrop beautiful just by adding or generating a video which Stitch can definitely add beautifully.

A way to save a specific in-place edit style (like the exact blur, noise, and border-radius of my "Liquid Slate" glass cards) into a recipe that I can reapply to other sections instantly without describing it again.

Stitch doesn't feel like an AI platform you have to constantly fight against, it feels like a living, interactive canvas that intuitively understands structural design system logic.

Check it out:

Live Site: https://contragoogle.netlify.app/

Stitch Project Space: https://stitch.withgoogle.com/projects/13302732653849354465 X: https://x.com/AshishSandhu/status/2062413585095995813?s=20

Wow, Ashish, this is a masterpiece of a stress test! Mapping something as conceptually complex as a deep-time historical timeline for the wheel from scratch is brilliant, and the "Liquid Slate" monochrome aesthetic looks incredibly premium.

Stunning execution! I also just...