Getting Started
Four steps and you're in. (Maybe five. Depends on your shell.)
Four steps and you're in. (Maybe five. Depends on your shell.) npm install, a marketplace, two plugins, two init commands. No accounts, no API keys, no telemetry.
Install the CLI
maude is required, not optional. Several skills shell out to it.
npm i -g @1agh/maude
# or with pnpm
pnpm add -g @1agh/maudeThis gives you the maude binary that scaffolds the .ai/ workspace and boots the design dev server. See CLI for the full surface.
Add the marketplace
Inside Claude Code:
/plugin marketplace add 1aGh/maude/plugin marketplace update maude pulls future releases.
Install the plugins
/plugin install design@maude
/plugin install flow@maudeInstall one or both, they're independent.
Init the workspace
Inside Claude Code, in your project root:
/flow:init
/design:init/flow:init scaffolds the .ai/ second-brain:
.ai/
├── workflows.config.json # the only file you usually edit
├── decisions/ # DDRs (Design Decision Records)
├── plans/ # phase plans + archive
├── state/ # STATE.md, HANDOFF.md
├── docs/ # PRD, codebase map
├── retros/ # post-feature retros
└── scenarios/ # cross-platform UI scenariosIt auto-detects your stack, writes workflows.config.json, and asks the right questions (branching model, changelog provider, platforms).
/design:init scaffolds .design/ and writes a skeleton .design/config.json. Skip it if you don't want the canvas loop.
For CLAUDE.md, use Claude Code's built-in /init. Don't write it by hand.
Run a slash command
Design first, then ship.
Design loop — start here if you're greenfielding a feature:
| Command | What it does |
|---|---|
/design:setup-ds <name> "<brief>" | One-time per project. Bootstrap a design system (tokens, philosophy, specimens). |
/design:new <Name> "<brief>" | Scaffold a new multi-artboard canvas under .design/ui/. |
/design:edit "<feedback>" | Iterate on the open canvas. Cmd+Click an element first to scope the edit. |
Flow loop — ship the feature:
| Command | What it does |
|---|---|
/flow:setup-prd | One-time per project. Draft a PRD and auto-generate phase plans. |
/flow:plan "<feature>" | Per-feature. Draft a phase plan grounded in PRD + design system. |
/flow:execute | Walk the plan task-by-task with the Edit-Verify loop. |
/flow:done | Validate, commit, open a PR, archive the plan. |
/flow:status works anywhere and tells you where you are.
Open the design browser
Two ways to boot the local design dev server. Both start the same server (file tree of every canvas, tabbed iframe preview, inspector overlay). Pick whichever fits where your hands are.
From inside Claude Code:
/design:browseAuto-finds a free port starting at 4321 and opens your default browser. --port <n> to force a specific port.
From your terminal:
maude design serve --port 4399Forwards to the same dev server. Useful when you're not in a Claude Code session, or you want to script it in package.json.
Either way: Cmd+Click any element in a canvas to scope the next /design:edit "<feedback>" to that selection. /design:new also auto-starts the server if it isn't running, so you rarely need to boot it by hand.