Open Design + Free APIs : THE BEST Open Alternative to Codex is FINALLY HERE!

Added: 2026-05-06

[00:00:05]Hi, welcome to another video. So today I want to talk about a new open-source project called open design. And this is basically trying to be an open-source alternative to claude design. Now if you have not seen claude design, the idea is simple. Instead of asking an AI model to just talk about a design, you ask it to actually produce a design artifact. So it can make a prototype, a deck, a mobile screen, or some kind of visual page. And you can preview that output directly. That is obviously very cool.

[00:00:38]But the problem is that Claude design is still closed, paid, cloud-based, and tied to Anthropics ecosystem. So, if you want to self-host it or use codecs or use cursor agent or use Gemini CLI or run the design workflow with your own local setup, then you're basically out of luck. And this is where Open Design comes in. Open Design is a local first open- source design app that connects to the coding agent you already use. So instead of shipping its own AI agent, it detects tools like claude code, codec cli, cursor agent, Gemini CLI, open code and Qen code from your path and then uses that agent as the design engine. So that part is pretty interesting for sure because if you are already paying for a coding agent, this means you do not need a completely separate design subscription just to generate UI artifacts.

[00:01:31]The project itself is Apache 2 licensed and the cost comes from whatever model or agent you decide to use. So if you use claude code then obviously you are still paying for claude code. If you use codec cli then you're using your openi setup. If you use gemini cli then it depends on your gemini setup. And if none of those CLIs are installed it also has an anthropic API fallback where you can bring your own key. That is a very important distinction. Open design is not a free model. It is not a magic hosted design model. It is more like a design shell around the agents you already have. Now the reason I think this repo is worth looking at is that it is not just a blank chat box with a preview pane. The readme highlights 19.composible skills and the repo ships with 71 design systems and that is where it becomes much more useful. The core skills cover things like web prototypes, SAS landing pages, dashboards, pricing pages, docs pages, blog posts, mobile apps, simple decks, magazine style decks, and even work product templates like PM specs, weekly updates, meeting notes, runbooks, finance reports, invoices, canban boards, and OKRs. So you are not just telling the model make me a nice page and hoping it figures out the format. You pick a skill and that skill gives the agent rules de template guzzong ppt skill for magazine style web decks. If you choose dashboard it is biased toward more data dense admin UI instead of some generic marketing page.

[00:03:09]That is exactly the kind of structure AI design tools need. Because to be honest, the average AI generated UI is not bad because the model cannot write CSS. It is bad because the model has no stable visual system, no constraints, no checklist, and no reason to stop making the same generic cards over and over again. Open Design tries to fix that with design systems. It includes 71 designd systems out of the box. These include styles inspired by tools and brands like Linear, Stripe, Forcell, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Superbase, Figma, Raycast, Lovable, Mistral, Spotify, Web Flow, Sanity, Post Hog, Sentry, MongoDB, ClickHouse, and a lot more. And if you watched my video on awesome design MD, this is basically that idea taken further. A design.md file is a plain markdown design system that tells the agent how the design should feel. It covers color, typography, spacing, layout, components, motion, voice, brand rules, and antiatterns. So instead of saying make it clean and modern, you can actually pick something like linear or versel or stripe and make the generated artifact follow a more specific visual language. That is super useful. And this is also why I like the direction picker.

[00:04:21]If you do not have a brand, open design can ask you to choose from five visual directions. Editorial monle, modern, minimal, tech utility, brutalist, and soft warm. So again, the model is not just inventing a vibe from nowhere. It gets a deterministic pallet, font stack, and visual direction before it starts building. And this is the pattern that I think more AI design tools should copy.

[00:04:43]Ask the important questions up front, lock the visual direction, then generate. Because if the model starts building before it understands the audience, tone, brand, context, and scale, then you usually end up spending the next 10 prompts trying to undo the first bad direction. Open Design solves this with a question form first. When you give it a fresh design brief, the prompt stack is designed to return a discovery form first, not code. That form asks about the surface, audience, tone, brand, context, scale, and constraints.

[00:05:15]And I know this sounds like a small thing, but it is actually a big deal. 30 seconds of questions can save 30 minutes of regeneration. Once that is done, the agent creates a plan and the Toto progress streams into the UI. Then it generates the artifact and the result.

[00:05:29]That is a good workflow. Now let me explain the local setup. To install it, you can clone the repo from GitHub. Then go into the open- designign folder.

[00:05:38]After that, run nvm use. Then run core pack enable. Then run PNPM install. And once everything is installed, run PNPM devall.

[00:05:50]That starts the local demon and the vite app together. The demon runs on port 7456 and the web app runs on port 5173.

