Why Modern Creator?

Better Stack · YouTube

Open Design: Why 40k Developers Abandoned Claude Design

Better Stack puts the open-source Claude Design alternative through its paces — and it works, even with a non-Claude model.

Posted

May 15th

3 months ago

Duration

07:26

Format

Review

educational

Views

58.9K

1.1K likes

Big Idea

The argument in one line.

Open Design, the open-source local-first alternative to Claude Design, works with any model and keeps every project on your machine, but it requires enough design literacy upfront to configure the right system before it can reliably help you.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

Developers who want Claude Design-style UI generation but need it to run locally without sending data to the cloud
Engineers already running a local coding agent who want to evaluate whether Open Design slots into their existing setup
Teams evaluating open-source UI prototyping tools and want an honest side-by-side of Open Design versus Impeccable

SKIP IF…

Non-developers who want a simple drag-and-drop design tool — Open Design requires some design literacy and coding agent familiarity
Users fully happy with Claude Design who have no interest in local-first or multi-model alternatives

TL;DR

The full version, fast.

Claude Design's instant popularity also instantly produced an open-source alternative: Open Design, a local-first tool that generates web prototypes, mobile apps, and HTML slide decks using any model you already have installed. The quality output comes from two components working together — 72 pre-built design systems with full brand specs, typography, and color tokens, and a library of output-specific skills where a dashboard skill knows how to lay out charts and a deck skill knows how to structure slides. Everything stays on your machine; nothing goes to the cloud. The verdict from a live demo using GLM 5.1: capable enough to produce usable prototypes without Claude, best suited to developers already running a local coding agent, and worth watching as the open-source pattern of shadowing Anthropic's proprietary tools continues.

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:33

01 · Cold open + hook challenge

OpenDesign landing page splash. Host frames the core challenge: Claude is known-good at design — does an open-source alternative with any model actually compete? Subscribe CTA baked into the hook.

00:33 – 01:06

02 · Claude Design context + the Open pattern

Claude Design: instant hit, alternative to Lovable/v0. But proprietary, cloud-only, single model, $20/month. Eleven days later, OpenDesign shipped. The OpenCode-from-ClaudeCode naming pattern noted.

01:06 – 01:39

03 · Architecture: design systems + skills

72 brand-grade design systems (Linear, Stripe, Spotify-inspired) and skills per output type (dashboard layout, slide structure). Anti-AI checklist in every prompt. Pre-generation audience/tone/brand intake.

01:39 – 02:33

04 · Setup + model selection

Three install paths: macOS/Windows download, Docker, from source. UI auto-detects installed agent harnesses (Claude Code, Codex, OpenCode). Model picker defaults to CLI selection. Host selects OpenCode + GLM 5.1.

02:33 – 03:22

05 · Config tour: memory, media providers, skills, pets

Memory = per-prompt instructions. Media providers = OpenAI (GPT Image 2 default), ElevenLabs (TTS/SFX), FishAudio. Skills panel shows all available output types. Design systems browsable. Pet selector (Codex-style).

03:22 – 05:25

06 · Live demo: YouTube channel search redesign

Host names the project, picks Miro design system, Prototype tab. Prompt: redesign an existing YouTube channel search app using the live URL as reference. Agent browser opens Chrome, navigates the site autonomously. GLM 5.1 takes ~20 min, produces 5-file output: search page with advanced filters, search results with real scraped data, favourites page with email-contact generation, hidden page.

05:25 – 06:16

07 · Output, iteration + export

Finalize Design Package synthesizes all artifacts + design system. Share exports multiple formats. Standalone HTML export can be handed to Claude Code or deployed directly to Vercel or Cloudflare Pages.

06:16 – 07:08

08 · Comparison: OpenDesign vs Impeccable

Impeccable preferred for planning — asks everything upfront, generates visual mockups via image model, no design knowledge needed. OpenDesign requires choosing a design system upfront. OpenDesign wins on UI polish, export flexibility, MCP/skills extensibility, and model-agnosticism.

