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.
Read if. Skip if.
- 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.
- 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.
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.
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.

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.

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.

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).

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.

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.

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.

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.

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.

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.

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 · 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 · 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.
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.
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.
Prompt structure and design systems ship real UIs
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Swapping only the design-system parameter while keeping the same prompt produces radically different aesthetics — useful for evaluating tone without rewriting your brief.
- 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.
- 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.
- 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.
- 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.
- The next practical step after generating designs — merging them into an existing codebase — requires a spec-driven approach separate from the design tool itself.
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.
Things they pointed at.
Lines you could clip.
“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.”
“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.”
“It has 71 built-in design systems.”
“It's interesting — with slightly different approaches to the UX that we prompted it with, we get wildly different results.”
“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.”
Word for word.
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.
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.'
Named ideas worth stealing.
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.
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.
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.
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.
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.
How they asked for the click.
“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.






































































