Open Design is Here: The Open-Source Claude Code Design Alternative

Tony Xhepa| 00:07:01|May 3, 2026

Chapters7

Introduction to Open Design as an open-source alternative to cloud code and its compatibility with common tooling.

Open Design offers an open-source alternative to Cloud Code Design, showing how to set up and prototype design workflows with Open Design using Open Code and local tooling.

Summary

Tony Xhepa walks through setting up Open Design as an open-source alternative to Cloud Code Design. He demonstrates cloning the Open Design repo, installing dependencies with PNPM, and selecting local vs cloud-backed execution modes. The walkthrough highlights the setup steps, including enabling core-pack, checking the expected Node/PNPM versions, and picking a local CLI path for execution. Tony runs through a live prototype cycle: selecting a dashboard template, wiring brand context, and generating a realistic data-driven chart visualization. He shows a finished preview with options to export as PDF, HTML, or save as a template, and mentions the GitHub repository at github.com/nex-io/open-design, noting it has 15K stars at the time of recording. The video emphasizes that Open Design is a viable, open-source alternative to Cloud Code Design for rapid design prototyping and sharing. Finally, Tony invites viewers to subscribe, like, and share the video if they found the demo helpful.

Key Takeaways

Clone and set up Open Design from the Nex-io/open-design repository, then enable core-pack and verify the expected version (PNPM and Node 24 compatibility noted during setup).
Run the dev workflow with PMPM tools-dev run web after PNPM install to boot the local design prototype server, observing a quick startup that completes in seconds.
Open Design supports multiple execution modes (local CLI, Anthropic API, OpenAI API) and lets you switch between code-exos like Open Code or CodeX for the design assistant.
The prototype flow includes selecting a dashboard template (SAS analytics), providing data source inputs (realistic fake data), and exporting results as PDF, standalone HTML, or saved templates.
The GitHub repo (github.com/nex-io/open-design) has substantial community interest (noted 15K stars in video) and is presented as a practical, open-source alternative to commercial cloud design tools.
Users can export, share, and chat within the preview, making it easy to iterate and collaborate on design concepts.

Who Is This For?

Essential viewing for frontend developers and product designers who want an open-source design workflow alternative to Cloud Code Design, with hands-on steps to clone, run, and export design prototypes.

Notable Quotes

"Hello friends, Tony here welcome. In this video I want to set up this open design which is an alternative to cloud code design."

—Intro framing the video as a setup guide for the Open Design project.

"This comes with 15 K stars on GitHub and you can find this on github.com/nex- io/open-design."

—Highlights popularity and repository location.

"Let's choose Open Code and let's get started."

—Shows the decision point between execution modes.

"Here is the finished version we can open here we have a button open to download here we have the preview we can see the source food."

—Demonstrates the finished prototype, export options, and preview access.

"Export as PDF, download, export as a standalone HTML, save as a template and so on."

—Lists the export and sharing capabilities built into the prototype.

Questions This Video Answers

How do I install and run Open Design locally from the Nex-io/open-design repository?
What are the differences between local CLI mode and cloud-based modes in Open Design?
Can I export Open Design prototypes as PDF or HTML for sharing with teammates?
What npm/Node versions are required to run Open Design successfully?
Where can I find the Open Design source code and how active is the project on GitHub?

Open DesignCloud Code Design alternativeOpen-source toolingOpen CodePNPMNex-io/open-designPrototype design toolingGitHub starsNode.js compatibility

Full Transcript

Hello friends, Tony here welcome. In this video I want to set up this open design which is an alternative to cloud code design. Now cloud code yes is very good also for coding and for the design for every product but this one is the opensource alternative to cloud code. And the beauty of this is that you can use with cloud code with codeex dev for termininal cursor gemini open code quen github copilot cli hermes kimi pi kro and more. So let's scroll down. Yeah why this exists and you can read more but I'm going just to scroll down. And we have some demos here as you can see also skills design web digital e guide email marketing and so on. Yeah, here we have all the skills SAS landing pricing page docs page blog post mobile app and so on. Let's see where is the setup. Yeah, this is an Nex.js JS application as you can see Nex.js 16 and here we have a quick start. We need to clone this repository. Then cd and enable the core pack enable then corpac pnpm version pmppm installed and pmppm tools dev run web open the web URL printed by tools defaf and let's see see also the quick start.md. I'm going to clone this. So let's copy this one and let's open our terminal. I am in the her directory but yeah you can open in any directory you want. This is not a Laravel project. So let's clone this get clone open design. Then we need a CD there. Copy that. Paste it. uh core pack enable good then let's see the version so should print the 10.33.2 two. Let's see. 10 point. Yeah, I'm going to clean this. And now let's run the PNPM install. After PNPM installed, we need to run this pmppm tools-dev run web. Copy that and add it. And as you can see, we have unsupported engine wanted note 24, but we have node version 22. This comes with the her is not updating currently the node, but anyway. So, let's copy this uh URL here. And let's open. Okay. Now set up open design configure execution mode. We have local CLI. We have anthropic API and also open AI API. Let's choose this local CLI. We have CEX uh cloud code is not installed in this machine. As you can see, context CLI if we want Devon Gemini open code is installed as you can see has selected this codeex but I'm going to choose open code and you can choose also the default model here I think we can run also this one with the local model but yeah let's choose bigle in this one because local model is will be slower also we have pi here as you can see which is installed. We can choose also pi but I'm going to choose open code and let's get started. And we we have prototype. We have slide deck from template image. Let's go a prototype. I'm going to give it a name. Let's say just example for now. And you can choose free form. I'm going to say none here. wireframe or high fidelity. I'm going to choose this one and let's say create. Start a conversation. I'm going to choose this SAS analytics dashboard. Let's choose this one and let's say send starting open code. As you can see now, it's running and it's working on the seconds. So, I'm going to zoom it a little bit so also you can read here. Okay. Then we have here brand context. I'm going to save to pick this one for me. Pick a direction for me. Okay. Data source for the chart. Realistic fake data. Okay. Pick one that fits the dark theme. And I'm going to send the answer. Okay. Next. Yeah, we need to pick a direction like this one or I think let's choose yeah let's choose this one here let's send the answer okay so here is the finished version we can open here we have a button open to download here we have the preview we can see the source food. We have comments here. We can share also you can chat here to say something else. But yeah, you can share this one. Export as PDF, uh download, export as a standalone HTML, save as a template and so on. Yeah, this is an example how you can uh set up this open design which is uh an open-source alternative to cloud code design and you can find this on GitHub that is a repository. Okay, so github.com/nex- io/open-design and right now has 15 K stars. That's it all about this video what I wanted to show you. Now, if you like such a video, don't forget to subscribe, like and share with your friends.