The argument in one line.
Claude Code's in-app browser turns visual feedback into direct instructions — circle a reference site, send the screenshot, and Claude rebuilds your project's colors, layout, and components to match without you describing anything in words.
Read if. Skip if.
READ IF YOU ARE…
- You build software with Claude Code and want your UI to look less like a generic AI-generated template.
- You're a solo developer without a designer and need a fast way to translate visual inspiration into real code.
- You're curious how MCP-connected tools like Mobbin or canvas tools like MagicPath plug into a coding agent.
SKIP IF…
- You're looking for design theory or principles — this is a tool walkthrough, not a design lesson.
- You don't use Claude Code or a similar AI coding agent day to day.
The full version, fast.
Claude Code's desktop app now has a built-in, sandboxed browser that opens multiple tabs and feeds visual references straight into the coding chat. The workflow: build a rough version of your app, open it in the in-app browser, then circle inspiration from any live site with the annotate tool (or grab one element with the select tool) and send it to chat as a screenshot instruction — Claude rewrites the CSS to match. Two connected MCP tools extend this further: Mobbin researches comparable design sections from across the web, and MagicPath ($10/month) gives Claude Code its own infinite canvas to generate, remix, and hand-edit multiple layout variants. The result is a faster path from a boring default AI layout to a reference-matched design without writing prose descriptions of colors or spacing.
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:48
01 · Cold open + community plug
Introduces the new in-app browser — multi-tab, sandboxed, configurable session persistence — then pitches the free weekly community.
00:48 – 01:58
02 · Setup: build the World Cup page
Prompts Claude to scaffold a plain landing page showing World Cup top scorers, runs it on localhost, and opens it inside the in-app browser.
01:58 – 04:20
03 · Annotate + select tools
Circles a graph on a reference site and sends it to chat to replace the default bar chart; uses the select tool to grab a specific section and restyle it to match a FIFA-style layout.
04:20 – 06:47
04 · Mobbin MCP research
Installs the Mobbin MCP, asks it to research comparable hero sections, applies a Kajabi-style redesign, and swaps gradient colors by circling them in different pen colors.
06:47 – 08:54
05 · MagicPath infinite canvas
Connects MagicPath as an MCP tool, imports the design one-to-one onto its infinite canvas, generates multiple layout variants, and hand-edits text size and spacing directly.
Lines worth screenshotting.
- Claude Code's new in-app browser opens multiple tabs and clicks through sites, feeding what it sees directly into the coding chat.
- Default Claude Code output has a recognizable, boring look until you feed it real visual references.
- The annotate tool lets you circle a section of any live website and send it to Claude as a screenshot instruction.
- Using different pen colors in one annotation can carry different meanings, like marking colors to copy versus colors to ignore, in a single screenshot.
- The select tool grabs one specific div from the current page as a targeted style reference, separate from freehand annotation.
- Mobbin MCP can research and return comparable design sections from other live sites on request, without leaving Claude Code to search manually.
- MagicPath's $10/month builder plan connects to Claude Code as an MCP server, giving it its own infinite canvas to design on.
- On the MagicPath canvas, Claude Code can generate multiple visual variants of a layout from a single prompt.
- Once a variant exists on the MagicPath canvas, individual elements like font size and spacing can be edited directly, with no code required.
- The whole workflow — build boring app, browse for inspiration, circle it, send it to chat — replaces manually writing out color and font descriptions.
Turn visual references into code with Claude's browser
BROWSER WORKFLOW
Circling a reference site and pasting the screenshot into chat replaces writing prose design instructions, and it works whether you're matching fonts, swapping colors, or rebuilding a whole section.
- Claude Code's browser mode opens multiple tabs inside the app itself, so reference sites and your local dev server sit side by side without alt-tabbing.
- The annotate tool turns a circled screenshot into a design instruction: draw around what you want copied, add it to chat, and Claude matches fonts, colors, and layout from that region.
- Different pen colors can carry different meanings in one instruction, like marking colors to keep versus colors to discard, so a single screenshot can carry several edits at once.
- The select tool grabs one div from your own site to specify exactly which element should be restyled, instead of describing 'the card section' in words.
- Mobbin MCP can research and surface comparable design sections from other real sites on request, giving instant inspiration without manually searching design galleries.
- MagicPath's builder plan ($10/month) connects to Claude Code as its own MCP-linked infinite canvas, letting the agent generate multiple layout variants from one prompt and hand-edit text size and spacing directly.
- The core loop — build a rough version, browse for inspiration, circle it, send it to chat — replaces prose-heavy design prompts with direct visual pointing.
Terms worth knowing.
- MCP (Model Context Protocol)
- A standard that lets external tools and data sources connect to an AI agent like Claude Code, so the agent can call the tool directly instead of you switching apps.
- Mobbin
- A design reference library of real app and website screens; the Mobbin MCP lets Claude Code search it and pull in comparable sections for inspiration.
- MagicPath
- An AI design tool with an infinite canvas that connects to Claude Code as an MCP server, letting the agent generate and edit visual layouts directly on the canvas.
- Annotate tool
- A drawing feature in Claude Code's browser mode that lets you circle or scratch out parts of a webpage screenshot to give Claude specific visual instructions.
Things they pointed at.
Lines you could clip.
00:22
“This browser mode gives you a whole new experience of actually visually building out your project inside of Claude Code.”
01:23
“It looks like a typical Claude Code design if you don't really put any effort behind it.”
07:40
“Cloud Code is now designing in its own infinite canvas in its own browser.”
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:00Cloud Code on desktop now finally has an in app browser. It can pull up docs, designs, or any other sites. You can open up multiple tabs at once, and it can read and click through and interact with those different tabs.
00:12And it's also sandbox and configurable, meaning you can choose whether sessions persist or not. And when it comes to designing, this browser mode gives you a whole new experience of actually visually building out your project inside of ClotCode.
00:25So in today's video, I'm gonna show you how to set it up. I'm gonna show you a few examples of what you can do, and by the end of this video, you'll have a good understanding of how to use Cloud Code's browser mode. So without further ado, guys, let's go ahead and dive into it.
00:37But, before we dive into it, I'd love to invite you guys to my free community. Link is down below. We get together every single week to talk about different tools and workflows.
00:45So if you guys are interested in that, feel free to join. Link is down below. Alright.
00:48So it all starts off here in Cloud Code. I'm gonna open up a brand new folder and you can obviously use it with existing projects that you're working on. But just for today's video, I'm gonna just say like, hey, build me a landing page that shows me a graph of the leading goal scores of the World Cup.
01:03We can submit this, and then you can tell Claude to run this on the local host. You can just click on this link. You can say open in app instead of open in default browser, click on done.
01:12And so we have our site here running on the localhost in our browser, and you can see our site is very simple. It's exactly what we wanted, a landing page with the World Cup top scores, and the design is pretty, you know, boring.
01:26It's, you know, it looks like a typical Claude Co. Design if you don't really put any effort behind it, but that's totally fine because we're gonna be using the browser to kind of improve our design a bit.
01:36So again, this is our browser mode over here and you can click on plus just like you do in something like Chrome or Safari and then you can search for something like google.com, click on enter and you get Google. But in this case, found this nice site has a very, nice graph and I would love to have a very similar type of graph but but for our World Cup top scores.
01:58Right? So over here on the top right, we have this annotate tool. So I can annotate something, I can like maybe circle a pill like this or I can click on cancel and maybe circle this whole section down here.
02:13And then I can say, hey, let's add this to the chat. It gets added to the chat as a screenshot, and I can say I wanna replace my graph with the graph that looks like this, but in our case, y axis is the amount of goals and x axis is the last, let's say, 15 or let's say 12 World Cups. And then that's exactly what we get.
02:30So we circled our inspiration from this site, we brought it into our existing site, and now we have something looking like this instead of that ugly bar graph that we had before. And apart from this annotation tool, we also have this tool up here which allows you to select specific dives on a site.
02:46So I can, for example, select this over here and it already adds that to the chat and I can also annotate something at the same time so I can circle this. And then with the blue color, I can like scratch different things.
03:00So I can scratch this. I can get rid of the flags because these are just, like they have different colors and we don't really want these colors. So I can get rid of these flags and also these arrows, I would say.
03:11And then I can add this to the chat, and I can say something like, I need the design of our site to have an identical or very similar font family slash font sizes, colors, button, pill styles, and layout spacing as this section and just ignore the colors from the sections I painted blue, you know, which are over here.
03:27So we can again send this. We can then go back to our site and we wait for this to to think and to act. Alright.
03:33And this is looking more like it. I like the style. It's matching that FIFA style that we saw from before.
03:38I can then reference different things. So for example, I can select these cards over here, then I can go back to the FIFA site and I can scroll over here and I can circle this like so, add to chat.
03:53I can say for the code I have attached to this chat here, I need a style to look more like it does in the red circled area of the attached image. So we can again just submit this. Alright.
04:02Perfect. That's exactly what I wanted. So now we have those cards with that nice design, and I can for example go over here and just draw a line over this, say add to chat.
04:11Let's just delete this section, click on enter, and now it's deleted and we have our graph. So while that finishes up loading up, I'm going to open up a new tab and I'm gonna search for Mob and MCP because this is the other thing that I wanna show you guys.
04:24So we can click on Mobin MCP and then we can just go down to install MCP and you can just copy this, paste it in the chat if you don't have this installed already. I already have this installed so I can just call it whenever I want.
04:36And I can go back to the top of this page and maybe circle this entire top part since I'm very, you know, I'm very satisfied with the graph of how that looks like, but not really this section so I can add this to chat. And I'm gonna say let's use Mobin to research on similar sections to this so that we can grab inspiration from them and redesign them for our page.
04:56So let's just submit this. And it's asking us which direction. I don't really know so I can skip this.
05:01And now what it's doing is that it's giving me these different references so I can click on all of these links. Kajabi, for example, has a really nice hero section where they have the text over here, three images, and then they have the the stats with this, like, background gradient. So we can maybe try that.
05:15So I can download the PNG. I can go back here and I can paste in the PNG. I can say I need our hero section to look more like this.
05:21Alright. So we get something like this, obviously still not perfect at all. So what we can do is we can go ahead and draw certain things.
05:28So I would want to, for example, delete these cards over here that are in red, and we can grab another color and I can draw around this text over here, and I can add this to the chat.
05:41I can say make the text circled in green 26 pixels. Actually, let's make it 36 pixels smaller and delete the cards in the red circle.
05:49So, again, this is what we what we want. Awesome. So that's being done.
05:52What else? What something else that I can do is I don't like the colors here. I would wanna replace this pink with something else and this blue with with this one maybe.
05:59So what I can do is I can again draw with the red, this blue. I actually have to be more careful. Draw with the red, this blue, and then draw with the green, this blue, and add this to the chat.
06:14So I can say, do you see the colors circled in red and green? These need to be colors in the gradient four, and let's go ahead and choose this. Select this card if possible, or actually, we can't do that.
06:24So we can just name it over here, and I can say, you see the color circled in red and green? These need to be the colors that replace the current colors and the gradients in the stats card under the hero.
06:33So let's submit this, and that's exactly what we get. Now it's also quite annoying to have multiple tabs like this and because you kind of lose track of all of that.
06:44So something that you can do is you can open up a new tab and you can search for magicpath.ai, and then you can just sign in and for an account. In order to properly connect this to Cloud Code, you would need a builder plan, which is $10 a month.
06:56But essentially with this builder plan, you give Claude Code a in the browser view. And in order to connect the agent to Claude Code, we can click on this, we can go down to documentation, and you can copy this and paste it in here, and then we can just go back to this project that we opened, and it says that it's now installed.
07:15And I can just ask it, hey. Can you see the project that I had currently have open? And it says, yes.
07:19I can see the project. It's project 47. And then I can just say, like, hey.
07:22Let's let's bring our design from our site and paste it one to one inside of this project in Magic path. Click on enter. And now as you can see, Cloud Code is now designing in its own infinite canvas in its own browser.
07:35And this is like taking the browser mode in Cloud Code to a because now we can bring in our design and we can bring in all of our inspiration into one view rather than having to go through all of these different tabs. And now we get our design over here. And what I can do is I can go ahead and create different variants.
07:51Like, let's explore different styles if we wanted to, and we can create three different variants from these different styles. Click on submit over here, and now they're basically over here.
08:02And what I can do now is I can also go over here and I can maybe select this entire page, and I can say I needed to put this in our magic path project one to one. So now Cloud Code is recreating that design while we get our three different variants. And as you can see, look how fast that was.
08:17So now we have our three different variants also. I can click on this and I can choose this edit mode and I can select this text and I can easily edit the font size.
08:27Let's say 48 or maybe let's make it a little bit larger like 72. We can edit the spacing over here.
08:34Maybe we can end up getting something like this, then we can click on done. And eventually, you can just keep on adding more and more designs and kind of remixing your design here instead of just having to have that one view that clot code gives you. So anyways, guys, hope you enjoyed today's video.
08:47If you have any comments or questions, please let me know down in the comments below. And like always, thank you all so much for watching. Hope to see you next time.
08:53Goodbye.
The Hook
The bait, then the rug-pull.
Claude Code's desktop app just got an in-app browser — not a preview pane, but a sandboxed, multi-tab browser that can click through live sites and feed what it sees straight into the chat. This walkthrough turns a deliberately boring AI-generated landing page into a polished one using nothing but circled screenshots and two connected MCP tools.
Named ideas worth stealing.
01:58concept
Browser-mode design loop
- Build a rough version of the app
- Open it in the in-app browser
- Circle inspiration on any site with the annotate tool
- Send the screenshot to chat with a specific instruction
- Repeat per section (layout, colors, typography)
The repeated four-step loop demonstrated throughout the video: build first, then browse for inspiration, circle what you want copied, and hand it back to Claude as a visual instruction instead of a prose description.
Steal forany AI-coded landing page that looks generic and needs a fast visual pass
How they asked for the click.
VERBAL ASK
08:30subscribe
“If you have any comments or questions, please let me know down in the comments below.”
Soft sign-off ask with no hard pitch; the harder ask (join the free community) was placed at the top of the video instead of the end.
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.
