memi Design Tooling
Use memi as the local interface-understanding layer before broad frontend changes. The goal is to give the agent evidence about the product UI before it edits code.
Fast Path
bashnpm i -g @memi-design/cli memi suite init --project . memi daemon start --project . --port auto memi daemon status --json memi agent install --dry-run --json memi agent brief . --intent "Improve this interface" --json memi status memi diagnose . memi ux audit . --json memi craft audit . --json memi tokens --from ./src --report memi shadcn export --out public/r memi mcp start --no-figma
Interface Understanding Protocol
- Read the local instructions first:
AGENTS.md, README files,.memoire/, specs, tokens, andmemoire.agent.yaml. - Generate a design-agent preflight with
memi agent brief . --intent "<task>" --json; use it as the local evidence and cost-control contract. For a supplied Figma or Paper design, pair the brief withdesign-to-code-handoffso the source, component/token mapping, Storybook state, browser check, and unresolved differences survive into the implementation receipt. - Collect evidence with
memi diagnose .,memi ux audit . --json,memi craft audit . --json, andmemi tokens --from ./src --reportbefore making broad UI edits. - If a runtime route matters, run
memi diagnose http://localhost:<port>ormemi design-doc <url> --spec. - If Figma is connected, use memi/Figma context for token pulls, component inspection, screenshot capture, and sync. Figma is optional; do not block code-first audits on it.
- Map components to Atomic Design levels: atom, molecule, organism, template, page.
- Prefer shadcn/ui primitives and Tailwind. Avoid introducing CSS modules or styled-components for memi-generated UI.
- Use UX Tenets and Traps as the review layer: clarity, feedback, control, consistency, accessibility, error recovery, progressive disclosure, workflow fit, trust, and state continuity.
- Use Interface Craft as the polish layer: focusing mechanism, visual hierarchy, spacing rhythm, color intentionality, visual weight, component cohesion, responsive resilience, and user context.
- For research-backed product work, run the research flow before implementation:
bashmemi research synthesize memi simulate plan --hypothesis "Evidence links improve product confidence" --json memi research design --intent "Design from the accepted research evidence" --json memi research design --write-specs --mermaid-jam --json memi mermaid-jam export --from research --json
- For registry work, keep the output installable:
bashmemi shadcn doctor memi shadcn export --out public/r memi publish --name @you/ds memi add Button --from @you/ds
- End with evidence: commands run, artifacts produced, files changed, remaining assumptions, and the next verification command.
Agent Stack Setup
bashmemi agent install universal --project . memi agent install hermes memi agent install openclaw --project . memi agent install claude-code --project . memi agent install cursor --project . memi agent install codex memi agent install codex-plugin memi agent install opencode --project . npx skills add memi-design/memi --skill memoire-design-tooling
Use memi agent install --dry-run --json before writing kit files in shared repositories.
Public Surface and Release Proof
When the task is onboarding, publishing, or release alignment, verify the connected surfaces instead of describing them from memory:
| Surface | Verification |
|---|---|
| npm engine | Confirm the current @memi-design/cli package and install command. |
| MCP | Check the committed server entrypoint and run memi mcp start --no-figma as the safe local proof. |
| Agent Skills | Verify the current memoire-design-tooling installation path and run a local discovery smoke. |
| Studio | Confirm the current macOS Studio repository, its relationship to the CLI, and the receipt or artifact contract. |
| Sandbox | Run the committed design-sandbox proof commands rather than relying on positioning copy. |
| Design Skills | Verify the catalog, provenance, selected-skill install, and generated-file checks. |
Keep product boundaries explicit: the CLI is the engine, MCP exposes local tools, Agent Skills provide workflow context, Studio supervises runs, and the sandbox is a runnable proof surface. End with exact links, commands run, artifacts produced, and any surface that could not be verified.
Output Artifacts To Cite
.memoire/app-quality/diagnosis.json.memoire/app-quality/diagnosis.md.memoire/app-quality/ux-audit.json.memoire/app-quality/interface-craft.json.memoire/design-system.jsonpublic/r/registry.json.memoire/mermaid-jam/<package-id>/memoire.agent.yaml
Common Mistakes
- Starting a UI patch before collecting design evidence.
- Treating Figma as mandatory when code-first audit commands are enough.
- Creating new component patterns when shadcn/ui or local components already exist.
- Omitting Atomic Design levels from new component specs.
- Ignoring UX trap findings because the screen looks acceptable in one viewport.
- Skipping interface craft checks, then relying on taste for hierarchy, rhythm, polish, or conventions.
- Installing agent kits without a dry run in a shared workspace.
- Skipping the design-agent brief, then guessing which evidence, agent stack, or cost mode applies.


