@memi-design/cli

v2.6.2

Published

a day ago

Interface understanding and design-system memory for AI coding agents: UX audits, Tailwind tokens, shadcn registries, MCP, and Agent Skills.

Package: @memi-design/cli · Homepage: memoire.cv · MCP Registry: io.github.sarveshsea/memi

memi turns a real product codebase into evidence agents can trust before they edit UI: tokens, components, routes, screenshots, UX risks, interface craft scores, shadcn registries, research specs, and deterministic CI gates. Works with Grok Build (Grok 4.5), Codex, Claude Code, Cursor, Hermes, OpenCode, OpenClaw, and any MCP client.

Compatibility: shadcn registry and v0 design systems.

Try it on a real interface

npx -y @memi-design/[email protected] diagnose . --json --no-write --fail-on none

That runs a read-only, deterministic audit against the current repository and returns file-anchored evidence. No account, API key, Figma file, global install, or daemon is required.

To make the same workflow available whenever an agent edits UI:

npx skills add sarveshsea/memi --skill audit-frontend-design

Then ask: "Audit this frontend before editing it. Prioritize the five fixes that will matter most to users."

The skill runs the pinned CLI only when repository evidence is needed.

Four focused skills

| Job | Install | | --- | --- | | Find accessibility, token, hierarchy, state, and responsive issues | npx skills add sarveshsea/memi --skill audit-frontend-design | | Load compact design-system context before UI work | npx skills add sarveshsea/memi --skill remember-design-system | | Add deterministic design checks to pull requests | npx skills add sarveshsea/memi --skill enforce-design-ci | | Build and verify native SwiftUI interfaces | npx skills add sarveshsea/memi --skill build-swiftui-interface |

Browse the skills on skills.sh or use the full memoire-design-tooling router for Figma, MCP, research, scaffolding, and registry workflows.

Focused mirror repositories remain available for directory discovery, but sarveshsea/memi is the source-of-record install.

Every CI finding cites file:line and re-runs identically. No LLM is used in the enforcement path.

Machine-readable index: llms.txt

For humans — five-minute proof

npm i -g @memi-design/cli

memi agent brief . --intent "Improve this interface" --detail compact --json
memi diagnose
memi ux audit --json
memi craft audit --json
memi tokens --from ./src --report
memi scaffold component EvidenceCard --level organism --json
memi ios brief --intent "Build an accessible settings screen" --detail compact --json
memi ios scaffold Settings --kind screen --module AppModule --json
memi shadcn export --out public/r
memi agent install universal --project .
memi mcp start --no-figma

That loop gives you compact web and Apple-platform briefs, app-quality findings, UX risks, craft critique, extracted tokens, dry-run web and SwiftUI file scaffolds, shadcn registry output, installable Agent Skills, and a Figma-independent MCP server.

Public proof repo: sarveshsea/design-sandbox — Next.js 16 + Tailwind 4 + shadcn wired with MCP, skills, and memoire.agent.yaml.

Grok Build (Grok 4.5) — recommended setup

Grok Build is xAI's agentic coding CLI powered by Grok 4.5. memi is the design-memory layer that stops Grok from guessing your tokens, components, and UX constraints.

npm i -g @memi-design/cli
curl -fsSL https://x.ai/cli/install.sh | bash   # Grok Build

cd your-repo
memi agent install grok-build --project .
grok inspect
grok mcp doctor memoire
memi agent brief . --intent "Audit this UI" --agent grok-build --json

What memi agent install grok-build writes:

| File | Purpose | | --- | --- | | .grok/config.toml | Native MCP: memi mcp start --no-figma | | .grok/skills/memoire-design-tooling/ | Native Grok skill discovery | | .agents/skills/memoire-design-tooling/ | Universal / AGENTS.md skill mirror | | memoire.agent.yaml | Suite manifest with design-audit recipes |

For animation taste and design-engineering polish, also install Emil Kowalski's craft skills (npx skills add emilkowalski/skills) — memi owns system evidence; those skills own motion/taste decisions.

Manual MCP alternative:

grok mcp add memoire --scope project -- memi mcp start --no-figma

Headless automation:

grok -p "Run memi diagnose and ux audit, then propose a shadcn-safe patch plan."

Grok also loads project .mcp.json via compat — memi agent install claude-code --project . works as a fallback.

What ships in v2

