Hi. Welcome to another video.
So today I wanna 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.
But the problem is that Claude design is still closed, paid, cloud based, and tied to Anthropix ecosystem.
So if you want to self host it or use Codex 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. OpenDesign
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 QN 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.
The project itself is Apache two 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 OpenAI 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 read me highlights 19.composable
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,
SaaS 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, run books, finance reports, invoices,
Kanban 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 template Guizong 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.
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 design.md
systems out of the box.
These include styles inspired by tools and brands like Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Raycast,
Lovable, Mistral, Spotify, Webflow, Sanity, Posthog, Sentry, MongoDB,
Clickhouse, and a lot more.
And if you watched my video on Awesome Design MD, this is basically that idea taken further.
Adesign.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 anti patterns. So instead of saying make it clean and modern, you can actually pick something like linear or Vercel 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.
If you do not have a brand, Open Design can ask you to choose from five visual directions.
Editorial monocle, modern minimal, tech utility, brutalist, and soft warm. So again, the model is not just inventing a vibe from nowhere. It gets a deterministic palette, font stack, and visual direction before it starts building. And this is the pattern that I think more AI design tools should copy. Ask the important questions upfront, 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.
And I know this sounds like a small thing, but it is actually a big deal.
Thirty seconds of questions can save thirty minutes of regeneration. Once that is done, the agent creates a plan and the total progress streams into the UI.
Then it generates the artifact and the result. 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 dash design folder. After that, run n v m use, then run core pack enable,
then run p n p m install.
And once everything is installed,
run p n p m dev colon all.
That starts the local daemon and the Vite app together.
The daemon runs on port seven four five six, and the web app runs on port five one seven three. Then you open local host colon five one seven three. On first load, open design detects which agent CLIs you have installed. So if you have Claude code, codex, Gemini, open code, cursor agent, or KWN 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 daemon with SQLite for projects, conversations,
messages, and open tabs. The daemon is the privileged process.
It spawns your selected CLI in a project folder under dot o d, 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.
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 wanna render them, but you also do not want the preview to have unnecessary access to everything. So overall,
the technical design makes sense.
Now, me give you a demo flow I would actually show. I would open OpenDesign
and choose Codec 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.
For the direction, I would probably choose modern minimal if I want the linear or Vercel 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 dot 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 omitted. 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 zero, p one, and p two 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. 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.
Fourth, this is a local daemon 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. 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.
One, your existing coding agent, two, file based skills,
and three, design.md
systems. That combination makes a lot of sense. It means your design workflow can be versioned, edited, forked, run locally.
It also means a team could theoretically create its own internal dashboard skill, its own brand design dot m d file, and then use Claude code, codex, or another agent to generate artifacts that follow those rules.
That is much more interesting than a lockdown 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.