Open Design: Why 40k Developers Abandoned Claude Design
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00This is OpenDesign, an open source alternative to Claude Design that lets you use any agent
00:00:05or model you already have installed to generate full web prototypes, mobile apps, and even slide
00:00:11decks in HTML. With 72 brand-grade design systems built in, and every project stays on your machine,
00:00:17so nothing is sent to the cloud. But we already know that Claude Opus 4.7 is really good at front-end
00:00:23design, so it doesn't make sense to allow the user to choose any model they want, since most of them
00:00:27could be really bad at design, hit subscribe and let's find out.
00:00:33Claude Design from Anthropic was released earlier last month and was an instant hit. It gave people
00:00:38the ability to make really good-looking designs using an impressive model, it gave people an
00:00:43alternative to lovable vZero and similar tools. But it's a proprietary cloud-only tool, locked to a
00:00:49single model, and will cost you $20 a month to use it, which basically means it's not for everyone.
00:00:54So, 11 days later, Tom and the Nexa team shipped an open-source alternative which was really popular.
00:01:00It kind of reminds me of OpenCode coming from Claude code, and now OpenDesign is coming from Claude
00:01:05Design. What is the next thing Anthropic is going to make that someone is going to put open in front of?
00:01:09But how is this open-source tool able to create designs as good as Claude Design? Well,
00:01:14this is because two things are working together. The first is design systems. OpenDesign contains many of
00:01:18these with full brand specs, typography, spacing, and color tokens inspired from brands like Linear,
00:01:24Stripe, and Spotify. The second is skills. Lots and lots of skills for every output type. So a dashboard
00:01:30skill knows how to layout charts, and a deck skill knows how to structure slides. There's even an anti-AI
00:01:35checklist baked into every prompt, and before it generates anything, it asks you about your audience,
00:01:41tone, and brand content. If you've watched my video on Impeccable, this will seem very familiar,
00:01:45but it's different, and we'll go through the differences later on in the video. But for now,
00:01:49let's go through a simple demo. So to get started, you can either download OpenDesign for macOS or
00:01:54Windows, clone the repo and install it using Docker, or run it from source, which is what I've decided
00:01:59to do. So with the project running, I can visit this port in my browser, which brings me to this UI,
00:02:04which looks pretty overwhelming for someone who's not used to Claude Design, but let's just go through it.
00:02:08So if I click down here, you can see it's picked up the agent harnesses I already have installed,
00:02:13so Claude Code Codex and OpenCode. And if I click on Claude Code and scroll down,
00:02:17we can pick the model. So by default, it will pick the one that is chosen in the CLI, but I can pick
00:02:21one here. I can also do the same with Codex, but Codex allows me to change the reasoning effort,
00:02:26which is a nice touch. But I'm going to go with OpenCode. I'm going to scroll down and change the
00:02:31model to GLM 5.1. Now over here as well, I could pick the memory, so the instructions that will be added
00:02:36to each prompt, the media providers, and by default, it's picked up my OpenAI key, and it's going to use
00:02:41GPT Image 2 to generate images. But I could also connect my 11 labs API key for doing things like
00:02:46text to speech or different sound effects for animations you might have on your website. Then
00:02:50over here, I could view all the skills that are available. I can view all the design systems,
00:02:54which we'll go through a bit later. And I can even choose a pet, which is something that Codex does.
00:02:58Basically, we have a lot of options here, but I'm going to close this and get to designing. So I'm
00:03:03going to give my project a name and then pick a design system. Now, if you have no idea what these
00:03:08design systems are, you can click on the design system tab to view all of them, and there are a
00:03:13lot. But I went through them before recording the video, and I think I like the Miro one, which looks
00:03:17like this and gives details of design tokens, as well as information in the design MD file.
00:03:22Now notice I'm in the prototype tab, but there's also live artifacts for things that you want to update
00:03:27based on changing data, a slide deck to generate HTML based slides, or to build from a template.
00:03:33So I could click on the templates tab here and pick a template I want. Now we will just stick
00:03:38with prototype and click on create. Now from here, we get taken to another page where we can give it
00:03:42a prompt. Now I'm going to try something a bit unique here. So right now I have my YouTube channel
00:03:47search app running, and I wanted to create a much better looking version of this. So what I'm going
00:03:52to do is give it this URL and see if GLM is able to search through the tabs and the
00:03:57inputs and use that for its design. So here I've given it a prompt to make me a well-designed simple
00:04:02website for a product I can use to search YouTube channels. I've also given it the link of the
00:04:07website for it to visit using agent browser or whatever tool it feels fit. And that way it can
00:04:12view the inputs and go through all the pages. So let's see what it does. So now it's asked me some
00:04:15questions around the visual tone, brand context, and a few other things, which I'm going to answer.
00:04:20And then we'll continue with the design process and check this out. It was able to run a curl command
00:04:24to open the site using Chrome. And now it's using agent browser to connect to the site. So I didn't
00:04:29open any of this or go to the URL and it's going through the site in the browser. We can see a few
00:04:34more agent browser commands to understand how it works. Okay. So at this point, it's still going.
00:04:38It's not quite done yet. It still has a few things to do, but I like the direction of where things are
00:04:43going. I like the search page that it's made with the advanced filters down here, and I can toggle
00:04:48between video titles and channel name for the search. We've got the search results, which looks
00:04:52very impressive and it's using data from the actual website. So I'm not sure what it did,
00:04:57if it scraped and saved it somewhere, but this is actual data apart from missing thumbnails. We also
00:05:01have the favorites page. So if I favorite a person over here, this is where they'll go and I can generate
00:05:06an email to contact them or remove them. And there's also a hidden page over here. So for example,
00:05:11if I pressed X, then a person would end up on this page. And it looks like after around 20 minutes. Yep.
00:05:17GLM 5.1 is not the fastest model. Everything is finished. And so here's what it's told me.
00:05:23It's given me all the five files it's made. And I think it exported everything into a temporary
00:05:28location. So what I can do now is I could give it another prompt. So if I wanted to add a dark mode,
00:05:33I could do that, but I could also click on finalized design package, which will synthesize
00:05:37everything into a single design MD file. So the transcript, the design system and any artifacts
00:05:42that were generated, basically these five pages. I can also click share to export in different formats.
00:05:48And I can even export a standalone HTML and give it to Claude Code to implement in my actual project
00:05:53and even deploy it to Vercel or Cloudflare pages, which is a very nice touch.
00:05:57So that's a quick overview of open design. Is it worth using? Well, if you already have a coding
00:06:02agent installed and you pay for a subscription of VanClaude, then it's a no brainer
00:06:07to try. The combination of design systems and skills means that it can actually produce something
00:06:12pretty decent regardless of the harness or model. But how does it compare to something like Impeccable?
00:06:16Well, personally, I prefer the way Impeccable does its planning. It asks you everything upfront
00:06:22and designs different mockups using an image model, which you can pick and iterate from there.
00:06:27So you can pretty much have no idea of what you want the design to look like at the start,
00:06:32but end up with something pretty decent. Whereas with open design, you kind of have to
00:06:37know a bit about design before going in. I mean, it does ask you what design system you want before
00:06:42you start and I know the model can generate one, but the fact that it asks you means it's geared towards
00:06:48someone who knows a bit more about design. But I've got to admit, Open Design does have a great UI,
00:06:53giving you the option to see responsive views, export anywhere you want, add skills, MCP tools,
00:06:58and even pets, which is nice for someone who's used to using the Codex UI or the Claude desktop app.
00:07:04And it did a great job of designing an app using DLM 5.1, which isn't the best model for designing
00:07:10out there. So if I wanted to design something relatively quickly and I had a bit of an idea
00:07:15of the direction I wanted to go in, then I'd definitely try Open Design. But if you don't
00:07:19mind spending a bit of money, plot design is pretty good. I mean,
00:07:22look at what it was able to do with the exact same prompt.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video