memoire
今すぐ試す
npx @sarveshsea/memoire design-doc https://stripe.comあらゆる公開URLから、色、タイポグラフィ、スペーシング、シャドウ、コンポーネントパターンを抽出します。Tailwind設定のスケッチを含む DESIGN.md を10秒で出力。設定不要。
得られるもの
入力 | 出力 |
あらゆる公開URL | トークン一覧 + Tailwind設定を含む |
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 DictionaryClaude 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個。
全コマンドリファレンス
コマンド | 内容 |
| 完全なオンボーディング:トークン、ファイル、プラグイン、ブリッジ、MCP設定、テストプル |
| スターター仕様書でワークスペースを初期化 |
| Figmaブリッジを開始 (ポート9223-9232でプラグインを自動検出) |
| Figmaからトークン、コンポーネント、スタイルを抽出 |
| REST API経由でプル -- プラグインやFigma Desktop不要 |
| Penpotからプル ( |
| コンポーネント、ページ、またはデータ可視化の仕様書を作成 |
| 仕様書からshadcn/uiコード + Storybookストーリーを生成 |
| Storybookストーリーなしで生成 |
| プレビューギャラリー + shadcnレジストリサーバーを開始 |
| コマンド一つで全パイプラインを実行 |
| 生成されたコードをプロジェクトにエクスポート |
| トークンをCSS / Tailwind / JSON / Style Dictionary (W3C DTCG) としてエクスポート |
| 全仕様書をスキーマに対して検証 |
コマンド | 内容 |
| あらゆるURLからデザインシステムを抽出し DESIGN.md を作成 |
| コード生成用の DesignSpec JSON も書き出し |
| design-doc のエイリアス |
コマンド | 内容 |
| 完全同期:Figma + 仕様書 + コード |
| 継続的に監視して同期 |
| エージェントオーケストレーター:分類、計画、実行 |
| 常駐エージェントワーカーを起動 |
| Excel/CSVを処理してリサーチに変換 |
| テーマとペルソナを統合 |
| リアクティブパイプラインでデーモンを開始 |
コマンド | 内容 |
| プロジェクト状況の概要 |
| ヘルスチェック:プロジェクト、プラグイン、ブリッジ |
| モニタリングダッシュボードを起動 |
| デザインシステム監査 (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