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

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: Design Brief to Layout

We began with design prompts in Figma, powered by the Figma Context MCP. Instead of manually designing every screen, we described structure, vibe, and brand tonality. The AI suggested layout patterns, generated variants, and iterated visual themes aligned with our design tokens.

This approach allowed us to move from concept to concrete design suggestions rapidly, enabling quick iterations and refinements.

2. Browser Tools MCP and Cursor AI: Content Meets Code

Cursor AI served as our IDE copilot. By integrating the Browser Tools MCP, we provided Cursor with access to our design files and brand context. This setup allowed Cursor to generate JSX/TSX component code using our Tailwind and Radix UI libraries, following our naming conventions and folder structure.​

We then incorporated content blocks using Browser Tools MCP, which supplied knowledge about Vertical AI’s services and positioning. The AI generated page content based on that brand knowledge—structured, on-message, and editable via Sanity.​GitHub+9GitHub+9GitHub+9

While humans reviewed and edited every output, AI handled approximately 70–80% of the heavy lifting.

3. Deployment and Preview

Using Vercel, we deployed preview environments automatically with every prompt 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 voice and component library. No “Frankenstein” pages.
• Creativity: 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: Our designers got into prompt writing. Our strategists were tweaking CSS classes. 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 of our design system, brand strategy, and content architecture, their outputs made sense. Without that context, results were generic.
• Tooling Matters Using AI-native tools like Cursor and Browser Tools MCP made a huge difference. They’re designed for human-AI collaboration, not just ChatGPT with code pasted into VS Code.

Where We’re Headed Next

We’re now exploring how to extend 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.