| Layer | What it does | First command | | --- | --- | --- | | App quality | UI debt, state gaps, a11y risk, Tailwind drift, UX traps | memi diagnose | | Design-agent brief | Cost-aware preflight with evidence commands and handoff rules | memi agent brief . --json | | UX audit | UX tenets and trap risks from code, screenshots, or routes | memi ux audit --json | | Interface craft | Visual hierarchy, spacing rhythm, conventions, responsive resilience | memi craft audit --json | | Token memory | CSS variables, Tailwind v4 @theme, aliases, scale issues | memi tokens --from ./src --report | | Spec-first file creation | Dry-run Atomic Design component/page scaffolds before writes | memi scaffold component <Name> --json | | Apple platform design | SwiftUI brief plus spec/view/model/preview/test scaffolds | memi ios brief --json | | Registry output | shadcn-native registry for shadcn, v0, npm, GitHub | memi shadcn export --out public/r | | Agent kits | Skills + MCP for Grok Build, Codex, Claude Code, Cursor, Hermes, OpenClaw, OpenCode | memi agent install --dry-run --json | | MCP server | 40+ design tools over stdio for any MCP client | memi mcp start --no-figma | | Research design | Research → Atomic Design specs → FigJam-ready source | memi research design --write-specs --mermaid-jam | | Design CI gate | Deterministic PR gate with SARIF annotations | memi ci |

Design CI gate (team mandate)

v2.4 turns memi from an audit you can run into a gate a team can require. Every finding cites file:line and re-runs identically.

memi init --team     # policy + baseline + gitignore + agent kit
memi ci              # scan, PR scope, SARIF, step summary — exit 1 on new debt
memi baseline status # accepted debt stays visible while it burns down
memi report --badge  # design-health.html + SVG badge

GitHub Action (Marketplace)

name: design
on:
  pull_request:
    branches: [main]

jobs:
  design:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      security-events: write
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: sarveshsea/memi@v2
        with:
          version: "2.6.2"

What lands on the PR: code-scanning annotations at file:line, a step summary with score and gate verdict, and a memi-design-health artifact (HTML + markdown + badge).

Full release checklist: docs/GITHUB_ACTION_MARKETPLACE.md · CI recipes: docs/CI_RECIPES.md · Team rollout: docs/TEAM_ROLLOUT.md

MCP server reference

Start: memi mcp start --no-figma (Figma-independent; add memi connect later for live Figma)

Registry: server.json → io.github.sarveshsea/memi on the MCP Registry

| Tool | Use when | | --- | --- | | prepare_design_agent_brief | Agent needs a preflight contract before UI edits | | scaffold_agent_design_files | Agent needs an approval-gated spec-first file creation plan | | prepare_apple_design_brief | Agent needs compact SwiftUI, availability, accessibility, and Xcode guidance | | scaffold_swiftui_files | Agent needs a dry-run-first SwiftUI spec, view, model, preview, and test scaffold | | diagnose_app_quality | App-quality graph, file evidence, issue list | | audit_ux_tenets_traps | UX tenet scores and trap risks | | audit_interface_craft | Visual hierarchy, rhythm, conventions, polish | | get_tokens | Design tokens, modes, aliases, drift | | get_shadcn_registry | shadcn registry items and install URLs | | plan_ui_fixes | Prioritized fix plan from diagnosis | | design_doc | Extract design system from a route or URL | | generate_code | React + TypeScript + Tailwind from specs | | research_design_package | Research → design package | | simulation_plan / simulation_run | Product scenario simulations | | check_bridge_health | Verify Figma bridge before Figma tools |

Figma tools (pull_design_system, capture_screenshot, get_selection, etc.) require memi connect or memi daemon start.

Cursor / Claude Code config (also Grok compat):

{
  "mcpServers": {
    "memoire": {
      "command": "memi",
      "args": ["mcp", "start", "--no-figma"]
    }
  }
}

Install automatically: memi agent install cursor --project . or memi agent install claude-code --project .

Agent stack installs

memi suite init --project .
memi daemon start --project . --port auto
memi agent brief . --intent "Improve this interface" --json

memi agent install grok-build --project .   # Grok 4.5 Build CLI
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 audit-frontend-design

