Why Modern Creator?

Jay E | RoboNuggets · YouTube

Claude Code's new /design skill, tested against Claude Design

Anthropic shipped a Figma-style artboard editor into Claude Code itself, and one identical prompt with real context beat Claude Design's default template every time.

Posted

August 19th

1 months ago

Duration

06:53

Format

Demo

educational

Views

2.5K

162 likes

Big Idea

The argument in one line.

Claude Code's new /design skill outperforms Claude Design on the exact same one-line prompt, not because the underlying skill is different, but because Claude Code already carries the user's memory, skills, and business context that a Claude Design chat starts without.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You already run Claude Code with a built-up memory system, custom skills, or project context and want a faster way to turn that into UI.
You build landing pages, product mockups, or client deliverables and want to skip re-describing your brand every session.
You're deciding between Claude Design and Claude Code's new /design skill for a design task.

SKIP IF…

You're looking for a from-scratch design tutorial. This is a feature comparison and workflow demo, not a fundamentals course.
You don't have any project context, brand assets, or custom skills set up yet. Without that, /design and Claude Design behave almost identically.

TL;DR

The full version, fast.

Anthropic added a /design skill (research preview) to Claude Code that brings Claude Design's artboard-editing workflow into the CLI and desktop, producing an editable canvas you can tweak by hand or by chatting with Claude. The creator compares it directly to using Claude Design on its own: the same one-line prompt, make a RoboNuggets landing page, produced a fully-branded, correctly-worded site in Claude Code but only a generic template with wrong details in Claude Design, because Claude Code already carries the user's memory, applications, routines, and custom skills, while a Claude Design session starts blank. The video also covers the artboard's Figma-style editing sidebar, the sharing and comment workflow, invoking a custom /generate skill to add an AI-made background video, and deploying the finished site straight to Vercel from inside the chat.

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 →

Chapters

Where the time goes.

00:00 – 00:47

01 · Intro: Claude Code's official /design skill

Anthropic ships /design (research preview) into Claude Code, bringing Claude Design's artboard workflow into the CLI and VS Code extension. A one-line prompt builds a full RoboNuggets landing page with dark and light mode.

00:47 – 01:26

02 · The canvas editor (Figma-style editing)

The finished artboard can be edited directly: accent colors, spacing between elements, and font scale, plus a right-hand sidebar for fonts, weight, and copy that will feel familiar to Figma users.

01:26 – 02:00

03 · Sharing, comments, and chat edits

Artboards can be shared like a Google Doc, private or link-open, reviewers can leave comments on the canvas, and bigger changes can be made by chatting with the same Claude Code session that built it.

02:00 – 04:01

04 · /design vs Claude Design

The same one-line prompt run inside Claude Design, not Claude Code, either asks clarifying questions about the business or, left on auto, returns a generic black-and-blue template with incorrect details, because that chat has no memory of the creator's business.

04:01 – 04:38

05 · Inside my agentic OS context

The creator shows his local context store, a roughly 60,000-file folder he calls his second brain, holding the memory, skills, applications, and routines that make Claude Code's one-prompt results possible, organized under his ARMS framework.

04:38 – 05:45

06 · Using your own skills with /design

Inside the same /design session, the creator invokes his own custom /generate skill to produce and place an AI-generated looping background video on the site, something Claude Design can't do since its skills menu only exposes Anthropic's defaults.

05:45 – 06:11

07 · Deploying straight to the net

Asking Claude Code to deploy the finished site to Vercel actually deploys it and returns a live URL. The same request made to Claude Design just tells the user to deploy it themselves.

06:11 – 06:53

08 · Beyond websites

The /design skill isn't limited to landing pages. The creator shows a 3D object build, Meet CLAWD, made the same way, and notes /design also covers email templates and mobile app mockups.

Atomic Insights

Lines worth screenshotting.