07:08 – 07:26

09 · Verdict + Claude Design side-by-side

If you have a coding agent and some design direction, OpenDesign is a no-brainer try. For zero-design-knowledge users with money to spend, Claude Design wins. Final frame shows Claude Design output from the identical prompt.

Atomic Insights

Lines worth screenshotting.

Open Design shipped eleven days after Claude Design launched — the open-source pattern is accelerating, not slowing down.
Claude Design costs $20 a month and is locked to a single model; Open Design is free, local-first, and runs any agent you already have.
Open Design produces decent results even with GLM 5.1, which is not a strong design model, because the design systems and skills do most of the heavy lifting.
The tool bakes an anti-AI checklist into every prompt and asks about audience, tone, and brand before generating anything.
72 brand-grade design systems are built in, covering typography, spacing, and color tokens inspired by Linear, Stripe, and Spotify.
Open Design keeps everything on your machine — no data is sent to the cloud.
Impeccable asks you everything upfront and generates mockups from an image model so you can iterate with no design knowledge; Open Design assumes you already know what direction you want.
The tool can scrape a live website via agent browser, extract real data, and build a prototype that reflects actual app structure.
You can export a finalized standalone HTML file and hand it directly to a coding agent for implementation.
Open Design deploys directly to Vercel or Cloudflare Pages from inside the tool.
If you already pay for a coding agent subscription and not for Claude, Open Design is a no-brainer first experiment.

Takeaway

Steal the Open in Front of It hook.

Better Stack playbook

Find the AI tool everyone wants but cannot afford, cover the free alternative that dropped eleven days later, and let the comparison do the work.

The content hook writes itself: [Paid Tool] is great — but here is the open-source version that dropped [X days] later.
Bake the answer-tension into the hook: pose a genuine question about whether the free version can actually compete, then answer it honestly at the end.
Acknowledge the limitation clearly — OpenDesign requires design literacy upfront. Honest reviews build trust faster than hype.
The design systems + skills = quality floor regardless of model framing is a teachable insight. Lead with the mechanism, not just the demo.
Export path matters: OpenDesign Vercel/Cloudflare deploy + standalone HTML handoff to Claude Code is the bridge between design and ship — show that explicitly.

Glossary

Terms worth knowing.

Open Design: An open-source, local-first tool for generating web prototypes, mobile app mockups, and HTML slide decks using any locally installed AI agent or model, without sending data to external servers.
Design system: A structured set of reusable design decisions — color tokens, typography scales, spacing rules, and component patterns — that keeps a UI visually consistent across a product.
Design tokens: Named variables (such as specific hex colors, font sizes, or spacing values) that store a design system's core decisions, allowing consistent styling to be applied and updated across an entire codebase.
Skills (AI design context): Pre-built instruction sets bundled into an AI design tool that specialize it for a particular output type — for example, a dashboard skill teaches the model how to lay out charts, while a deck skill structures slide presentations.
Agent harness: A runtime environment or wrapper that manages how an AI model receives instructions, uses tools, and produces outputs — examples include Claude Code, Codex, and OpenCode.
Reasoning effort: A configurable parameter in some AI agent interfaces that controls how much computation the model spends on internal planning before producing a response, trading speed for answer quality.
Live artifact: A generated UI component or page that is designed to update dynamically based on changing data, as opposed to a static prototype that captures only a fixed state.
Claude Design: A proprietary web-based design tool from Anthropic that uses Claude models to generate polished UI designs and front-end prototypes from text prompts.
Impeccable: An AI-powered UI design tool that generates multiple visual mockups using an image model before writing any code, letting the user select and iterate on a visual direction upfront.
GLM 5.1: A large language model developed by Zhipu AI (a Chinese AI lab), used here as an alternative to Anthropic's Claude within the Open Design tool to test cross-model compatibility.

