I built a portfolio website using Claude Design’s open source alternative and it gave Claude a real run for its money.


Claude has been my go-to AI tool for days, and that probably won’t change anytime soon. Apart from the chatbot itself, Claude Design Anthropic has been a welcome addition to my workflow since launching it a few months ago. I didn’t even have to pay extra for it because it came with the Pro plan already available for Claude’s general use. So I was a bit lucky on that front.

But I’m also one of those people who can’t help but try alternatives to tools I’m already happy with, especially when AI tools are moving as fast as they are right now. Pro is also a shared pool and the design work is faster than any other work I’ve done on Claude, so when I found an alternative that would allow me to design with a pay-as-you-go API or native model for free, it was an easy task to explore. Open Design This is what I tested. And it was more than I expected…

Want to stay up-to-date on the latest developments in artificial intelligence? The XDA AI Insider newsletter drops every week with deep dives, tool tips, and hands-on coverage you won’t find anywhere else on the site. subscribe by changing your newsletter preferences!

Open source version of Claude Design

Same works idea, very different form

open design panel

Open Design dropped right after Anthropic announced Claude Design and was created directly as an open source alternative. It runs as a native desktop app on macOS, Windows, and Linux, which is very different from Claude Design, which is cloud-only and tied to the Pro/Max/Team plan.

Although the artifact approach is the same. You describe what you want and the app delivers real HTML/CSS/JS that can be delivered to a sandboxed preview panel with HTML, PDF, PPTX and even MP4 as export options. Open Design doesn’t actually ship its own model, which I think is the whole point. This includes any coding agent CLI on your machine such as Claude Code, Codex, Cursor, OpenCode and many others. Thus, the model layer is completely decoupled from the application, and this is where cost flexibility comes from.

It comes with 250+ skills (landing pages, dashboards, decks, mobile apps, basically every common design surface) and 140+ design systems baked in, all as simple Markdown files that anyone can edit. Version 0.9.0 also introduced its own model router called AMR for people who don’t want to set up a CLI. You fill the wallet, choose a model, and that’s it. And the option that really appealed to me was BYOK with any OpenAI compatible endpoint, meaning you could also point it to a native model running something like LM Studio.

First, take the local route

It was not smooth sailing

To be honest, my first reaction when I opened the program was a bit of panic. The runtime selector asks you to choose between AMR, Claude Code, or a native coding agent CLI like Codex or Cursor, or BYOK. I don’t use any of these CLIs, and the thought of installing one and configuring it through the terminal made me want to shut down the application entirely, so local LLM via BYOK was a natural choice for me.

You simply select OpenAI from the provider drop-down list and point it to the LM Studio localhost endpoint (http://localhost:1234/v1), since LM Studio provides an API compatible with OpenAI anyway. Type any string in the API key field, as it is not actually validated, click the “Fetch Models” button, and the loaded LM Studio models populate the model drop-down menu.

I went with it first Gemma 4 E4B because it’s been my go-to lately, and it’s also optimized for visually analyzing UI design, so I thought it would be a perfect fit, but I couldn’t have been more wrong. The result was something unusable and just a raw skill template repeated as XML broken in conversation, which made sense after I looked at it, because despite its strong vision, Gemma isn’t really tuned for the multi-step agent work that this program expects from the model.

That’s why I changed it Gwen 3.5 9B and finally reached a place. It went right through Open Design’s discovery form, a sidebar that asks for a few additional pieces of information after your initial inquiry, such as tone, audience, and project context. Then it previewed the actual HTML and CSS. The result wasn’t going to win any design awards, but it hit every part I asked for and even nailed the tech/utility monospace vibe I chose in the exploration options.

Interestingly, each generation takes a few minutes. Qwen runs about 13 tokens per second on my 8GB GPU, which is great for chatting, but it’s slow to stream the entire HTML artifact, and the plugins also didn’t seem effective when I tried to apply them to native generations. So the fair result is free, but slow and limited, and that’s when I started thinking about what a “proper” model would look like behind it.


google opal on desktop, lego and lamp on view

I created an app with Claude Design and Google Opal and only one finished it

Someone finished the job

Link to Anthropic API

It came together quite nicely

I already had an Anthropic API key with some credits from the tool I was testing, which took about two minutes to switch over. Once keyed in, Open Design’s BYOK tab automatically pulled my existing models, and I went with Opus 4.7 because it was specifically for testing visual output.

The difference was immediate. What took Gwen something like five minutes was done in a minute. With the mix of tighter typography, smarter section hierarchy, and clean editorial technology I envisioned, the output was better in every way. For anyone considering going native but whose hardware can’t really support a code-tuned model, if your usage is intermittent, paying for the API is cheaper than the Pro alt, and the speed difference alone makes it worth it.

Plugins also finally worked this time. Plugins in Open Design are basically community-contributed style biases that you add to your request like a chip, shaping the generation’s aesthetic without you having to set the visual direction yourself. There’s also a sketch mode where you can rough out a layout on a canvas inside the app, and the agent will turn that drawing into a realistic mockup, similar to what Claude Design does. This is basically a place for lo-fi wireframes before moving on to prototyping.

One part that didn’t improve with the API change was manual editing. Open Design allows you to click on elements directly in the view to make targeted changes, which sounds great in theory, but the edit box jumps around with the cursor, making it difficult to actually land on what you want to edit. I assumed it was something my local model did, but it persisted with the Opus as well. They seem to be upfront about this in their roadmap. In comment mode, surgical tweaks are listed as partially shipped, and tweaks panel UX is listed as not yet implemented.

The actual briefcase he spit out was honestly something I could see myself using for real, and I opened it up in my browser to woo it. The HTML and CSS give a real and proper answer, and with a bit of flair I think this might actually be something I’ll post. I just don’t have a domain to host it on, so it lives as a local file.

More vibrant than I expected

I’m not giving up on Claude Design, it’s bundled in my subscription anyway so I won’t be able to get rid of it. But there is a real case for Open Design itself. Free if your local model can handle it, if you pay API for intermediate design work, cheaper than Pro, and has things that Claude Design doesn’t really handle, with a more diverse and integrated plugin system at the top of the list. It still has some quirks, but it’s worth a look either way.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *