Let’s be honest — most “AI-generated websites” look… AI-generated. 😬 Same layouts, same fonts, same soulless hero sections. So when people started asking me to show my full AI website design workflow, from the very first prompt all the way to a published, production-ready site, I figured it was time to actually sit down and document the whole thing.
This isn’t a “10 AI tools you must try” listicle. It’s the real, messy, iterative process I used to build a premium-looking, Awwwards-style portfolio site for a fashion photographer — combining Claude Code, the Fable 5 model, Cursor, and Framer. If you’re a designer, freelancer, or solopreneur trying to figure out how AI tools actually fit into a real client workflow (not just a demo), this one’s for you. 🚀
By the end, you’ll understand not just which tools I used, but why I switched between them at each stage — and where each tool hit a wall.
Why I Built This AI Website Design Workflow in the First Place
I wanted a workflow that could take me from a blank page to a fully customizable, CMS-powered, publish-ready website — without getting stuck in raw code I couldn’t hand off or edit visually. That’s the real tension in most AI website builders right now: tools like Claude Code are incredible at generating code fast, but the second you need to tweak colors, swap images, or hand the site to a client, you’re back in the codebase.
So my approach became a hybrid one: use AI coding agents for the creative heavy lifting, then migrate everything into a visual, no-code environment for the actual editing and publishing. That’s where Framer comes in.
Step 1: Prototyping With Claude Code and Fable 5
The very first step was building a starting point — in this case, an image spiral gallery for a fashion photographer’s landing page. I found an example site online with a spiral gallery effect I liked, and I used it purely as creative inspiration, not something to copy.
My actual prompt was simple: create a similar spiral gallery effect for a fashion photographer’s landing page, styled like an Awwwards-winning site. I fed that prompt to Claude Code running the Fable 5 model (which had just come out at the time), and in about 30 minutes, it generated a working first version of the site.
That’s the part people underestimate about AI coding tools: the prompt doesn’t need to be complicated. A clear creative direction plus one strong visual reference can get you 80% of the way to a compelling first draft.
The problem? Claude Code generates everything in React, which means no CMS, no visual editing, and no easy way to build out a full multi-page portfolio site on top of it.
Step 2: Migrating the Design Into Framer With Cursor
Once I knew I wanted a full site — including a CMS-driven portfolio — I needed to move from raw code into something visually editable. Framer had just released a feature for connecting external AI agents (you can find it at framer.com/agents/external), so I decided to test it out.
Here’s the interesting part: even though the original prototype was built in Claude Code, I switched to Cursor for the migration step, using Framer’s own skill inside Cursor. My prompt was straightforward — fully migrate and recreate the sample landing page into an empty Framer project I linked to.
Cursor pulled this off in around 5 minutes for the homepage and menu. Genuinely impressive for a full design migration.
There was a catch, though: Cursor recreated the design as a single custom code component inside Framer — not an editable, native Framer page. That meant none of the images were linked properly, and there was no built-in way to connect a CMS collection to a code component inside Framer.
The Workaround: Native Framer Linking Instead of Code Components
Instead of fighting the code component, I rebuilt the gallery using Framer’s native ticker functionality, where images link directly to the component through Framer’s interface. This let me:
Modify text and background colors directly inside Framer
Add a lightbox blur effect
Drag and link images without touching code
This is a genuinely useful lesson if you’re building with AI-assisted code components: sometimes the fix isn’t “prompt harder,” it’s swapping to the platform’s native building blocks for the specific piece that needs to stay editable.
Step 3: Building Out CMS Pages and the Full Site Structure
With the homepage sorted, I needed the rest of a real website: an About page, Contact page, a custom 404, and — most importantly — a portfolio section backed by a CMS collection with individual project detail pages.
Again, I used an AI agent to generate these pages, prompting it to match the homepage’s existing style (colors, text treatments, spacing) rather than starting from scratch. For the portfolio grid specifically, my prompt specified:
A CMS-linked page tied to the portfolio collection
Ten images per gallery
Text headings for each project
SEO-friendly meta title and meta description fields, linked dynamically per project
That last point matters more than it sounds like — building SEO fields directly into your CMS structure from day one means every new portfolio piece you publish is automatically optimized, without extra manual work later.
Step 4: Adding the Details That Make a Site Feel Premium
This is where a lot of AI-generated sites stop — and where I kept pushing. A few finishing touches I added through additional AI prompts:
A hover distortion effect on the portfolio grid images, bending toward the mouse cursor
A custom global cursor with its own hover states, present across every page
A lightbox showreel on the homepage, triggered by clicking a component
A full-screen custom menu, which — full transparency — took the most iterations to get right, since the agent initially built separate components for each menu item in a strange way
That menu is a good reminder that AI agents don’t always get complex interactive components right on the first (or fifth) try. Sometimes the fastest fix is doing the simple part yourself (in this case, building the menu links manually) and letting the agent handle the more complex animation logic around it.
Step 5: Publishing — No Hosting Required
Once everything was styled, linked, and customizable, publishing was the easy part: one click inside Framer, and the site was live on the web. No separate hosting setup, no deploying to Vercel — which is a real advantage of finishing your build inside Framer rather than staying in raw exported code.
Actionable Tips If You Want to Try This AI Website Design Workflow Yourself
Start with a strong visual reference, not a long prompt. One example site plus a clear one-sentence brief outperforms a paragraph of vague instructions.
Use AI coding agents (Claude Code, Fable 5) for the first creative prototype, not the final deliverable — they’re fastest for exploring a concept.
Migrate into a visual builder like Framer the moment you need CMS collections, client editability, or non-technical handoff.
Watch for code components that block CMS linking — if an agent wraps your design in a custom code component, consider rebuilding the specific interactive piece using the platform’s native tools instead.
Bake SEO fields (meta title, meta description) into your CMS structure early, so every new page you publish inherits good SEO hygiene automatically.
Save the trickiest interactions (like custom menus) for last, and don’t be afraid to build the simple scaffolding yourself while letting AI handle the complex animation on top.
Wrapping Up This AI Website Design Workflow
What I love about this process is that it’s not “AI does everything” or “no-code does everything” — it’s a deliberate handoff between tools at exactly the point where each one is strongest. Claude Code and Fable 5 for fast creative prototyping, Cursor for migration, and Framer for the visual editing, CMS, and one-click publishing that makes a site actually usable long-term by a real client or business owner.
If you want to see this entire process in action, step by step, with all the prompts and iterations on screen, watch the full tutorial video — and if you’re into AI design tools and vibe coding in general, subscribe to the newsletter so you don’t miss the next breakdown. 👀
FAQs
What is an AI website design workflow?
Can Framer connect to AI coding agents like Claude Code or Cursor?
Why migrate a design from Claude Code into Framer instead of keeping it in React?
What's the downside of using AI agents to build code components in Framer?
Do I need to know how to code to use this AI website design workflow?
