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_design11개 추가 도구.


전체 명령어 참조

명령어

기능

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


아키텍처

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