Modern Creator
Why Modern Creator?
Sean Kochel · YouTube

Open Design Is Every Vibe Coder's Dream

Sean Kochel road-tests Open Design — a 22.4K-star, BYOK, local-first clone of Claude Design — by shipping a landing page, an iOS app, and a desktop chat UI in under fifteen minutes of total prompting.

Posted
3 months ago
Duration
Format
Tutorial
educational
Views
31.5K
789 likes
Big Idea

The argument in one line.

Open Design achieves professional UI outputs comparable to Claude Design by combining a chosen design system template with structured prompt architecture, making it a free, open-source alternative that doesn't lock you into a single provider.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A vibe coder building landing pages or mobile app screens who wants a free, local-first alternative to Claude Design with 71 built-in design systems to choose from.
  • A developer who has a PRD or feature spec written and wants to quickly mock up multiple design directions — landing page, mobile screens, and desktop web — without switching tools.
  • Someone who already uses Claude Code, Codex, or Cursor and wants to plug their existing CLI into a design layer that outputs clean HTML files they can drop into their actual project.
  • A builder frustrated by AI-generated UI slop who wants a structured approach: pick a design system, feed it your product spec, and iterate toward something that looks shippable.
SKIP IF…
  • You need back-end logic or database integration — Open Design outputs static HTML mockups and UI screens, not functional app code with routing or data persistence.
  • You want a cloud-hosted, shareable tool with team collaboration; Open Design is entirely local-first and the video does not cover any deployment or sharing workflow.
TL;DR

The full version, fast.

Open Design is a free, local-first, BYOK clone of Claude Design with 22.4K GitHub stars, plug-in skills, 71 built-in design systems, and media-generation APIs that emit raw HTML. The core method is a two-axis prompt: pick a named design system to fix the aesthetic, then feed a structured spec � landing-page section list, screen-by-screen UX brief, or a screenshot for multimodal translation � drawn from a real PRD rather than vibes. The same engine produced an Anthropic-styled converting landing page, three iOS app screens, and a desktop chat UI inside fifteen minutes of prompting. The takeaway for you: AI-slop output is a prompt-and-system problem, not a model problem, and you can swap aesthetics or platforms by changing inputs instead of tools.

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 →
Chapters

Where the time goes.

00:00 – 00:17

01 · Cold open + claim

States the hook: an open-source clone of Claude Design is free, and after a few days he might not go back. Promises three concrete examples.

00:17 – 01:35

02 · What Open Design is

GitHub tour: local-first, BYOK, works with any CLI agent (Claude Code, Codex, Cursor, Gemini), 22.4K stars, system-prompt-driven, customizable skills, 71 built-in design systems, HTML output, inspired by four upstream projects.

01:35 – 02:45

03 · Three advantages over Claude Design

Walks through the showcase: ready-to-copy example prompts; design-system templates with full design.md spec files; built-in media APIs for image/video/audio plug-ins (e.g. OpenAI gpt-image-2).

02:45 – 03:50

04 · Setting up the landing-page build

Picks Anthropic design system. Names the project. Frames the two real problems: AI-slop aesthetics and unstructured pages that don't convert. Argues design-system solves problem one; prompt structure solves problem two.

03:50 – 04:50

05 · Prompting the page (11-section structure + PRD)

Pastes an 11-section landing-page outline (hero, social proof, problem, how it works, key benefits, testimonial, use cases, comparison, case study, FAQ, final CTA) plus an executive summary lifted from his app's PRD as context.

04:50 – 06:00

06 · Generative-UI Q&A + SaaS-landing skill

Open Design fires its generative-UI clarification round. He answers a few questions, hits send. Highlights the built-in SaaS-landing-page skill and the fact that you can drop in your own copywriting skills.

06:00 – 07:05

07 · Landing page reveal (editorial)

Five minutes later: a 'pretty professional looking' Margin landing page in the Anthropic editorial style — comparison table, case-study card with prominent outcome, FAQ section. Calls out the structure is convert-shaped.

07:05 – 07:58

08 · Brutalist variant for contrast

Same prompt, brutalist tone instead of editorial. Shows the radically different aesthetic the design-system swap produces with no other prompt change.

07:58 – 09:20

09 · Mobile-app build: prompt-per-screen workflow

Same two problems (aesthetic + UX structure). Reuses Anthropic design system. Introduces his custom skill that brainstorms UX paradigms and emits paste-ready prompts. Goes screen-by-screen for iOS.

09:20 – 11:00

10 · Three iOS screens reviewed

