How to Use Claude Design for Free ?

Claude Design got attention because it turns a plain-language prompt into a pitch deck, landing page, or mobile mockup in seconds. The catch: it is paid, cloud-only, and tied to Anthropic’s stack. If you want the same artifact-first workflow without that lock-in, use Open Design locally and connect it to an AI agent you already use.

Try Apidog today

Open Design is an open-source project that recreates the same design loop: describe what you want, answer a few clarifying questions, and get a usable design artifact back. This guide shows how to install it three ways, connect an AI engine, generate your first artifact, and turn the prototype into something testable with APIs.

💡 A design tool gives you the interface. Pairing it with an API platform like Apidog gives that interface real data, mocks, and tests, which is how a free prototype becomes a working product.

TL;DR: how to use Claude Design for free

Claude Design itself is Anthropic’s paid, closed-source design product. You cannot use the actual product for free.

To get a similar workflow for free:

1. Install Open Design, an Apache-2.0 open-source alternative.
2. Run it locally, with Docker, or from source.
3. Connect it to a supported coding-agent CLI such as Claude Code, Codex, Gemini CLI, Cursor Agent, OpenCode, Qwen, GitHub Copilot CLI, or Kimi.
4. Generate artifacts such as landing pages, dashboards, mobile screens, decks, images, or short videos.
5. Export the result as HTML, PDF, PPTX, ZIP, Markdown, or MP4.

The Open Design software costs nothing. You only pay for the AI model or API provider you connect. If you use an agent you already subscribe to, or a local Ollama model, your additional cost can be zero.

Why “Claude Design for free” needs one caveat

Claude Design is Anthropic’s product. It runs in Anthropic’s cloud, uses Anthropic’s stack, and is not open source. There is no self-hosted version, no full free tier, and no option to swap in another model.

So the practical goal is not “get Claude Design without paying.” The practical goal is:

• keep the same prompt-to-artifact workflow;
• run it on your own machine;
• use your own AI agent or model;
• avoid vendor lock-in.

That is where Open Design fits.

What is Open Design?

Open Design, often shortened to OD, is a local-first, open-source design environment. Its GitHub repository describes it as an open, agent-native alternative to Claude Design.

The architecture has three main parts:

• Web front end: a Next.js chat-and-canvas interface that runs in your browser and can also deploy to Vercel.
• Local daemon: a small Node.js server with SQLite for projects, conversations, artifacts, and agent discovery.
• Agent runtime: the daemon launches a coding-agent CLI inside your project folder. That agent reads design instructions, writes files, and produces the final artifact.

Open Design does not ship its own model. Instead, it detects coding agents already available on your PATH, including Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Kimi, and others.

If you want a deeper look at how these coding-agent systems work, see the Claude Code agent harness architecture.

Open Design also includes two important content layers:

• Skills: reusable workflows for web prototypes, dashboards, mobile apps, SaaS landing pages, email layouts, social carousels, and presentation decks.
• Design systems: Markdown-based style guides modeled on brands such as Linear, Stripe, Vercel, Notion, and Apple.

Before generating anything, the agent reads the selected skill and design system. That gives the output stronger structure than a generic design prompt. This is similar to using DESIGN.md files for coding agents.

Install Open Design three ways

Pick the setup that matches how much control you want.

Option 1: install the desktop app

Use this path if you want the fastest setup.

1. Go to open-design.ai or the GitHub releases page.
2. Download the build for your OS.
3. Install and launch it.

Open Design publishes binaries for macOS, including Apple Silicon and Intel, and Windows.

On first launch, the app scans for supported coding agents, loads skills and design systems, and creates a runtime folder for projects.

Use this option if you do not want to touch the terminal.

Option 2: run with Docker

Use Docker if you want an isolated and repeatable setup.

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

Then open:

http://localhost:7456

Docker keeps Open Design separate from the rest of your system. It is also useful if you want to run it on a shared machine or home server.

If you are new to Compose, start with the official Docker documentation.

Option 3: run from source

Use this path if you want the latest code or want to customize skills and design systems.

Requirements:

• Node.js around version 24
• pnpm 10.33.x

Run:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version    # verify it reports 10.33.x
pnpm install
pnpm tools-dev run web

The tools-dev command starts and manages Open Design services.

