<p align="center"> <img src="assets/readme-hero.svg" alt="Memi audits an interface, reports a file-anchored design finding, and verifies the rerun without writing source files." width="100%" /> </p> <p align="center"> <a href="https://www.npmjs.com/package/@memi-design/cli"><img src="https://img.shields.io/npm/v/@memi-design/cli?color=bd3f63&label=npm" alt="npm version"></a> <a href="https://www.npmjs.com/package/@memi-design/cli"><img src="https://img.shields.io/npm/dw/@memi-design/cli?color=171718&label=weekly%20downloads" alt="weekly npm downloads"></a> <a href="https://github.com/memi-design/memi/actions/workflows/ci.yml"><img src="https://github.com/memi-design/memi/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a> <a href="https://github.com/memi-design/memi/stargazers"><img src="https://img.shields.io/github/stars/memi-design/memi?style=social" alt="GitHub stars"></a> <a href="https://github.com/memi-design/memi/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-171718.svg" alt="MIT license"></a> </p>

memi

Read-only design engineering for coding agents.

Memi is the read-only design engineering audit and skill layer for coding agents. It gives Codex, Claude Code, Cursor, Grok Build, and MCP clients file-anchored interface evidence before they edit UI.

Memi reads the product you already have, identifies accessibility, hierarchy, state, responsive, motion, and token risks, then reruns the same deterministic check after a fix. Your code remains the source of truth.

Supported today: Node 20, 22, and 24 on macOS, Linux, and Windows. Figma and Studio are optional companions.

Links: npm · memoire.cv · current versions · MCP Registry · Agent Skills

Quickstart

Run one audit in any frontend repository:

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

You get a score, normalized finding IDs, confidence, provenance, and file:line evidence. No account, API key, Figma file, global install, or daemon is required.

Keep the workflow available to your coding agent:

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

Then ask:

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

Focused skill	Use it when
audit-frontend-design	Find interface risks before changing UI
remember-design-system	Load compact product-system context
enforce-design-ci	Gate pull requests with deterministic evidence
build-swiftui-interface	Build and verify native Apple interfaces

Compatible with the shadcn registry and v0 design systems.

If Memi catches a real interface issue in your project, star the repository and share the finding. That is the most useful signal for deciding what to improve next.

What Memi catches

Signal	Example evidence
Accessibility	Missing labels, reduced-motion fallbacks, focus and contrast risks
Interface craft	Weak hierarchy, spacing drift, brittle responsive behavior
Product states	Missing loading, empty, error, success, and permission states
Design systems	Token drift, raw values, inconsistent component usage
Routes and components	App graph, duplicated patterns, risky change surfaces
Pull requests	New debt only, SARIF annotations, step summary, HTML report

The first command is deliberately read-only. Write-capable scaffolds and Figma operations are separate, explicit workflows.

How it works

1. Inspect - build an evidence graph