Daily Inbox home feed, Gap-Closer Feed library recommender, Ad-hoc Log search. Calls out micro-affordances: skip/swap/confirm, BEST FIT badges, library-ranked-for-the-gap pattern.

11:00 – 12:00

11 · Chat-first variant — wildly different UX

Re-prompts with 'coaching chat-first interface' philosophy. Result is unrecognizable from variant one — slash commands for log/photo/goals/trends, conversational logging flow. Same backend prompt, different UX north star.

12:00 – 12:52

12 · Multimodal: mobile screens → desktop web app

Screenshots the three iOS screens, drops them into a new chat, asks 'mock up a web app version of this core functionality.' Returns a three-pane desktop chat (nav left / canvas middle / progress right) with the slash commands working visually.

12:52 – 13:35

13 · Wrap + OpenSpec teaser

Sums up: free, no provider lock-in, matches most Claude Design functionality with more customization. Points to his skill pack in the description and to a prior OpenSpec video for merging generated screens back into a real codebase.

Atomic Insights

Lines worth screenshotting.

  • OpenDesign is a local-first, BYOK, open-source design tool that uses your existing coding CLI (Claude Code, Codex, Cursor, Gemini) as the generation engine under the hood.
  • Selecting a named design system before prompting is what separates on-brand output from AI-slop — the design system solves aesthetic consistency while your prompt solves structure.
  • Output is actual HTML files, making the transition from OpenDesign prototype to production codebase a copy-paste rather than a rebuild.
  • Structured prompts with 11 named sections (problem, pain, how it works, key benefits, etc.) solve both aesthetic failure and conversion failure in one pass.
  • Pasting an executive summary from your PRD into the design prompt grounds the generated copy in real product context rather than placeholder text.
  • The built-in skills (SaaS landing page, editorial, iOS screens) encode conversion and layout best practices so you do not have to specify them every time.
  • Switching design tone from editorial to brutalist produces meaningfully different aesthetic output from the same content — tone is a first-class parameter, not a prompt addition.
  • Custom skills can be added to OpenDesign to encode your own copywriting guidelines, brand rules, or layout standards permanently into the system.
  • Built-in image generation APIs (GPT Image 2) mean visual assets are created inline during the design process rather than sourced separately after.
  • OpenDesign's 71 built-in brand-grade design systems give every creator access to the same visual quality standards that enterprise design teams spend months defining.
  • A generative UI interview (surface, tone, brand context, color mode) runs before generation and produces more contextually grounded output than a raw text prompt.
  • The BYOK model means your OpenDesign costs are identical to your underlying CLI costs — there is no markup or subscription fee added on top.
Takeaway

Prompt structure and design systems ship real UIs

What it teaches

Pairing a structured prompt with a named design system eliminates AI-slop aesthetics and convert-shaped layouts at the same time — before a single line of real code is written.

01Cold open + claim
  • The opening claim — that a free open-source clone might replace a paid tool — is a useful frame for evaluating any emerging alternative: test it on real tasks before dismissing it.
02What Open Design is
  • Open Design is a local-first, bring-your-own-key alternative with 71 built-in design systems and custom skill support.
  • Provider independence is a meaningful practical advantage — the tool works with Claude Code, Codex, Cursor, or Gemini under the hood.
03Three advantages over Claude Design
  • Example prompts tied to specific outputs lower the barrier to getting a consistent aesthetic from the first message.
  • Built-in media APIs let images or video be generated inline during the design session without separate tooling.
04Setting up the landing-page build
  • Choosing a design system at project creation solves the aesthetics problem; structuring your prompt with explicit page sections solves the conversion problem.
  • Naming both problems before building prevents you from shipping a page that looks fine but doesn't convert, or converts conceptually but looks like AI output.
05Prompting the page (11-section structure + PRD)
  • Pasting an executive summary or PRD excerpt as context gives the generator enough information to produce a first pass that doesn't need to be ripped apart.
  • An explicit 11-section page outline (hero through final CTA) removes ambiguity about what a landing page must contain.
06Generative-UI Q&A + SaaS-landing skill
  • Built-in skill slots let you load your own copywriting guidelines or UX frameworks directly into the system prompt so they apply to every session automatically.
  • Answering clarification questions before generation, rather than iterating after, reduces wasted build cycles.
07Landing page reveal (editorial)
  • A properly structured first-pass output — comparison table, prominent case-study outcome, clean FAQ — signals that prompt structure is doing real work.
  • The HTML-file output means generated screens can be moved into a real codebase without format conversion.
