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
npm 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, and memoire.agent.yaml.
- Generate a design-agent preflight with
memi agent brief . --intent "<task>" --json; use it as the local evidence and cost-control contract.
- Collect evidence with
memi diagnose ., memi ux audit . --json, memi craft audit . --json, and memi tokens --from ./src --report before making broad UI edits.
- If a runtime route matters, run
memi diagnose http://localhost:<port> or memi 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:
memi 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:
memi 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
memi 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 sarveshsea/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.
1---2name: memoire-design-tooling3description: Set up and operate Mémoire's CLI, MCP server, agent kits, design preflight, UX audits, craft checks, tokens, and registry evidence. Use when a repository explicitly needs Mémoire tooling; use portable design skills when Mémoire is unavailable.4---56# memi Design Tooling78Use 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.910## Fast Path1112```bash13npm i -g @memi-design/cli14memi suite init --project .15memi daemon start --project . --port auto16memi daemon status --json17memi agent install --dry-run --json18memi agent brief . --intent "Improve this interface" --json19memi status20memi diagnose .21memi ux audit . --json22memi craft audit . --json23memi tokens --from ./src --report24memi shadcn export --out public/r25memi mcp start --no-figma26```2728## Interface Understanding Protocol29301. Read the local instructions first: `AGENTS.md`, README files, `.memoire/`, specs, tokens, and `memoire.agent.yaml`.312. Generate a design-agent preflight with `memi agent brief . --intent "<task>" --json`; use it as the local evidence and cost-control contract.323. Collect evidence with `memi diagnose .`, `memi ux audit . --json`, `memi craft audit . --json`, and `memi tokens --from ./src --report` before making broad UI edits.334. If a runtime route matters, run `memi diagnose http://localhost:<port>` or `memi design-doc <url> --spec`.345. 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.356. Map components to Atomic Design levels: atom, molecule, organism, template, page.367. Prefer shadcn/ui primitives and Tailwind. Avoid introducing CSS modules or styled-components for memi-generated UI.378. Use UX Tenets and Traps as the review layer: clarity, feedback, control, consistency, accessibility, error recovery, progressive disclosure, workflow fit, trust, and state continuity.389. Use Interface Craft as the polish layer: focusing mechanism, visual hierarchy, spacing rhythm, color intentionality, visual weight, component cohesion, responsive resilience, and user context.3910. For research-backed product work, run the research flow before implementation:4041```bash42memi research synthesize43memi simulate plan --hypothesis "Evidence links improve product confidence" --json44memi research design --intent "Design from the accepted research evidence" --json45memi research design --write-specs --mermaid-jam --json46memi mermaid-jam export --from research --json47```484911. For registry work, keep the output installable:5051```bash52memi shadcn doctor53memi shadcn export --out public/r54memi publish --name @you/ds55memi add Button --from @you/ds56```575812. End with evidence: commands run, artifacts produced, files changed, remaining assumptions, and the next verification command.5960## Agent Stack Setup6162```bash63memi agent install universal --project .64memi agent install hermes65memi agent install openclaw --project .66memi agent install claude-code --project .67memi agent install cursor --project .68memi agent install codex69memi agent install codex-plugin70memi agent install opencode --project .71npx skills add sarveshsea/memi --skill memoire-design-tooling72```7374Use `memi agent install --dry-run --json` before writing kit files in shared repositories.7576## Public Surface and Release Proof7778When the task is onboarding, publishing, or release alignment, verify the connected surfaces instead of describing them from memory:7980| Surface | Verification |81| --- | --- |82| npm engine | Confirm the current `@memi-design/cli` package and install command. |83| MCP | Check the committed server entrypoint and run `memi mcp start --no-figma` as the safe local proof. |84| Agent Skills | Verify the current `memoire-design-tooling` installation path and run a local discovery smoke. |85| Studio | Confirm the current macOS Studio repository, its relationship to the CLI, and the receipt or artifact contract. |86| Sandbox | Run the committed design-sandbox proof commands rather than relying on positioning copy. |87| Design Skills | Verify the catalog, provenance, selected-skill install, and generated-file checks. |8889Keep 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.9091## Output Artifacts To Cite9293- `.memoire/app-quality/diagnosis.json`94- `.memoire/app-quality/diagnosis.md`95- `.memoire/app-quality/ux-audit.json`96- `.memoire/app-quality/interface-craft.json`97- `.memoire/design-system.json`98- `public/r/registry.json`99- `.memoire/mermaid-jam/<package-id>/`100- `memoire.agent.yaml`101102## Common Mistakes103104- Starting a UI patch before collecting design evidence.105- Treating Figma as mandatory when code-first audit commands are enough.106- Creating new component patterns when shadcn/ui or local components already exist.107- Omitting Atomic Design levels from new component specs.108- Ignoring UX trap findings because the screen looks acceptable in one viewport.109- Skipping interface craft checks, then relying on taste for hierarchy, rhythm, polish, or conventions.110- Installing agent kits without a dry run in a shared workspace.111- Skipping the design-agent brief, then guessing which evidence, agent stack, or cost mode applies.
memi-design