[00:06:00]Then you open localhost col 5173. On first load, open design detects which agent CLI you have installed. So if you have claude code, codeex, gemini, open code, cursor agent or kewen on your path, it should show them in the app. If it does not find anything, you can still switch to the anthropic API bring your own key mode. Now under the hood, the architecture is pretty simple in a good way. The front end is a Vite, React and TypeScript app. The back end is a node and express demon with SQLite for projects, conversations, messages, and open tabs. The demon is the privileged process. It spawns your selected CLI in a project folder under Ood. And that agent gets a real working directory where it can read files, write files, and produce artifacts. So when the agent creates the design, it is not just returning some random blob in chat. It is writing real files into a local project folder. That is also why the outputs can be exported.

[00:06:58]Open design supports HTML, PDF, zip, markdown, and for deck skills, PPTX style output depending on the skill. And the preview is sandboxed, which is important because these are generated HTML artifacts. You want to render them, but you also do not want the preview to have unnecessary access to everything.

[00:07:16]So overall the technical design makes sense. Now let me give you a demo flow I would actually show. I would open open design and choose codeex CLI or cloud code as the agent. For the skill I would pick SAS landing or dashboard. For the design system I would choose linear or stripe because those are easy to judge visually. Then I would prompt something like make a landing page for an AI code review product called Patchpilot. It should feel premium, developer focused and trustworthy. Include a hero, workflow section, feature section, pricing section, and final call to action. Now, after sending that, open design should first show the discovery form. This is where I would fill in the audience tone, scale, and brand context.

[00:08:03]For the direction, I would probably choose modern minimal if I want the linear or versel kind of feel. After that, the agent starts working. So you should see the toto plan streaming in the interface. Now it might inspect the skill read the design MD file. Let's send it and see. This kind of iteration is where the tool can be useful because the design system and the skill stay in the prompt stack. The agent has a stable source of truth instead of drifting every time you ask for a refinement. Now there are also some really interesting anti-slop ideas in this repo. The prompt stack includes a five-dimensional critique before the artifact is emitted.

[00:08:38]It checks things like design, philosophy, hierarchy, execution, specificity, and restraint. Every skill can also ship with a checklist. So, for example, a deck skill can have P 0, P1, and P2 rules that the agent has to satisfy before it returns the final artifact. And the repo explicitly tries to ban some of the common AI UI failure modes. things like aggressive purple gradients, generic emoji icons, random rounded cards with left border accents, fake metrics, and overused decorative elements. Chef's kiss. Really good stuff because those are exactly the patterns that make AI generated UI look cheap.

[00:09:14]Now, is open design perfect? No. First, this is still an early project. I would treat it as something to experiment with, not something I would immediately put into a production design workflow for a whole team. Second, the output quality will still depend heavily on the underlying agent. Claude Code gets the best streaming support because it can output structured stream JSON. The other CLIs are more line buffered. They can still work, but the experience may not be as rich. Third, you still need a good model. If you use a weaker model, a design system file will help, but it will not magically turn bad design judgment into great design judgment.

[00:09:50]Fourth, this is a local demon that spawns coding agents and gives them a working directory. That is the whole point, but it also means you should be thoughtful about what skills you install and what directories you expose. And fifth, some features are still road map-ish. Things like comment mode surgical edits and an AI emitted tweaks panel are mentioned as future directions, not the full current experience. So, I would not oversell it.

[00:10:14]But I do think the idea is very strong because the best part of open design is not just that it is a clawed design clone. The best part is that it combines three things that are actually useful.

[00:10:24]One, your existing coding agent, two, file-based skills, and three, design systems. That combination makes a lot of sense. It means your design workflow can be versioned, edited, forked, and run locally. It also means a team could theoretically create its own internal dashboard skill, its own brand design.mmd file and then use claude code, codecs or another agent to generate artifacts that follow those rules. That is much more interesting than a lock down design chat box. And from a cost perspective, this is also the right direction. The repo is free and open source and you bring the agent you already use. So for students, indie hackers, and people who already pay for one AI coding tool, this is much more reasonable than adding yet another paid design subscription. Now, I still think you should keep expectations realistic for quick prototypes, landing pages, internal dashboards, decks, and visual experiments. This could be really good for serious production UI. I would still use it as a starting point, then review the code, test responsiveness, clean up accessibility, and refine the design manually. But that is fine. The point is not that open design replaces designers or front-end engineers. The point is that it gives AI agents a much better design workflow than just make it look nice. And if you ask me, that is exactly where AI UI generation needs to go. Less random prompting, more structured skills, more design systems, more local control, more outputs you can actually inspect and edit. So overall, open design is pretty cool. Anyway, let me know your thoughts in the comments. If you like this video, consider donating through the super thanks option or becoming a member by clicking the join button. Also, give this video a thumbs up and subscribe to my channel. I'll see you in the next one. Until then, bye.