We Let AI Build Our Website – Here’s What Happened

From design to code and content, Vertical AI’s site was created with AI in the loop
When we started building the Vertical AI website, we asked a simple question: what if we let AI do (almost) everything? Not just content suggestions or copy tweaks—but the whole journey: design, development, structure, and copy. Front to back.

So we ran the experiment.
The result? You’re looking at it.

This site was built using AI tools, models, and protocols from day one. We utilized the Figma Context MCP, Browser Tools MCP, and Cursor AI IDE to design, write, and deploy the Vertical AI site. Here’s a behind-the-scenes look at how we made it happen—and what we learned along the way.
What We Built: A Modern, Modular AI Landing Page
Vertical AI’s site is a fully responsive Next.js 14 build, deployed via Vercel and powered by a headless CMS (Sanity). It includes:
Hero sections and feature highlights
Case study and article templates
A scalable content architecture
Animations, theming, and mobile optimization
Sanity-powered visual editing and real-time previews
Nothing unusual so far—except that most of it was AI-generated or AI-assisted.
Enter the AI Workflow: Design → Content → Development
We used a toolchain centered around Model Context Protocols (MCPs)—methods of injecting design system context directly into large language models (LLMs) during task execution.
Here’s how it flowed:

1. Figma Context MCP: From Figma Foundation to AI-Driven Layouts
Our journey starts in Figma. We begin by establishing our core visual identity—crafting basic styles and a few key reference pages that capture our brand’s style, vibe, and personality. This foundational work is critical, as it sets the creative direction and tone for all subsequent designs made by AI.
Figma Context MCP server then comes into play by granting Cursor AI direct access to these layout assets. With the brand’s visual DNA at its disposal, we prompt Cursor AI to generate the rest of the layouts. The AI builds out the remaining pages and components based on the reference data, documentation and custom instructions, ensuring every output remains consistent with our creative vision while vastly accelerating the design process.

2. Browser Tools MCP and Cursor AI: Bridging Design with Code
In parallel with our design process, we integrate coding efficiency using Browser Tools MCP paired with Cursor AI. Here’s how it works:
Real-Time Browser Validation: With Browser Tools MCP, Cursor AI is not just working in isolation—it gets direct context from the browser. This enables the AI to verify how its generated layouts look when rendered, catching visual issues on the fly and even self-correcting minor errors.
Automated Code Generation: Using our established Tailwind and Radix UI libraries along with our naming conventions and folder structures, Cursor AI generates production-ready JSX/TSX components. This ensures that the design intent translates accurately into functional, clean code.
Efficiency at Scale: While every AI-generated asset is thoroughly reviewed and fine-tuned by our team, this setup allows the AI to handle roughly 70–80% of the heavy lifting. The result is a streamlined workflow that accelerates development without sacrificing quality.

3. Deployment and Preview
Using Vercel, we deployed preview environments automatically with every iteration. This gave our designers, developers, and content team a way to view and refine the site in near-real time.
We’d edit a line of copy, tweak a layout variant, or adjust motion timing—all within seconds. AI sped up production and reduced friction between roles, allowing designers to write prompts, developers to tune components, and strategists to shape copy.

What Worked (and What Surprised Us)
Speed: What would normally take weeks took days. The end-to-end process—from design intent to live site—was lean, iterative, and collaborative.
Consistency: Thanks to the model context protocols, AI outputs aligned with our brand. No “Frankenstein” pages.
Un expected ideas: Some of the layout ideas, motion patterns, and content suggestions were things we wouldn’t have come up with in a traditional workflow.
Team Activation: The wall between creative and technical? Much thinner.

A Few Lessons Learned
Human in the Loop is Essential AI is a great collaborator, not a decision-maker. Every component, section, and line of copy had a human eye on it. The value is in co-creation, not replacement.
Context Matters More Than Prompts The real unlock came from MCPs. When models were aware about what they delivered or what we wanted in the more suitable format for LLM, the outputs made sense. Without that context, results were generic.

Tooling Matters Only by selecting between different LLM for your agent in Cursor made a huge difference. Our current feel at the moment is that the best tool for coding is Google Gemini 2.5 pro just step ahead of Anthropics Claude 3.7-sonnet.

Where We’re Headed Next

We’re now extending the AI loop into:
Content marketing: AI-first article production and SEO optimization
Analytics: Natural language queries into site performance
Design systems: Auto-documentation and component usage insights
Localization: Multilingual content with human-verified tone control

This is just the beginning. We believe that for many digital-first companies, this kind of AI-enabled creation is about to become the norm—not the exception.

We know the site isn't perfect and AI didn’t build this site alone. But it did make it faster, better, and more fun to build.
You’re reading the proof.