memi

Design QA skills for coding agents.
Audit real interfaces, remember their design systems, and stop UI regressions before merge.

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.

---

One skill. One useful result.

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

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

No account, API key, Figma file, global install, or daemon is required. The skill runs the pinned CLI with npx, audits the real source tree, and returns file-anchored evidence.

Three focused skills

Job	Install
Find accessibility, token, hierarchy, state, and responsive issues	npx skills add sarveshsea/audit-frontend-design --skill audit-frontend-design
Load compact design-system context before UI work	npx skills add sarveshsea/remember-design-system --skill remember-design-system
Add deterministic design checks to pull requests	npx skills add sarveshsea/enforce-design-ci --skill enforce-design-ci

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

The monorepo remains an equivalent source-of-record install: npx skills add sarveshsea/memi --skill audit-frontend-design.

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 shadcn export --out public/r
memi agent install universal --project .
memi mcp start --no-figma

That loop gives you a compact design-agent brief, app-quality findings, UX risks, craft critique, extracted tokens, a dry-run Atomic Design file scaffold, 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
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.5.0"

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

Core MCP tools

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
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/audit-frontend-design --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

Core commands

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.