Command	What it does
pnpm tools-dev run web	Start daemon plus web in the foreground
pnpm tools-dev start web	Start daemon plus web in the background
pnpm tools-dev status	Show running services
pnpm tools-dev logs	Tail daemon and web logs
pnpm tools-dev stop	Stop everything

corepack enable helps pin the correct pnpm version so your local install matches the project.

Connect an AI engine

Open Design needs an engine to generate artifacts. You have two main options.

Path A: use a CLI agent

This is the recommended path.

Install a supported coding-agent CLI and make sure it is available on your PATH.

For example:

which claude
which gemini

If the command returns a path, Open Design should be able to detect the agent.

For the closest Claude Design-like setup, use Claude Code. Codex, Gemini CLI, Cursor Agent, and other supported agents work similarly.

The agent runs under your existing provider subscription or account. Open Design itself adds no software cost.

For Claude Code setup, see the Claude Agent SDK and Claude plan setup guide.

Path B: use the BYOK proxy

If you do not want to install a CLI agent, Open Design includes an OpenAI-compatible BYOK proxy.

You can provide an API key for providers such as:

• Anthropic
• OpenAI
• Azure OpenAI
• Google Gemini
• Ollama
• a local model server

The daemon routes requests through the proxy. This path is useful when you want provider flexibility, but metered APIs still cost money.

If you handle API keys in local tooling, treat them carefully. The same security principles from API key security in editor extensions apply here.

For a zero-cost local loop, point Open Design at an Ollama model. That lets the design workflow run offline without an API bill.

Generate your first design artifact

Once an engine is connected, use this workflow.

1. Pick a skill

Choose what you want to build:

• SaaS landing page
• dashboard
• mobile app screen
• marketing email
• slide deck

The skill tells the agent which templates, rules, and checklists to load.

1. Pick a design system

Choose a design system such as Linear, Stripe, Vercel, Notion, or Apple.

If you skip this step, Open Design offers curated visual directions such as Editorial, Modern Minimal, Tech Utility, Brutalist, and Soft Warm.

1. Write the brief

Keep it specific.

Example prompts:

   Make a magazine-style pitch deck for our seed round.

   Design a pricing page for a developer API tool with three plans and a usage-based enterprise tier.

1. Answer the discovery form

Open Design asks clarifying questions before generation. This captures audience, tone, surface, product context, and brand details.

Do not skip this step. It prevents the model from guessing incorrectly.

1. Watch the plan stream

The agent shows a live todo list and checks off work as it builds. This makes generation easier to inspect than a black-box spinner.

1. Preview in the sandbox

The generated artifact renders in a sandboxed iframe. Generated code is isolated from your system.

For more context, see what CubeSandbox means for AI agents.

1. Export the artifact

Export options include:

• HTML
• PDF
• PPTX
• ZIP
• Markdown
• MP4

Artifacts are also stored on disk in the project folder, so you can inspect or edit the files directly.

Customize skills and design systems

After the first artifact, the useful part is customization.

Edit skills

Each skill is a folder with a SKILL.md file and supporting assets.

You can:

• change the checklist;
• add layout rules;
• include company-specific requirements;
• remove unwanted patterns;
• create a new skill for repeated project types.

For example, if your team always builds B2B dashboards with the same sections, encode those sections once in a custom skill.

Create your own design system

Open Design design systems are Markdown files, not proprietary binaries.

A design system can define:

• color tokens;
• typography;
• spacing;
• components;
• motion rules;
• voice and tone.

You can convert your brand guidelines into Markdown, drop the file into the design-systems folder, and reuse it across artifacts.

Switch models with BYOK

The BYOK proxy lets you choose different models for different phases:

• stronger model for a client pitch;
• cheaper model for rough drafts;
• local model for private or offline exploration.

You are not locked into one provider.

For model tradeoffs, see this Gemini 3.5 vs GPT-5.5 vs Opus 4.7 comparison.

Use the MCP server

Open Design includes a Model Context Protocol server.

That means other coding agents can query Open Design files directly, such as:

• generated artifacts;
• design-system files;
• project outputs.

This makes Open Design easier to include in a larger AI-assisted development workflow.

Turn the prototype into a product with Apidog

Open Design can generate a polished front end, but most prototypes still contain hardcoded data.

A dashboard needs usage data.

A billing screen needs invoices.

A settings page needs account endpoints.

A mobile app needs authentication, state, and real responses.

That is where Apidog fits.

Use this workflow:

