07:41Vini · Tutorial
The nightmare of markdown files and AI tools
How one developer built an open-source CLI to end the war of competing AI tool memory schemas, and the PREVC workflow that keeps you in the driver seat.
January 15thThe argument in one line.
OpenDesign is a free, self-hosted alternative to Claude Design that uses your existing local AI models (Claude, GPT, Gemini) as engines and exports to six formats for a fraction of the cost.
Read if. Skip if.
READ IF YOU ARE…
- A developer or builder who already has Claude Code installed and wants a free, self-hosted design layer on top of it without paying for a separate Anthropic subscription.
- You are cost-conscious and want to generate landing pages and prototypes using your existing AI CLI setup for around a dollar per project rather than a locked SaaS price.
- A solo builder or indie hacker who wants to export designs to PowerPoint, video, or ZIP — formats that Claude Design does not currently support.
- Someone evaluating open-source alternatives to closed AI design tools who wants a concrete setup walkthrough and a live demo before committing to the install.
SKIP IF…
- You have no coding environment set up — this requires Node.js, git, PNPM, and at least one AI CLI like Claude Code already installed and working on your machine.
- You need a team-shareable or cloud-hosted solution; OpenDesign is local-first and the video does not cover any multi-user or remote deployment setup.
The full version, fast.
OpenDesign is a free, open-source, locally-hosted alternative to Anthropic's Claude Design that removes the closed-cloud, single-model, vendor-lock constraints while producing the same kind of high-fidelity landing pages, decks, and prototypes. Rather than replacing your existing coding agent, it sits on top of it, auto-detecting fifteen CLIs like Claude Code, Codex, Cursor, and Gemini and layering on nineteen composable skills, seventy-one brand-grade design systems, and exports to HTML, PDF, PowerPoint, MP4, ZIP, and Markdown. After installing Node, Git, and a coding CLI, you clone the repo, install with PNPM, pick a design system, write a prompt, and answer a short brief. A full Apple-styled landing page renders in roughly five minutes for about $1.20, with an Apache 2.0 license that permits commercial use.
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 →Where the time goes.
00:00 – 00:32
01 · Cold open · Anthropic's catch
Hook on Claude Design's launch, then pivot to its limitations: cloud-only, model-locked, subscription-gated.
00:32 – 01:10
02 · Meet OpenDesign
Open source, local-first, 29.5K GitHub stars, Apache 2.0 license. Brain-break: it doesn't replace Claude — it uses Claude.
01:10 – 01:50
03 · What's in the box
The numbers card: 15 coding agent CLIs auto-detected, 19 composable skills, 71 brand design systems (Apple/Stripe/Linear/Tesla/Spotify), 6 export formats.
01:50 – 02:02
04 · Same output, zero restrictions
Side-by-side framing: 'It's not even close.' Anthropic vs OpenDesign on portability, ownership, exports.
02:02 – 03:16
05 · Setup · five commands
Prereqs (VS Code, Node.js, git, Claude Code) → git clone → cd into folder → install pnpm → run command. End-to-end install in under two minutes.
03:16 – 04:40
06 · Setup wizard walkthrough
Pet selection, model picker (Claude Code chosen, but Codex/Cursor/Gemini/Hermes/OpenCode all listed), design-system picker, brand-context flow.
04:40 – 06:20
07 · Demo · FocusFlow landing page
Live build of a fictitious AI productivity tool's landing page using Apple as the design-system inspiration, linear/Vercel color direction, modern-minimal tone. Brief takes ~30 seconds.
06:20 – 06:52
08 · Reveal · the output
Five-minute build, $1.20 cost. Working landing page in the picked color direction, exportable to six formats including direct Vercel deploy.
06:52 – 07:26
09 · Closing · subscribe-and-tease
More competition = better/cheaper tools for users. Teases head-to-head Claude Design vs OpenDesign comparison video next; asks for build ideas in comments.
Lines worth screenshotting.
- OpenDesign is open-source, self-hosted, and Apache 2.0 licensed — you can use it commercially with zero restrictions, which Claude Design's closed model does not allow.
- OpenDesign does not replace Claude Code — it uses Claude Code (and 14 other coding CLIs) as the generation engine and adds a design layer on top.
- 15 coding agent CLIs are auto-detected by OpenDesign at setup, including Claude Code, Codex, Gemini CLI, Cursor, and Hermes.
- 71 brand-grade design systems are baked into OpenDesign, including Apple, Stripe, Linear, Tesla, and Spotify — enabling brand-accurate visual output from the first prompt.
- Output formats include HTML, PDF, PowerPoint, MP4 video, ZIP, and Markdown — Claude Design currently does not export to PowerPoint or video.
- A FocusFlow landing page built with OpenDesign using the Apple design system cost $1.20 in Claude tokens and took under five minutes to generate.
- When your subscription to a closed tool ends, so does access to everything you built — OpenDesign's self-hosted model means your work persists regardless of billing.
- OpenDesign's five-command setup (git clone, cd, PNPM install x2, run) is the entire installation — no account creation, no cloud dependency.
- 19 composable skills can be mixed and matched inside OpenDesign to control layout, interaction style, and content format independently.
- The design brief interview that OpenDesign runs before generating (surface, tone, brand context, color mode) produces more contextually grounded output than a raw text prompt.
- Selecting your model inside OpenDesign's settings panel lets you benchmark different CLIs (Claude, Codex, Gemini) against the same design brief without changing the tool.
- OpenDesign's 29,000 GitHub stars at time of recording signals ecosystem velocity — community contributions add design systems and skills faster than a closed-source team would.
The architecture is the format.
Slide-driven tutorial · steal-this playbook
The reason this video reads as 'premium' isn't the production budget — it's that every claim has a slide, and every slide has one big idea. That's a format you can ship every week.
- Build a reusable editorial slide template (serif display face, cream/off-white background, single-color accent, big-number stat layout). One designer pass, infinite videos.
- Open every tutorial with a 'doors that stay closed' slide enumerating what the rented/closed alternative CAN'T do. Pain inventory before pitch.
- Keep the host in a corner-PIP throughout slide segments — don't cut to 'host' / 'slide' / 'host' / 'slide'. The persistent face keeps trust high while the slide does the data work.
- When positioning against an incumbent, lead with 'we don't replace X, we use X.' Aligns audience's existing investment with your product instead of asking them to switch.
- Reduce features to a single 'numbers card': 4 big numbers on one slide. Stripped of charts/copy, it reads as 'too big to ignore.'
- Stack a setup walkthrough between hook and demo — the prereq+command list buys credibility. Watchers think 'I could actually do this.'
- End with a tease (next-video subscribe-bait) AND an open question (build-idea comment-bait). One CTA picks up subs, the other picks up engagement signal — they don't fight.
Terms worth knowing.
- OpenDesign
- An open-source, local-first design generation tool that uses existing coding agent CLIs (like Claude Code or Cursor) as the engine to produce design outputs.
- Claude Design
- Anthropic's proprietary cloud-based design tool that generates prototypes, landing pages, and decks from natural language prompts using Claude models.
- open source
- Software whose source code is publicly available for anyone to view, modify, and distribute, often governed by a license specifying permitted commercial use.
- Apache 2.0 license
- A permissive open-source software license that allows commercial use, modification, and distribution with minimal restrictions.
- coding agent CLI
- A command-line interface tool powered by an AI model that can autonomously write, edit, and execute code, such as Claude Code, Codex, or Cursor.
- design system
- A documented collection of reusable UI components, typography rules, color palettes, and spacing standards used to maintain visual consistency across a product.
- composable skill
- A modular capability within OpenDesign that can be combined with other skills to customize the design generation workflow.
- local-first
- A software architecture approach where data and processing live on the user's own machine rather than in the cloud, enabling offline use and full data ownership.
- self-hosting
- Running software on your own server or computer rather than using a vendor's cloud service, giving you control over the data and configuration.
Things they pointed at.
00:00productClaude Design (Anthropic)
01:00toolClaude Code
01:00toolCodex
01:00toolCursor
01:00toolGemini CLI
02:10toolVS Code
02:10toolNode.js
02:10toolgit
03:08toolpnpm (package manager)
Lines you could clip.
01:00
“OpenDesign doesn't replace Claude. It actually uses Claude.”
00:15
“And the second your subscription ends — poof, it's gone.”
06:50
“More competition, more pressure for Anthropic, for OpenAI, makes the product better and also cheaper for users.”
06:20
“It costs, like, $1.20, which I think is pretty low for this output.”
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.
Two weeks ago, Anthropic dropped Cloud Design, and it broke the Internet. People started shipping pitch decks, landing pages, and full prototypes in seconds just by typing what they wanted.
But there's a catch. It's closed. It's cloud only, and it's locked on Tropics models, on Tropics rules, and the worst part, on Tropics prices.
And here's a list of things you cannot do with Cloud Design right now. You cannot self host it. You cannot pick your own model.
No GBT. No Gemini. You cannot export to PowerPoint or video formats.
And the second your subscription ends, poof, it's gone. Basically, it's a really powerful tool, but with lots of different closed doors. This is where open design comes in.
It's open source, local first. It has 29,000 stars on GitHub at the moment of filming, and also has Apache.
I hope I'm saying it right. Two point o license, meaning you can use it commercially with zero restrictions, which is a big one.
And here's the part which broke my brain when I first saw it. OpenDesign doesn't replace Clot. It actually uses Clot.
It takes the coding agents already on your laptop, like ClothCode, Codex, Cursor, Gemini CLI, and turns them into design engine.
Your existing setup does the work. OpenDesign just adds design layer on top. This is the key part.
And out of the box, you are getting 15 coding agent CLIs auto detected, 19 composable skills you can mix and match, 71 brand grade design systems, which is really impressive. We have systems like Apple, Stripe, Linear, Tesla, Spotify, all baked in.
I'm not sure about how the copyright goes with these, but it's only for the imagination. And it exports to six formats, HTML, PDF, PowerPoint, m p four video, ZIP, and also markdown formats.
So if we put Clot Design and Open Design side by side, it's not even close. Let me show you exactly how to set it up, and then I will build you some example websites just to show you how it actually works. So first of all, you need three things working.
You need Versus Code or whatever platform you're using. For my example, I will use Versus Code, and then need to check three things. So first of all, do we have Node.
Js installed? Do we have git and also ClotCode installed on our systems? And to double check, you can run three of these commands.
Each of them will show you if you have all the necessary software and all the necessary stuff installed in your computer. Next step, you have to navigate to desktop, and we have to clone the repost right from the GitHub. Just type in git clone and also the link of the git repository.
Also, you can find all the commands and all the links in description. Don't forget to subscribe. This downloads the entire project or machine and takes around thirty, forty seconds.
Once it's done, we can actually jump into open design folder. So run command c d open design. This is where all the files exist.
You'll see a full project structure, apps, packages, skills, design systems I mentioned. We have, like, again, Apple, Bugatti, and all the different brand systems, and read me a file if you actually want to dig deeper.
After that, we have to install PNPMs. OpenDesign uses a package manager called PNPM, and you have to run two commands.
You can see both of these commands on the screen. Again, you can copy the commands from the description. And lastly, once everything is done, run this command you see on the screen, and this will open OpenDesign.
I hope it all makes sense. It's really simple setup, just few commands, and we are ready to roll. So once it opens, you get this setting window where you can actually set few different things.
So first of all, you can get a pet. So for this, let's select this. Just quick setup.
After you have your pet, the most important thing is selecting the model. So right here, can see all the different local CLIs you have connected. So for my example, I only have ClothCode, but you can also select Codex, OpenCode, Gemini, Hermes, uh, Cursor.
So, yeah, lots of different options. But as I mentioned for this video, we are using ClothCode. So let's select it.
Also, what's cool if you scroll down, we also have skills and design systems right here, but let's talk about it a bit later. So let's save it. And if you used ClothCode in the past, it looks almost the same.
And for this video, I decided to do something really simple to actually show off how it all looks. Let's call the prototype demo.
Let's select the design system. As I mentioned, you can select from all the different brands. For this one, let's use Apple as inspiration.
So let's click on Apple. Uh, we are creating high fidelity website. You can also use wireframes.
Again, it's the same workflow we had with the Clot Design. Let's click create. And on the left, we have the window where we can input the prompt, also add some additional information.
For example, you can drop and paste images for visual references or type at to attach file from the project or try one of these starters. So we have three options. Actually, you can do annual report long scroll, SaaS analytics dashboard, and editorial page dev.
I would say pretty interesting options for default. I don't know if people are building these that much. And for this example, I have a prompt ready.
Let's make it bigger. I just saw you can actually make this window bigger. Let's paste it in.
So build me a landing page for an AI productivity tool called FocusFlow, and I actually input more information. But, again, we are just doing it as a demo.
Let's send it. Okay. We have quick brief for thirty seconds, so let's fill it out.
So primary surface, desktop web, responsive all sizes, visual tone, modern minimal.
Next up, brand context. Pick direction for me. Yeah.
Let's go for the pick. Color mode, let's go for Apple style, and copy and content. Right.
Realistic copy for me. So, yeah, I think for example, it's more than enough. Send an answer.
Again, this is pretty similar to clot code, but you get a bit different questions, different information. But so far, actually, this is way easier if you're starting from scratch. Okay.
Again, we can select the colors. So let's see what kind of options we have. I think let's go for the linear Vercel.
Okay. Send an answer. So while we wait, I just wanna tease my next videos on this channel.
So I plan to do a head to head comparison of Clot Design and also OpenDesign, really hard names. So I plan to build, like, three or four different platforms, like dashboards, uh, landing pages with the same prompts and same instructions, and see which platform performs better and also how much cheaper is to use OpenDesign.
So subscribe for that video, and you can see we are actually cooking with OpenDesign. Stuff is happening. Interesting to see how long does it actually take.
So it already took two minutes. So let's cut to the fin And we have our website. It took almost five minutes, which is pretty quick.
And you can see right here, I think it calculates the price. So it costs, like, $1.20, which I think is pretty low for this output because, again, it's so quick.
And, actually, yeah, it looks pretty good. You can see how the website looks. It kinda tried to emulate some of the colors we picked.
We have the buttons, the features. Again, pretty standard website, pretty clean look. And if you want to share, click right here.
And we have these additional formats. So, again, PDF, PPTX, ZIP, HTML, uh, markdown, and you can also deploy to Vercel.
So so far, I'm really loving these platforms because more pressure, more competition for Entropic, for OpenAI makes the product better and also cheaper for users. So in the comments, please tell me what should I build next in my future videos where I'll be comparing Cloud Code with OpenDesign.
So leave some ideas in the comments, and, of course, subscribe for more videos like this. See you next time.
The Hook
The bait, then the rug-pull.
Anthropic just shipped a tool that broke the internet — and a creator on YouTube is already pitching the open-source replacement. The architecture twist is the lesson: OpenDesign doesn't compete with Claude. It rides on top of it.
Named ideas worth stealing.
00:11list
The Five Closed Doors
- Self-host on your own machine
- Pick your own model (no GPT, no Gemini)
- Add your own brand design systems
- Export to PowerPoint, video, or PDF
- Keep using it after your subscription ends
- Run anything offline or commercially
Six-pack laid out on a single editorial slide as 'Five doors that stay closed' — the slide title undercounts on purpose, the slide overdelivers. Riko enumerates Anthropic's closed-product friction points before pivoting to the open-source answer.
Steal forAny tool/SaaS comparison video. Stack the rented tool's limits as 'closed doors' before showing your alternative — frames every constraint as something the audience already feels.
01:20model
What's in the Box (numbers card)
- 15 coding agent CLIs (auto-detected)
- 19 composable skills (mix and match)
- 71 brand design systems (Apple, Stripe, Linear, Tesla, Spotify…)
- 6 export formats (HTML, PDF, PPTX, MP4, ZIP, MD)
Single-slide credibility builder. Four big numbers in serif type, no chart, no graph — just stats positioned to feel 'too big to ignore'.
Steal forAny product launch / review. Reduce 'features' to four numbers on one slide. Numbers do the heavy lifting; copy is just naming what's being counted.
01:00concept
Doesn't replace, uses
The architecture insight: OpenDesign isn't another LLM tool — it's a layer that turns the agent CLIs you're already paying for into a design engine. 'Layer 1: Your CLI agents → Layer 2: Open Design → Layer 3: Real artifacts.' Three-card slide.
Steal forPositioning. When competing against an established tool, don't oppose it — ride it. 'We don't replace X, we use X' is a less defensive frame and aligns the audience's existing investment with your product.
How they asked for the click.
VERBAL ASK
06:50subscribe
“I plan to do a head to head comparison of Cloud Design and also OpenDesign… subscribe for that video. And in the comments, please tell me what should I build next.”
Soft sub-CTA layered with two engagement plays — (1) tease a future comparison video to bait subscriptions, (2) ask for build ideas to bait comments. Both are aligned to the algorithm without feeling like begging.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
