← Back to library

Transcript: Open Design: Why 40k Developers Abandoned Claude Design

Watch video

Better Stack7:26Transcript ✅Added May 20, 10:40 am GMT+8

Source video ID: B3coWv2ZV68

Transcript

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