Resources

Things they pointed at.

00:33productClaude Design (Anthropic) ↗

00:44productLovable ↗

00:44productv0 (Vercel) ↗

00:55toolOpen Design ↗

02:33toolOpenCode ↗

03:03toolElevenLabs ↗

06:16toolImpeccable ↗

06:00productVercel ↗

06:00productCloudflare Pages ↗

Quotables

Lines you could clip.

01:00

“What is the next thing Anthropic is going to make that someone is going to put open in front of?”

Punchy rhetorical question, lands as a prediction, invites speculation in comments→ TikTok hook↗ Tweet quote

05:51

“It is a no brainer to try if you already have a coding agent installed and you pay for a subscription off of Claude.”

Clean verdict sentence, no setup needed, directly answers the video question→ IG reel cold open↗ Tweet quote

06:33

“With Open Design, you kinda have to know a bit about design before going in.”

Honest limitation stated plainly — contrast with Impeccable makes it a useful comparison pull-quote→ newsletter pull-quote↗ 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.

analogy

This is OpenDesign, an open source alternative to ClawDesign 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.

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 v zero and similar tools.

But it's a proprietary cloud only tool that's to a single model and will cost you $20 a month to use it, which basically means it's not for everyone. So eleven days later, Tom and the Nexa team shipped an open source alternative, which was really popular. It kind of reminds me of OpenCode coming from ClaudeCode, and now OpenDesign is coming from ClaudeDesign.

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 Claw 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 dashboard skill knows how to lay out charts, and a deck skill knows how to structure slides.

There's even an anti AI checklist baked into every prompt, and before it generates anything, 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 OpenDesign for Mac OS or Windows, claim 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, which looks pretty overwhelming for someone who's not used to Cloak 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 Claude's code codecs and open code.

And if I click on Claude'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 codecs, but codecs allows me to change the reasoning effort, which is a nice touch.

But I'm gonna go with open code. I'm scroll down and change the model to t l m 5.1. Now over here as well, I could pick the 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 two to generate images, but I could 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 could review 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 gonna close this and get to designing. So I'm gonna give 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 lot. But I went through them before recording the 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 and default.

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 could click on the templates tab here and pick a template I want. 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 gonna try something a bit unique here. So right now, I have my YouTube channel search app running, and I wanted to create a much better looking version of this.

So what I'm gonna 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 it the link of the website for it to visit using agent browser or whatever tool it feels fits.

That In 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 the 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 the 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 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.

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 twenty minutes, yep, g l m 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 could also click on finalize design package, which will synthesize everything into a single design and d file. So if the transcript, the design system, and any artifacts that were generated. Basically, these five pages.

I could also click share to export in different formats, and I can even export a standalone HTML and give it to Claude's codes 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 off of Van Claude, then it's a no brainer to try. The combination of design systems and skills 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 upfront 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 kinda have to know a bit about design before going in. I mean, it does ask you what design system you want 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, OpenDesign does have a great UI, giving you the option to see responsive views, export any way you want, add skills, MCP tools, and even pets, which is nice for someone who's used to using the Codex UI or the Clawd desktop app. And it did a great job of designing an app using d l m 5.1, which isn't the best model for designing out there.

So, if I wanted to design something relatively quickly and I had a bit of an idea of the direction I wanted to go in, then I definitely try open design. But if you don't mind spending a bit of money, Clot Design is pretty good. I mean, look at what it was able to do with the exact same prompt.

The Hook

The bait, then the rug-pull.

Eleven days. That is how long it took Tom and the Nexa team to ship an open-source answer to Claude Design — and 40,000 developers showed up. The question Better Stack sets out to answer is not whether it is popular; it is whether it actually works when you swap out Claude for a cheaper, weaker model.

Frameworks

Named ideas worth stealing.

01:06model

Design Quality = Design Systems + Skills, not model quality

