The argument in one line.
A non-technical creator can direct Claude Code to build a fully animated personal website by treating every section as a five-step loop: describe the feeling, mock it up cheaply, react with specific notes, push to preview, then ship only once it is right.
Read if. Skip if.
READ IF YOU ARE…
- A creator or solo founder with an existing personal brand who wants an animated, high-craft personal site without hiring a developer or designer.
- Someone who already has real brand assets (photos, logo files, bio/story) sitting in a tool like Notion and wants to feed that directly into an AI build instead of writing copy from scratch.
- Someone curious what an actual agentic Claude Code build session looks like end-to-end, including background task delegation and iteration cycles.
- A reader deciding whether to use a frontier/limited-access model (like Fable 5) for a big one-time build versus routine maintenance.
SKIP IF…
- You need a multi-page site with e-commerce, gated content, or complex backend logic - this is a single animated landing page, not a full web app build.
- You want a hands-off, zero-effort result - the video's own lesson is that getting it right took several hours of specific back-and-forth, not one prompt.
The full version, fast.
The video walks through building a fully animated personal website with Claude Code running the Fable 5 model, using Higgsfield MCP for AI-generated hero video, Kit for email capture, and 21st.dev purely as design inspiration. The core mechanism is a repeatable five-step loop applied to every section of the site: talk out the feeling and reference (no build request yet), mock up a cheap throwaway version to react to, give specific corrective feedback, push the approved version to a preview link only, and only ship to production after reviewing both desktop and mobile. Key conclusions: feed the AI real brand assets and story (not guesses), never let AI redraw a trademarked logo (composite the real file instead), treat mobile as a separate design pass, and reserve a frontier model like Fable 5 for the big one-time build rather than day-to-day maintenance.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:16
01 · Cold open
States the claim and introduces herself as a creator strategist and founder of Lions Behavior.
00:16 – 01:31
02 · Tools you need
Claude Code, Fable 5, Kit, Dubsado, and 21st.dev - what each tool is for and why.
01:31 – 02:23
03 · Prompt 1: build an animated website with Fable 5
The literal first prompt used to frame the project, referencing Lewis Howes' site and asking Claude to interview her before building anything.
02:23 – 02:55
04 · Feed Claude your brand knowledge base
Pulling bio, origin story, and social links from Notion so the AI works from real material instead of guessing.
02:55 – 03:36
05 · Build the hero section with Higgsfield MCP
Turning an approved still image into a looping hero video; the bridge concept emerges from her Notion content.
03:36 – 04:51
06 · The five-step loop for every section
Talk it out, mock it up, react specifically, port to preview, review then ship - the repeatable framework used for the rest of the build.
04:51 – 05:41
07 · The foundation prompt: build the whole page
The single prompt that assembled the first full version of the site onto a preview link, with real copy, hero video, and Kit signup wired in.
05:41 – 06:41
08 · Change the colors and fonts
Swapping the original black-and-gold palette for cream and navy, plus a mobile-specific hero crop fix.
06:41 – 07:13
09 · Break the site into sections with Claude artifacts
Specs each section (logo ticker, work-with-me modal, content, this-is-nicky stories, community) and shows the New York subway-line navigation concept taking shape inside Claude artifacts.
07:13 – 08:03
10 · Credibility, Instagram story, and content sections
The 'This Is Nicky' bio section and the floating YouTube-thumbnail content section, both tied to the subway-stop navigation.
08:03 – 08:46
11 · Digital products and protecting the trademark
Adding the Draftloop product section, and the fix for AI mangling a trademarked logo on the product box render.
08:46 – 09:29
12 · Community, work with me, and newsletter sections
Lions Behavior community section, the Work With Nicky modal, and the Content Corner newsletter signup.
09:29 – 09:51
13 · The polish pass before publishing
Four-part copyedit pass: grammar/clarity, punctuation rule, one capitalization rule, and consistent emphasis.
09:51 – 11:34
14 · Hard lessons building a website with AI
Recap of the hard-won rules: mock before you build, never let AI draw your trademark, react with specifics, keyframe before you animate, mobile is a separate design, use real content.
11:34 – 12:09
15 · Free playbook and how long it took
Offers the downloadable prompt playbook and is candid that the polished version took several hours of tweaking, not one prompt.
12:09 – 13:02
16 · When to use Fable 5
Guidance to reserve Fable 5 for big one-time builds and switch to other models (Opus 4.8, Sonnet 5) for ongoing maintenance.
Lines worth screenshotting.
- A mockup you can actually feel beats any written description when directing an AI website build.
- Never let AI redraw a trademarked logo - composite the real logo file onto the AI-generated artwork instead of asking the model to draw it.
- Iterate on a still image before generating video, because video generation is slow and expensive to redo compared to a still.
- Mobile needs its own design review on a real phone; a desktop-approved layout can crop a subject completely out of frame on mobile.
- Deploying to a preview link first and shipping to production only once, at the end, keeps early iteration mistakes invisible to real visitors.
- Giving an AI agent your actual brand assets - photos, bio, story pulled from a tool like Notion - produces on-brand output where a written description alone would force it to guess.
- Reference sites should be used for behavioral inspiration only, not copied code, to keep a personal brand site from feeling templated.
- Specific, reactive feedback like 'the folder is too wide' or 'lower the opacity' resolves a design issue in one round, where vague feedback takes five.
- A final copyedit pass with explicit rules - no em dashes, one capitalization rule for headlines and buttons, consistent bold/italic use - keeps AI-drafted copy from reading inconsistently across sections.
- Reserving a frontier or usage-limited model for a single large build, then switching to a standard model for ongoing maintenance, is a practical way to manage a capped usage allowance.
A five-step loop turns vague AI website requests into a shipped site.
WHAT TO LEARN
Directing an AI agent to build brand-facing work goes faster and further when every section follows the same disciplined loop: describe the feeling, mock it cheaply, give specific feedback, preview, then ship once.
- Describe the feeling and reference material first, and explicitly hold off asking for a real build until the direction is agreed on.
- Get a cheap, throwaway mockup before touching the real site - a mockup you can feel beats any written description and saves significant rework.
- Give reactive feedback in concrete terms ('the folder is too wide,' 'lower the opacity') rather than vague impressions, since specific notes resolve in one round instead of five.
- Push every change to a preview link first and keep the public/production version untouched until the very end of the process.
- Feed the AI real source material - an existing bio, story, and social links pulled from wherever they're already stored - instead of asking it to guess who you are.
- Never let an AI model redraw a trademarked logo; composite the real logo file onto AI-generated artwork instead, since the model will reliably get it close but wrong.
- Treat animation as a two-stage process: get the still frame exactly right first, since iterating on a still is fast and iterating on generated video is slow and costly.
- Review every section on an actual mobile phone as a separate design pass, since a layout approved on desktop can crop the subject out of frame entirely on mobile.
- Favor real photos, videos, and logos over AI-generated substitutes wherever the content faces real people, since authenticity reads as trust on a personal brand site.
- Reserve a frontier or usage-capped model for the one big build, then shift routine maintenance and small tweaks to a standard, less usage-constrained model.
Terms worth knowing.
- Fable 5
- A Claude model variant used here as an integrated site-building tool - generating images, video, and hosting a live preview - distinct from using Claude purely as a coding assistant.
- Higgsfield MCP
- A Model Context Protocol connector that lets Claude generate and animate images into short looping videos, used here to create the site's hero background.
- Kit
- An email marketing platform; here it is wired directly into the site's newsletter signup form via its own MCP connector.
- 21st.dev
- A library of website component and section examples used purely for design inspiration, not for copying code or content.
- MCP (Model Context Protocol)
- A standard that lets an AI agent connect to external tools and services (like an email platform or image generator) so it can act on them directly during a build.
Things they pointed at.
00:20toolClaude Code
00:20toolFable 5
00:25toolKit
00:27toolDubsado
00:29tool21st.dev
02:55toolHiggsfield MCP
02:23toolNotion
08:10productDraftloop
08:48productLions Behavior
Lines you could clip.
00:00
“I can't believe Claude's Fable five made me a website, an interactive one at that, and I have no web design experience.”
03:33
“Mock before you build. This is going to save you so much tokens if you just mock it up before you push it to the site.”
03:33
“Never let AI build your trademark. They'll always get it wrong.”
10:35
“I didn't know what I really wanted until I saw it come to life.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphor
00:00I can't believe Claude's Fable five made me a website, an interactive one at that, and I have no web design experience. And if you don't know me, I'm Nikki.
00:09I've worked with some of your favorite personal brands and collaborated with some of the biggest AI companies, and now I'm focused on lion's behavior. Alright. So let's make this website.
00:17So first, let's talk about the tools that I use that you're going to need. Of course, we need Claude. I use Claude code with the model fable five.
00:25Now I do have a max plan, is the 100 plan. I maxed out my usage limit at least once. Second thing that I use was the email provider because on this website, I do collect emails for my newsletter.
00:38And so I use kit for that and I have kit MCP. The m c p just connects kit to claw. That's all that is.
00:44And for inspiration, I use 20first.dev. This is a gold mine. Like, this shows you every possible way that you could create a website between the different features sections.
00:55They have testimonials carousels. Everything is right there.
00:59Now since this is a brand website, you want to have all your brand assets ready. I'm talking about photos bios, logos, everything that you may need to truly show who you are and who your brand is, have that ready.
01:14And then just have the mindset that you're gonna be working a lot in preview. Do not press ship or production just yet.
01:23Everything that we're about to do, I did a lot of it. 99% of it in preview.
01:28Now that we have our tools, let's get into the first prompt. So the first prompt is I wanna build an animated personal website with my brand using Fable five inspired by and whatever the URL is.
01:40So let me show you how this looks like. So as you can see, I use Lewis Howe's website as inspiration.
01:46So I said, I wanna be able to create an animated website using Higgs field MCP with for my own personal Nikki Saunders website. And I gave it a screenshot.
01:57I gave it, uh, the website, and I told it to pull my bio from Notion. And so it has all my social media stuff and just ask me any further questions to see if this is even possible.
02:12That is a very important part because Claude doesn't know you like that and truly what you need. So you need to speak out your vision and it's going to ask you and interview you to get it right. Now for the second part of the prompt, we focus on the knowledge base.
02:26Where is AI pulling the information about you? And so here I said pull my bio and origin story from notion, but that can be Google Drive for you or a city in wherever you keep all the information about you your brand your audience.
02:43So it could just pull from that instead of guessing it. Also, want to give any other resources that you have such as your email server, your YouTube videos, your social medias, all of that.
02:55Now, the first part we want to focus on is the hero section, which is this part right here where I actually have kind of like this video looping of me on . Now, this is where Higgsville MCP comes into play because you're gonna wanna make an image first and then the video.
03:12Now, because I fed Claude notion, it figured out different themes about me and it came up with this concept of the bridge and crossing the bridge. And so it suggested to create a hero video that has to show a bridge to show the connection between AI and creators.
03:30Now at first, it came up with something like this, but this is where we have to tweak. Because with each part in each section that you do, you have to do five things. One, talk it out.
03:39You have to have the conversation of what exactly do you want with Claude, and that is pure conversation. That's not a structured prompt.
03:47That is you going, nah. I don't like this. Let's think about something else.
03:51The second part is going to do create a mock up, whether that is an image first, whether that is an artifact. Let it create a mock up so you don't have to waste all your credits. Third thing is gonna be react specifically.
04:05There are gonna be parts where you may want something just a little bit up or little bit to the left and a little bit to the right, and then you have to explain that. Do not feel like anything is too small.
04:17Say it and let it correct it. Four, once you like everything, then you're gonna push it to the site a k a preview because we haven't published it yet. Then once you made it on preview, make sure it looks good on both desktop and mobile.
04:31And so with some tweaks, we we made this exact hero section, which is amazing. Let me know what you think of this hero section.
04:38Rated one to 10. And the way that we did that, once we approved one of the images, we use this prompt right here to then turn it into a video that looped around.
04:47The hero section is your first impression, so that's why I spend a little bit more time on that. But the next prompt is literally to start the whole page, the foundation. Use my approved copy word for word, my portrait, my hero video as a looping background with the headline over it and then wire the email form to kit and deploy the preview and give me the link.
05:09Gave me the foundation of the website. It was version one of the site.
05:14So we have the hero video. We have me with a bio. It got my YouTube videos.
05:21It got my digital products and it has a section for my newsletter. That was it.
05:28Now, could I have shipped that? Could I have published it and then we've been good? Yeah.
05:32It has all the sections that I needed, but this didn't screen Fable five. So we made some tweaks. And to be honest, that was actually version 1.5.
05:40Isaiah, can you show them the very first one, the black and gold one? Now this is what it originally looked like. We changed the color and the fonts.
05:49And to do that, we just gave it a simple prompt saying, yo, change the palette to cream and navy. Now the very first couple of versions were very basic, and I wanted to break it down section to section of what people follow me for. For me, it's content, it's systems, it's community, it's connecting a k a working with me, and of course the newsletter.
06:11But it's all about the details as well. So you're gonna wanna break it down to sections, but also the details in each section. So for example, like the logo ticker that I have was gonna be in the content section, the theme where you see the end line coming through.
06:28Every single detail matters. And I wanted to show you inside of my own Claude of how the artifacts look when you do get those details in the sections right is when I was trying to do the end line, it shows you right here how it would work through each of the sections.
06:44So you see the content, the systems, the community, and so the end was going along the side for the website. Artifacts need to be your best friend when you're doing this process. And as you can see in my session, I wasn't giving it prompts.
06:58I was having conversations with it. I was telling it what to tweak what I liked what it didn't like changing the videos on the video section that I wanted to do and seeing the previews over and over again every single time it made some changes. When it came to this site, I wanted to make sure each section gave a different experience, a different personal experience you get to know me about, right?
07:19So the very first part when you're see who I've worked with and who I've collaborated with to build that credibility, Then a lot of people were introduced to me through Instagram, and so I wanted to create this Instagram story feature that I have with different pictures with myself and the community and some people that I know and then having the content section of just YouTube videos and some of my favorite YouTube videos that would add value because I didn't want to flood them with all different options of Instagram, TikTok, and Facebook, and LinkedIn.
07:57Whatever your main platform is, just let that be the content section if you wanna share content. And then digital product, I have draft loop which turns your idea into content machine.
08:10Now we all know when we try to do AI images, it kind of redraws our logos and our products. And so this is what it did for draft loop. And I actually have draft loop trademark, so I didn't need it to change it up at all.
08:25And so I had to put this prompt to actually get the full logo on the AI generated box.
08:33And so though the packaging is AI and the background's AI, I had to make sure that draft loop stays intact. Of course, community is super big and so we have lions behavior and giving it kind of this like photo showing people and not just me in there.
08:55And then this part was really dope of working with me. When you click on it, it shares like the different ways that you could work with me, but also has a folder of like different brand work that I've done, which is really fire.
09:13And I got that inspiration through 20 and then to end it with content corner and getting on the newsletter and like I said each section just gives a different experience and a little bit more into who I am.
09:29Now when you have the look of everything, you wanna check the wording. You wanna make it go through a polish pass, and this is going to check the grammar, the punctuation, the capitalization, the emphasis is going to do it all.
09:43So make sure before you hit that publish and tell it to ship it, make sure you do a polish pass. Now some of the hard lessons that I learned, and we talked about a few of them, mock before you build. This is going to save you so much tokens if you just mock it up before you push it to the site.
10:00Never let AI build your trademark. They'll always get it wrong. React with specifics.
10:06I had a certain section that the the speaking one, the work with me, and it had this, like, really super, like, super foggy look.
10:17I had to remove it. Uh, I had to push certain pictures to the right, to the left. Just be very specific of what you need.
10:25Keyframe before you animate. Make sure that still picture is exactly what you want. Everything is lined up exactly what you want.
10:32If not, you're just gonna waste tokens. Oh, this was an important one. Mobile is a whole separate design.
10:38You're gonna want to look at mobile. Don't get too caught up in desktop. You're gonna wanna look at mobile and see if the video is aligned with mobile because it had me going all the way to the right and I wasn't even in the frame.
10:51There were a lot of times where certain things just weren't in the frame. So check mobile and desk at the same time. And since it's a personal brand site, try to use as much real content as you can.
11:03For the hero's sake, you can use a bit of AI for the effect and give the impression, but the rest, you wanna use as much real pictures of yourself, real testimonials, real pictures of your members and who clients and who you've worked with.
11:21This just builds trust, and people are starting to get really finicky about AI created content that you still wanna show a little bit of you.
11:33Now remember, I'm gonna give you this full playbook if you just go to the link in the description as well as hit that QR code. I'm giving you this all. Now I'm not gonna lie.
11:42This took a few hours, not because the prompts aren't good. It has everything to do with I didn't know what I really wanted until I saw it come to life. Now the first couple of versions that I could have published took me about an hour to do the foundation.
11:56But the site that you see and that you can go into the link in the description to see for yourself, that took me several hours and that was just because I was just tweaking and asking questions and trying to make everything better. And this is coming from a person who has no web design experience, but had a subscription to Claude and took advantage of Fable five because Fable five, depending on when you're watching this, is available till July 7, or you can use usage credit to have access to it.
12:26Now the big question is when do you use Fable five? And this is when you use it for big projects like websites, like apps. Let it build that, and then you maintenance it and and tweak it with the other models like opus 4.8 or sonic five.
12:42So let me know what you're gonna be making with fable five. Are you gonna try to make a website? Drop that in the comments.
12:49Let me know what you think about the website. Click on it. Mess around with it.
12:52And then if you want to know more about Claude, click this next video.
The Hook
The bait, then the rug-pull.
Nicky Saunders opens with a simple, almost incredulous claim: an AI model with no web design experience behind the wheel produced her fully animated personal site. What follows is not a highlight reel but a section-by-section replay of the actual prompts, decisions, and corrections that got her there.
Named ideas worth stealing.
03:41list
The Repeatable Loop: Five Moves, Every Section
- Talk It Out
- Mock It Up
- React Specifically
- Port To Preview
- Review, Then Ship
The framework applied to every section of the site build: describe the feeling and reference without asking for a build yet, get a cheap throwaway mock to react to, give specific corrective feedback, push the approved version to a preview link, then review on both desktop and mobile before shipping to production.
Steal forAny AI-assisted design or build workflow where uncontrolled iteration wastes tokens or credits
09:57list
Hard-Won Lessons
- Mock before you build - a mockup you can feel beats any description
- Never let AI draw your trademark - composite the real file
- React with specifics - 'too foggy,' 'push it right' - one round instead of five
- Keyframe before you animate - get that exact still frame right first
- Mobile is a separate design - review on a real phone
- Use real content - real photos, videos, faces, logos, not templates
A consolidated list of the practical rules learned the hard way during the build.
Steal forAny creator directing an AI agent to build brand-facing visual work
How they asked for the click.
VERBAL ASK
11:34link
“Get the full playbook - every phase, every prompt, ready to copy and swap in your own details. Go to the link in the description.”
Clean full-screen CTA slide with QR code and 'link in the description' button, delivered mid-video after the lessons recap rather than only at the very end, then reinforced again in the closing seconds.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
Visual structure at a glance.