| Stack | Install path | Best for | | --- | --- | --- | | Grok Build | .grok/config.toml + .grok/skills/ (+ .agents/skills/ mirror) | Grok 4.5 terminal agent with design MCP | | Universal Agent Skills | .agents/skills/{audit-frontend-design,remember-design-system,enforce-design-ci,memoire-design-tooling}/ | ECC / AGENTS.md workflows | | Hermes | ~/.hermes/skills/memoire/ | Transcript-first product design | | OpenClaw | <workspace>/skills/memoire/ | Workspace-local agents | | Claude Code | .mcp.json | Project MCP approval | | Cursor | .cursor/mcp.json | Editor-native MCP | | Codex plugin | ~/plugins/memoire | Full Codex plugin + marketplace | | OpenCode | .opencode/skills/memoire/ | Local frontend agents |

Public Codex marketplace install:

codex plugin marketplace add sarveshsea/memi --ref main --sparse .agents/plugins --sparse plugins/memoire

Copy-paste workflows: Agent stack guide · Agent recipes

shadcn registry workflows

memi tokens --from ./src --report
memi shadcn export --out public/r
memi publish --name @you/ds
memi add Button --from @you/ds
npx shadcn@latest add https://your-site.com/r/button.json

Featured examples: examples/ — SaaS, dashboard, auth, AI chat, ecommerce, landing pages.

memi Studio (macOS app)

Native shell in sarveshsea/memi-studio. This npm package is the engine it embeds.

brew install --cask sarveshsea/memi/memi-studio
memi studio web --port 1422

What ships in the package

| Path | Why | | --- | --- | | dist/ | CLI + MCP runtime | | server.json | MCP Registry descriptor | | skills/*/SKILL.md | Focused Agent Skills plus the full workflow router | | agent-kits/ | Grok Build, Hermes, Codex, Cursor, Claude Code, OpenCode, OpenClaw kits | | plugins/memoire/ | Codex plugin bundle | | notes/ | Built-in research, agent, and design notes | | docs/ | Interface understanding, CI, growth, release gates | | action.yml | GitHub Action for design CI (sarveshsea/memi@v2) |

Trust defaults

No npm install-time lifecycle scripts
Figma plugin install is explicit: memi setup plugin
MCP Figma-independent mode: memi mcp start --no-figma
Agent kit installs support --dry-run --json before writing files
Publish gates: release metadata, tarball size, MCP smoke, skills discovery, npm audit

Docs map

| Doc | When you need it | | --- | --- | | Quickstart | Shortest install → proof path | | GitHub Action Marketplace | Publish memi design CI to Marketplace | | Team Rollout | Policy, baseline, CI, debt burn-down | | CI Recipes | GitHub Action, SARIF, non-GitHub CI | | Agent Stacks | Grok Build, Codex, Claude Code, Cursor, MCP | | Interface Understanding | Full evidence loop | | Growth to 1M | npm downloads + GitHub stars strategy | | v2 Positioning | Category and distribution | | Public Repos | Proof repos, topics, hashtags |

Full command reference

| Command | What it does | | --- | --- | | memi init --team | Shared design gate: policy, baseline, gitignore, agent kit | | memi ci | CI design gate: scan, PR scope, baseline, SARIF + summary | | memi baseline accept\|status | Accept existing debt; watch burn-down | | memi report --badge | Design-health artifact + SVG badge | | memi diagnose [target] | UI debt from code, route, or URL | | memi ux audit [target] | UX tenets and trap risks | | memi craft audit [target] | Interface craft dimensions | | memi tokens --from <path> | Extract tokens, modes, aliases, drift | | memi shadcn export --out public/r | Export shadcn registry | | memi design-doc <url> | Design system from route or URL | | memi agent install [target] | Install agent kits (grok-build, cursor, codex, …) | | memi mcp start --no-figma | Start MCP server | | memi suite init\|doctor\|run | memoire.agent.yaml and recipes | | memi daemon start\|status\|stop | Warm local runtime context | | memi studio web\|tui\|logs\|run | Studio compatibility surfaces |

Install without npm

curl -fsSL https://memoire.cv/install.sh | sh
brew install sarveshsea/memi/memoire
docker run --rm -it -v "$PWD:/work" -w /work ghcr.io/sarveshsea/memi --help

License

Studio interface references and adapted components are documented in NOTICE. The public reference set includes Hermes WebUI, Hermes Agent, and the MIT Warp UI framework boundary around warpui_core and warpui; Warp AGPL application/client code is not copied into memi.

MIT. See NOTICE for Studio interface references, optional adapters, and attribution notes.