Oh My Design (3x-haust) plugin
Oh My Design
A plugin that runs a design task with one /ultradesign command: inspect, build, render, repair and verify
- 209 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Changes project files within the declared write scope and writes process records to `.omd/`
- Renders pages in Chromium through Playwright, fetches references and Figma data, and the install registers the plugin in agent settings
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/3x-haust-oh-my-designDetects 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.
- Changes project files within the declared write scope and writes process records to `.omd/`
- Renders pages in Chromium through Playwright, fetches references and Figma data, and the install registers the plugin in agent settings
This is third-party code. Review the repository files before installing.
What it does
Oh My Design runs in Claude Code, Codex and Pi-compatible agents and drives a design task as one end-to-end process. The single entry, the `/ultradesign` command, preserves the original request, the selected model, the project stack and the authorized write scope. The agent inspects the repository, routes and components, researches references when they matter, picks a direction, builds the interface, renders it at desktop and mobile sizes, repairs the defects it finds and verifies the result. The `omd` utility tracks process state: `omd stage next` gives the next action, `omd guard production` checks write boundaries, `omd first-render check` catches first-render defects, and `omd lifecycle finish` runs package checks, browser evaluation, an independent review and final publication. The review comes from the built-in `omd-eye` agent with read-only access. If the request contains a Figma file link, it becomes the implementation target: `omd figma pull` snapshots the file, `omd figma diff` compares a frame with the page, and the work counts as done at a match of 90% or higher with a reviewer verdict of `match`.
Who it is for. Front-end developers and design engineers who hand an agent a whole screen, a redesign or a Figma implementation and want render verification at the end.
Good fit when
- A Next.js or React project needs a new screen, and the result has to pass desktop and mobile checks
- A Figma design exists and the page has to reach at least 90% match with an independent review
- An existing interface has to be reworked without losing the project's stack and components
- The agent often hands in screens with first-render defects and you want a gate before the work is accepted
Not a fit when
- You need one color or spacing tweak: a multi-step process with a review is too heavy for it
- The environment has no Chromium and Playwright and cannot install them: rendering and evaluation run through a browser
- The design task is small and one-off, and you do not want `omd` commands and `.omd/` records in the project
- You need a company design system without building an interface: the plugin builds and verifies pages, not tokens
Example request
/ultradesign Redo the pricing page in this project: keep the current stack, check it at mobile size and show the verification resultLimitations
- The full process needs a browser: the main `browser-rs` provider runs on Darwin arm64 and Linux x64, elsewhere Playwright and Chromium are needed, installed with `npx playwright install chromium`.
- The unscoped `oh-my-design` package on npm is unrelated to the project; install `@3xhaust/oh-my-design`.
- References are comparison material, not product assets. Form submission, sign-in, payment and downloads are refused during state capture.
- A Figma task passes only with a current snapshot, a frame match of at least 90% and a reviewer verdict of `match`.
How to disable. `oh-my-design uninstall` reverses the host installation and leaves a project's `.omd/` records alone. Remove the Claude Code plugin through `/plugin`, the Pi package with `pi remove`, and the global npm package with `npm uninstall -g @3xhaust/oh-my-design`.
FAQ
How do I install Oh My Design in Claude Code?
Run `/plugin marketplace add 3x-haust/oh-my-design`, then `/plugin install oh-my-design@omd` and start `/ultradesign`. For other agents use `npm install -g @3xhaust/oh-my-design`, followed by `oh-my-design install` and `oh-my-design doctor`.
How is Oh My Design different from the npm package of the same name?
They are unrelated. The author states that the unscoped `oh-my-design` package is not part of the project; install `@3xhaust/oh-my-design`.
What is `/ultradesign`?
The single command for any design task: a new product, a feature, a redesign, a fix, a Figma implementation. It carries your request, model, stack and writable scope into the process.
How do I work with Figma?
Put a Figma file or design link in the request. `omd figma pull`, `omd figma diff` and `omd figma review` take the snapshot, compare the frame with the page and request an independent review. Acceptance needs a match of at least 90%.
Where is the work history stored?
In the project's `.omd/` folder, which holds process and review records. Removing the plugin with `oh-my-design uninstall` leaves that folder alone.
Discussion
No questions or reviews yet.
Related
PluginsOh My Design
oh-my-design
Installs a design system into an agent with one command: a catalog of rated company design systems, tokens and rules. The README is in four languages
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
An open-source Claude Design alternative that builds prototypes, decks, dashboards and video through your local agents
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
A kit adds design workflows, visual systems and examples to an agent for creating and reviewing designs inside a repository.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Oh My Design (3x-haust) (this card) | no | 209 | |
| Oh My Design | no | 572 | a catalog of company design systems and tokens installed for an agent; this one is a screen-building process with rendering and review |
| Impeccable | no | 105,073 | a skill with 23 commands for critique and polish; this one has a single `/ultradesign` entry and render checks with a read-only reviewer |
README in short
The README opens with the promise of AI that designs like a human and a description of the single entry. Then come a table of the reviewer agent, the nine steps of the normal path, a section on references and Figma, three install paths, browser requirements and a table of public `omd` commands by group: entry and health, workflow and validation, references and design input.