OpenDesigner plugin
OpenDesigner builds one design system for a project and checks every screen against its rules in Claude Code, Codex and Cursor
- 136 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent edits project styles and components after your confirmation and runs the app in a browser for measurement
- Creates files in the repository: `DESIGN.md`, tokens, exports and a decision log
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/opendesignerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent edits project styles and components after your confirmation and runs the app in a browser for measurement
- Creates files in the repository: `DESIGN.md`, tokens, exports and a decision log
This is third-party code. Review the repository files before installing.
What it does
A free MIT-licensed add-on for an AI tool. It works two ways. In fix-what-you-built mode it measures the running app in a browser, finds problems with buttons, fonts, sizes, colors and alignment, names the rule each breaks and fixes after your yes. In build-a-system mode it reads your repo, studies competitors, proposes a positioning and three directions and writes the rules your agent then follows. Every round starts with a plan written to `opendesigner/PROTOCOL.md` and ends with checks: contrast, tap targets, type scale, letter-spacing, buttons, text over images. The repo receives `DESIGN.md`, `PRODUCT.md`, DTCG tokens, CSS, Tailwind, Figma, Swift and Compose exports and a decision log. The package has nine skills, including `opendesigner-review`, `opendesigner-extract` and `opendesigner-export`.
Who it is for. Founders and developers whose product has no unified interface rules and who want an agent to bring screens to a consistent look.
Good fit when
- The app is built and you want an audit of every button, font, color and alignment with before and after screenshots
- A project is starting and needs a design system with `DESIGN.md` and DTCG tokens in the repo
- You want to export the rules to Tailwind, CSS, Figma, Swift or Compose
- Repeated remarks should become a rule so the agent stops repeating the mistake
Not a fit when
- You have no agent that can drive a browser or run Playwright: the audit measures the running app
- You need a finished visual design from a human: the plugin builds rules and checks while you draw the layouts
- You work only through ChatGPT chat: the project bundle excludes the browser audit
Example request
Make this app look professional: audit the screens in a browser, show the rules that are broken and change nothing before I agreeLimitations
- The audit measures the running app in a browser, so the agent must be able to drive a browser or run Playwright, for example Claude Code. The ChatGPT bundle excludes this audit.
- For the Claude app without a terminal, skills upload as zip files under Customize, Skills, with code execution on, and the audit needs the extra `opendesigner-review.zip` and `opendesigner-extract.zip`.
- For Codex, Cursor and other tools the nine skill folders are copied into the project's `.agents/skills/`.
- The system produces a first version after up to five questions, planned at about three minutes by the author.
- The agent changes nothing until you confirm the plan.
How to disable. For Claude Code run `/plugin uninstall opendesigner@opendesigner`. For a manual install delete the `opendesigner*` folders from `.agents/skills/`. `DESIGN.md` and `opendesigner/` stay in the project and are removed by hand.
FAQ
How do I install OpenDesigner in Claude Code?
Two commands: `/plugin marketplace add ckryptickunal/OpenDesigner` and `/plugin install opendesigner@opendesigner`, then a new session. After that say: "Create a design system for this project".
How do I use it in Codex and Cursor?
Clone the repository and copy the `opendesigner*` folders from `.agents/skills/` into your project's `.agents/skills/`. Tools supporting Agent Plugins also read the root `plugin.json`.
What lands in the repository after a run?
`DESIGN.md`, `PRODUCT.md`, DTCG tokens, CSS, Tailwind, Figma, Swift and Compose exports, a brand page and a log of decisions with reasons.
Does the plugin change my files without asking?
No. The audit changes no files until you say yes. Every round's plan is written to `opendesigner/PROTOCOL.md`.
Can I use it without a terminal?
Yes: `opendesigner.zip` for the Claude app and `opendesigner-chatgpt.zip` for a ChatGPT Project. The browser app audit is not in the ChatGPT bundle.
Discussion
No questions or reviews yet.
Related
PluginsAn open-source Claude Design alternative that builds prototypes, decks, dashboards and video through your local agents
Oh My Design (3x-haust)
Oh My Design
A plugin that runs a design task with one /ultradesign command: inspect, build, render, repair and verify
A workspace for Claude Code: ten commands lead from a product idea to React screens and a handoff package with ready prompts for implementation
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
design.how: 6 skills turn an app's UI into a design system for the agent, plus four ready systems for shadcn.
A kit adds design workflows, visual systems and examples to an agent for creating and reviewing designs inside a repository.
README in short
The README starts with two install commands and two modes of work. Each round with its checks is described, the repo contents are listed, and installs for Claude, Codex, Cursor, ChatGPT and a no-AI engine mode follow.