Claude Code's new /design skill (research preview) brings Claude Design's artboard-editing workflow into the terminal and desktop app, not just the standalone Claude Design website.
The same one-line prompt produced a fully-branded landing page with correct copy in Claude Code, but only a generic black-and-blue template with wrong details in Claude Design.
The gap isn't the skill itself. It's that Claude Code already has access to memory, applications, routines, and skills built up outside that single conversation.
Claude Design sessions are self-contained. Each chat starts with no memory of the user's business, so it either asks clarifying questions or fills in defaults.
The /design artboard has a Figma-style sidebar for adjusting fonts, font weight, spacing, and accent colors directly on the canvas.
Finished artboards can be shared like a Google Doc, kept private or opened to anyone with the link, and reviewers can leave comments directly on the canvas.
Because the artboard is tied to a live Claude Code session, edits can come from clicking in the canvas or from typing a follow-up instruction in chat.
Custom Claude Code skills work inside /design sessions. The creator invoked his own /generate skill mid-session to add an AI-generated looping background video to the site.
Claude Design's skills menu only exposes Anthropic's own default skills. It has no option to add a user's custom skills.
A site built with /design can be deployed straight to Vercel by asking Claude Code to do it, while asking Claude Design to deploy the same site just returns instructions to do it yourself.
The /design skill isn't limited to websites. The same workflow can produce 3D objects, email templates, and mobile app mockups.
The creator's own context store, which he calls his second brain, runs to roughly 60,000 files covering memory, skills, applications, and routines, sitting in a folder on his machine.

Takeaway

Why the same prompt built two different websites

CONTEXT VS PROMPT

The quality gap between two AI design sessions came from stored context, not the tool or the prompt, so treating memory and skills as part of your setup matters more than perfecting a single prompt.

01Intro: Claude Code's official /design skill

A single one-line prompt inside Claude Code can produce a fully branded, correctly-worded landing page when it runs in a session that already has business context loaded.

02The canvas editor (Figma-style editing)

Treat an artboard as a real editing surface, not just an image: colors, spacing, and font scale are adjustable in place before you touch code.

03Sharing, comments, and chat edits

A shareable, commentable artboard removes a normal review round trip, letting reviewers mark up the actual canvas instead of describing changes over a call or a doc.

04/design vs Claude Design

The same tool with two different context levels produces two different outputs: correct branding and copy versus a generic default template with wrong details.
A design tool without memory of your business will either interrogate you for details every session or quietly guess wrong, so judge a tool by what it already knows, not just what it can render.

05Inside my agentic OS context

The output quality of any one prompt is a function of everything already stored outside that prompt: applications, routines, memory, and skills.
Building a durable, file-based memory store once pays off across every future project, instead of re-explaining your business in each new chat.

06Using your own skills with /design

A design workflow that can call your own custom automations, not just the vendor's defaults, can complete tasks a closed tool simply can't, like generating and placing original media.
Locking yourself into a platform's built-in skill list caps what any single prompt can accomplish, compared to a system you can extend yourself.

07Deploying straight to the net

The real test of a connected AI workflow isn't the output it shows you, it's whether it can carry that output all the way to a live, working result without handing the last step back to you.

08Beyond websites

A design workflow built for one output type is worth more if the same process transfers to other formats, like 3D objects, email templates, and mobile mockups, without starting over.

Glossary

Terms worth knowing.

/design skill: A research-preview command in Claude Code that opens a Figma-style artboard editor for building and editing UI, tied to the same conversation and context as the rest of the session.
Claude Design: Anthropic's standalone artboard-based design tool, used to generate and edit UI mockups without a connected coding environment or its memory.
artboard: An editable canvas produced by /design or Claude Design that shows a rendered UI, like a landing page, which can be adjusted visually or by chatting with Claude.
ARMS framework: The creator's shorthand for the four things a fully set-up Claude Code workspace should have connected: Applications, Routines, Memory, and Skills.
second brain: A local, folder-based knowledge store (in this case around 60,000 files) holding a person's memory, skills, applications, and routines that Claude Code can read as context.

Resources

Things they pointed at.

01:00toolFigma

04:30toolHiggs Field

05:45toolVercel

Quotables

Lines you could clip.

02:00

“If I'm in Claude Design and I ask it to make a RoboNuggets landing page in here, what it's essentially going to do first is probably ask me some questions, because it doesn't really know what RoboNuggets is.”

states the whole comparison in one line→ IG reel cold open↗ Tweet quote

03:45

“Each chat session that you have with it is self contained... because it doesn't really have a memory system, most of the time you will need to rework that for every project that you do.”

names the actual limitation plainly→ newsletter pull-quote↗ Tweet quote

05:45

“If I do that in Claude Code and I ask it to deploy this site to Vercel, you can see that it did just that and it's now live in this URL.”

the payoff moment where deploy actually happens→ TikTok hook↗ Tweet quote

The Script

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

So Entropic just launched an official slash design skill for Cloud Code. And what it basically does is it brings Cloud Design's really popular artboard workflow into Cloud Code. And you can use this now wherever you're using Cloud Code, if you're using the terminal or if you're using the Versus Code extension like I do, if you update it and type in slash design, you should now have this skill built into your Cloud Code.

