cd /news/developer-tools/open-design-the-free-design-studio-y… · home topics developer-tools article
[ARTICLE · art-56330] src=okaneland.com ↗ pub= topic=developer-tools verified=true sentiment=· neutral

Open Design: the free design studio your coding agent runs

Open Design, a free and open-source desktop app (Apache-2.0), lets users leverage their existing coding agent to extract brand assets and generate design artifacts from any website. In tests, it successfully auto-detected Claude Code, produced a component kit and media kit from a real site, and exported files locally, but suffered from empty snapshots, incorrect font display, invented taglines, and clichéd copy. The app costs only agent API tokens, with a two-run session metering $4.09.

read9 min views1 publishedJul 12, 2026
Open Design: the free design studio your coding agent runs
Image: Okaneland (auto-discovered)

The Proof · AI tool

  • Who it's for
  • Vibe coders already paying for a coding agent who want on-brand pages, decks, and kits without hand-placing elements, and who will proofread everything the agent writes.
  • Real cost
  • The app is free (Apache-2.0) and runs without an account. The bill is your agent tokens: our two-run session metered $4.09 at API rates inside the app. Optional Open Design Cloud sells managed models per token.

We installed Open Design, pointed it at our own site, and let Claude Code drive: brand extraction, a component kit, a sponsor media kit, a PDF export. The output is real, and the token meter shows what free costs.

What's good

  • Free and open source (Apache-2.0), fully local, no account required: we never signed in and nothing was gated.
  • Auto-detected our Claude Code install from PATH and used it as the design engine, exactly as the BYOK pitch claims.
  • Brand extraction measured our real tokens: the washi background hex, the coral accent, the fonts, even the seal glyph got a precise written spec.
  • One extraction produced a full component kit plus poster, email, newsletter, deck, and landing previews, all driven by CSS brand variables.
  • It obeyed hard constraints: every stat cell shipped as [PLACEHOLDER] and every price as [PRICE TBD], exactly as briefed.
  • Exports are real files: a clean 3-page PDF, standalone HTML, zip, and image, plus every project file on your own disk.
  • The cost meter is built in: each agent run shows wall time, tokens out, and a dollar figure.

Where it breaks

  • The built-in browser saved a 55-byte empty snapshot and still toasted success; the fast extraction pass then spun for two minutes with no error message.
  • The design-system panel displayed fallback fonts (Times New Roman, Segoe UI) as the brand typography while the agent's own brand.json had the correct faces.
  • It invented a tagline for our brand and baked it into the identity files, so the invention propagates to every artifact.
  • Generated copy reaches for the exact clichés our site avoids on purpose; every line needs a voice pass before it ships.
  • Each artifact is a multi-minute, multi-dollar agent run, and a failed run still spends the tokens.

How we tested #

Open Design calls itself the open-source, local-first design workspace where the coding agent you already pay for does the design work. That claim has a clean test: install it, point it at a real site, and let it run with no account, no paid tier, and no help. So we did exactly that. The test subject was this site’s own dev build, running on localhost, because we can check every extracted color and font against our own CSS.

The install is a 260 MB signed and notarized macOS app (v0.14.1, released the day before our test), also on Windows, with the source on GitHub under Apache-2.0 at 77.4k stars. First run asks an optional role survey and an optional newsletter email; we skipped both and hit no account wall at any point. The free tier is not a demo: it is the whole desktop app, and the home screen makes the scope plain, 444 plugins across prototypes, slides, images, video, and audio before you touch anything.

The BYOK pitch held up immediately. The agent picker had already found our Claude Code install from PATH, version number and all, next to a built-in “Open Design” agent that defaults to a deepseek-v4-flash model. We selected Claude Code and used it for everything below.

The extraction test #

The marquee flow is “point it at a website, get a design system.” We gave it http://localhost:4323/

and a one-line brand description.

The fast pass failed. The built-in browser saved what it announced as a successful page snapshot, “Saved page snapshot (HTML + CSS),” and the file it wrote was 55 bytes of nothing. The extraction spinner then ran for over two minutes with no error, no timeout, and no hint of what was wrong. Part of the blame was ours, our dev server had died mid-test, but the app never said so. A status pipeline that reports success on an empty file is the kind of thing you only find by checking the files.

What saved the workflow is the product’s whole thesis: the agent. Handed the broken state, Claude Code diagnosed it in one turn, told us the server was down, offered two recovery routes, and, once we restarted the server, fetched the page itself and got to work. It measured the CSS variables, caught and corrected its own font misread mid-run, and finalized the system in 2m 48s, writing 44 files. The app’s own meter priced the run at $2.51.

What it got exactly right #

We graded the extraction against our own stylesheet, and the precision is the story. The brand.json

it wrote has our background as #fbfbf8

, named “Washi paper,” which is the exact token. The coral accent came out #e0604a

