Skip to main content
Glama

今すぐ試す

npx @sarveshsea/memoire design-doc https://stripe.com

あらゆる公開URLから、色、タイポグラフィ、スペーシング、シャドウ、コンポーネントパターンを抽出します。Tailwind設定のスケッチを含む DESIGN.md を10秒で出力。設定不要。


得られるもの

入力

出力

あらゆる公開URL

トークン一覧 + Tailwind設定を含む DESIGN.md

Figmaファイル (RESTまたはプラグイン)

デザイントークン、コンポーネント、スタイル

Penpotファイル

同様のトークン、同様のパイプライン

JSON仕様書

React + TypeScript + Tailwindコンポーネント (shadcn/ui)

生成されたコンポーネント

Storybookストーリー + shadcnレジストリサーバー

npm i -g @sarveshsea/memoire

memi design-doc https://linear.app     # extract any site's design system
memi go                                 # figma -> tokens -> specs -> components -> preview
memi go --rest                          # same thing, no figma desktop needed
memi go --penpot                        # same thing, from penpot
memi tokens                             # export as CSS / Tailwind / JSON / Style Dictionary

Claude Code / Cursor での使用

Memoireは20個のツールを備えたMCPサーバーです。AIアシスタントにデザインシステムへの直接アクセス権を与えましょう。

memi mcp config --install              # writes .mcp.json, done

または .mcp.json に手動で追加します:

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

ツール一覧: pull_design_system, generate_code, create_spec, get_tokens, compose, design_doc, run_audit, capture_screenshot, analyze_design および 他11個


全コマンドリファレンス

コマンド

内容

memi setup

完全なオンボーディング:トークン、ファイル、プラグイン、ブリッジ、MCP設定、テストプル

memi init

スターター仕様書でワークスペースを初期化

memi connect

Figmaブリッジを開始 (ポート9223-9232でプラグインを自動検出)

memi pull

Figmaからトークン、コンポーネント、スタイルを抽出

memi pull --rest

REST API経由でプル -- プラグインやFigma Desktop不要

memi pull --penpot

Penpotからプル (PENPOT_TOKEN + PENPOT_FILE_ID が必要)

memi spec <type> <name>

コンポーネント、ページ、またはデータ可視化の仕様書を作成

memi generate [name]

仕様書からshadcn/uiコード + Storybookストーリーを生成

memi generate --no-stories

Storybookストーリーなしで生成

memi preview

プレビューギャラリー + shadcnレジストリサーバーを開始

memi go

コマンド一つで全パイプラインを実行

memi export

生成されたコードをプロジェクトにエクスポート

memi tokens

トークンをCSS / Tailwind / JSON / Style Dictionary (W3C DTCG) としてエクスポート

memi validate

全仕様書をスキーマに対して検証

コマンド

内容

memi design-doc <url>

あらゆるURLからデザインシステムを抽出し DESIGN.md を作成

memi design-doc <url> --spec

コード生成用の DesignSpec JSON も書き出し

memi extract <url>

design-doc のエイリアス

コマンド

内容

memi sync

完全同期:Figma + 仕様書 + コード

memi sync --live

継続的に監視して同期

memi compose "<intent>"

エージェントオーケストレーター:分類、計画、実行

memi agent spawn <role>

常駐エージェントワーカーを起動

memi research from-file <path>

Excel/CSVを処理してリサーチに変換

memi research synthesize

テーマとペルソナを統合

memi daemon start

リアクティブパイプラインでデーモンを開始

コマンド

内容

memi status

プロジェクト状況の概要

memi doctor

ヘルスチェック:プロジェクト、プラグイン、ブリッジ

memi dashboard

モニタリングダッシュボードを起動

memi audit

デザインシステム監査 (WCAG、未使用の仕様書)

すべてのコマンドは構造化出力のために --json をサポートしています。


仕様書ファーストのワークフロー

すべてのコンポーネントは、コードが生成される前にJSON仕様書として始まります:

{
  "name": "MetricCard",
  "type": "component",
  "level": "molecule",
  "shadcnBase": ["Card", "Badge"],
  "props": { "title": "string", "value": "string", "trend": "string?" },
  "variants": ["default", "compact"]
}

仕様書はZodスキーマで検証されます。コンポーネントはAtomic Design (アトム、分子、有機体、テンプレート、ページ) に従います。


アーキテクチャ

src/
  engine/     Core orchestrator, registry, sync, pipeline
  figma/      WebSocket bridge + REST client + Penpot client
  agents/     Intent classifier, plan builder, task queue
  mcp/        MCP server (20 tools, 3 resources, stdio)
  codegen/    shadcn/ui mapper, Storybook, dataviz, pages
  research/   Research engine (Excel, stickies, web)
  specs/      Spec types, Zod schemas, 62-component catalog
  preview/    Preview gallery, API server, shadcn registry
  notes/      Downloadable skill packs
  commands/   28 CLI commands
  plugin/     Figma plugin (Widget V2)

リンク

memoire.cv -- 変更履歴 -- MCPドキュメント -- ノート

ライセンス

MIT

Latest Blog Posts

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/m-moire'

If you have feedback or need assistance with the MCP directory API, please join our Discord server