And you can see for this session, used that to make a Robo Nuggets landing page. And what it did for us is give us this link, if you head to that, what we now have is this editable artifact, which if we zoom that in so we can see, and it created this whole landing page for us with a dark and light mode. And everything here from the copy to the choice of fonts and all the design that you are seeing is built from just one prompt.

And I'll talk more later about how I'm able to achieve a design like this that doesn't look like it's vibe coded at all. But for now, just to show you some features of this new slash design skill, if I go back to Canvas, the great thing about this artifact that Cloud Code made for us is that we can freely edit it depending on the designs that we want.

So for example, you can change the accent colors straight from this page. You can adjust the spacing between the elements and even the scale of the fonts. And of course, you have this sidebar at the right which you might be more familiar with if you're using Figma and you can edit that as well.

So you can change the fonts, you can change the weight of the fonts, and so on and so forth. And then of course, you can change the text of this as well if you wish, which is just a much better experience, especially if you are trying to just polish a website to get it to production. And since this is a Claude artifact, you can actually share this to peers or clients as well.

So you can see right now, only I have access to it. But this is quite similar to, let's say, if you're sharing a Google Doc and you want anyone with the link to be able to access it, then you can just toggle it through here and you'll be able to share it to whoever needs to review this work. But of course, one clear benefit to this is that this whole artifact is connected to your Cloud Code.

So if you want to leave comments on this canvas, you can do so just through this button and you can just type it in here. Or from that same session where you created this, you could also just chat with it to apply some bigger changes to that artifact that you're creating, which we'll do in a bit. But there's an obvious question here, right, which is that how is this different from Cloud Design?

Well, if you notice, this whole landing page, I was able to create it with only one prompt. So despite me only sending this really simple prompt, it was able to capture all our designs, all the details here as well as the numbers are also all correct. And the reason why that is is because I'm using Cloud Code, which is connected to my entire operating system and context.

And I teach about this a lot in our community and in this channel multiple times as well. But whenever you send a prompt to Cloud Code, the reality is Cloud Code actually doesn't work from just that one prompt because it also works on your workspace context. And to make it simple, the way that I teach context and context engineering is just through the ARMS framework.

So if you're using Cloud Code to its fullest potential, then you'll be able to connect it to your applications, you'll be able to set up your routines, and very importantly, the reason why that prompt was able to make a pretty good landing page from just one prompt is because my context has memory connected to it, which includes design systems, brand books, and business details, as well as my own skills.

And so that's the big difference of using slash designing cloud code versus cloud Design. Because say, if I'm in Cloud Design and I'll ask it to make a Robo Nuggets landing page in here, what it's essentially going to do first is probably ask me some questions because it doesn't really know what Robo Nuggets is. It has no memory of my business outside of this conversation.

You So can see Cloud Design is asking me what Robo Nuggets is, what the visual direction is, and you can go through this and just answer it so that you can give it a bit more guidance, or you can also just have it decide for you, which for the sake of this demo, that's what I'll do. And of course, as you would expect, what it returned to us is just the default fonts that it would use, some default colors like this black and blue color palette, and all the details here are also incorrect.

And so that's the difference because if you send a prompt to Claw Design, it actually can't access any of the context and the memory that you've built up. And for the most part, each chat session that you have with it is self contained. So you can upload files to it.

You can also load design systems to it. But because it doesn't really have a memory system, most of the time, you will need to rework that for every project that you do.

And so that's a big contrast versus Cloud Code. And just here, I have my second brain illustrated for me to be able to show it visually. And you can see here that this whole workspace, it has something like 60,000 files already.

And what this essentially is is just a folder in my machine, which if you're using File Explorer, this is how it would look. And this has all of those memory and all of those skills that I was talking about as well as context on the applications as well as routines that I am running. And by the way, you need a starter pack on setting up your own context and your authentic operating system, what I did is just publish this nine page guide, which you can either read to or just give it to your Cloud Code to get you started.

And that's just available down in the pinned comment below if you need it. And so to give another example of the benefit of using Cloud Code for slash design, what we can actually do is use slash design with our own skills. If I send this prompt where I'm invoking this skill called slash generate, which I talked about in a previous lesson and I'll just link it in this video as well, and that's just a skill that connects to all of the AI video and image models so that I can freely use them on a pay as you go basis instead of subscribing to something like Higgs Field.

But I'm just asking Claude Code here to generate a relevant video for the site and place it as the background. And if I send that over and once that's done, you can see here that it generated this dot matrix video of a robot. And let's just go ahead and actually maximize that so you can see.

