Santibnb Component Library

What It Is

A partial Airbnb clone built in Bolt, then extracted into a reusable component library so future prototypes start on-brand instead of rebuilding the chrome each time. The idea: build the kit once, duplicate it for each new prototype, and spend tokens on the feature instead of the pixels.

What I Learned

Screenshot-driven cloning is shockingly close to pixel-perfect now — Bolt plus Opus 4.6 reproduced Airbnb's visual language from screenshots alone, with a React HTML extension filling the gaps where a screenshot wasn't enough. Opus 4.7's higher max image resolution has since closed that gap further. Even interactions and animations can be cloned through time-sequenced screenshots.
Screenshots got me there, but a URL should have — Bolt rarely nailed a more complex component on its first try; follow-up screenshots (e.g., for hover, activation, and animation) filled the gaps. The natural next step is handing the AI a URL and letting it click around, observe interactions, and gather what it needs on its own.
A style guide built once unlocks every prototype after — Once the components, tokens, and patterns live in a reusable kit, new features and prototypes start on brand. Share it across a team and the whole company gets pixel-accurate components inside the vibe coding tool, instead of each prototype rebuilding the design system from scratch.
The same model can feel like a different collaborator depending on the app it lives in — Opus 4.6 inside Bolt produced strong frontend work, but the experience felt like call-and-response: Bolt makes a plan, asks "good to go?" and waits. Claude Code with the same model asks questions sequentially, pressure tests assumptions, and creates explicit moments for my taste to shape the work, instead of me having to find ways to interject.
A local codebase is protection against lock-in and outages — With the proliferation of AI coding apps, I still want local access to my code. Bolt's duplicate-project button returns an empty project right now, and their support bot escalated to a human who hasn't replied in 10 days. Keeping a git repo is cheap insurance against lock-in and degraded performance.

How It Works

Style Guide (accessible from footer) documents design tokens and every custom components so that future prototypes can re-use and borrow instead of starting from scratch
State lives in a single AppProvider context handling page navigation, selected listing, category filter, wishlist, and search params
Homepage with experimental new features: a "Feeling Lucky" button in the search bar (subtle wiggle) and a "Featured" tile leading the top listings row
Classic Home page (from footer link) shows a near-pixel-accurate homepage clone without the experimental additions
Calendar picker, guest counter, category filter, wishlist toggle, and swipeable listing carousels are all interactable
Listing detail page reproduces the full Airbnb template: five-image photo grid, host and superhost badges, category reviews, amenities, reservation card with date and guest pickers, and "Things to Know"

Built With

Bolt running Opus 4.6 (free Opus tokens the weekend after launch!) did the build. Screenshots of Airbnb's site drove most of the component work, with a React HTML extension pulling real code from airbnb.com where a screenshot wasn't specific enough. The Feeling Lucky button's clover icon came from ChatGPT. Runtime stack is React 18, TypeScript, Vite, Tailwind, shadcn/ui, Lucide, Embla Carousel, and date-fns.

Loading content...

What I Learned

Screenshot-driven cloning is shockingly close to pixel-perfect now — Bolt plus Opus 4.6 reproduced Airbnb's visual language from screenshots alone, with a React HTML extension filling the gaps where a screenshot wasn't enough. Opus 4.7's higher max image resolution has since closed that gap further. Even interactions and animations can be cloned through time-sequenced screenshots.

Screenshots got me there, but a URL should have — Bolt rarely nailed a more complex component on its first try; follow-up screenshots (e.g., for hover, activation, and animation) filled the gaps. The natural next step is handing the AI a URL and letting it click around, observe interactions, and gather what it needs on its own.

A style guide built once unlocks every prototype after — Once the components, tokens, and patterns live in a reusable kit, new features and prototypes start on brand. Share it across a team and the whole company gets pixel-accurate components inside the vibe coding tool, instead of each prototype rebuilding the design system from scratch.

The same model can feel like a different collaborator depending on the app it lives in — Opus 4.6 inside Bolt produced strong frontend work, but the experience felt like call-and-response: Bolt makes a plan, asks "good to go?" and waits. Claude Code with the same model asks questions sequentially, pressure tests assumptions, and creates explicit moments for my taste to shape the work, instead of me having to find ways to interject.

A local codebase is protection against lock-in and outages — With the proliferation of AI coding apps, I still want local access to my code. Bolt's duplicate-project button returns an empty project right now, and their support bot escalated to a human who hasn't replied in 10 days. Keeping a git repo is cheap insurance against lock-in and degraded performance.

How It Works

Style Guide (accessible from footer) documents design tokens and every custom components so that future prototypes can re-use and borrow instead of starting from scratch

State lives in a single AppProvider context handling page navigation, selected listing, category filter, wishlist, and search params

Homepage with experimental new features: a "Feeling Lucky" button in the search bar (subtle wiggle) and a "Featured" tile leading the top listings row

Classic Home page (from footer link) shows a near-pixel-accurate homepage clone without the experimental additions

Calendar picker, guest counter, category filter, wishlist toggle, and swipeable listing carousels are all interactable

Listing detail page reproduces the full Airbnb template: five-image photo grid, host and superhost badges, category reviews, amenities, reservation card with date and guest pickers, and "Things to Know"

Built With