1. Generate the UI in Open Design.
2. Identify the API endpoints the UI needs.
3. Design those APIs in Apidog.
4. Generate a mock server from the API design.
5. Point the generated front end at the mock endpoints.
6. Replace the mock with the real backend when implementation is ready.
7. Add API tests to keep the contract stable.

For example, if Open Design creates a developer-tool dashboard, you may need endpoints like:

GET /usage
GET /billing/invoices
GET /account/settings
PATCH /account/settings

In Apidog, define the schema once, generate mock responses, and let the front end call realistic endpoints before the backend is finished.

That lets frontend and backend work proceed in parallel.

When the real backend is ready, use Apidog to build automated test scenarios and visual assertions. The spec-first mode in Apidog helps keep the API design and implementation aligned.

There is also a useful agent workflow here. Open Design uses coding agents to create the interface. Apidog exposes capabilities to AI agents and includes an AI agent debugger for inspecting how agents call endpoints.

A practical flow looks like this:

Prompt → Open Design artifact → Apidog API spec → mock server → tested backend

Design the UI with Open Design, design the API with Apidog, then download Apidog to mock and test the endpoints behind the generated artifact.

Open Design vs Claude Design vs Figma

Factor	Open Design	Claude Design	Figma
Price	Free, Apache 2.0	Paid subscription	Free tier plus paid plans
Source code	Open	Closed	Closed
Hosting	Local, self-host, or Vercel	Cloud only	Cloud
AI engine	Any agent, BYOK, or local model	Anthropic models only	Manual, AI features add-on
Output	Code artifacts, decks, images, video	Design artifacts	Editable design files
Works offline	Yes, with a local model	No	Limited
Best for	Developers and teams wanting control	Quick hosted experience	Hands-on visual design

Claude Design is convenient because it is hosted and polished. Figma remains the better fit for manual, pixel-level design and mature collaboration.

Open Design is strongest when you want:

• local control;
• open-source software;
• model choice;
• self-hosting;
• code artifacts;
• integration with developer workflows.

For developers already using coding-agent CLIs, Open Design is usually the more flexible option.

Common setup mistakes

Avoid these issues on your first install.

1. No agent on your PATH

Open Design cannot detect an agent that is not installed or not available in your shell.

Check with:

which claude
which gemini
which codex

If nothing returns, install a supported CLI or configure BYOK.

2. Wrong Node or pnpm version

Source installs need Node around version 24 and pnpm 10.33.x.

Use:

corepack enable
corepack pnpm --version

Older Node versions can cause confusing build errors.

3. Expecting every setup to be free

Open Design is free software. Metered API keys are not free.

If you use an Anthropic, OpenAI, Azure OpenAI, or Gemini API key, you may pay per token.

For a lower-cost or zero-added-cost setup, use:

• an agent subscription you already have;
• a free-tier CLI;
• a local Ollama model.

4. Skipping the discovery form

The discovery form improves the first draft by forcing product, audience, and tone decisions up front.

Answering it carefully is faster than correcting a bad generation later.

5. Treating generated output as production-ready

Open Design output is a strong starting point, not an audited production codebase.

Before shipping:

• review the generated code;
• refactor where needed;
• connect it to real APIs;
• add API tests;
• validate security and accessibility.

Use API testing for the endpoints behind the design.

6. Using an outdated build

Open Design moves quickly. If the docs mention a feature you cannot find, your build may be old.

• Source users can pull the latest main.
• Desktop users should check releases.
• Docker users should rebuild or pull updated images as needed.

Conclusion

You cannot use Anthropic’s Claude Design product for free. But you can use the same kind of artifact-first workflow for free with Open Design.

The practical setup is:

1. Install Open Design.
2. Connect a coding-agent CLI or BYOK provider.
3. Pick a skill and design system.
4. Generate an artifact.
5. Export or edit the files.
6. Use Apidog to design, mock, and test the APIs behind the prototype.

Key takeaways:

• Open Design is an Apache-2.0 open-source alternative to the Claude Design workflow.
• It runs as a desktop app, Docker service, or source install.
• It can use Claude Code, Codex, Gemini CLI, Cursor Agent, and other coding agents.
• A local Ollama model can make the workflow offline and API-bill-free.
• Skills and Markdown design systems make outputs more reusable and brand-aware.
• A generated front end still needs APIs; use Apidog to design, mock, and test them.

Next step: install Open Design, generate one artifact, then download Apidog and create the mock API behind it.