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 스키마로 검증됩니다. 컴포넌트는 아토믹 디자인(원자, 분자, 유기체, 템플릿, 페이지)을 따릅니다.
아키텍처
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