, exact. The fonts are right: Instrument Serif for display, IBM Plex Sans for body, IBM Plex Mono for mono, with the fallback stacks written out. The logo description reads like it interviewed us: a coral rounded-square seal, corner radius 18 on 100, the kanji 金 in Shippori Mincho at 800 weight. Every one of those details is true, and none of them is written down anywhere on the page as text. It measured them.

It also rebuilt our homepage from the extracted tokens as a live HTML artifact, nav, kicker, italic serif headline, coral CTA, close enough that we did a double take. And it generated a working component kit, buttons, forms, navigation, breadcrumbs, all colored by var(--brand-*)

custom properties, plus poster, email, newsletter, deck, and landing previews. One extraction run, one $2.51 meter reading, and the folder holds a small design department’s week of output.

Where it breaks #

The app’s own panels can contradict the agent’s files. After the run, the design-system screen displayed the typography as Times New Roman and Segoe UI. Neither font appears anywhere in our stacks; Segoe UI is a Windows face. The agent’s brand.json

had the right families with a candid “shown via fallback” note, so the data was correct and the display layer picked up the rendered fallbacks instead. If you only read the panel, you would ship the wrong fonts.

It invents brand copy and bakes it in. Our site has no tagline reading “Where AI actually pays.” Open Design’s brand identity now does, on the brand card, in the component kit, and on every artifact that inherits the system. It is a decent line. It is also fiction, stored in the identity files where every future design will repeat it. The same failure mode showed up in body copy: the media kit’s dek proudly used the exact phrases this publication banned from its own pages. The visual system is measured; the voice is guessed.

Failure costs the same as success. Every run is metered, and a run that dead-ends on a broken snapshot still bills the tokens. Ours were cheap because the agent recovered fast. A less capable agent, or a subtler breakage, would burn more.

The media kit test #

Extraction proves it can copy what exists. The real product question is whether it can make something new that stays on brand. We briefed it on an artifact this site does not have: a one-page sponsor media kit, with a hard rule, no invented numbers, placeholders only, and prices as TBD.

The design came back in 2m 46s for $1.58, and it looks like this site. The layout discipline was real: the plan it announced included “coral rationed to the seal, links, and one CTA,” which is precisely our rule, inferred from measurement. The copy understood the positioning better than most humans pitching us: “Sponsor an audience that checks the receipts” is a line we would keep, and it wrote sponsorship terms, one advertiser per send, disclosure labels inline, that match our published standard without being told.

And the constraint held everywhere. Four stat cells shipped as [PLACEHOLDER]

with a footnote saying the numbers get filled from analytics before the kit goes out. Both prices shipped as [PRICE TBD]

.

The caveats from the extraction followed it here: the invented tagline sits in the header, and the dek needed a voice edit. Treat the copy as a strong first draft from a designer who has never read your style guide.

The export receipt #

Design tools love to trap work in their own format. This one does not. The Download menu offers PDF, image, zip, and standalone HTML, plus save-as-template. We exported the media kit to PDF and got a clean, correctly styled 3-page document, the kind you could send to a sponsor after one copy pass. Every project file, the brand JSON, the HTML artifacts, the downloaded font files, sits on your own disk in plain formats. The “real files you own” claim is simply true.

What free means here #

The app costs nothing, and nothing we touched was gated. The bill arrives through a different door: every design action is an agent run, metered in your tokens. Our two working runs totaled $4.09 at API rates by the app’s own meter, drawn from a Claude subscription in our case, so no extra invoice, but real usage against the plan’s limits. Price an artifact at a dollar or three of tokens and a few minutes of wall time, and “free” starts to look like a usage-based tool where you already hold the contract. There is an optional paid service, Open Design Cloud, that sells managed access to hosted models per token for people who do not want to bring an agent; we did not need it, and nothing pushed us toward it.

The verdict #

Worth it. Free, local, no account, real files, and the extraction quality on our own site was measurably precise, down to individual hex values and the glyph font of our seal. For a vibe coder already paying for Claude Code, this turns that subscription into a design tool for the cost of tokens, and the failure we hit was recoverable by the very agent the product is built on. Go in knowing its two habits: the status layer can smile through a broken step, so check the files, and it will confidently write fiction into your brand voice, so proofread everything before a client sees it. The pixels are measured. The words are guessed. Keep the split in mind and it earns the download.

One email, when there's something worth sending

Get the receipts in your inbox. #

No fixed schedule, no filler. You get an email when we've tested something, run the numbers, or found a tool worth your time.

Free. Double opt-in, unsubscribe in one click.

Running a design tool on your agent? Compare notes in the forum ↗

Sources #

Every outside quote in this review was re-fetched from its source before we used it.

| Source | Link |

|---|---|
| Open Design repository (nexu-io/open-design) |

|

── more in #developer-tools 4 stories · sorted by recency
── more on @open design 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/open-design-the-free…] indexed:0 read:9min 2026-07-12 ·