Open Design: open source version of Claude Design, AI design tool for generating web and mobile prototypes

Open Design is an open source and locally prioritized AI-driven interface design and prototyping tool that aims to be the first of its kind in Anthropic 的 Claude Design's open source parsimony program. It lifts model binding restrictions and transforms large models into professional UI/UX designers by connecting to the user's 11 locally installed code intelligences (e.g., Claude Code, Cursor, Gemini CLI, etc.) or third-party APIs compatible with OpenAI format (BYOK). The platform has 31 built-in professional design scenario modules (covering web prototypes, SaaS landing pages, mobile Apps, data dashboards, presentations, etc.) as well as 129 design systems from top brands. Users only need to input natural language requirements, the system will use interaction questionnaires to confirm the design direction, and AI will automatically generate code and interface with sandbox real-time preview, and support one-click export to HTML, PDF, PPTX and ZIP formats.

Function List

• Multi-model and local intelligences supportAutomatically detects and accesses 11 AI programming clients (including Claude Code, Cursor Agent, Gemini CLI, GitHub, etc.) in local environment variables. Copilot CLI, etc.), or through Bring Your Own Key mode (BYOK) access to any large model compatible with the OpenAI API format.
• 31 Out-of-the-Box Design Skills: Built-in web prototypes, SaaS landing pages, management dashboards, mobile apps, dynamic pages, presentations (PPT), and other massive scene templates, one-click to switch the output form of AI.
• 129 built-in branding systemsThe design system provides a full set of design system specifications for world-renowned manufacturers and products such as Apple, Stripe, Vercel, Notion, Figma, etc., and allows you to get expert color matching, typography, and interaction tone with one click.
• Precision Needs Interactive Questionnaire (Discovery Form)The AI will be forced to pop up a multi-choice questionnaire to confirm basic information such as target audience, visual tone, size constraints, etc., before it starts executing the code, eliminating the AI's “blind guessing” and avoiding repeated reworking.
• Sandbox real-time rendering with multi-format exportingGenerated UI code will be previewed in real-time rendering in a secure iframe sandbox environment. Support for exporting the generated project directly to HTML, PDF, PPTX files with print layout support, and full source code zip (ZIP).
• Comes with 5 visual style genres: In the absence of a clear brand reference, a library of 5 preset styles such as minimalist modern, technical pragmatism, soft healing, etc., with clear parameters for color and font definition.
• Five-dimensional self-correction and reviewAI model: Before outputting the result, AI model must follow 5 dimensions of objective self-scoring (design concept, visual level, detail execution, etc.), and submit the result only after the score is qualified, so as to eliminate the “AI sense” of shoddy work from the mechanism.
• Seamless Claude Design History ExportDrag-and-drop import of prototype ZIP archives directly from Anthropic's website to read the historical environment and continue editing locally.

Using Help

I. Environmental requirements and preparation
Open Design is a tooling system built on a web framework and a local backend daemon, so before you can use it, you must have the base runtime environment on your local computer:

1. Node.js: Ensure that Node.js 24 or a similarly recent version is installed on your system (nvm / fnm tools are recommended for version switching).
2. Package Management Tools pnpm: The project has a strong dependency on pnpm (version 10.33.x series). You can create a dependency on pnpm by executing the corepack enable command, and then run the corepack pnpm --version Validate the environment.
3. AI base preparation: You can prepare a customized local system such as DeepSeek, OpenRouter or vLLM Compatible with OpenAI standard Base URL and API Key (comes with its own key); can also be installed globally ahead of time. Claude Code 或 Cursor CLI and other local programming agent tools.

II. Detailed installation process
Please open your computer's terminal (Terminal or Command Prompt) and enter the following commands in order to install:

1. Download project source code：
   Use Git to clone the project code locally and into a folder.

   git clone https://github.com/nexu-io/open-design.git
   cd open-design
   

2. Enabling core package management and installing dependencies：

   corepack enable
   pnpm install
   

   Wait for the progress bar to finish and the system will automatically pull all the dependency packages including the front-end workbench and the back-end daemon.

