Skip to content

ckryptickunal/opendesigner

v0.3.1MIT

Open-source, AI-first design-system builder. Interviews you one decision at a time with visual options, recommends sourced defaults, asks for designer-owned assets, and writes DTCG tokens, CSS, Tailwind, DESIGN.md and a decision log.

GitHubOpen Website

A free, open-source (MIT) add-on for your AI coding tool. It gives your product one design system and checks every screen against it.

/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesigner

Two commands in Claude Code. Then up to five questions, planned at about 3 minutes, give you a first version.

On the Claude app, ChatGPT, Cursor or Codex, or have no terminal? Pick your tool below.

Two ways in

Fix what you built. It audits every button, font, size, color and alignment on your pages, marks each problem with the rule it breaks, and fixes it after your yes.

Build a system. It reads your repo, studies your competitors, proposes a positioning and three directions, then writes the rules your AI follows.

Every round

  • A plan you sign off, step by step, written to opendesigner/PROTOCOL.md so any AI follows it.
  • Checks before you see it: contrast, tap targets, type scale, letter-spacing, alignment, buttons, text over images.
  • Screenshots, before and after. Not a link to open.
  • Your notes stick. Say something twice and it becomes a rule.

What lands in your repo

DESIGN.md, PRODUCT.md, design tokens (DTCG), CSS, Tailwind, Figma, Swift and Compose exports, a brand and press page, and a log of every choice with its reason.

Quickstart

  1. Add OpenDesigner to your AI tool. Pick yours below.
  2. Open your project and say: "Create a design system for this project." Already built something? Say: "Make this app look professional." It audits first and changes nothing until you say yes.
  3. Answer a few short questions. It reads your files first, so it asks less.

The audit measures your running app in a browser, so it needs a coding agent that can drive one or run Playwright, such as Claude Code. The ChatGPT bundle doesn't include it.

Claude Code: the two commands at the top of this page, then start a new session.

Claude app (claude.ai or Desktop, no terminal)

Download opendesigner.zip and upload it under Customize > Skills. Code execution must be on. That zip builds a system. To audit an app you already built, also upload opendesigner-review.zip and opendesigner-extract.zip. The install guide lists the other six.

To build the zips yourself, clone the repo and run python3 tools/build_dist.py. They land in dist/.

Codex, Cursor, VS Code with Copilot, Gemini CLI and other agents

These tools read skills from .agents/skills/. Run this inside your project. It copies in the nine skill folders and leaves nothing else behind.

git clone --depth 1 https://github.com/ckryptickunal/OpenDesigner .opendesigner-tmp
mkdir -p .agents/skills
cp -R .opendesigner-tmp/.agents/skills/opendesigner* .agents/skills/
rm -rf .opendesigner-tmp

Tools that support Agent Plugins can also read the root plugin.json.

ChatGPT (a Project, nothing to install)

  1. Download opendesigner-chatgpt.zip and unzip it.
  2. Create a Project and paste instructions.txt into the Project instructions.
  3. Upload the five files in the knowledge folder.

No AI at all (the engine on its own)

The engine is one Python file (Python 3.10 or newer, nothing to install). It writes DESIGN.md, PRODUCT.md and an opendesigner/ folder with tokens, exports and an overview page.

python3 path/to/OpenDesigner/skills/opendesigner/scripts/engine.py sketch --name "Acme" --feel friendly,minimal

You need your own AI tool and Python 3.10 or newer. The engine makes no network calls (privacy). Help for each tool: install guide.

Tested so far: the Claude Code install (2026-10-21) and the engine on Python 3.10.11. Not yet recorded: a run in the Claude app, Codex, Cursor, other agents or ChatGPT. Tried one? Say what you saw in issue #19 or in Discussions.

New to the repo? You only need skills/ or a zip from above. Everything else here (research, benchmarks, the website, the brand kit) is how OpenDesigner is made.

Component library

82 ready-made parts built only on your tokens. Optional. Browse them.

Status

  • Version 0.3.1, 11 November 2026. The first tagged release was 0.2.0, on 5 November. One maintainer.
  • Engine tests pass locally. No CI runs, and no watched user trials yet.
  • Next: choices you can click inside your AI tool (#20).

Changelog · How it works · Research behind the defaults · Showcase

Help it get better

Tell your AI what went wrong. It saves the note and gives you a ready-to-file GitHub link; nothing is posted until you send it. Or open an issue. Contributions: CONTRIBUTING.md. Sponsorship: docs/SPONSORSHIP.md.

Star history

License

Code, skills, templates and data files are under the MIT license. Written research and documentation are under CC BY 4.0, so you can reuse them with credit. That covers research/, benchmarks/, sources/, traces/, synthesis/ Markdown and docs/. Product and design-system names in the research belong to their owners. The tool marks in the "works in" row belong to their owners and only show where OpenDesigner runs (from Simple Icons, CC0). Photos in the README images are from Unsplash: Philipp Hubert (banner), Annie Spratt (before and after), and Adam Rasheed and Brina Blum (component library).

To cite OpenDesigner or its research, use CITATION.cff (GitHub's "Cite this repository" button).