Transcript
00:00:00Claude Design dropped and it changed everything about design, but in reality it's way more
00:00:04hype than most people realize.
00:00:05And this is exactly why what you've been seeing on X isn't the full story.
00:00:09If you think Claude Design is doing something groundbreaking or that those insane demos floating
00:00:13around are proof you need to switch to it, you are actually wrong here.
00:00:17The tool itself isn't even the reason those designs look so good, and the way people are
00:00:21using it is quietly working against them in a way most haven't caught onto yet.
00:00:25Claude Design was marketed as a revolutionary product for the design industry the moment
00:00:29it dropped.
00:00:30People started calling it a figma killer or the end of designers, and the impact was big
00:00:34enough that figma's stock kept decreasing and its valuation took a hit.
00:00:38It is a tool for creating realistic prototypes, wireframes, designs, pitch decks and other
00:00:43different types of designs.
00:00:44But the reality is that it's more hype than anything.
00:00:47It is literally Claude Code repackaged as another tool and sold as one, because Claude Code can
00:00:52do the same and possibly more.
00:00:54There are features like editing and comments in Claude Design, but nothing here is something
00:00:58Claude Code cannot do if you give it the right tools.
00:01:01And when we say this is Claude Code repackaged, it is not because we didn't test it.
00:01:05We gave it a simple prompt, asking it to create a community website and answered the questions
00:01:09it had.
00:01:10It created two designs that were impressive on their own and much better than the way Claude
00:01:14used to generate landing pages previously, but they still had a lot of problems.
00:01:18One version was cut off at the pricing section and there was no footer at all, so we tested
00:01:23how Claude Code would perform with a similar prompt.
00:01:25We used Opus 4.7 on high effort to compare the two, and the design it produced stood
00:01:30on par with Claude Design's capabilities.
00:01:32There were a few issues, like the font color of the sign-up button not being chosen correctly,
00:01:37but overall it was a really well-built design.
00:01:39And this was despite not having the design harness and without any special prompting that
00:01:43Claude Design has built in, purely on its own with us providing almost nothing.
00:01:48But the demos you must have seen around look impressive, and there is something hidden behind
00:01:52them.
00:01:53What is circulating on social media is based on hype rather than what the tool actually
00:01:57does on its own.
00:01:58People generate designs by following extensive workflows and then present them as if Claude
00:02:03Design built everything in one shot.
00:02:05But those same workflows can be run in Claude Code directly without needing Claude Design
00:02:09at all.
00:02:10So even though this product is built for designers, they should just use Claude Code instead of
00:02:14Claude Design, because this way they will be able to try out different variations, experiment
00:02:19more and get the same if not better results than Claude Design.
00:02:22They can iterate more times with Claude Code instead of being cut short, right when the
00:02:26design is actually getting somewhere.
00:02:28Building on top of what the site already is instead of starting over every time gives them
00:02:32better control over the direction of each design.
00:02:35And because everything Claude Code produces is real code, what they end up with is not
00:02:39a throwaway prototype but something that can be shipped directly into the product without
00:02:43being rebuilt by someone else afterward.
00:02:45And on top of all this, there is a cost problem with Claude Design.
00:02:48Claude Code can do the same things at a much cheaper cost while Claude Design is built separately
00:02:53and counted toward limits that run weekly and it does not count toward your other limits
00:02:57but it burns through usage at a much faster pace than you would normally expect with models
00:03:02through other Claude apps.
00:03:03This hits designers the hardest because the quota is so low that they cannot really experiment
00:03:08the way they need to and their limit runs out after just a few design iterations.
00:03:12And this is exactly what a lot of people are complaining about.
00:03:15When someone was working with it, they ran out of their design limit fast just after around
00:03:1920 design iterations even when they were on the highest max plan.
00:03:23And plenty of others say they hit the limit in just one hour and still end up with a simple
00:03:27design that is easily implementable with Claude Code in one shot.
00:03:31So it's not really usable in practice since they are hitting the limits before they can
00:03:35even finish the workflow they are working on, making it much worse compared to Claude Code
00:03:39limits.
00:03:40The reason Claude Design's work looks so impressive is actually the Opus 4.7 model drop, not the
00:03:45tool itself.
00:03:46Opus 4.7 is again the state of the art model with amazing capabilities and is performing
00:03:50better across all of the benchmarks.
00:03:52But the upgrade that actually matters here is vision.
00:03:54This model has substantially better vision and can see images at a much greater resolution
00:03:59than it was able to previously.
00:04:00Claude Opus 4.6 was able to analyse images at a resolution of 1.15 megapixels while the
00:04:074.7 is able to analyse 3.75 megapixels.
00:04:10So that implies it is able to understand design from a reference much better.
00:04:14If you give it a reference design, it processes that reference with much better clarity and
00:04:18picks up on things it would have missed before.
00:04:20With this model upgrade, Anthropic filled the only gap where Claude models were lacking and
00:04:25needed extensive work, which was front end design.
00:04:27This model is more tasteful and creative when completing a task and on its own it produces
00:04:31higher quality interfaces and designs.
00:04:34So when Claude Design dropped it was featured with a lot of hype because of its insane designs
00:04:38but in reality it was the model that got better.
00:04:41It was not the tool that got so insanely good that it resulted in the different visuals you
00:04:45see.
00:04:46Claude Design was another clever way of selling something and creating hype around it by Anthropic.
00:04:50Now you can get the same benefits you get in Claude Design in Claude Code 2 or possibly
00:04:55better.
00:04:56You can replicate Claude Design's questioning flow in Claude Code by creating a simple skill.
00:05:00When you create a project in Claude Design, you give a prompt and it asks a lot of questions
00:05:04so it can properly ascertain the design direction.
00:05:07It asks far more than Claude Code's planning mode does but a skill can do exactly the same.
00:05:11The skill contains instructions on how to run a questioning session just like Claude Design
00:05:16using questions to fill in the gaps the prompt creates and asking about what needs to be built.
00:05:21It defines when to trigger follow up questions and how the flow should actually work.
00:05:25It also includes example questions for running the session, a library of questions and even
00:05:30ASCII layouts of sites so it can determine the positioning of elements in the landing
00:05:34page.
00:05:35When you give it a prompt, it uses the skill and asks questions related to the gaps it identifies
00:05:39just like Claude Design.
00:05:41It asks multiple questions across different areas and once it has all the information
00:05:45needed to implement, it starts building.
00:05:47The best part is that it directly outputs code so there is no design to code handoff.
00:05:51And with this approach, you can iterate as much as you want without worrying about running
00:05:55out of limits in just an hour.
00:05:57The UI generation from the same type of prompt along with the similar questioning flow in
00:06:01Claude Code was more or less similar to what Claude Design generated.
00:06:05The main difference is that Claude Design had an edge in certain aspects where it made the
00:06:09website more immersive by adding small animations to make it look more engaging.
00:06:13But before we move forwards, let's have a word by our sponsor.
00:06:16HeyGen You've probably tried making a video with
00:06:18an AI tool.
00:06:1920 minutes in you're juggling timelines, re-recording voiceovers and fighting lip sync that looks
00:06:24like a bad dub.
00:06:25HeyGen skips all of that.
00:06:26HeyGen is the AI video generator that just shipped a brand new CLI, meaning a full digital
00:06:31twin avatar video can be generated with a single command.
00:06:34No timeline, no camera, no crew.
00:06:36Record your digital twin once and HeyGen lets you publish consistently without refilming,
00:06:40turning newsletters, PDFs, powerpoints into videos.
00:06:44Generate fully edited multi-scene videos from a single prompt with video agent then translate
00:06:48for a global audience with full lip sync.
00:06:51Build with avatars, voices, video agent, translation and more at developers.heygen.com
00:06:56Digital twins require verified consent.
00:06:59Your content is never used to train public models and the whole platform is built for
00:07:03enterprise grade security.
00:07:04Start shipping studio quality videos without touching a camera.
00:07:07Click the link in the pinned comment and try HeyGen today.
00:07:11Most of the scroll interacting designs you might have seen on X when people were showing
00:07:15off clawed design are just sites using video backgrounds which makes them look far more
00:07:20premium and gives the impression that they are more impressive than they actually are.
00:07:24Most of the demos are often just prompts copied from sites that provide ready to use prompt
00:07:28templates.
00:07:29The prompts include a link to a video that is meant to be used as a background along
00:07:33with detailed guidelines on how to implement it.
00:07:36So any agent is capable of implementing this kind of website, not just clawed design as
00:07:40long as it is given similar prompts.
00:07:42But these are only sample prompts for showcase sites.
00:07:45In reality, production grade applications are built using libraries like Lennis which is
00:07:49used in many production apps as well as GSAP which is one of the most popular libraries
00:07:54for implementing smooth animations that make the website experience far more immersive than
00:07:59before.
00:08:00To test this, we actually downloaded a video and in our prompt just told clawed code to
00:08:04use the video as the hero section along with the color themes we wanted and it implemented
00:08:08the rest of the website on its own.
00:08:10We only had to correct it once where we had to explain what the video was about.
00:08:14And it incorporated the style perfectly into the landing page making it much better than
00:08:18the previous version.
00:08:19The website was implemented really well which is quite powerful given how simple the prompt
00:08:23was and it included different animations and interactions that made this part of the site
00:08:28much more powerful and interactive than before with clawed's capabilities.
00:08:32Now in clawed code you can also supplement it with more tools with ease compared to clawed
00:08:36design because clawed code is more technically capable and can implement things more seamlessly.
00:08:42You can even use an open source skill like scrolly telling which basically enables scrolling
00:08:46storytelling animations in your project.
00:08:48So with this skill clawed can easily implement multi level storytelling from a simple prompt
00:08:53and work to create animations that go much further in depth than what clawed design would
00:08:57be able to do on its own.
00:08:59Also if you are enjoying our content consider pressing the hype button because it helps us
00:09:03create more content like this and reach out to more people.
00:09:07Using clawed code instead of clawed design makes it easier to implement UIs because with
00:09:11clawed code you can integrate built in design systems with ease by incorporating components
00:09:16from shad cn, aseternity or hero ui which already include a lot of prebuilt animations.
00:09:22This reduces the need for the model to figure out how each component should look and behave
00:09:27and instead lets it focus on improving the overall design.
00:09:30So the output is much easier to reach compared to working directly in clawed design by default.
00:09:35You can also use front end design skills or other specialized skills tailored to your project
00:09:39built using a skill creator that analyses the current state of the project.
00:09:43This helps it implement features more effectively without wasting time.
00:09:47Clawed code is also more flexible because you can connect mcp servers to it.
00:09:51For example you can use a shad cn mcp server so the agent can install the right components
00:09:56on its own instead of being explicitly told what to use and where.
00:09:59Similarly you can use various mcp's that help build UIs more effectively rather than relying
00:10:04on a purely generated design.
00:10:06Even with models like opus 4.7 and tools like clawed design, straight up generated designs
00:10:11often reveal that they were produced by a model because they tend to follow similar patterns.
00:10:16But using established libraries helps reduce this issue and makes the output feel more natural
00:10:20and less predictable.
00:10:22The biggest advantage of using clawed code instead of clawed design is that you can connect
00:10:26it to git.
00:10:27Now even though you can connect github to clawed design as well, there's a huge difference
00:10:30in how they both work.
00:10:31Clawed design's git integration is fairly basic.
00:10:34It mainly allows it to fetch files from a connected github repository and use them to
00:10:38understand designs.
00:10:39But its purpose is mostly limited to reading and referencing.
00:10:42It does not really make changes to the repository.
00:10:45Clawed code on the other hand is very different.
00:10:47It can perform full git operations like commits, branching and more.
00:10:51So if something goes wrong in your implementation or if you prefer an older version after making
00:10:55changes, you can easily revert back to a previous version using git.
00:10:59That's something you wouldn't be able to do with clawed design as you use it, which makes
00:11:02clawed code a much stronger approach.
00:11:04For designing different prototypes instead of going to clawed design or using figma, it
00:11:09is more effective if you just make mockups straight in HTML.
00:11:12For trying out different variations, you can also make use of parallel agents and work trees
00:11:16to divide tasks, similar to how clawed design explores designs but in a git managed way,
00:11:21so you can keep the best version and discard the rest easily.
00:11:24You can simply give it a prompt to use sub-agents in separate work trees and ask each agent to
00:11:29implement a different variation of the same design.
00:11:31With that, clawed will spawn agents in separate workspaces.
00:11:35Using parallel agents helps you save both time and effort while exploring multiple directions
00:11:39at once.
00:11:40Now once each agent has finished its work, you get multiple variations that you can review
00:11:44at any time and choose whichever one best suits your needs.
00:11:47From there, you can make changes and continue building the app based on the exact style that
00:11:51you like the most.
00:11:52And despite not being generated by clawed design, each of the generated designs still has an
00:11:57aesthetic look with proper SVGs created entirely through code to depict elements and a much
00:12:02better overall balance.
00:12:04You can then merge your preferred version into main and remove the work trees that contain
00:12:08the designs you didn't like.
00:12:09The skills used here along with other resource are available in AI Labs Pro for this video
00:12:15and for all our previous videos from where you can download and use it for your own projects.
00:12:19If you've found value in what we do and want to support the channel, this is the best way
00:12:23to do it.
00:12:24The link's in the description.
00:12:25That brings us to the end of this video.
00:12:26If you'd like to support the channel and help us keep making videos like this, you can do
00:12:30so by using the super thanks button below.
00:12:33As always, thank you for watching and I'll see you in the next one.