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
This week I used Claude for the #DailyUI challenge and designed a real estate landing page.
The process took more iterations than with Figma Make (I get to the result faster with Make); with Claude I had to iterate more and fine‑tune the prompts, even though I gave it the same documentation and references.
To deploy it on Vercel, I had to dive into HTML and JS, make a few commits, and even rollback a couple of times on GitHub — but in the end, it worked.
It delivered, it looks nice, and it's live on Vercel:
https://inmobiliaria-claude.vercel.app/
(except for one floating component — the rest is solid)
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
Challenges
View all
Related posts
I’m honestly astonished by how capable Fable 5.1 have become. What used to require hours of digging through documentation, experimenting, and debugging can now happen through a conversation
One thing I’ve learned from vibecoding: don’t break what already works.
When I’m building a new feature, I usually create a separate test area instead of modifying the live version directly.
If the current version is v3, I’ll experiment with v3.1 there first, test it, iterate, and only move it into the main app once it’s stable.
For bigger rewrites, I keep both versions locally and compare them side by side. The old one stays untouched while I work on the new one.
It’s a simple workflow, but it saves me a lot of headaches when AI starts losing context.
There are many ways to approach this. This is just the one that works best for me.
What’s your workflow when building with AI?
The isolated v3.1 workflow is such a practical guardrail—especially when AI starts drifting. Comparing the stable and experimental versions side by side makes iteration feel much safer.
Ondrel: Enterprise AI Site Rebuild (Motion & Interaction Study)
A hand-coded rebuild of a Framer-grade enterprise AI website. Scroll choreography, pinned storytelling and micro-interactions, reproduced in vanilla JS with no page builder, no WebGL and no stock footage.
What's inside:
- Hero video card that expands to full bleed on scroll while the headline splits apart, then settles back
- Scroll-linked headlines that fill in character by character
- Two pinned sequences: a 5-sector carousel and a 4-case showcase, with wipe transitions, live progress pills and a rotating backdrop
- An interactive dot sphere — 200+ particles morphing through four states in sync with the copy
- Capability wheel, vertical journal carousel and infinite logo marquees
- Menu overlay with staggered reveals, hide-on-scroll nav and an announcement banner
- Every video slot is a real-time procedural scene drawn in code (engine test fire, wind turbines, highway aerials, glass towers), so it loads fast and runs even without WebGL
- Fully responsive with a dedicated mobile layout for every section, plus reduced-motion support
Tech HTML · CSS · Vanilla JS · Canvas 2D · Lenis smooth scroll · Vercel
Got a Framer or Webflow site you've outgrown, or a motion-heavy landing page you want in real code? I build these end to end — message me.
Rebuilding a Framer site in vanilla JS with Lenis scroll instead of a page builder is the harder trade - you lose the visual editor but the scroll choreography stops fighting a framework's own physics.