§ 01 · 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.'
What the video promised.
stated at 00:10“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.”delivered at 12:52
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.
Visual structure at a glance.
Named ideas worth stealing.
03:20list
The two reasons AI landing pages fail
- The page looks like shit — AI slop aesthetic, you don't even like it yourself
- 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
- Hero with clear value prop
- Social proof bar (logos or stats)
- Problem / pain section
- How it works (3 steps)
- Key benefits (2-3, not 10)
- Testimonial
- Use cases or personas
- Comparison to alternatives
- Case study snippet
- FAQ
- 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
- Copy-ready example prompts attached to every showcase artifact
- 71 design-system templates with full design.md spec files
- 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
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.”
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.”
02:10
“It has 71 built-in design systems.”
11:45
“It's interesting — with slightly different approaches to the UX that we prompted it with, we get wildly different results.”
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.”
How they spent the runtime.
Hook length17s
Info densityhigh
Filler8%
Things they pointed at.
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)
13:10toolOpenSpec (merge generated screens into existing code)
How they asked for the click.
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.
Word for word.
HOOKopening / re-engagementCTAthe pitchmetaphoranalogystory
00:00HOOKAn 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.
00:56If 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,
01:23and 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.
01:54You 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,
02:10and 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
02:38as 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 , 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,
03:49HOOKand 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?
04:14And 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
04:53or 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
06:01tone 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
06:22that 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
06:46doesn'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,
07:13brainstorm 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.
07:56HOOKIt'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
08:27screen. 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 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.
09:04We 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 . 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,
10:04modify 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.
11:12Now, 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
11:41version, 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
12:26CTAwith 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
12:52CTAoptions, 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
§ · For Joe
Steal the prompt scaffold, not the tool.
Sean Kochel playbook
The 11-section landing-page outline plus a chosen design-system token does 80% of the work — the tool is almost incidental.
- Hard-code Joe's own 11-section landing-page skeleton (hero, social proof, pain, how it works, 2-3 benefits, testimonial, personas, comparison, case study, FAQ, final CTA + guarantee) as a reusable skill for every Modern Creator product page.
- Always paste a tight executive summary from the product PRD as context — vision, problem, target user, solution, top features — so the generator has something concrete to lean on.
- Treat 'design system' as a one-token variant axis: brutalist, editorial, anthropic, swiss. Generate three at once, screenshot, pick.
- Treat 'UX philosophy' (chat-first vs. cards-and-buttons vs. canvas-first) as a separate prompt variable, not a redesign — the same feature set can yield wildly different apps.
- For pitch videos like this: lead with the rivalry ('an open-source dev cloned X'), name the two failure modes, then show three back-to-back artifacts. The pattern works because each artifact pays off the same promise from a different angle.
- Late single-line CTA to a paid skill pack underperforms — Joe's reflex should be one hard CTA at the end PLUS a softer one mid-video tied directly to whichever framework just landed.
§ · For You
What this could mean for you.
If you want to ship a landing page or app today
You probably don't need another SaaS subscription — you need a prompt structure and the discipline to pick one design system and stick with it.
- Install Open Design (or use Claude Design) and pick exactly one of the 71 design systems before you write a single line of prompt. Decide first, prompt second.
- Write the page in sections before you write it in words — most landing-page failures are skeleton failures, not copy failures.
- Paste a real executive summary of your product as context. Vague product = vague page. Treat the PRD as raw fuel.
- Try the same prompt with two different design systems back-to-back. The variant you didn't expect is usually the better one.
- If the first pass feels like 'AI slop', the fix is almost always a tighter design-system pick or a clearer UX-philosophy line — not more prompting.
