Book a callGitHub62

The whole system, on one page

How OpenDesigner works

OpenDesigner is a set of skills and a small engine that your AI tool loads. It reads your project, asks only what it can't find there, and writes the rules your screens follow into your own files. This page shows each step, with the real numbers.

Get started free

  1. You ask

    In Claude, ChatGPT, Cursor or another AI tool you already use.

  2. It reads first

    Your CSS, tokens, logo and fonts, before it asks anything.

  3. Fix or build

    Audit what you built, or start a system from five answers.

  4. The engine does the math

    Color, type, spacing, corners, depth and motion. Offline.

  5. Files land in your project

    Tokens, CSS, Tailwind, Figma, Swift, Compose and DESIGN.md.

  6. New screens follow them

    Your AI reads DESIGN.md first. A review flags values that skip the tokens.

A mistake the maintainer confirms comes back as a new check for everyone who updates.
Drawn in HTML. Photo: Philipp Hubert on Unsplash.

188

questions it can ask. You answer up to five; the rest wait until you zoom in.

8

dials that set the look, each from 0 to 100, turned into values by fixed formulas.

455

house standards from sources we trust. The ones that set a value are locked.

49

checks before anything visual is shared: type, layout, motion and contrast.

70

known ways a design review goes wrong, each with how it is caught.

82

finished components in the optional library, built only on your tokens.

Counted from the repository's own files when this page was built: the question bank, house standards v3, the preflight checklist, the review cases and the component library. 6 more questions are planned and skipped until they are built.

01Two ways in

Fix what you have, or build a system from the start.

Your AI picks the path from what you ask and what it finds in your project. Both use the same engine, the same accessibility floors and the same decision log.

FixYou already built something

It looks off, and you want it to look like one product.

Invoice 2207Waiting on you

Marlowe & Pratt Supplies · due Fri 16 Oct

$14,860.00

View the PDF
DeclineApprove
  1. Grey text at 2.4:1. The floor is 4.5:1.
  2. Two corner sizes on two buttons: 3 px and 12 px.
  3. Three different greens where the system has one.
  4. An 18 px button. The floor for a target is 24 px.
  1. It measures your built pages at each screen size: type sizes and weights, fonts, colors, spacing, contrast, focus and tap targets.
  2. It marks each problem on the page, with the measured number and what fixing it gives you.
  3. It fixes one page from design tokens and shows it beside the original.
  4. The rest of your product changes only after you say yes.
See a full audit drawn on a real page

BuildYou're starting, or want the whole system

Five answers give you a complete first version.

Zoom levels

  1. Sketchup to 5 questions, about 3 minutes

    A complete but coarse system

    What you're makingWho it's forWhere it runsHow it should feelBrand color

  2. Broad8 questions, about 8 minutes

    One short screen for each foundation

  3. Defined71 questions across 13 areas

    One area at a time

  4. Detailed94 questions across 13 areas

    Blocks, components and patterns, and the fine print of each area

Stop after any level. Each one leaves you a complete system.

  1. It reads your CSS, Tailwind config, tokens, logo and fonts, and doesn't ask what a file already answers.
  2. You answer up to five questions: what you're making, who it's for, where it runs, how it should feel and your brand color.
  3. The engine builds the whole system in about two seconds, with dark mode, three densities and reduced motion.
  4. You zoom into the areas you care about, or stop. Nothing is asked before the things it depends on.
Your first design system

The card is drawn in HTML. Its "today" values are invented mistakes, and its "after" values are the engine's real output for Billerwick, one of the three example systems on the home page. Zoom levels and their question counts come from the skill's own zoom.md and pacing file.

02Inside the engine

Each answer moves a dial. Each dial sets real values.

Your answers and your feel words set 8 dials, from 0 to 100. Fixed formulas turn each position into values, like a corner radius or a type ratio. The same answers always give the same files, and you can run the engine with no AI at all.

The answers

Who
Used all day
Where
Web
Feel
precise, calm
Brand
#15803d

The eight dials

  1. Expression15
  2. Brand presence20
  3. Density80
  4. Energy35
  5. Roundness45
  6. Depth30
  7. Colorfulness36
  8. Warmth50

Two dials, worked through

  1. Roundness45

    falls in the band 38 to 47, which gives

    Corner radius of controls6 px

  2. Expression15

    falls in the band 0 to 33, which gives

    Type scale ratio1.2

