We replaced our Webflow site with vibe coding

Key Concepts

• Vibe Coding: Utilizing AI (specifically Claude Code) to generate code through natural language prompts, bypassing traditional visual builders.
• Nex.js & React: JavaScript frameworks powering the new website, offering performance and scalability.
• Sanity: A headless CMS chosen for its ease of use and integration with the tech stack.
• Versel: Hosting platform optimized for Nex.js, providing seamless deployment.
• Migration: The process of transferring a website from Webflow to a vibe-coded solution.
• Headless CMS: A content management system that delivers content via APIs, allowing for flexibility in front-end technologies.

Leaving Webflow: A Company-Wide Migration to Vibe Coding

This account details Memberstack’s decision to migrate their entire website – a site with over 100 static pages, 15 collections, and 3,000 items – from Webflow to a solution built entirely through “vibe coding” using Claude Code. The decision stemmed from an accidental discovery of superior results compared to their existing Webflow implementation.

The Catalyst: Prototyping with Claude Code

In late 2023, Julian and his colleague Molly prototyped a new homepage using Claude Code, despite lacking formal development experience. After 8 hours of prompting, they produced a fully interactive, animated homepage that significantly surpassed their existing Webflow homepage in quality and functionality. Crucially, this wasn’t a mockup; it was production-ready code. This raised the question: why rebuild this in Webflow?

Addressing Objections & Justifying the Shift

The team systematically addressed potential concerns about moving away from Webflow. Key points included:

• Team Editability: Vibe coding simplifies editing as it eliminates the need for Webflow training.
• CMS Requirements: Proven CMS options (like Sanity) integrate seamlessly with the new tech stack.
• SEO Performance: Nex.js and React are used by major marketing sites and offer strong SEO capabilities.
• Reliability & Backups: GitHub provides automatic backups with every change.

Ultimately, they found no compelling reason to remain in Webflow.

The Migration Process: Page-by-Page & Collection-by-Collection

The migration was executed systematically:

1. Static Pages: Existing Webflow pages were rebuilt using Claude Code by providing the URL and requesting a recreation in the new homepage’s style. This process was completed for over 100 pages without issues.
2. CMS Migration (Sanity): Claude Code recommended Sanity as the ideal CMS, citing its use by companies like Anthropic, Shopify, and Figma.
3. Data Import: CSV exports of Webflow collections (starting with testimonials) were imported into Sanity using single prompts to Claude Code, eliminating manual data entry. This was repeated for all collections, including blog posts and member scripts.
4. SEO Preservation: A Screaming Frog crawl of the Webflow site generated an SEO report, which was then used by Claude Code to ensure a 100% SEO match on the new site.

Performance & Launch

Before launch, the site was tested using Unligh, revealing improvements in speed, SEO scores, and accessibility compared to the Webflow site. The switch was executed on the last day of 2023 to minimize potential disruption during the holiday period. Switching DNS records from Webflow to Versel resulted in zero downtime and a seamless launch.

Results & Impact

The migration yielded significant positive results:

• Increased Organic Traffic: Organic traffic reached all-time highs post-launch.
• Improved Conversion Rate: Conversion rates also increased.
• Accelerated Development Speed: The team was able to implement more updates in the first week of January than in the entire second half of 2023.
• Performance Metrics: The new site demonstrated faster loading speeds and improved accessibility.

Should You Do the Same?

Julian recommends the approach, but with a caveat. He suggests those already comfortable with vibe coding tools should proceed with larger projects. For newcomers, he advises starting with smaller, personal projects to gain experience and confidence.

Tools Used

• Claude Code: The primary code generation tool.
• GitHub: For version control and backups.
• Sanity: The chosen headless CMS, praised for its user-friendly interface.
• Nex.js: The JavaScript framework providing the site’s engine.
• Versel: The hosting platform, offering seamless integration with Nex.js.

Conclusion

Memberstack’s successful migration from Webflow to a vibe-coded website demonstrates the potential of AI-powered development. The project highlights the benefits of increased speed, improved performance, and enhanced team efficiency. While not advocating for abandoning Webflow entirely, Julian emphasizes that the landscape of web development has changed, and incorporating AI tools like Claude Code can unlock new possibilities for designers and no-code developers. The key takeaway is that vibe coding isn’t about replacing tools, but expanding your toolkit.

“I’ve been building Web Flow sites for over 6 years, and I’m not trying to sit here and tell you to abandon Web Flow. But if you’re a designer or a no code developer, everything is different now.” – Julian.