3. Starting Open Design Local Services：

   pnpm tools-dev run web
   

   After successful startup, the terminal panel prints out the local access address of the Web side (e.g. http://localhost:3000). Copy the link and open it in your browser to access the operator interface. The first time you start the program, it will automatically generate a local .od/ Hidden folder for storing SQLite databases to save your historical conversations and progress.

III. Operational and workflow guidelines for core functions

Step 1: Configure the AI Driver Engine and Workflow Options
Go to the home page of the web site, and all the toolbars will be displayed on the left side. If you don't have any supported local CLI installed, you will get a “Welcome” popup. You can select BYOK (Bring Your Own Key mode)To do this, you only need to add the address of the OpenAI-compatible interface, the corresponding calling model (e.g., the gpt-4o) and the API Key are pasted in. This ensures that you can connect to AI regardless of your network environment.

Step 2: Select “Design Skills” and “Design System”.”
There are two very critical drop-down menu cards above the input dialog box:

• Skill Selection: Define here what kind of product form you want to output. For example, choose saas-landing Landing long pages can be generated to select mobile-app It will call the included iPhone 15 Pro bezel and generate the mobile component, select the guizang-ppt Then you will enter the presentation mode.
• Design System Selection: Determine the basic visual characteristics of your UI interface here. The drop-down menus cover the stripe、vercel、linear-app With more than 129 specifications, you can inherit the design philosophy of the corresponding label with a single click.

Step 3: Submit a description and complete the Discovery Questionnaire
Describe the goal in a short sentence in the bottom input box, e.g., “Help me generate a social tool app homepage that includes a signup process.”
The AI is “stopped” by the system when you return to send. A pop-up will then appear in the center of the screen with options for audience, visual emotion, color palette requirements, etc.Dynamic FormsThis mechanism forces the AI to converge on the imagined domain. Check as many boxes as necessary (it usually takes less than a minute). which forces the AI to converge on the imagined domain and ensures that the generated code is very professionally targeted.

Step 4: Real-time access to code generation and rendering of results
After the questionnaire is submitted, the interface changes as follows:

• Todo Progress (to-do tracking card): The left panel of the screen immediately prints the AI's behavior (e.g., it's parsing CSS, it's writing HTML structure, it's testing dynamic effects, etc.) in a pipeline of cards.
• Sandboxed Preview: The main workspace on the right is an iframe containing a secure isolation, which loads the rendered GUI in real time as the underlying HTML and CSS are built. You can see highly fidelized shadows, interactions, and responsive effects.

Step 5: Seamless Modification and File Export

• If you need to make a localized change to the interface, you don't need to leave the current page, just type the request into the chat box (e.g. “make the font of the big headline smaller and change the background to dark mode”) and the AI will replace the update in the sandbox in real time according to the context.
• Click on the upper right corner of the interfaceExport button. If a page prototype is generated, you can tap the Export HTML 或 Export ZIP The download contains the development zip for all localized style dependencies; if generated as a slideshow, it also supports clicking on the Export PPTX/PDF Get native office presentation documents for company meetings. Project data is automatically persisted and stored locally, and progress is restored without loss after power off and restart.

application scenario

1. Rapid low-cost prototype building for product managers and designers
   Without the need to master complex Figma wiring techniques, a one-sentence description and a questionnaire filter can generate high-fidelity web or mobile app interactive prototypes in minutes with a real sense of reality and the visual style of a major brand (e.g., Apple or Vercel), which greatly improves the efficiency of requirements document dissemination and internal team review.
2. Front-end boost for full-stack developers and engineers
   Back-end or full-stack developers often lack superior design and layout skills. They can directly enter the functional requirements to be realized in Open Design, and by selecting the self-contained front-end framework skills module, the clean and fresh HTML and CSS source code generated by AI and following the specification of the professional design system can be exported in ZIP format, which can be used for secondary development in the real production environment.
3. Marketing and Commercialization Material Generation
   By choosing between “deck mode” and “Social Carousel”, marketers simply provide an outline of their copy and AI automatically scales the text, generates an online magazine-style slideshow or social media multi-grid card with advanced animations, and supports direct export to PDF for business pitches or client presentations. AI automatically scales text, creates online magazine-style slideshows or social media multi-panel cards with advanced animations, and supports direct export to PDF for business deliverables or client presentations.
4. Day-to-day operations and reporting materials for agile teams
   Including Kanban-board, Finance-report and Meeting-notes modules for internal management, team members can instantly turn dry text into functional office assets such as large data display boards and beautiful financial document pages at low cost.

QA

1. What are the main differences between Open Design and Anthropic's official Claude Design?
   formal Claude Design Open Design is a closed-source, paid, cloud-specific modeling tool, while Open Design is a fully open-source, locally prioritized system architecture. It not only inherits the sandbox preview and rendering logic, but also allows you to access locally deployed AI code intelligences or switch between almost any large language model on the market via a proxy API, without feature blocking.
2. Do I need programming knowledge to use Open Design?
   Not required. The operating logic of the system is very close to natural language interactive design tools. It comes with graphical interfaces, interactive questionnaire forms and drop-down menus. Even if you don't have a basic knowledge of code, the code written in the background will be directly translated into an intuitive, high-fidelity visual interface and rendered.
3. Are the generated code projects and design materials commercially available?
   Open Design is released under the Apache-2.0 open source protocol, and the outputs generated belong to the users. However, it should be noted that the system has built-in real design specification templates of some well-known brands (e.g. Stripe, Tesla, etc.), so if you use these highly reproduced UIs for public commercial realization, you need to check whether there is any legal risk of infringing the copyright of third-party brands.
4. How do I use the AI intelligences if I don't have any locally installed?
   No problems at all. The system provides BYOK (Bring Your Own Key). In the welcome interface for the first time, you only need to fill in the OpenAI-compatible API request address, API key, and model name of platforms like DeepSeek, OpenRouter, and so on, and you can drive the full set of functions smoothly.
5. Why does the AI pop up a form instead of starting to draw directly after entering a requirement?
   This is one of the core features of the tool. While traditional AI drawings are often blindly “freehanded” and produce cheesy artwork, Open Design's embedded “Smart Discovery Form” forces the AI to define the core goals and constraints before it starts writing. Although it takes the user 30 seconds to confirm multiple choices, it saves dozens of ineffective revisions at a later stage.