# memoire

> Agent-readable design intelligence surfaces for memoire.cv.
> CLI and macOS app available.
> Public references, design-system docs, changelog, and package docs.

## What it is

memoire is an AI-native design intelligence engine for existing apps,
Figma systems, design references, tokens, specs, and agent workflows.
memoire.cv is the public console and documentation layer for that engine.

- **References** - public technical style records at `/references`
- **Design system** - Preview/TUI documentation at `/design-system`
- **Theme workbench** - live token/preset editor at `/design-system/write`
- **Docs** - CLI, Figma bridge, skills, notes, and agent workflow docs at `/docs`
- **Changelog** - engine history at `/changelog`

## Try it

```bash
npx @memi-design/cli add Button --from @memoire-examples/starter
```

Reference entrypoints:

- https://memoire.cv/references
- https://memoire.cv/references/column
- https://memoire.cv/references/column.json
- https://memoire.cv/references/column/design.md
- https://memoire.cv/references/column/tokens.json
- https://memoire.cv/references/column/tailwind-v4.css

## Commands

```bash
memi setup          # onboarding: token → plugin → bridge → MCP config
memi init           # scaffold workspace + starter specs
memi publish        # Figma file → npm registry package
memi add <Comp> --from <registry>   # drop component into src/components/memoire/
memi update <registry>              # pull latest versions
memi pull           # extract design system from Figma (plugin or REST)
memi pull --penpot  # pull from Penpot via REST
memi generate       # specs → shadcn/ui + Storybook stories
memi tokens         # export Tailwind, CSS vars, or DTCG tokens
memi sync --auto-pr # watch Figma → PR on change
memi design-doc <url> --init <name> # extract any site's design system
memi references search <query>      # search memoire.cv design references
memi references pull memoire:<source>/<id> # cache a public reference locally
memi references use memoire:<source>/<id>  # mark a reference active for agents
memi go             # full pipeline: connect → pull → generate → preview
```

## Reference corpus

Memoire stores public design references at https://memoire.cv/references so
agents can use source-attributed design context without scraping third-party
sites during every run.

- Index: https://memoire.cv/references/<source>/index.json
- Detail: https://memoire.cv/references/<source>/<id>.json
- DESIGN.md: https://memoire.cv/references/<source>/<id>/design.md
- Tokens: https://memoire.cv/references/<source>/<id>/tokens.json
- Tailwind v4: https://memoire.cv/references/<source>/<id>/tailwind-v4.css

Preserve each record's source URL, original website URL, capture date,
contributor metadata, and license note when generating agent context.

## Registry protocol

Every published registry is a standard npm package containing:
- `registry.json` - component manifest + metadata (description, figma link)
- `components/*.tsx` (or .vue, .svelte) - pre-compiled source for `memi add`
- `tokens/*.css` - design tokens as W3C DTCG JSON + Tailwind `@theme` CSS
- `README.md` - rendered on the registry index page at `/r/<scope>/<name>`

memoire mirrors the Marketplace from `unpkg.com` + npm on a schedule.
Publishing your package to npm is all it takes to show up here.

## When to use memoire

Use memoire when the user:
- Wants to browse, preview, or install registry components
- Asks about pulling a Figma or Penpot design system into code
- Needs design tokens synced to Tailwind v4, Style Dictionary, or DTCG
- Is building a design system with shadcn/ui and wants to ship it as a package
- Wants MCP tools for Figma design → code workflows
- Needs to extract a design system from any website URL
- Wants Storybook stories generated alongside components

## MCP config (Claude Code / Cursor / Windsurf)

Add to `.mcp.json`:

```json
{
  "mcpServers": {
    "memoire": {
      "command": "memi",
      "args": ["mcp", "start"],
      "env": {
        "FIGMA_TOKEN": "${FIGMA_TOKEN}",
        "FIGMA_FILE_KEY": "${FIGMA_FILE_KEY}"
      }
    }
  }
}
```

Or `memi mcp config --install` writes it for you.

## 21 MCP tools

pull_design_system, get_specs, get_spec, create_spec, generate_code,
get_tokens, update_token, sync_design_tokens, capture_screenshot,
get_selection, get_page_tree, compose, run_audit, get_research,
figma_execute, analyze_design, measure_text, get_ai_usage,
check_bridge_health, design_doc, preview_component

## Footprint

- 823 tests in the engine (src repo)
- 120 tests in memoire.cv (this site)
- 21 MCP tools
- React, Vue, Svelte codegen

## Blog

Posts on the CLI, the macOS Studio, the harness, the MCP server, and the
Notes pack. Each post has a raw markdown export at `/blog/<slug>.md` so
agents can fetch the source without parsing HTML.

- Index: https://memoire.cv/blog
- Mémoire v0.17 'Compound' release: https://memoire.cv/blog/v0-17-release.md
- Designers have an amnesia problem too: https://memoire.cv/blog/the-amnesia-problem.md
- Why we bundle every model in the box: https://memoire.cv/blog/why-bundle-the-models.md
- Inside the Mémoire harness (architecture deep dive): https://memoire.cv/blog/inside-the-harness.md

## Legal

- Privacy + Terms + Open source: https://memoire.cv/legal
- License (MIT): https://github.com/sarveshsea/memi/blob/main/LICENSE

## Links

- References: https://memoire.cv/references
- Design system: https://memoire.cv/design-system
- Theme workbench: https://memoire.cv/design-system/write
- Changelog: https://memoire.cv/changelog
- Blog: https://memoire.cv/blog
- Legal: https://memoire.cv/legal
- Download: https://memoire.cv/download
- npm: https://www.npmjs.com/package/@memi-design/cli
- GitHub: https://github.com/sarveshsea/memi
- Notes pack: https://github.com/sarveshsea/memoire-notes
- Docs: https://memoire.cv/docs
- Reference docs: https://memoire.cv/docs/references
- Sources: https://memoire.cv/docs/sources
- Sitemap: https://memoire.cv/sitemap.xml