08Brutalist variant for contrast
  • Swapping only the design-system parameter while keeping the same prompt produces radically different aesthetics — useful for evaluating tone without rewriting your brief.
09Mobile-app build: prompt-per-screen workflow
  • Prompting screen-by-screen with a UX philosophy statement gives the tool enough structure to produce mobile screens with coherent micro-affordances.
  • A custom skill that converts feature lists into paste-ready prompts can be loaded directly into Open Design to standardize your own screen-generation workflow.
10Three iOS screens reviewed
  • Screens that include specific affordances (skip, swap, confirm; BEST FIT badges; gap-ranking logic) demonstrate that prompt specificity translates directly into UI specificity.
  • Pulling feature descriptions from an actual PRD rather than writing them fresh during the session keeps the generated UI aligned with what you planned to build.
11Chat-first variant — wildly different UX
  • The same prompt with a different UX north star (coaching chat-first vs. feed-based) returns entirely unrecognizable interfaces — framing the interaction model matters more than the feature list.
12Multimodal: mobile screens → desktop web app
  • Dropping screenshots of mobile screens into a new multimodal session and asking for a desktop adaptation produces a working three-pane layout without a separate specification.
  • A three-pane desktop pattern (navigation / canvas / progress) naturally emerges when the prompt asks for desktop translation of a chat-first mobile interface.
13Wrap + OpenSpec teaser
  • The next practical step after generating designs — merging them into an existing codebase — requires a spec-driven approach separate from the design tool itself.
Glossary

Terms worth knowing.

Open Design
An open-source, local-first alternative to Claude Design that lets developers generate UI mockups and web pages using any AI coding agent (Claude Code, Codex, Cursor), with 71 built-in design systems and media API integrations.
Claude Design
Anthropic's proprietary AI-powered UI design tool that generates web and app layouts from natural language prompts, integrated with the Claude ecosystem.
BYOK (Bring Your Own Key)
A model where a user supplies their own API key to an application, giving them direct access to the underlying AI or service and typically reducing cost since they pay the provider directly.
Local-first
A software architecture where the application runs primarily on the user's own computer rather than a remote server, offering offline capability, data privacy, and lower latency.
CLI (Command-Line Interface)
A text-based interface where users interact with software by typing commands in a terminal, used here as the primary layer for configuring and running Open Design.
Design system (built-in)
A pre-configured set of visual rules — colors, typography, spacing, component styles — included in a tool that an AI agent reads to produce aesthetically consistent output without manual style guidance.
System prompt
A set of instructions given to an AI model before a conversation begins that defines its role, constraints, and behavior — in Open Design's case, the core prompt that enables UI generation capabilities.
Vibe coder
A developer who builds software primarily by directing an AI agent with natural language prompts rather than writing code manually, relying on the model for implementation decisions.
Skill (AI coding context)
A reusable, installable instruction set that extends what an AI coding agent can do for a specific task — such as generating landing pages or iOS screens — without writing a custom prompt each time.
Resources

Things they pointed at.

