oh-my-design

Oh My Design

A design process for coding agents — not a visual style. OMD makes the model earn each decision: question the brief, gather evidence, write real copy, prove typography, compose deliberately, build once, inspect the render, and reframe.

한국어

Built with OMD — in one shot

The landing page above was generated by OMD itself from a single one-shot prompt — the visual output was not hand-tuned. It is live at 3x-haust.github.io/oh-my-design, and its source is in example/.

What it is

Here, “design like a human” means accountable judgment, not a signature look. The goal is a repeatable process; the result can be quiet, expressive, conventional, or strange. What stays constant is the chain of decisions behind it.

Oh My Design (OMD) keeps a coding agent from jumping straight from a request to polished UI. It asks what problem is being solved, records evidence, separates writing from layout, compares anonymous structures, and critiques the rendered output without exposing the reviewer to the builder’s rationale.

The durable loop is:

brief → evidence → copy → typography proof → composition contract → isolated structure → one production build
      → rendered critique and interaction evidence → reframe

OMD runs inside Codex and Claude Code. It ships six user-facing skills, nine internal pipeline agents, a local omd CLI, design theory and recipe packs, and a durable project record under .omd/.

Requirements

• Node.js 22.18 or newer (the CLI runs the TypeScript entrypoints directly)
• Claude Code, Codex, or both, with the host config directory already present
• A browser provider: browser-rs v0.1.10 is preferred on its two supported platforms; Playwright + Chromium remains the required fallback for rendering, probing, and typography proofs (see below)

Install

npm — global CLI (recommended)

npm install -g @3xhaust/oh-my-design
oh-my-design install    # copy skills + agents into every detected host and patch its config
oh-my-design doctor     # verify the host install
omd doctor              # verify the runtime, Chromium, project write access, and the theory pack

oh-my-design install --host claude|codex scopes install, doctor, and uninstall to one host. uninstall reverses exactly what install did and never touches your .omd/ directory. Host installation also attempts browser-rs afterward and reports present, installed, unsupported, or failed; a browser-rs failure does not roll back an otherwise healthy OMD/Playwright host installation.

Install the scoped package @3xhaust/oh-my-design. The unscoped oh-my-design on npm is an unrelated project.

Claude Code — plugin marketplace

/plugin marketplace add 3x-haust/oh-my-design
/plugin install oh-my-design@omd

Then open a session and run /ultradesign.

From source (contributors)

git clone https://github.com/3x-haust/oh-my-design
cd oh-my-design
npm install
node bin/omd-install.ts install    # copy skills + agents into detected hosts
node bin/omd.ts doctor

Browser provider and Chromium (after global installation)

After globally installing @3xhaust/oh-my-design, OMD prefers the browser-rs MCP provider for interactive reference research, user-directed region captures, and visual QA. It is a deliberately narrow v0.1.10 integration, not a claim of universal browser compatibility:

Platform	browser-rs state	Exact SHA-256
Darwin arm64	Supported; default interactive provider when healthy	9a5895fc2f07b1010226d30f081d678fa2edcc15dd6f24cdf10074cfe1573749
Linux x64	Supported; default interactive provider when healthy	792ca76e5ce0423968763556e110900a3aa65737fc6227724914aa137e972589
Any other platform	Unsupported; no browser-rs download	Use the Playwright + Chromium fallback below.

The managed binary, when installed, is $HOME/.local/share/oh-my-design/browser-rs/v0.1.10/browser-rs with a verified receipt.json. OMD verifies the exact checksum before publishing it. Resolution is OMD_BROWSER_RS_BIN, then browser-rs on PATH, then that receipt-owned target. OMD never overwrites a foreign override/PATH binary or an unreceipted/tampered managed-target file, and oh-my-design browser uninstall removes only matching OMD-owned receipt-and-digest bytes.

# Explicit provider lifecycle. `doctor` exits 1 when the selected provider is not healthy.
oh-my-design browser install
oh-my-design browser doctor --json

# After global package installation, provide your own equivalent local HTML fixture.
oh-my-design browser smoke --fixture /absolute/path/to/local-probe.html --out /tmp/omd-browser-rs-smoke.png