oh-my-design

An agent skill that gives a coding agent a tight UI prototyping loop:

write React (TSX) → esbuild bundle → render in a real browser → Playwright screenshot → look at it → iterate → hand back to the main conversation with a self-describing manifest.

The design medium is standard React 18 + TypeScript — import / export, named function components, no UMD or globals or magic. esbuild bundles App.tsx + everything it imports (incl. React/ReactDOM) into a single app.js on every run, so the browser only ever loads one ES module. Fully offline once setup.sh has installed deps.

What this skill is for

Turn vague UI requests into one or more visual candidates (count driven by task, not preset).
Let the agent screenshot its own work and have a subagent critique it before showing the user.
Let the user pick / tweak via a Tweaks panel that posts the choice back to the agent.
Hand the user's selection back to the main conversation along with a self-describing manifest so the next agent can implement it pixel-perfectly in any target stack (React, Vue, Compose, SwiftUI…). For cross-machine archival, just git commit the slug directory.

Layout

hljs language-graphql

oh-my-design/
├── SKILL.md                  # entry contract the agent reads on invocation
├── playbook.md               # ship-time README prompt (read at flow step 7)
├── panel/                    # protocol core — Tweaks panel, types, CSS
├── examples/                 # demo prototype (structural reference only)
├── lib/                      # Node-side tooling
│   ├── types.ts              # re-exports panel/types.ts
│   ├── build.ts              # esbuild bundler (App.tsx → app.js)
│   ├── static.ts             # static-file HTTP handler with @panel cross-root alias
│   ├── shoot.ts              # bundle + Playwright screenshots
│   └── serve.ts              # bundle + local HTTP for the Tweaks panel
├── tsconfig.json             # IDE type-checking only; Node runs lib/*.ts directly
├── package.json              # esbuild + playwright + react@18 (devDeps)
└── setup.sh                  # one-shot: npm install + playwright install chromium

Per-run output

Every invocation creates an isolated tree under the calling project's cwd:

hljs language-graphql

<cwd>/.design/<YYYY-MM-DD-HHMM>-<slug>/
├── README.md          # ← agent writes this at ship time (manifest)
├── App.tsx            # esbuild entry — imports Tweaks from @panel/Tweaks
├── index.html         # hosts <div id="root"> + <div id="tweaks">
├── config.json        # title, variants, frames, themes, defaults
├── variants.tsx       # ← the agent writes this
├── frames/            # device frames (optional — agent's call per task)
├── notes/             # distilled insight (1 sentence per file, named by topic)
├── drafts/            # unrefined material; promote to notes/ when distillable
├── uploads/           # user-supplied reference images
├── shots/             # Playwright self-critique (agent's eyes only)
├── app.js             # esbuild output (gitignored, regenerated each run)
└── selected.json      # user pick + free-form feedback

Setup

hljs language-bash

cd <skill-root>
./setup.sh

Installs Node deps (esbuild, playwright, react, react-dom, @types/*) into the skill's own node_modules/ and downloads Chromium for Playwright. After that, every cwd reuses the same install — fully offline.

Requires Node ≥ 23 (for native TS strip-types — lib/*.ts runs directly via node lib/foo.ts, no build step).

Use

The skill triggers automatically when the user asks for a UI / mockup / prototype / visual design. See SKILL.md for the full flow contract.

License

MIT.

oh-my-design

oh-my-design

What this skill is for

Layout

Per-run output

Setup

Use

License

Similar Packages

Tags

Original Author

Publisher