Get started: your first artifact in an hour
OpenDesign isn't a design app you open and draw in. It's a layer that wires the coding agent already sitting on your machine — Claude Code, Codex, Cursor, Gemini CLI — into a design workflow. So the order of operations is unlike any design tool you know: connect the agent first, pick a design system second, and only then say what you want made.
Eight chapters, about an hour end to end. You finish holding something you can open in a browser, export, and keep editing.
What's in this chapter
| Chapter | What it covers | What you can do after |
|---|---|---|
| 01 · What OpenDesign is | How it differs from Claude Design and Figma Make at the root | Decide whether it's worth installing |
| 02 · Install | Desktop app or source, and the traps in each | A running window on your machine |
| 03 · Connect your agent | Which of the 21 adapters, and where credentials live | A first generation that doesn't stall on "no agent found" |
| 04 · The workspace | What a single generation actually passes through | Knowing what each step is waiting on |
| 05 · The discovery form | Why the questionnaire before generation matters most | Getting it right the first time |
| 06 · Design systems | How a DESIGN.md decides what output looks like | Output that stops looking like default AI |
| 07 · Your first artifact | Zero to something presentable | An actual finished thing |
Three things worth saying up front
It's free, but it isn't free. The app itself is Apache-2.0 and free forever. The models cost money: whichever agent you point it at, that provider bills you. The official term is BYOK — bring your own key. If you already pay for Claude Code or Codex, the marginal cost is roughly zero, because design work and coding work draw on the same pool.
It runs locally. Desktop app, daemon, skill runtime — all on your machine. Generated artifacts are real files in your project directory, not rows in a vendor database. For client work and anything under compliance, that's the practical argument.
It has a learning curve. The docs say "three commands," but that's for people who already have Node 24 and pnpm. If you'd rather not touch a terminal, grab the desktop build and skip the source half of 02 · Install.
Only here for the deck workflow
Install, connect an agent, then jump straight to the deck workshop — skip chapters 04 through 06. Ten steps and you have a deck you can present; the concepts get explained as they come up.
The workflow in one paragraph
Whether you end up making a web page, a prototype, a dashboard, or a deck, a generation in OpenDesign has the same shape:
- Choose a starting point — one line about the goal, or fork something from the template library.
- Set the direction — pick a design system, and palette, type, and spacing are locked.
- Answer the form — it generates a questionnaire from your prompt, asking about canvas ratio, audience, slide count, tone.
- Generate — the agent reads the context and writes real runnable files. Progress on the left, result on the right.
- Fix — comment, mark, edit in the preview, or keep talking to the agent.
- Deliver — export HTML, PDF, PPTX, MP4, or hand the source to engineering.
Steps 2 and 3 are the ones everyone skips, and they're the difference between output that looks designed and output that looks generated. The next two chapters are about them.