WEBVTT 00:00:05.040 --> 00:00:07.520 Hi. Welcome to another video. 00:00:07.760 --> 00:00:11.360 So today I wanna talk about a new open source project 00:00:11.360 --> 00:00:12.720 called open design. 00:00:13.405 --> 00:00:17.885 And this is basically trying to be an open source alternative to Claude design. 00:00:18.205 --> 00:00:20.685 Now if you have not seen Claude design, 00:00:20.925 --> 00:00:25.645 the idea is simple. Instead of asking an AI model to just talk about a design, 00:00:25.885 --> 00:00:28.365 you ask it to actually produce a design artifact. 00:00:28.830 --> 00:00:36.110 So it can make a prototype, a deck, a mobile screen, or some kind of visual page, and you can preview that output directly. 00:00:36.270 --> 00:00:38.030 That is obviously very cool. 00:00:38.430 --> 00:00:44.695 But the problem is that Claude design is still closed, paid, cloud based, and tied to Anthropix ecosystem. 00:00:44.855 --> 00:00:55.655 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. 00:00:56.135 --> 00:00:59.380 And this is where Open Design comes in. OpenDesign 00:00:59.380 --> 00:01:04.660 is a local first open source design app that connects to the coding agent you already use. 00:01:05.140 --> 00:01:08.420 So instead of shipping its own AI agent, 00:01:08.580 --> 00:01:11.060 it detects tools like Claude code, 00:01:11.220 --> 00:01:12.180 Codec CLI, 00:01:12.555 --> 00:01:15.035 cursor agent, Gemini CLI, 00:01:15.115 --> 00:01:22.955 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. 00:01:23.435 --> 00:01:30.980 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.620 --> 00:01:43.025 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. 00:01:43.745 --> 00:01:47.345 If you use Codec CLI, then you're using your OpenAI setup. 00:01:47.745 --> 00:01:53.740 If you use Gemini CLI, then it depends on your Gemini setup. And if none of those CLIs are installed, 00:01:53.900 --> 00:01:57.980 it also has an Anthropic API fallback where you can bring your own key. 00:01:58.540 --> 00:02:00.460 That is a very important distinction. 00:02:00.860 --> 00:02:02.940 Open design is not a free model. 00:02:03.180 --> 00:02:09.245 It is not a magic hosted design model. It is more like a design shell around the agents you already have. 00:02:09.965 --> 00:02:16.285 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. 00:02:16.925 --> 00:02:19.165 The read me highlights 19.composable 00:02:19.165 --> 00:02:22.860 skills and the repo ships with 71 design systems. 00:02:23.660 --> 00:02:28.940 And that is where it becomes much more useful. The core skills cover things like web prototypes, 00:02:29.100 --> 00:02:30.620 SaaS landing pages, 00:02:30.700 --> 00:02:31.660 dashboards, 00:02:31.740 --> 00:02:38.925 pricing pages, docs pages, blog posts, mobile apps, simple decks, magazine style decks, 00:02:39.085 --> 00:02:41.805 and even work product templates like PM specs, 00:02:41.885 --> 00:02:47.005 weekly updates, meeting notes, run books, finance reports, invoices, 00:02:47.085 --> 00:02:48.925 Kanban boards, and OKRs. 00:02:49.580 --> 00:02:55.340 So you are not just telling the model, make me a nice page, and hoping it figures out the format. 00:02:55.660 --> 00:03:02.460 You pick a skill, and that skill gives the agent rules template Guizong PPT skill for magazine style web decks. 00:03:03.075 --> 00:03:04.595 If you choose dashboard, 00:03:04.675 --> 00:03:09.395 it is biased toward more data dense admin UI instead of some generic marketing page. 00:03:09.795 --> 00:03:12.995 That is exactly the kind of structure AI design tools need. 00:03:13.395 --> 00:03:19.160 Because to be honest, the average AI generated UI is not bad because the model cannot write CSS. 00:03:19.400 --> 00:03:24.520 It is bad because the model has no stable visual system, no constraints, no checklist, 00:03:24.520 --> 00:03:28.200 and no reason to stop making the same generic cards over and over again. 00:03:28.600 --> 00:03:31.000 Open Design tries to fix that with design systems. 00:03:31.655 --> 00:03:34.135 It includes 71 design.md 00:03:34.135 --> 00:03:35.415 systems out of the box. 00:03:35.655 --> 00:03:45.410 These include styles inspired by tools and brands like Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Raycast, 00:03:45.410 --> 00:03:50.450 Lovable, Mistral, Spotify, Webflow, Sanity, Posthog, Sentry, MongoDB, 00:03:50.450 --> 00:03:51.730 Clickhouse, and a lot more. 00:03:52.130 --> 00:03:56.290 And if you watched my video on Awesome Design MD, this is basically that idea taken further. 00:03:56.945 --> 00:03:58.065 Adesign.md 00:03:58.065 --> 00:04:21.330 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. 00:04:21.570 --> 00:04:25.730 If you do not have a brand, Open Design can ask you to choose from five visual directions. 00:04:26.365 --> 00:04:48.000 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. 00:04:48.320 --> 00:05:01.035 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. 00:05:01.275 --> 00:05:03.195 When you give it a fresh design brief, 00:05:04.315 --> 00:05:14.180 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.140 --> 00:05:18.340 And I know this sounds like a small thing, but it is actually a big deal. 00:05:18.740 --> 00:05:26.825 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. 00:05:27.225 --> 00:05:42.720 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, 00:05:42.880 --> 00:05:45.120 then run p n p m install. 00:05:45.840 --> 00:05:47.440 And once everything is installed, 00:05:47.680 --> 00:05:50.000 run p n p m dev colon all. 00:05:50.625 --> 00:05:53.825 That starts the local daemon and the Vite app together. 00:05:54.305 --> 00:06:20.555 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. 00:06:21.115 --> 00:06:28.155 Now, under the hood, the architecture is pretty simple in a good way. The front end is a Vite, React, and TypeScript app. 00:06:28.395 --> 00:06:33.355 The back end is a node and express daemon with SQLite for projects, conversations, 00:06:33.435 --> 00:06:37.170 messages, and open tabs. The daemon is the privileged process. 00:06:37.410 --> 00:06:46.850 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. 00:06:47.090 --> 00:06:54.955 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. 00:06:55.355 --> 00:06:57.595 That is also why the outputs can be exported. 00:06:58.475 --> 00:07:00.475 Open design supports HTML, 00:07:00.475 --> 00:07:02.410 PDF, ZIP, markdown, 00:07:02.570 --> 00:07:06.330 and for deck skills, PPTX style output depending on the skill. 00:07:06.650 --> 00:07:08.490 And the preview is sandboxed, 00:07:08.490 --> 00:07:11.690 which is important because these are generated HTML artifacts. 00:07:11.770 --> 00:07:17.685 You wanna render them, but you also do not want the preview to have unnecessary access to everything. So overall, 00:07:17.685 --> 00:07:19.525 the technical design makes sense. 00:07:20.165 --> 00:07:24.245 Now, me give you a demo flow I would actually show. I would open OpenDesign 00:07:24.245 --> 00:07:36.200 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. 00:07:36.440 --> 00:07:38.040 Then I would prompt something like, 00:07:38.280 --> 00:07:42.440 make a landing page for an AI code review product called PatchPilot. 00:07:42.600 --> 00:07:45.960 It should feel premium, developer focused, and trustworthy. 00:07:46.585 --> 00:07:51.465 Include a hero, workflow section, feature section, pricing section, 00:07:51.705 --> 00:07:53.225 and final call to action. 00:07:53.785 --> 00:07:57.785 Now after sending that, Open Design should first show the discovery form. 00:07:58.425 --> 00:08:01.180 This is where I would fill in the audience, tone, 00:08:01.180 --> 00:08:03.260 scale, and brand context. 00:08:03.580 --> 00:08:10.380 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. 00:08:10.700 --> 00:08:13.340 So you should see the Toto plan streaming in the interface. 00:08:13.825 --> 00:08:18.385 Now it might inspect the skill, read the design dot MD file. 00:08:18.545 --> 00:08:25.265 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. 00:08:26.100 --> 00:08:40.705 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, 00:08:40.865 --> 00:08:41.665 hierarchy, 00:08:41.665 --> 00:08:44.145 execution, specificity, and restraint. 00:08:44.385 --> 00:08:58.860 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. 00:08:59.180 --> 00:09:05.340 Things like aggressive purple gradients, generic emoji icons, random rounded cards with left border accents, 00:09:05.500 --> 00:09:34.320 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. 00:09:35.040 --> 00:09:37.200 The other CLIs are more line buffered. 00:09:37.625 --> 00:09:40.985 They can still work, but the experience may not be as rich. 00:09:41.385 --> 00:09:49.785 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.440 --> 00:09:55.480 Fourth, this is a local daemon that spawns coding agents and gives them a working directory. 00:09:55.720 --> 00:10:01.080 That is the whole point, but it also means you should be thoughtful about what skills you install and what directories you expose. 00:10:01.480 --> 00:10:12.035 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. 00:10:12.595 --> 00:10:20.600 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. 00:10:21.000 --> 00:10:24.520 The best part is that it combines three things that are actually useful. 00:10:24.760 --> 00:10:28.120 One, your existing coding agent, two, file based skills, 00:10:28.280 --> 00:10:29.800 and three, design.md 00:10:29.800 --> 00:10:37.365 systems. That combination makes a lot of sense. It means your design workflow can be versioned, edited, forked, run locally. 00:10:37.845 --> 00:10:48.550 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. 00:10:48.950 --> 00:10:54.150 That is much more interesting than a lockdown design chat box. And from a cost perspective, 00:10:54.310 --> 00:11:09.365 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. 00:11:09.525 --> 00:11:17.020 Now, I still think you should keep expectations realistic for quick prototypes, landing pages, internal dashboards, decks, 00:11:17.020 --> 00:11:21.420 and visual experiments. This could be really good. For serious production UI, 00:11:21.580 --> 00:11:26.060 I would still use it as a starting point, then review the code, test responsiveness, 00:11:26.060 --> 00:11:27.340 clean up accessibility, 00:11:27.660 --> 00:11:29.020 and refine the design manually. 00:11:29.715 --> 00:11:31.475 But that is fine. 00:11:31.715 --> 00:11:40.915 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. 00:11:41.315 --> 00:11:51.150 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, 00:11:51.550 --> 00:11:54.910 more outputs you can actually inspect and edit. So overall, 00:11:54.990 --> 00:12:09.745 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.