Real engine output (site/demo_systems.py) and the band formulas from levers.json, read when this page was built. What each dial does

03What you keep

Plain files in your project, not an account somewhere.

Everything is written into your own repository. Your team, your design tools and your next AI session all read the same rules, and you can open every file.

DESIGN.md

Your rules in plain words. Coding agents read it before they touch the interface.

---
version: alpha
name: "OpenDesigner brand"
description: "Marketing site, Docs or content site"
colors:
  primary: "#2338ff"
  on-primary: "#ffffff"
  surface: "#fcfdff"
  on-surface: "#222428"
  error: "#d93834"
typography:
  body-md: { fontFamily: "Hanken Grotesk", fontSize: 16px, lineHeight: 24px }
rounded:
  control: 12px
  container: 16px
spacing:
  unit: 4px
---

# OpenDesigner brand

Excerpts from OpenDesigner's own design system, which was made with OpenDesigner, read from brand/opendesigner when this page was built.

04What protects you

The floors hold, and every choice is on record.

Rule-based checks run before the AI gives any opinion, and they give the same result every time. Breaking an accessibility floor is an error that stops the build.

Accessibility floors are locked

WCAG 2.2 AA contrast, 24 px targets, a visible focus ring and reduced motion. No answer, taste or style can lower them.

Aa4.5:1text contrast
24 pxsmallest target
SaveVisiblefocus ring
Respectedreduced motion

Every value says how it was set

Chosen by you, a default you confirmed, picked for you, assumed, or taken from a reference. A suggestion you skipped is never recorded as your answer.

D-0056 · dials.roundness = 75

chosenconfirmed defaultpicked for youassumedfrom a reference

“Use iOS style rounded edges with iOS kerning everywhere instead of sharp corners”

Lock a value, and it changes only with your yes.

Checks report. They don't rewrite.

The review lists values in your code that skip the tokens and names the token to use. A fix to code you already have waits for your yes.

$ engine.py review
3 hard-coded values skip the tokens.
  card.css:2  border-radius: 7px
    -> use var(--ds-radius-container)
  card.css:4  #1d33d0
    -> use var(--ds-color-text-accent)

It reports and edits nothing.

Your brand stays yours

It asks you for the logo, photos, typeface and voice, and never fakes them. A reference gives structure, never another brand's identity.

Brand assets · 9 of 14 provided

  • LogoProvided
  • Favicon setProvided
  • Fixed brand colorsNot enough information
  • Motion signature and rich mediaNot enough information

OpenDesigner leaves a gap open instead of inventing the asset.

The review lines are real output, shortened, from engine.py review on a test file checked against OpenDesigner's own system. The decision is a real entry from OpenDesigner's own log. Accessibility floors · Decisions and DESIGN.md

05How it learns

A confirmed mistake becomes a check for everyone.

OpenDesigner improves from use. Each mistake the maintainer confirms turns into a fix or a rule that a script or an agent can check, and the tests run again before the change reaches you. No version is tagged yet; engine.py version tells you when your system was built with an older copy.

  1. You notice something

    A missing option, a wrong value, a step that confused you. Your AI notes it quietly and tells you once, at the end.

  2. A note, never a post

    It saves the note in your project with a ready-to-file issue link. It stays there unless you submit it.

  3. It becomes a fix or a check

    When the maintainer confirms it, a gap or a bug is fixed in the source, and a visual mistake becomes a preflight check or a review case. So far: 49 checks and 70 cases.

  4. Tested before it reaches you

    AI agents do real tasks with and without it, the engine builds 18 fixed briefs, and the checkers face planted mistakes.

Then you update, and the loop starts again.

One mistake, followed through

  1. 21 Oct 2026

    In an owner review of this website, rounded boxes inside other rounded boxes had corners that didn't run parallel.

  2. Check 45

    It became preflight check 45, “Corners nest”: the inner radius is the outer radius minus the gap, at every width.

  3. MS-14

    It became review case MS-14, “Corners that don't nest”, so every review now measures it on your pages too.

See every test result, and run them yourself

Where it stands

Early, and honest about it.

  • Created on 2026-09-23 and maintained by one person. There is no tagged release yet; 0.1.0 is planned.
  • No watched user trials yet, and no recorded run in every AI tool. The engine's tests pass.

Try it

See it work on your own project.

Two commands in Claude Code, then a few plain questions. It's free, and the engine runs on your computer.

Get started freeRead every step in the docs

Photo: Marcel Strauß on Unsplash