OpenDesign core architectural insight: you do not need a great model if you give it a great scaffold. 72 brand-grade design systems provide the aesthetic vocabulary; per-output-type skills provide the layout logic. The model just fills the gap.

Steal forAny AI content pipeline. Structured prompts + domain scaffolding beats raw model horsepower for writing, video scripting, and product copy, not just UI design.

01:00concept

The Open in Front of It pattern

OpenCode came from ClaudeCode. OpenDesign came from ClaudeDesign. Naming a free alternative with Open prefix piggybacks on an established paid tool's search traffic and brand awareness.

Steal forContent hook: The free alternative to [paid AI tool] that dropped X days later — writes itself and targets searchers already interested in the paid product.

CTA Breakdown

How they asked for the click.

VERBAL ASK

00:29subscribe

“Hit subscribe and lets find out.”

Baked into the hook challenge before the host introduces himself. No CTA at the end — the subscribe ask is the hook's resolution mechanism.

MENTIONED ON CAMERA

00:33productClaude Design (Anthropic) ↗

00:44productLovable ↗

00:44productv0 (Vercel) ↗

00:55toolOpen Design ↗

02:33toolOpenCode ↗

03:03toolElevenLabs ↗

06:16toolImpeccable ↗

06:00productVercel ↗

06:00productCloudflare Pages ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

OTHER LINKSAlso linked in the description.

Storyboard

Visual structure at a glance.

open — product splash

hookopen — product splash00:00

host on camera — context

contexthost on camera — context00:33

design systems browser

valuedesign systems browser01:06

execution and model config

demo-setupexecution and model config02:33

design systems gallery

demo-setupdesign systems gallery03:22

YouTube channel search in progress

demoYouTube channel search in progress04:30

finished output — channel search UI

outputfinished output — channel search UI05:25

host — comparison verdict

verdicthost — comparison verdict06:16

final output + close

ctafinal output + close07:08

Frame Gallery

Visual moments.

open — product splash

Frame at 00:07 from Open Design: Why 40k Developers Abandoned Claude Design

Frame at 00:11 from Open Design: Why 40k Developers Abandoned Claude Design

Frame at 00:22 from Open Design: Why 40k Developers Abandoned Claude Design

Frame at 00:23 from Open Design: Why 40k Developers Abandoned Claude Design

Frame at 00:31 from Open Design: Why 40k Developers Abandoned Claude Design

Watch next

More from this channel + related breakdowns.

04:33

Better Stack · Review

Open-Source Dictation Is Here — Goodbye Subscriptions

FluidVoice, a free open-source Mac app, runs speech-to-text and cleanup entirely on-device — going head-to-head with paid subscription tools like Wispr Flow and Superwhisper.

July 10th

07:39

Better Stack · Tutorial

I Tried the Open Source ElevenLabs Alternative (Voicebox)

A 7-minute hands-on with Voicebox — the local voice AI studio that clones your voice, dictates into any app, and talks back to your coding agents, all without a subscription.

June 17th

08:21

Better Stack · Review

Meta's Astryx: An Open-Source Design System Built From 8 Years of Internal Use

Meta open-sourced Astryx, a shadcn-style React component library built on StyleX that separates system behavior from fully type-safe, token-level theming.

July 20th

22:09

Ras Mic · Tutorial

Building beautiful UI using AI (My design workflow)

A 22-minute live-demo tutorial showing how design tokens and Claude Design eliminate the inconsistency that makes AI-built apps look cheap.

June 23rd

08:59

Griffin Wooldridge · Tutorial

Claude Design Just Changed Everything (New Update)

A 9-minute feature breakdown of the update that finally makes Claude Design usable in a real design-to-code workflow.

June 19th

09:16

Mansel Scheffel · Tutorial

Everyone's Wrong About the Claude Fable 5 Ban (do this instead)

A 9-minute rebuttal that reframes a government AI ban as a boring availability outage — and the six rules that make sure it never hurts you again.

June 16th