And it was able to generate that with the skill that I have in my Cloud Code context, place it in the background as I directed. And so it's just much more flexible because in Cloud Design, even if you check skills here in their drop down, it actually doesn't let you create new skills in here.

And the only ones they have here are the default ones that Anthropic ships. And so if you want a bit more flexibility and if you want to use your native skills in Cloud Code, then using slash design in Cloud Code instead of going for Cloud Design may be for you. And finally, as a last example, if you want to actually deploy this website, meaning publish it on the Internet, if you try to do that from within Cloud Design, so I'm saying here to push this to Vercel, which is a well known platform that hosts websites for you for free, it's now telling me to do it myself, basically.

But if I do that in Cloud Code and I'll ask to deploy this site to Vercel, you can see that it did just that and it's now live in this URL. So it's much more seamless and really much more flexible if you're just using Cloud Code.

And obviously, because it's Cloud Code, you're also just not limited to just designing websites. In fact, you can probably do all of the templates that Cloud Design has here. This one, for instance, is a three d object made with that slash design skill.

You can design email templates like this, mock ups for mobile app designs. And so pretty much, if you're designing something and want to use Cloud Code because of the rich context that you've built up, it's probably a good idea to try out this slash design skill, with all those features that I talked about. I hope that was useful and as always, thanks for watching until the end because that helps the channel a lot.

And I'll see you all next time. Cheers.

The Hook

The bait, then the rug-pull.

Anthropic's new /design skill turns Claude Code into a Figma-style artboard editor, and the creator uses it to build a real landing page, then runs the same prompt inside Claude Design to show exactly what a connected workspace adds that a blank chat can't.

Frameworks

Named ideas worth stealing.

03:00acronym

ARMS framework

Applications
Routines
Memory
Skills

The creator's model for what a fully set-up Claude Code workspace needs connected so a single prompt can produce accurate, on-brand output: live app connections, scheduled routines, a memory store of brand and business details, and custom skills.

Steal forstructuring any AI coding context or memory system

CTA Breakdown

How they asked for the click.

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

AFFILIATECommission earned if you click.

OTHER LINKSAlso linked in the description.

Storyboard

Visual structure at a glance.

open

hookopen00:00

finished landing page

valuefinished landing page00:49

Claude Design comparison begins

valueClaude Design comparison begins02:00

second brain context reveal

valuesecond brain context reveal04:38

live deploy confirmed

ctalive deploy confirmed05:45

Frame Gallery

Visual moments.

open

Frame at 00:07 from Claude Code's new /design skill, tested against Claude Design

Frame at 00:13 from Claude Code's new /design skill, tested against Claude Design

Frame at 00:18 from Claude Code's new /design skill, tested against Claude Design

Frame at 00:23 from Claude Code's new /design skill, tested against Claude Design

Frame at 00:28 from Claude Code's new /design skill, tested against Claude Design

One-click upgrade to your Google

Get more breakdowns in your search results

Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.

Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.

Watch next

More from this channel + related breakdowns.

13:32

Jay E | RoboNuggets · Listicle

25 Claude Design Tricks, From Beginner to Power User

A screen-recorded tour of 25 prompts, sites, and Claude Code skills, sorted easy to advanced, for anyone tired of interfaces that scream default AI design.

September 27th

26:07

Jay E | RoboNuggets · Review

I Made Fable 5 and Kimi K3 Build the Same App

Same one-shot prompts, two models, three real builds — a website, an app clone, and a 3D game — scored on intelligence, cost, and time, not just vibes.

July 23rd

14:18

Jay E | RoboNuggets · Tutorial

STOP Prompting Claude

A 14-minute tutorial on the three tiers of self-running Claude Code workflows — and why the creator of Claude Code stopped prompting it manually.

June 12th

12:06

Jay E | RoboNuggets · Tutorial

Is HTML the New Markdown? (Claude Code)

Jay E reacts to Anthropic engineer Tariq's viral 9.3M-view post and lifts the four levels by which HTML beats Markdown as an agent output format.

May 11th

12:54

Jay E | RoboNuggets · Tutorial

The 3 Levels of Video Editing With Claude Opus 5.5

One creator maps the gap between a lucky one-shot prompt and a director-grade Claude Code workflow for AI motion graphics.

September 29th

21:38

Jay E | RoboNuggets · Tutorial

The ARMS Framework: A 4-Part Agentic OS for Claude Code

A creator walks through his own Claude Code command center and the four-layer system underneath it: Skills, Memory, Routines, and Applications.

August 21st