Set up the foundation manually. Let AI handle the polish. Ship fast.
We needed a website for Venpo — an AI-powered platform that monitors changes to vendor legal documents (ToS, Privacy Policies, DPAs) and explains what changed and why it matters to your business.
The site had to look premium, communicate clearly, and be live fast. Here’s exactly how we did it.
The approach: manual foundation, AI polish
The workflow is simple:
- Pick a solid Framer theme
- Write all the copy yourself
- Connect Claude to Framer via MCP and let it do the visual polish
Each step builds on the previous one. The human does strategy and messaging. The AI does execution and refinement.
1. Start with a Framer theme
We picked a clean, modern Framer theme with good bones — solid layout, responsive out of the box, well-structured components. Think of it as buying a well-built house instead of pouring your own foundation.
No shame in using a template. You’re paying for structure, responsiveness, and a design system that works. Then you make it yours.
2. Write the copy first
Before touching any design, we wrote every word on the site. Headline by headline. Section by section. CTA by CTA.
Design without copy is decoration. You can’t decide if a section needs two columns or three if you don’t know what it’s saying.
We focused on:
- What problem we solve — in one sentence
- Who we solve it for — compliance teams, legal, ops
- Why now — regulatory pressure increasing, vendor ecosystems growing
- What makes us different — AI-powered impact analysis personalized to your business
This took multiple rounds. We argued about words. That’s how you get messaging that lands.
3. Connect Claude to Framer via MCP — this is where it gets interesting
MCP (Model Context Protocol) lets you give Claude direct access to tools and platforms. Not copy-paste, not “generate me some code” — actual, direct manipulation of your Framer project.
Claude could see our components, understand the structure, and edit everything in place.
Here’s what we used it for:
Design consistency
The theme was good but inconsistent in places. Spacing varied between sections, font sizes weren’t systematic, colors drifted. Claude went through every component and enforced a tight, consistent design system.
New sections
We needed layouts the theme didn’t have — feature comparisons, use-case breakdowns, social proof. Claude built them inside Framer, matching the existing design language.
Motion and interaction
This is where the biggest visual jump happened — and where being specific really pays off.
For each animation, we described:
- What it should represent — not just “animate this,” but the intent behind the motion
- How we imagined it — direction, speed, feel
- How many steps it should have — simple fade-in vs. multi-stage sequence
We also sent screenshots from the actual Venpo platform as reference, so Claude could match the animations to real product UI. The result was motion that felt connected to the product, not generic template animations.
Claude added:
- Scroll-triggered animations tied to product concepts
- Intentional hover states (not gimmicky)
- Smooth section transitions
- Micro-interactions on buttons and cards
The site went from “solid template” to something that looks like it had a design team behind it.
Visual hierarchy
Claude restructured sections for better eye flow — stronger CTA placement, better contrast on key messages, white space that actually breathes.
The result
Under a week, start to finish. A website that:
- Looks premium and intentional
- Communicates clearly what Venpo does
- Is fully responsive and fast
- Has polish that would normally take a designer weeks
Why this works
-
The theme gives you ~60% for free. Layout, responsiveness, base components — solved.
-
Human-written copy gives the AI direction. AI is great at design execution, but messaging strategy needs to come from people who talk to customers.
-
Claude + MCP eliminates the feedback loop. Instead of explaining what you want to a designer, reviewing, giving notes, waiting — the AI iterates in real-time. Changes that would take hours take minutes.
-
The quality ceiling is high. The animations, the consistency, the details Claude catches that you miss — it’s what happens when design execution becomes instant.
Tips if you try this
- Send screenshots as reference. This is the single biggest quality multiplier. Found a section you love on another site? Screenshot it and send it to Claude. The output gets dramatically more specific and on-point compared to text-only descriptions.
- Start with strong copy. The clearer your messaging, the better the AI’s design decisions. Garbage in, garbage out.
- Be specific about animations. Don’t just say “add animations.” Describe what the animation should represent, how you picture it, how many steps. “A 3-step reveal that shows the document scanning flow, left to right, with a subtle glow on completion” beats “make it animated.”
- Use real product screenshots for context. When Claude can see your actual platform UI, it designs sections and animations that feel cohesive with the product — not just generic website polish.
- Have reference sites ready. “Make it feel like Linear’s site but warmer” is way more useful than “make it modern.”
- Don’t skip human review. Claude optimizes for what it thinks you want. A human eye catches things like “this animation is cool but distracting from the CTA.”
- Pick a quality theme. The better the starting point, the less work for both you and the AI.
TL;DR
Pick a good Framer theme. Write your copy manually — this is the part that needs a human brain. Then connect Claude to Framer via MCP and let it handle the visual polish: consistency, animations, new sections, hierarchy. You’ll end up with a site that looks like it took weeks, built in days.
The tools exist right now. Use them.