08:54Lukas Margerie · Tutorial
Claude Code's New Browser Mode Is a Game Changer for Designers
A Claude Code tutorial: circle inspiration on any live site and the built-in browser rebuilds your app to match it.
July 14thThe argument in one line.
A single Claude Code session can be turned into a repeatable, chat-triggered agent by testing a workflow live, capturing what worked as a markdown spec, and wiring that spec into a team-chat platform.
Read if. Skip if.
READ IF YOU ARE…
- You build with Claude Code and want a concrete example of turning an ad-hoc session into a reusable, documented agent.
- You do client or freelance web design work and want a faster first-pass redesign step for generic template sites.
- You're evaluating MCP servers for design work and want to see BYQ, Higgsfield, and MagicPath used together in one real workflow.
- You want a pattern for deploying a Claude Code agent somewhere non-technical teammates can trigger it from chat.
SKIP IF…
- You're looking for a finished, production-ready redesign tool — this is a working prototype, not a packaged product.
- You don't use Claude Code, BYQ, Higgsfield, or MagicPath and aren't looking to adopt any of them.
The full version, fast.
The creator sets out to fix a recognizable problem: websites that are obviously one-shot AI outputs, with the same generic hero section and gradient. He builds a Claude Code agent that takes a URL, pulls its copy and brand, and rebuilds it using real components from the BYQ MCP library rather than paraphrased ones, generating matching images and video with the Higgsfield MCP, and previewing two variants side by side in MagicPath. He tests and refines live — catching that the agent skipped BYQ's actual components on the first pass, then correcting it — before using a voice tool called Clicky to convert the working workflow into a markdown agent spec. That spec is then loaded into Buzz, a chat platform for AI agents, as a named agent ('Marlo') that teammates can trigger just by pasting a URL into a channel. The final test runs the deployed agent against an unrelated Lovable-built site and restyles the output using a curated BYQ creator collection.
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 – 02:05
01 · Intro: URL → redesign agent workflow
The creator frames the problem — websites that are instantly recognizable as one-shot AI output, same hero section and gradient — and outlines the plan: a Claude Code agent that takes a URL, uses the BYQ MCP for real components, the Higgsfield MCP for matching images/video, and MagicPath to preview the result. He opens a new Claude Code session in a folder called 'redesign agent' and enables bypass-permissions mode before starting.
02:05 – 03:57
02 · Drafting the agent prompt with Clicky
Using a voice-dictation tool called Clicky, he describes the intended workflow out loud — analyze a URL's copy, images, and brand kit, use BYQ components to build two design variants, call Higgsfield for any needed images or icons, and post both variants to MagicPath. Clicky turns the spoken description into a structured prompt, which gets pasted into Claude Code and submitted.
03:57 – 06:50
03 · First run: URL to two variants in MagicPath
He pastes the target URL (an analytics-platform landing page) into MagicPath and gets a first pass of two redesigns. Checking the agent's work, he asks directly whether it actually used the BYQ MCP components — it hadn't, it had only read their metadata — so he issues a follow-up command to force it to pull the real components, and both variants rebuild with genuine BYQ sections (hero, bento grid, pricing comparison, testimonials). He prefers the second variant.
06:50 – 09:17
04 · Refining variant B (footer, nav, Higgsfield images)
He iterates on the preferred variant: swaps in a BYQ footer component with a video background, uses the Higgsfield MCP to generate a matching background video for it, then swaps the navigation for a BYQ mega-menu component and regenerates its dropdown image with Higgsfield. He confirms the result is fully responsive by checking a mobile preview.
09:17 – 11:27
05 · Creating the agent spec & adding it to Buzz
With the workflow proven, he uses Clicky again to dictate a prompt asking Claude to write a markdown agent spec covering the goal, phases, and rules of the workflow. He then switches to Buzz, a team-chat platform for AI agents, creates a new agent named 'Marlo' (parrot avatar) pointed at the Claude Code session folder and the spec file, and adds it to a new #redesign channel.
11:27 – 13:53
06 · Testing the agent on a Lovable site + final variants
He grabs the URL of an unrelated site built with Lovable and pastes it into a message tagging Marlo inside Buzz. The agent asks a clarifying question about which MagicPath file to use, then produces two new variants. He also demos BYQ's curated creator collections, asking Marlo to restyle both variants using one specific creator's component set, which applies a consistent new hover-state and section style across both designs before signing off.
Lines worth screenshotting.
- The first version of an AI agent often fakes the intended behavior — the agent claimed to use BYQ's components but had actually just read their metadata, and only pulled the real components after being explicitly told to call the retrieval command.
- Turning a working Claude Code session into a reusable agent comes down to one habit: test the workflow live first, then convert what actually worked into a markdown spec, not the other way around.
- A markdown agent spec needs three parts to be reusable: the goal, the phases involved, and the rules the agent must follow.
- Deploying an agent into a team chat platform (Buzz) means anyone can trigger a multi-step Claude Code workflow just by pasting a link into a channel, without opening a code editor.
- Component libraries like BYQ solve a specific failure mode of AI-generated redesigns: without a real component source, the model tends to reproduce the same generic hero-section-plus-gradient template it's being asked to fix.
- Voice-to-prompt tools (used here via a tool called Clicky) remove the bottleneck of translating a visual idea into a written prompt — the workflow, the markdown spec, and follow-up refinement prompts were all dictated rather than typed.
- Pairing a component-and-layout MCP (BYQ) with an asset-generation MCP (Higgsfield) covers both halves of a redesign: layout structure and visual assets, so neither has to be faked or stock-imaged.
- Curated creator collections inside a component library (e.g. a specific designer's component set) are a fast way to apply a consistent visual style across multiple redesign variants in one prompt.
- Reviewing two AI-generated variants side by side (in MagicPath) surfaces preference quickly — the creator picked one variant over the other within seconds of seeing them both rendered.
- An agent's early output should be spot-checked, not trusted — asking the agent directly whether it used the intended tool ('did you use the BYQ MCP?') exposed the shortcut it had taken.
Prove the workflow live, then write the spec — not the other way around.
WHAT TO LEARN
A reusable AI agent is built backwards from a working session: run the workflow live, catch where it fakes a step, fix it, and only then convert what actually worked into a spec you can deploy elsewhere.
01Intro: URL → redesign agent workflow
- Frame the automation around a specific, recognizable failure pattern first (generic AI-made websites) rather than a vague goal, so you know exactly what success looks like.
- Set up a dedicated working folder and a single Claude Code session before drafting any prompt — the workflow needs a stable home before it's worth spec'ing.
02Drafting the agent prompt with Clicky
- Use a voice or sketch tool to describe a multi-step workflow out loud before writing the prompt yourself; it surfaces the sequencing faster than typing does.
- A markdown agent spec needs three sections to be reusable by anyone later: the goal, the phases, and the rules.
03First run: URL to two variants in MagicPath
- Test end to end before trusting an early result: paste the target input, generate the first output, and treat it as a draft to be interrogated, not a finished answer.
- Verify a tool-using agent actually called the tool it claims to have used — ask it directly, and correct it with an explicit command if it took a metadata shortcut instead.
- When two AI-generated options are ready, compare them side by side rather than picking blind; stated preference should come from seeing both rendered.
04Refining variant B (footer, nav, Higgsfield images)
- Layer in supporting components (footer, nav) one at a time and regenerate only the assets that component needs, instead of re-running the whole redesign for a small change.
- Check responsiveness before calling a variant finished — a design that only works at desktop width isn't done.
05Creating the agent spec & adding it to Buzz
- Once a workflow is proven, capture it as a spec immediately, before switching to the deployment surface, so the deployed agent's instructions match what was actually tested.
- When deploying an agent into a team-chat tool, point its instructions at the exact session/folder that was tested, and treat the markdown spec as the authoritative source — don't let the two drift apart.
06Testing the agent on a Lovable site + final variants
- Test the deployed agent on a target it wasn't built for; a workflow that only works on the one site you designed it against isn't actually reusable.
- Curated creator collections inside a component library are a fast way to restyle multiple outputs consistently in a single follow-up prompt, instead of manually re-styling each one.
Terms worth knowing.
- MCP (Model Context Protocol)
- A protocol that lets an AI model like Claude call out to external tools and data sources — in this workflow, component libraries and image generators — as part of completing a task.
- BYQ
- A component and section library for web design (built for Webflow) that an AI agent can query through its MCP to pull real, pre-built layout sections instead of generating a page from scratch.
- Higgsfield MCP
- An MCP that generates images and video assets on demand, used here to create consistent photography, icons, and background video for a redesigned site.
- MagicPath
- A design tool where a Claude Code agent's output — in this case, two website redesign variants — can be posted, previewed, and compared side by side.
- Buzz
- A team-chat platform for deploying and interacting with AI agents, similar in layout to Slack, where a named agent can be triggered by tagging it in a channel.
- Agent spec (markdown file)
- A markdown document capturing an agent's goal, workflow phases, and rules, written after a workflow is proven to work, so the same agent can be re-run or deployed elsewhere.
- Clicky
- A voice-dictation tool used to turn spoken descriptions of an idea or task directly into a structured text prompt, copied to the clipboard for pasting into Claude Code.
Things they pointed at.
11:33toolLovable
Lines you could clip.
00:21
“I'm gonna show you how you can take any URL from the web... and create a custom agent in Claude Code... to automatically create brand new styles and variants for that existing URL using a series of different MCPs.”
08:10
“The logo is very AI generated. This is just a quick example just to get started, but we have all of these new sections that look pretty good.”
04:58
“So I'm just gonna ask it: did you use the BYQ MCP and use their components for the redesign? And so it didn't really use their components.”
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.
Hey, guys. So in today's video, I'm gonna show you how you can take any URL from the web, like for example, this design that we have in front of us and create a custom agent in Cloud Code to use in Cloud Code and to also use in Buzz to automatically create brand new styles and variants for that existing URL using a series of different MCPs.
And guys, if you're interested in these types of workflows, I actually go live and do all of that deep work in these live sessions. So if you wanna join that, link is down below. Alright.
So the first thing that we wanna do here is we wanna open up the Claude desktop app, and we wanna open up a new Claude code session. I'm gonna use a new folder. I'm gonna call it redesign agent.
And in order to do this, all you have to do is just click on open folder and you can create a new one. I'm gonna hit bypass permissions just so that, you know, Claude doesn't have to ask me every time to accept the different tasks that it's trying to do.
And the first thing to do in order to set up an agent is just to have a solid idea of what you wanna do, make sure that the work flow actually works, and then convert that into a markdown file so that you can repeat it whenever you want. So you can repeat that workflow whenever you want. So my goal with this experiment is to find websites like this where you can, you know, immediately tell that this was built with AI one shot, not a lot of effort, and eventually have a system where we can paste that into ClotCode.
Then ClotCode uses the BYQ MCP, which is just like a, you know, huge library of different components.
If you log in and you go under sections, you can kind of scroll down and see what you're looking what you're looking at. So like components like this, really nice, and Claude would basically take these components and redesign that initial site.
And then we're gonna integrate Higgs Field MCP so that if there's an image in this site that needs to be kind of improved or if there are any images or icons that can be added to the site to make it look nicer, the agent can automatically detect that and use this MCP. And then at the end, use Magic Path to kind of see the different variants that Cloud Code that this agent builds out for you.
Now if you're like me and you have a tough time kind of converting your ideas into a text prompt, I actually use this tool called Clicky that I've discovered I think about two weeks ago and they have a very generous free plan by the way. You can literally draw out the strategy that you're trying to accomplish here and so for example, to summon Clicky with two fingers, you wanna hold down control and option at the same time and say, hey, Clicky, what's up?
I'm trying to build out this Cloud Agent where I give it a URL. It analyzes the URL in terms of the context copy, image assets, brand kits, colors, etcetera.
And then, basically, this agent would use the BYQ MCP to, you know, be the it would use the sections, the components from BYQ to create two new variants, two new design variants for me.
And whenever there's a section from these BYQ components that requires an image or or icons, it would use the Higgs field MCP to generate these in a in a kind of consistent photoshoot style or for the icons, like a consistent iconography style.
And then once that's done, once it creates the two variants, it'll basically post my two variants into MagicPath into a MagicPath folder where I can just see the variants next to each other, and it's gonna use the MagicPath skill.
So with all this being said, Clicky creates a prompt so that I can just paste it into my into Cloud Code, just add it to my clipboard. And we can then paste that into Cloud Code, and I'm actually going to switch the models of Fable five. And actually before we start with this, I'm gonna say just before we start, make sure that you're connected to the MCPs and the Magic Path skills.
So let's go ahead and submit this. And so all of these integrations seem to be set up so it's ready to start the workflow. And now before we do that, I'm just gonna open up the browser over here.
I'm gonna paste in that URL of the site that we wanna redesign, and I'm gonna open up a new tab. Search for magicpath.ai and log in, and I'm gonna create a new file.
We're gonna call it URL to to variants or something like that. Click on enter, and we're just gonna close this and close this as well.
Perfect. So let's copy this URL just to kind of test it out to see how this how this workflow looks like, and we're gonna paste this in here. And so I can see a few images being generated.
Not really sure if I'm liking this style, but we can again go ahead and refine this and we can see that something is being built here inside of Magic Path already. Now we get two fresh designs over here as of, you know, initial pass, and I don't really think that it used the BYQ MCP.
So I'm just gonna ask it, You know, I'm gonna change the model just to kind of make it credits or token sustainable. I'm just gonna ask it, did you use the BYQ MCP and use their components for the redesign?
And so it didn't really use their components. It just, like, called search components and used metadata to kind of understand how these components look like, but now what it's gonna do is that it's gonna use this command get b y q components to actually use these these components from their library.
So now it's rebuilding the design. That's great. And it's rebuilding this design.
That's also great. And so that's why it's important to test these things out because then you can refine these different these these little details. And then eventually when you wanna use this agent again, you have this markdown file that's completely updated with exactly what you what you need.
Right? So we have the call to action at the bottom. We can scroll up.
Still, you know, the logo is very AI generated. You know, this is just a quick example just to get started, but we have all of these new sections that look pretty good. We have this, like, little bento grid.
We have this nice hero section where you can kind of skip through these different features. And now look at this one.
This is the second one. The hero section actually looks very nice. There's, a subtle little parallax effect also.
I don't know if you guys can see it. And then we can scroll down. We have these new sections.
Everything looks pretty clean. Nice little gradient that actually fits the design. Cool little section down here to compare the different pricing models.
We have this over here, which is, you know, the testimonials. Maybe we can refine it a bit, you know, with, like, some images or something like that. And then over here, the footer and the the CTA, pretty pretty straightforward, but a much better looking design.
I'd actually I actually like it much more than this one. And with that being the case, we can move it down here. We can choose this variant b.
And in order to refine this variant b, I can just scroll, and maybe we want a better nav bar. Maybe we want we can see I kind of like the icons. They they they fit, I'd say, but let's scroll down here.
So better nav bar and the better footer. I think that the footer looks pretty standard and better call to action over here. So we can go into BYQ and look at the sections and we can search for, like, footers, for example, and we can scroll and maybe something like this would be cool with, a video.
And so I'm gonna summon Clicky again. Hey, Clicky. I would like for you to add a new prompt to my clipboard where I wanna tell Claude to use this this video background footer CTA by Evermind and and also use Higgs field to replace the video to something that matches the current website.
So please add that new prompt to our clipboard. So now that prompt is done, I can paste it in here. And then up here, I I just wanna write for variant b only, and then we have the prompt.
We can then submit this. So I'm expecting now a new footer, a new footer and CTA, and then a new video that kind of, uh, matches the the the style or or whatever this company does, which is Analytics, I believe.
Alright. And we can now zoom in and scroll down and voila, we have our new video.
We have our new footer. I can click on this little icon over here to preview the the entire page, scroll down here and boom, we get it. It's looking actually pretty nice.
And then we can go back to BYQ and again search for a navigation bar. I like this one over here.
So click it, give me a quick one sentence prompt to give the cloud to use this mega menu navigation bar by for human.
So just give me that prompt one sentence long, add it to my clipboard, and then we can just go ahead and just paste this in here and send this. Alright. And now to test, let's see.
We can hit this. Cool. Again, we'd probably have to change the image over here, but you know, you can do that with the Higgs field MCP and to preview it over here, again, all working everything responsive as well, which is great.
And so in a mobile view, we can go like this and boom, everything is responsive. I'm gonna go back here to magic path and make sure the menu is open.
Then I wanna click on annotate and I wanna annotate this little image over here, add it to chat and just tell Claude to use Higgs Field MCP to create a better image for a drop down.
And whenever I tell you to add a new component from BYQ, please always use Higgs Field to generate new image video assets when needed. So let's send this. Alright.
And now we can click here and view the new image. Boom. We have that new image over here in the right side.
See Loomic in action. And that's basically it. We have our first initial draft for our agents.
And now to wrap it all up and to actually create a markdown file for this agent, and again, I'm gonna use Clicky to help me create a really good prompt for this. Hey, Clicky. I want to basically create a markdown file for this Cloud Code agent.
Please create the prompt so that it can create it for me. The markdown file must include the goal of the agents, the different phases that are involved in this agent workflow, and the rules that that it should follow.
So just create that prompt for me and add it add it to my clipboard so I could just paste it in here to send to Claude. I can paste in that prompt that Clicky gave me, send it to Claude. And for the next step, I wanna use Buzz, which is like a Slack for agents so you can bring in this agent to this Buzz channel and interact with it there.
So you can just send links there, and you don't have to open Cloud Code or anything. And I actually have a great video on this if you wanna check it out. I'll have it, uh, you know, linked, uh, somewhere down below, But it kind of looks like this.
Again, very similar to Slack. We wanna go up here to the top left where it says agents, and we can click on add new agent, create agent. And actually, when we go back to Cloud Code, we can see that this this is the markdown file.
It's called website redesign agent spec dot m d, and we are using this redesign agent folder, so it's also important to add that to the agent instructions inside of Buzz. Hey, Clicky. So make sure that you update the the agent instructions.
Just add it to my clipboard so I can just paste it in there to use the redesign agent work workspace, right, because that's where we're this is our session in Cloud Code. And, obviously, this is the markdown file that I created, so just keep that in mind.
Add that to the instructions that you created and just add it to make the board. And so you kind of wanna read through this agent instructions, use this redesign agent folder as an active session context.
Great. Treat the current markdown file as the authoritative spec for this agent. We have the workflow, we have the rules.
I'm gonna call the agent Marlo and look for some funny emoji. Let's make Marlo a parrot with an orange background so that we we know that it's coming from Claude. Click on create, and then I can create a new channel and we're gonna call it redesign.
Click on create channel. I'm gonna add an agent. We're gonna add Marlo over here.
Click on add agent, and I'm just gonna go to Lovable's website and look for some templates, maybe something like this. And so this is the design, you know, very looks like a like a lovable website, and I'm just waiting for the publish, but look, this is exactly what we get.
Alright. Now we have the URL, so I can go back to Buzz, and so I'm going to tag mister Marlowe over here or or parrot and add the URL.
And sometimes it's not gonna work in the beginning because this has happened before. If you update Buzz, it's gonna, like, prompt you to re auth, you wanna do that again. And now it's authenticated, so let's go back and let's tag Marlowe again and paste.
Boom. He's looking at the message and now you can see that something is happening. And basically now Marlowe's asking me what file you know, where should it design this in MagicPath?
Should I create a new file? I told it to use the same LUMIK file, which is this one over here where I have these designs. So it's now switching to this LUMIF file.
Alright. And basically what we get, let me just make this full screen to kind of show you guys. We have variant one on the left, variant two on the right.
I can scroll down over here and look at the different sections.
Do the same thing over here. You can see the different languages.
And what's also cool here is that if you go to explore tab in BYQ, you can go and look at collections from creators. So Haldon Miller, they have a a particular style and we can use the Haldon Miller components.
So I can go over here and again, type Marlowe and let's say, let's redesign these new variants and use the Haldon Miller components. And now we get this new style of design with this like new hover effect for the buttons. We have these nice sections that look very clean.
We have the different languages that we can see over here. We have the different pricing.
Really neat sections, really nice animations as you kind of scroll down.
This is the kind of CTA and then we have the footer at the end. And then this is the second version, master new language, transform your future. We have new components all using that same style that we saw earlier.
Scrolling down, everything looks pretty cool. Awesome. So we have our two variants.
And that's pretty much it for today's video, guys. Please let me know if you guys have any comments or questions. And like always, thank you all so much for watching.
Hope to see you next time. Goodbye.
The Hook
The bait, then the rug-pull.
The pitch lands in the first line: paste in any URL and a Claude Code agent will rebuild it into finished design variants, wired together from a component library, an image generator, and a design-preview tool.
Named ideas worth stealing.
03:01list
URL-to-redesign agent pipeline
- URL
- BYQ MCP (components)
- Higgsfield MCP (images/video)
- MagicPath Skill (preview + compare)
The four-stage pipeline sketched on a whiteboard: feed the agent a URL, pull real design components from BYQ, generate matching imagery with Higgsfield, and post the finished variants to MagicPath for side-by-side review.
Steal forany Claude Code agent that needs to go from a single URL to a finished, comparable design output
How they asked for the click.
VERBAL ASK
02:07product
“I actually use this tool called Clicky that I've discovered I think about two weeks ago and they have a very generous free plan by the way.”
Woven into the workflow as a demoed tool rather than a scripted ad read — the affiliate link and discount code only appear in the description, not spoken on camera.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