00:17toolOpen Design (github.com — local-first, BYOK) ↗
00:17toolClaude Design (Anthropic's reference design tool)
00:30toolClaude Code (CLI coding agent)
00:30toolCodex CLI
00:30toolCursor Agent
00:30toolGemini CLI
01:40toolhuashu-design (design philosophy)
01:40toolguizang-ppt (bundled deck mode)
01:40toolopen-codesign (UX north star)
01:40toolmultica (daemon architecture)
02:35toolOpenAI gpt-image-2 (media plug-in example)
08:55productSean's custom UX-paradigm skill (skill pack) ↗
13:10toolOpenSpec (merge generated screens into existing code)
Quotables

Lines you could clip.

00:00
“An open source developer just cloned Claw Design. It's a 100% free, and after using it for the past few days, I'm not sure I'll go back to the original.”
Pure hook — names the rival, names the result, no setup needed.→ TikTok hook↗ Tweet quote
03:20
“Number one, the page looks like shit and has AI slop written all over it. Number two, the page isn't actually structured to convert people into doing something.”
Names the two failure modes everyone has felt but never articulated.→ IG reel cold open↗ Tweet quote
02:10
“It has 71 built-in design systems.”
One-line spec stat that screenshots well on its own.→ X / Twitter pull-quote↗ Tweet quote
11:45
“It's interesting — with slightly different approaches to the UX that we prompted it with, we get wildly different results.”
Captures the whole punchline of the video: the prompt is the product.→ newsletter pull-quote↗ Tweet quote
12:40
“So all in all, you can get really different looking things out the other side of this tool, depending on the design systems that you choose, and most importantly, how you actually choose to prompt it.”
Outro line that doubles as the thesis. Good for description copy / repurposed shorts CTA.→ TikTok hook↗ Tweet quote
The Script

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.

metaphoranalogystory
An open source developer just cloned Claw Design. It's a 100% free, and after using it for the past few days, I'm not sure I'll go back to the original. So we're gonna look at the differences between the two, and then I'll show three concrete examples so that you can really see where it shines.
So the repo is called Open Design. It's local first. You can bring your own key, so you can use any coding agent CLI that you use.
And it's already got over 22,000 stars because as we're going to see in a second, it is pretty awesome. So on a high level, this is how it works. We have this CLI layer where you're gonna configure a clog code or codex or cursor agent or Gemini or whatever it is that you use.
It's going to run locally on your machine. It's got a system prompt, which is really what drives how it's able to do the things that it does. And then it's got a few other things that make it really valuable compared with something like Claw Design.
The first is that it has skill support. So there's a bunch of built in skills that this thing uses, but of course, you could come in here and customize it yourself. If you had specific skills or specific ways of doing things that you wanted to work inside of this.
One of the best parts though is that it has 71 built in design systems. And then the outputs are gonna be actual HTML files, which means it's gonna be really easy for you to take whatever you do here and immediately convert it into something in your actual project.
Now, it's worth calling out that this specific project is inspired by four different open source projects, and this basically takes the best of both of them and puts them in one nice package that we can all use. So there's a few things that really make it stand out compared with Claw Design right out of the gate.
So the first is that it has a ton of examples, and it actually gives you the prompt that you could use if you wanted to mimic this style. And so, for example, if we were to come down here, we could open the preview, and then actually look at a real page that was built using this exact system. And so maybe you're building a website for yourself or a landing page, and you really wanted to, like, mimic this type of feel.
You have instant access to the type of prompt that you could use to kick this thing off. So the other thing that's really awesome is they have these design systems. So we'll say these things aren't rendering properly on the actual preview.
But what's cool is that you could come down and you could pick one of these, for example, Claus Anthropic. You could go to preview, and then you're gonna get a full design dot markdown file that explains exactly how you would go about building this type of thing.
All of the different, like, principles and component styles and aesthetic guidelines are codified for you here. Now, one of the things that I think is really cool about this project is that it has built in APIs for media.
So if you wanted to have image or video or audio generated automatically as you're doing this design, you could plug in an API key like the OpenAI GPT image two model, for example.
And then when it goes through and it's generating images for your project, it's going to use these libraries to do it. So those three things are a big advantage over what you get with Claw Design by default. Now that being said, let's go in and actually build something.
So in the design system, we can come through here, and we can pick any of these out that we like. So if you don't know what these might look like, you can obviously go. You can Google the companies and try to see what their aesthetic looks like.
But let's say in this example that I wanna use Anthropix design system. So I can pick that option out, and I can give this a name. And then we can move through and hit create.
And so there's really two big problems that people run into when they're building websites or landing pages. Number one, the page looks like shit and has AI slop written all over it, and so you don't even like it yourself. And then number two, the page isn't actually structured to convert people into doing something.
And so the result of those two things is obviously a bad landing page that is not going to convert. And so selecting that design system is gonna help us solve for problem number one. But for solving problem number two, here's how we're gonna prompt this thing.
First, we're gonna tell it that it's building a landing page for our app that has to have the following structure, and then we're gonna detail the 11 different sections that need to be present inside of this page. Now, obviously, for the problem pain sections, how it works, the key benefits, all of those things, we need to have some context for what needs to go into those.
And so in this case, I've just pulled an executive summary out of my PRD for this app, and I've pasted it in. So what's the product vision? What's the problem statement?
The target user? The proposed solution? And then what are some of the different primary features that we have?
And now, just like it did inside of Clog Design, it's gonna start using this generative UI to ask us questions to help dial in exactly what we want to build.
So I'm gonna come through, just answer a few of these questions based on what I want, and then we are going to hit send answers, and it's gonna shoot this thing off and start building out our landing page. And so in this case, they actually have a SaaS landing page skill, which they're gonna use to help execute on this task.
And that's one of the reasons that I really love this tool, because we can come in here and we can start customizing it. We can add any of the skills that we want to based on our own systems or processes or things that we find online from other people, and we can integrate it directly into this system.
So in this case, this structure that pasted in could just be loaded in as a skill with actual, like, copywriting guidelines and stuff like that. But now this thing is going through. It's, again, using our CLI under the hood to actually implement in all of this, and we'll look at what the output is in a second.
So about five minutes has gone by, and we have, like, a pretty professional looking landing page straight out of the gate that actually conforms to our standards that we set out earlier. So the actual structure of this page is meant to convert. It's following the claw design system that we chose.
It's made this really nice comparison table. I really love how they styled this case study card with, like, the outcome being very prominent here. FAQ looks really nice.
And so on the whole, the page is looking pretty nice for a first pass. Obviously, we would wanna move through and dial things in and kind of ratchet it up a notch, but for a first pass, pretty strong. Now just to show you what a more experimental version of this could look like, I ran through the same exact exercise, and the only difference was that I chose a brutalist design tone instead of an editorial style, which was the last one.
And we can see we're getting, like, a much different overall, like, aesthetic coming out of this. Obviously, we would wanna go back and forth and prompt it and and dial things in, but we can get, like, really meaningfully different looking designs out of here, thanks to these design system templates that ship with this for free.
So in a bit, we're gonna look at how we can build a web app using the same system. But first, I wanna see if we can build a mobile app with this tool. And so, again, with the mobile app, there's two problems that people run into similar to the landing page.
Number one, the actual aesthetics of it are off, and it just doesn't look nice. And number two, the structure of it and, like, the user experience doesn't make sense, and so it doesn't feel right.
So, again, to solve for the design system, we're gonna use this built in, like, anthropic design system. We're gonna hit create. But now when we come through and prompt, I am going to prompt in my app screens.
So what I'm gonna do here is that I'm gonna go screen by screen to build out these different pieces of our app. And so in this case, I have a skill that I've built, which will go through, take your features, brainstorm like UX paradigms around it, and then it will actually build you prompts that you can paste into tools just like this one.
And so I'm gonna come through here, and I'm gonna copy this first screen, and then we're gonna hop over into OpenDesign, and we're gonna say, we're building out the first screen for our app detailed below. And now what I'm gonna do is I'm gonna come back here, and I'm just gonna copy, like, the overall, like, philosophy for this app and how the UX is meant to go.
And then we're gonna come back through. We're gonna paste it in here, and we're gonna let this build out a screen for us. And then we're gonna come back, and we are going to hit send.
Now, this case, I want to see what an iOS mock up is going to look like. So this is gonna do what it normally does. It's gonna come through.
It's gonna mock up questions. It's gonna send us those questions. We will answer them, and then we'll see what the output looks like.
Okay. So we have three screens to look at now. I went through and pasted in a few more screens from that PRD.
And if we were to scroll down and look at them, we can see they're adhering to the design system, like that anthropic style pretty well. And so, like, we have this pretty simple but nice home feed, and this is meant to be where you can look at all of, like, the food that you have eaten today. And so we have these nice little, like, affordances for things we can do with it, so we can skip things, we can swap things, we can confirm that we had things.
So this is like our main kind of daily inbox screen. Then we have this screen for, like, filling in the gaps.
So say that you missed a meal for some reason or you had to make a modification, it can then go through your library of, like, commonly consumed foods and help recommend to you meals that will close the gap in terms of, like, what your goals are and what you need to accomplish today. And so, for example, if we said that we wanted the turkey avocado wrap, it says, hey.
This fits your macros. This will bridge the gap getting into that plan. Then we could come through.
We could confirm the pick. And then last but not least, we have this, like, ad hoc log. So if we were to come through and search for something like overnight oats, we can see things that are matched from, like, public databases, and then we can see things that are recipes from our library.
We could come through. We could say, hey. I actually had 50 grams.
We could confirm it and add it into our log. And so if we were to log this thing, then it would obviously show up over here in this stack screen. So overall, for ten minutes of just sending some prompts into this thing, I would say it is doing a pretty good job at adhering to the design system.
And then two, actually having, like, some sort of structure to what it's gonna build because we're pulling through from an actual PRD of the features we wanted to build for this app. And so it's interesting with slightly different approaches to the UX that we prompted it with, we get wildly different results. So in this case, we said, hey.
I want it to actually be, like, a real chat first interface that takes, like, a coaching approach, and we can see that it looks much, much, much different now. And so in this case, this is what one screen might look like. So if we logged in to, like, today and opened this thing up and it was Monday, this is what it looks like before we've had any conversation at all.
We have these little slash commands that we can run to, like, log food, upload photos, modify our goals, see, like, trends in our nutrition and maybe how that correlates with, like, our fitness trackers. Then if we're in the middle of having a conversation, well, what do those, like, affordances and UI elements actually look like?
So, for example, if we came through and logged our grilled chicken ball, we can see, okay, that brings us closer to our goal. This is what we have left today. We can edit portions.
We could add snacks. We could log it. We could do a bunch of different stuff.
And then this is what it might look like if we wanted to actually upload an image of a food and say, hey. Can you try to estimate the calories in this? So again, really nice UIs, but it depends on how we chose to prompt this thing in the first place.
But no matter which direction we take, it's all looking pretty nice. But now the last thing that I'm curious about is how the multimodal works. So what if I wanted to take these screens and build out a, like, desktop compatible version of this thing?
What might that look like? So what I'm gonna do is I'm gonna come through and I'm just gonna screenshot these three screens. I'm gonna open up a new chat.
I'm gonna drag that screen in, and then I'm gonna give it a pretty open ended ask, mock up a web app version of this core functionality. Now, obviously, if we were working through, like, a proper, like, spec driven development framework for this stuff, we would have specifications in place already for, like, what the desktop version of this, like, needs to actually look like.
But we're gonna see what we can do with, like, a pretty vague prompt going into a tool like this. So again, we're gonna come through, we're gonna answer some of their questions, and then we are going to hit send, and we're gonna see what we get out the other side. Okay.
So after, again, I think, like, maybe five minutes or so, we have a complete translation of that mobile screen into this desktop version, again, of this chat interface. And so I really like this three pane approach where we have, like, more of our navigational elements over here, our main canvas that we're interacting on in the middle, and then we have, like, our progress view on this right hand side where we can see our log of today, how close to the goals are.
And that's really nice because we don't need to go popping around now to other views in order to see things. Now one thing we did was we mocked up what some of those commands look like. So if I wanted to see what the slash command functionality looks like, I could come through here and actually log a meal.
And so, obviously, if we were building this into a real app, this would need to have, like, back end logic to route it to the right places and do everything we wanna do. But we saw when we hit that log it button, it updated everything over here. It added this to the log.
And overall, we have, like, a really nice, clean feeling design with this chat forward interface. So all in all, you can get like really different looking things out the other side of this tool, depending on the design systems that you choose, any of the examples that you choose to move forward with, and most importantly, like how you actually choose to prompt it to build the things that that you want to see.
So overall, this being free, not locking you into a specific provider, and matching most of the functionality, and giving you a lot more customization options, I think this is an awesome tool.
So if you actually want access to all the skills that we use to convert these UX approaches into actual, like, screens that we can prompt into tools like Claw Design or Open Design, you can get more information about that in the description below. But one big pain that I hear from you guys is how can we actually take screens like this and merge it into something that we've already started building?
So maybe you built a web app, you weren't really happy with the outputs that you got, and now you design something really cool into, like, Open Design, and you wanna figure out how to merge those two things together. I did a video on this last week using a tool called OpenSpec, so you can check that video out somewhere around my head if you are interested.
But that is it for this video. I will see you in the next
The Hook

The bait, then the rug-pull.

An open-source dev just cloned Claude Design, slapped a BYOK badge on it, and Sean Kochel says he might not go back. The whole video is a fifteen-minute live demo answering the obvious follow-up: if the thing is free, local-first, and ships with seventy-one design systems baked in, what does it actually feel like to use? He builds three artifacts in a row — a landing page, an iOS app, a desktop chat UI — and the throughline is less 'tool review' than 'here's how to prompt one of these things so the output doesn't read like AI slop.'

Frameworks

Named ideas worth stealing.

03:20list

The two reasons AI landing pages fail

  1. The page looks like shit — AI slop aesthetic, you don't even like it yourself
  2. The page isn't structured to convert anyone into doing anything

Aesthetic is solved by picking a design system. Conversion structure is solved by prompting an explicit section outline. Two separate levers — most people only pull one.

Steal forany 'why your AI-generated landing page sucks' carousel or video opener
04:10list

Sean's 11-section landing-page outline

  1. Hero with clear value prop
  2. Social proof bar (logos or stats)
  3. Problem / pain section
  4. How it works (3 steps)
  5. Key benefits (2-3, not 10)
  6. Testimonial
  7. Use cases or personas
  8. Comparison to alternatives
  9. Case study snippet
  10. FAQ
  11. Final CTA with guarantee

Paste this list into any design-gen tool and you get convert-shaped output instead of a hero + three feature cards. The 'not 10 benefits' constraint is the load-bearing detail.

Steal forevery Modern Creator landing page — drop into MCN+, ModBoard, JoeFlow, Clip Lab pitch pages
02:10list

Three pillars of Open Design over vanilla Claude Design

  1. Copy-ready example prompts attached to every showcase artifact
  2. 71 design-system templates with full design.md spec files
  3. Built-in media-generation APIs (image, video, audio) via BYOK

Sean frames these as the three concrete reasons to switch. Useful frame for any 'why our open-source clone beats the SaaS' product page.

Steal for$6 Stack positioning — exactly how to articulate 'self-hosted alternative to X' offers
07:05concept

Design-system swap as cheap variant generation

Hold prompt constant, swap the design-system token (Anthropic editorial → brutalist), get a radically different brand feel for free. Reframes 'pick a brand' as a one-token operation.

Steal forMod Producer / ShowRunner — let users swap visual tone without rewriting the underlying script
11:00concept

UX-philosophy prompt swap = unrecognizable app

Same feature set, same design system — but a one-paragraph 'coaching chat-first interface' philosophy line completely re-architects the UI from cards-and-buttons to slash-commands-in-chat. The UX north star is a prompt variable, not a downstream design choice.

Steal forany Joe project where 'what kind of app is this?' should be a setting, not a rewrite
CTA Breakdown

How they asked for the click.

VERBAL ASK
12:50product
“If you actually want access to all the skills that we use to convert these UX approaches into actual screens that we can prompt into tools like Claw Design or Open Design, you can get more information about that in the description below.”

Soft, late, single-line CTA pointing to his paid skill pack. No urgency, no guarantee, no second ask. Then a secondary next-video CTA pointing at his OpenSpec walkthrough. Low-friction but also low-conversion.

MENTIONED ON CAMERA
00:17toolOpen Design (github.com — local-first, BYOK) ↗
08:55productSean's custom UX-paradigm skill (skill pack) ↗
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

cold open
hookcold open00:00
GitHub repo tour
promiseGitHub repo tour00:20
skills + 71 design systems
valueskills + 71 design systems00:38
deliverables panel
valuedeliverables panel01:40
example prompts
valueexample prompts02:35
Claude design.md spec
valueClaude design.md spec03:20
Anthropic system picked
valueAnthropic system picked03:50
11-section outline pasted
value11-section outline pasted04:05
Margin landing page reveal
valueMargin landing page reveal06:00
brutalist Your Tracker variant
valuebrutalist Your Tracker variant07:10
Today / What closes the day / Overnight oats
valueToday / What closes the day / Overnight oats08:20
Gap-Closer Feed close-up
valueGap-Closer Feed close-up09:25
Frame Gallery

Visual moments.

cold open00:00Frame at 00:03 from Open Design Is Every Vibe Coder's Dream00:03Frame at 00:10 from Open Design Is Every Vibe Coder's Dream00:10GitHub repo tour00:20Frame at 00:23 from Open Design Is Every Vibe Coder's Dream00:23Frame at 00:28 from Open Design Is Every Vibe Coder's Dream00:28
cold open00:00Frame at 00:03 from Open Design Is Every Vibe Coder's Dream00:03Frame at 00:10 from Open Design Is Every Vibe Coder's Dream00:10GitHub repo tour00:20Frame at 00:23 from Open Design Is Every Vibe Coder's Dream00:23Frame at 00:28 from Open Design Is Every Vibe Coder's Dream00:28skills + 71 design systems00:38Frame at 00:48 from Open Design Is Every Vibe Coder's Dream00:48Frame at 00:58 from Open Design Is Every Vibe Coder's Dream00:58deliverables panel01:08Frame at 01:18 from Open Design Is Every Vibe Coder's Dream01:18Frame at 01:28 from Open Design Is Every Vibe Coder's Dream01:28Frame at 01:34 from Open Design Is Every Vibe Coder's Dream01:34Frame at 01:39 from Open Design Is Every Vibe Coder's Dream01:39Frame at 01:40 from Open Design Is Every Vibe Coder's Dream01:40Frame at 01:50 from Open Design Is Every Vibe Coder's Dream01:50example prompts01:54Frame at 02:01 from Open Design Is Every Vibe Coder's Dream02:01Frame at 02:08 from Open Design Is Every Vibe Coder's Dream02:08Frame at 02:08 from Open Design Is Every Vibe Coder's Dream02:08Claude design.md spec02:18Frame at 02:28 from Open Design Is Every Vibe Coder's Dream02:28Frame at 02:38 from Open Design Is Every Vibe Coder's Dream02:38Frame at 02:48 from Open Design Is Every Vibe Coder's Dream02:48Frame at 02:51 from Open Design Is Every Vibe Coder's Dream02:51Frame at 02:58 from Open Design Is Every Vibe Coder's Dream02:58Frame at 03:08 from Open Design Is Every Vibe Coder's Dream03:08Anthropic system picked03:09Frame at 03:16 from Open Design Is Every Vibe Coder's Dream03:16Frame at 03:26 from Open Design Is Every Vibe Coder's Dream03:26Frame at 03:36 from Open Design Is Every Vibe Coder's Dream03:3611-section outline pasted03:44Frame at 03:54 from Open Design Is Every Vibe Coder's Dream03:54Frame at 04:04 from Open Design Is Every Vibe Coder's Dream04:04Frame at 04:14 from Open Design Is Every Vibe Coder's Dream04:14Frame at 04:24 from Open Design Is Every Vibe Coder's Dream04:24Frame at 04:34 from Open Design Is Every Vibe Coder's Dream04:34Frame at 04:36 from Open Design Is Every Vibe Coder's Dream04:36Frame at 04:46 from Open Design Is Every Vibe Coder's Dream04:46Frame at 04:56 from Open Design Is Every Vibe Coder's Dream04:56Frame at 05:06 from Open Design Is Every Vibe Coder's Dream05:06Frame at 05:14 from Open Design Is Every Vibe Coder's Dream05:14Margin landing page reveal05:24Frame at 05:34 from Open Design Is Every Vibe Coder's Dream05:34Frame at 05:39 from Open Design Is Every Vibe Coder's Dream05:39Frame at 05:44 from Open Design Is Every Vibe Coder's Dream05:44Frame at 05:44 from Open Design Is Every Vibe Coder's Dream05:44brutalist Your Tracker variant05:54Frame at 06:04 from Open Design Is Every Vibe Coder's Dream06:04Frame at 06:14 from Open Design Is Every Vibe Coder's Dream06:14Frame at 06:23 from Open Design Is Every Vibe Coder's Dream06:23Frame at 06:33 from Open Design Is Every Vibe Coder's Dream06:33Frame at 06:43 from Open Design Is Every Vibe Coder's Dream06:43Frame at 06:53 from Open Design Is Every Vibe Coder's Dream06:53Frame at 07:00 from Open Design Is Every Vibe Coder's Dream07:00Frame at 07:10 from Open Design Is Every Vibe Coder's Dream07:10Frame at 07:20 from Open Design Is Every Vibe Coder's Dream07:20Frame at 07:24 from Open Design Is Every Vibe Coder's Dream07:24Frame at 07:31 from Open Design Is Every Vibe Coder's Dream07:31Frame at 07:40 from Open Design Is Every Vibe Coder's Dream07:40Frame at 07:50 from Open Design Is Every Vibe Coder's Dream07:50Frame at 08:00 from Open Design Is Every Vibe Coder's Dream08:00Frame at 08:00 from Open Design Is Every Vibe Coder's Dream08:00Frame at 08:10 from Open Design Is Every Vibe Coder's Dream08:10Today / What closes the day / Overnight oats08:15Frame at 08:20 from Open Design Is Every Vibe Coder's Dream08:20Frame at 08:24 from Open Design Is Every Vibe Coder's Dream08:24Frame at 08:29 from Open Design Is Every Vibe Coder's Dream08:29Frame at 08:39 from Open Design Is Every Vibe Coder's Dream08:39Frame at 08:49 from Open Design Is Every Vibe Coder's Dream08:49Frame at 08:53 from Open Design Is Every Vibe Coder's Dream08:53Frame at 08:55 from Open Design Is Every Vibe Coder's Dream08:55Gap-Closer Feed close-up09:05Frame at 09:12 from Open Design Is Every Vibe Coder's Dream09:12Frame at 09:16 from Open Design Is Every Vibe Coder's Dream09:16Frame at 09:26 from Open Design Is Every Vibe Coder's Dream09:26Frame at 09:36 from Open Design Is Every Vibe Coder's Dream09:36Frame at 09:41 from Open Design Is Every Vibe Coder's Dream09:41Frame at 09:49 from Open Design Is Every Vibe Coder's Dream09:49Frame at 09:55 from Open Design Is Every Vibe Coder's Dream09:55
Watch next

More from this channel + related breakdowns.

15:58
Sean Kochel · Tutorial

I Fed Claude Design 600,000 Real App Screens

Sean Kochel wires Mobbin's screen library into Claude Design through a community MCP server, then uses it to generate three UX directions, an onboarding flow copied structurally from a named competitor, and a single mocked-up UI component — all for a lactation-support app he invents on the spot.

August 5th