Memoire Design Tooling

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

1. Read the local instructions first: AGENTS.md, README files, .memoire/, specs, tokens, and memoire.agent.yaml.
2. Generate a design-agent preflight with memi agent brief . --intent "" --json; use it as the local evidence and cost-control contract.
3. Collect evidence with memi diagnose ., memi ux audit . --json, memi craft audit . --json, and memi tokens --from ./src --report before making broad UI edits.
4. If a runtime route matters, run memi diagnose http://localhost: or memi design-doc --spec.
5. 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.
6. Map components to Atomic Design levels: atom, molecule, organism, template, page.
7. Prefer shadcn/ui primitives and Tailwind. Avoid introducing CSS modules or styled-components for memi-generated UI.
8. Use UX Tenets and Traps as the review layer: clarity, feedback, control, consistency, accessibility, error recovery, progressive disclosure, workflow fit, trust, and state continuity.
9. Use Interface Craft as the polish layer: focusing mechanism, visual hierarchy, spacing rhythm, color intentionality, visual weight, component cohesion, responsive resilience, and user context.
10. 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

1. 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

1. 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.

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.json
• public/r/registry.json
• .memoire/mermaid-jam//
• 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sarveshsea
• Source: sarveshsea/memi
• License: MIT
• Homepage: https://memoire.cv

Install and usage instructions live in the source repository linked above.