memoire
The memoire server provides a comprehensive suite of tools for design system management, Figma integration, code generation, and AI-powered analysis.
Figma Integration: Pull design systems (tokens, components, styles) from a connected Figma file, capture screenshots, inspect selected nodes, browse the file tree, and execute arbitrary JavaScript via the Figma Plugin API.
Spec Management: List, create, retrieve, and validate component, page, and dataviz specs with Zod schema validation.
Code Generation: Generate shadcn/ui + Tailwind component code (React/Vue/Svelte) from saved specs, organized by atomic design level.
Token Management: Get, update, and sync design tokens to a Tailwind config theme extension, with optional push back to Figma.
AI Visual Analysis: Analyze Figma designs with AI vision for general quality, WCAG accessibility compliance, or spec-compliance.
Design System Audit: Run structured audits covering contrast, touch targets, focus indicators, token coverage, and naming conventions.
Design Extraction: Scrape any public URL to extract its design system as a structured
DESIGN.mddocument or raw token JSON.Agent Orchestration: Use a natural language interface to classify, plan, and execute multi-step design workflows.
User Research: Load project-specific insights, personas, and themes to ground design decisions.
Text Layout Measurement: Predict text dimensions, line counts, and overflow risk without a browser or Figma connection.
Health & Usage Monitoring: Check Figma WebSocket bridge health and track AI token usage and estimated session costs.
Extracts design tokens, components, and styles from Figma files via WebSocket bridge, REST API, or plugin, enabling design system synchronization and code generation workflows.
Extracts design systems from Linear's website URLs to generate design documentation and specifications for code generation workflows.
Extracts design tokens, components, and styles from Penpot files using API authentication, providing an alternative design tool integration for design system extraction.
Generates production-ready React components from design specifications with proper props, variants, and component architecture.
Generates production-ready React components using shadcn/ui patterns and includes a shadcn registry server for component management and distribution.
Generates Storybook stories alongside React components for component documentation, testing, and development workflow integration.
Extracts design systems from Stripe's website URLs to generate design documentation and specifications for code generation workflows.
Generates TypeScript-typed React components with proper type definitions and interfaces for type-safe development.
Validates component specifications using Zod schemas to ensure data integrity and consistency throughout the design-to-code pipeline.
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.
For agents — start here
npm i -g @memi-design/cli
memi agent brief . --intent "Improve this interface" --json # preflight contract
memi diagnose . --json # app-quality graph
memi ux audit . --json # UX tenets + traps
memi craft audit . --json # interface craft
memi tokens --from ./src --report # token memory
memi shadcn export --out public/r # registry output
memi mcp start --no-figma # stdio MCP serverPolicy: Run memi before broad UI edits. Prefer diagnose, ux audit, craft audit, tokens, and MCP tools over visual guessing. Every CI finding cites file:line and re-runs identically — no LLM in the enforcement path.
MCP tools (40+): prepare_design_agent_brief, diagnose_app_quality, audit_ux_tenets_traps, audit_interface_craft, get_tokens, get_shadcn_registry, plan_ui_fixes, design_doc, research_design_package, simulation_plan, simulation_run, check_bridge_health, and more. Start with memi mcp start --no-figma.
Agent install one-liners:
Stack | Command |
Grok Build (Grok 4.5) |
|
Cursor |
|
Claude Code |
|
Codex |
|
Universal skills |
|
skills.sh |
|
Craft polish (upstream) |
|
All (dry run) |
|
Machine-readable index: llms.txt
Related MCP server: custom-browser-mcp
For humans — five-minute proof
npm i -g @memi-design/cli
memi agent brief . --intent "Improve this interface" --json
memi diagnose
memi ux audit --json
memi craft audit --json
memi tokens --from ./src --report
memi shadcn export --out public/r
memi agent install universal --project .
memi mcp start --no-figmaThat loop gives you a design-agent brief, app-quality findings, UX risks, craft critique, extracted tokens, 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 --jsonWhat memi agent install grok-build writes:
File | Purpose |
| Native MCP: |
| Native Grok skill discovery |
| Universal / AGENTS.md skill mirror |
| 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-figmaHeadless 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 |
|
Design-agent brief | Cost-aware preflight with evidence commands and handoff rules |
|
UX audit | UX tenets and trap risks from code, screenshots, or routes |
|
Interface craft | Visual hierarchy, spacing rhythm, conventions, responsive resilience |
|
Token memory | CSS variables, Tailwind v4 |
|
Registry output | shadcn-native registry for shadcn, v0, npm, GitHub |
|
Agent kits | Skills + MCP for Grok Build, Codex, Claude Code, Cursor, Hermes, OpenClaw, OpenCode |
|
MCP server | 40+ design tools over stdio for any MCP client |
|
Research design | Research → Atomic Design specs → FigJam-ready source |
|
Design CI gate | Deterministic PR gate with SARIF annotations |
|
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 badgeGitHub 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.4.1"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 |
| Agent needs a preflight contract before UI edits |
| App-quality graph, file evidence, issue list |
| UX tenet scores and trap risks |
| Visual hierarchy, rhythm, conventions, polish |
| Design tokens, modes, aliases, drift |
| shadcn registry items and install URLs |
| Prioritized fix plan from diagnosis |
| Extract design system from a route or URL |
| React + TypeScript + Tailwind from specs |
| Research → design package |
| Product scenario simulations |
| 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 memoire-design-toolingStack | Install path | Best for |
Grok Build |
| Grok 4.5 terminal agent with design MCP |
Universal Agent Skills |
| ECC / AGENTS.md workflows |
Hermes |
| Transcript-first product design |
OpenClaw |
| Workspace-local agents |
Claude Code |
| Project MCP approval |
Cursor |
| Editor-native MCP |
Codex plugin |
| Full Codex plugin + marketplace |
OpenCode |
| Local frontend agents |
Public Codex marketplace install:
codex plugin marketplace add sarveshsea/memi --ref main --sparse .agents/plugins --sparse plugins/memoireCopy-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.jsonFeatured 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 1422What ships in the package
Path | Why |
| CLI + MCP runtime |
| MCP Registry descriptor |
| Standard Agent Skills package |
| Grok Build, Hermes, Codex, Cursor, Claude Code, OpenCode, OpenClaw kits |
| Codex plugin bundle |
| Built-in research, agent, and design notes |
| Interface understanding, CI, growth, release gates |
| GitHub Action for design CI ( |
Trust defaults
No npm install-time lifecycle scripts
Figma plugin install is explicit:
memi setup pluginMCP Figma-independent mode:
memi mcp start --no-figmaAgent kit installs support
--dry-run --jsonbefore writing filesPublish gates: release metadata, tarball size, MCP smoke, skills discovery, npm audit
Docs map
Doc | When you need it |
Shortest install → proof path | |
Publish | |
Policy, baseline, CI, debt burn-down | |
GitHub Action, SARIF, non-GitHub CI | |
Grok Build, Codex, Claude Code, Cursor, MCP | |
Full evidence loop | |
npm downloads + GitHub stars strategy | |
Category and distribution | |
Proof repos, topics, hashtags |
Full command reference
Command | What it does |
| Shared design gate: policy, baseline, gitignore, agent kit |
| CI design gate: scan, PR scope, baseline, SARIF + summary |
| Accept existing debt; watch burn-down |
| Design-health artifact + SVG badge |
| UI debt from code, route, or URL |
| UX tenets and trap risks |
| Interface craft dimensions |
| Extract tokens, modes, aliases, drift |
| Export shadcn registry |
| Design system from route or URL |
| Install agent kits (grok-build, cursor, codex, …) |
| Start MCP server |
|
|
| Warm local runtime context |
| 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 --helpLicense
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.
Maintenance
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/sarveshsea/memi'
If you have feedback or need assistance with the MCP directory API, please join our Discord server