design-something

v0.5.0

Published

2 months ago

MCP server for extracting design tokens and components from Figma and Penpot in W3C DTCG format

Downloads

0High
0Medium
0Low

minha

mcp model-context-protocol figma penpot design-system design-tokens w3c-dtcg ai ui-generation

Design Something

AI 기반 UI 생성 도구 - 디자인 시스템을 참고하여 자연어로 UI를 만들고 실시간으로 프리뷰합니다.

개요

Figma Make의 편의성에서 영감을 받아, 개인 프로젝트에서 사용할 수 있는 오픈소스 대안을 만듭니다.

핵심 가치

다중 디자인 툴 지원: Figma, Penpot 등 여러 디자인 툴을 추상화 레이어로 통합
디자인 시스템 기반 생성: 기존 디자인 시스템(Variables, Components)을 참조하여 일관된 UI 생성
자연어 인터페이스: "Primary 색상으로 버튼 만들어줘" 같은 명령으로 즉시 생성
빠른 시각적 피드백: 실시간 프리뷰로 결과 확인 및 반복 수정
컨텍스트 인지: MCP 통합으로 프로젝트 상황을 이해하고, 웹서치로 최신 정보 반영

목표 사용 시나리오

개발자가 Claude Code/Cursor에서 작업 중
    ↓
"현재 디자인 시스템의 Primary 버튼 컴포넌트 만들어줘"
    ↓
MCP Server가 Figma에서 디자인 토큰 & 컴포넌트 정보 가져옴
    ↓
AI가 이를 참고하여 React 코드 생성
    ↓
로컬 dev server에서 즉시 프리뷰
    ↓
"좀 더 둥글게 해줘" → 즉시 반영

주요 기능

1. 디자인 시스템 연동 (추상화)

지원 툴:
- Figma: REST API를 통한 Variables, Components 추출 (회사/Enterprise용)
- Penpot: W3C DTCG 표준 네이티브 지원, 오픈소스 (개인 프로젝트용)
통합 포맷: W3C Design Tokens Community Group (DTCG) 표준
추상화 레이어: 모든 디자인 툴을 동일한 인터페이스로 접근
Components 라이브러리 정보 캐싱
팀 라이브러리 지원

2. MCP Server

Tools:
- read_design_system: Figma 디자인 시스템 정보 조회
- generate_component: 디자인 시스템 기반 컴포넌트 생성
- search_web: 최신 기술 스택/패턴 검색
- save_context: 프로젝트별 기본 설정 저장
Resources:
- design-tokens://[file-id]: 디자인 토큰 정보
- component-library://[file-id]: 컴포넌트 목록
- project-context://[project-name]: 저장된 프로젝트 컨텍스트

3. 실시간 프리뷰

Vite 기반 dev server
HMR(Hot Module Replacement)로 즉각 반영
독립 실행 가능 (Figma 없이도 동작)

4. 컨텍스트 관리

프로젝트별 기본 설정 저장 (선호 프레임워크, 디자인 시스템 파일 등)
이전 대화 컨텍스트 유지
자주 쓰는 패턴 학습

아키텍처

┌─────────────────────┐  ┌─────────────────────┐
│ Figma               │  │ Penpot              │
│ - Variables         │  │ - Design Tokens     │
│ - Components        │  │ - Components        │
│ - Team Library      │  │ - W3C DTCG native   │
└──────────┬──────────┘  └──────────┬──────────┘
           │ REST API               │ API/Export
           ↓                        ↓
    ┌──────────────────────────────────────────┐
    │ Design System Abstraction Layer          │
    │ - DesignSystemProvider Interface         │
    │ - FigmaProvider / PenpotProvider         │
    │ - W3C DTCG as internal format            │
    └──────────────────┬───────────────────────┘
                       │
                       ↓
    ┌──────────────────────────────────────────┐
    │ MCP Server                               │
    │ - Design System Parser                   │
    │ - Context Manager                        │
    │ - Web Search Integration                 │
    │ - Component Generator                    │
    └──────────────────┬───────────────────────┘
                       │ MCP Protocol
                       ↓
    ┌──────────────────────────────────────────┐
    │ AI Coding Tools                          │
    │ - Claude Code                            │
    │ - Cursor                                 │
    │ - Codex                                  │
    └──────────────────┬───────────────────────┘
                       │ Generated Code
                       ↓
    ┌──────────────────────────────────────────┐
    │ Preview Server (Vite + React/Vue)        │
    │ - Hot Module Replacement                 │
    │ - Component Playground                   │
    └──────────────────────────────────────────┘

기술 스택 (예정)

MCP Server: TypeScript/Node.js
디자인 툴 연동:
- Figma REST API
- Penpot Public API / penpot-export
Design Tokens: W3C DTCG 표준
Preview: Vite + React (또는 Vue)
상태 관리: (TBD - 필요 시)
웹 서치: (TBD - API 선택 필요)

로드맵

Phase 1: 기본 인프라 (MVP)

[ ] MCP Server 기본 구조
[ ] Design System Abstraction Layer 구현
- [ ] DesignSystemProvider 인터페이스
- [ ] FigmaProvider (Variables, Components 읽기)
- [ ] PenpotProvider (W3C DTCG 읽기)
[ ] 간단한 tool 구현 (read_design_system)
[ ] Claude Code에서 동작 확인

Phase 2: 컴포넌트 생성

[ ] AI 기반 컴포넌트 생성 로직
[ ] 디자인 토큰 → CSS/TailwindCSS 변환
[ ] 기본 프리뷰 서버 구축

Phase 3: UX 개선

[ ] 웹 서치 통합
[ ] 컨텍스트 저장/불러오기
[ ] 반복 수정 플로우 최적화
[ ] 캐싱 및 성능 개선

Phase 4: 확장

[ ] 다양한 프레임워크 지원 (React, Vue, Svelte)
[ ] 추가 디자인 툴 지원 (Sketch, Adobe XD 등)
[ ] Figma Plugin 프로토타입 (양방향 동기화)
[ ] 템플릿/스니펫 라이브러리

유사 프로젝트 비교

| 프로젝트 | 특징 | 차이점 | |---------|------|--------| | Figma Make | Figma 네이티브, AI 통합, 기업용 | 개인 프로젝트에서 사용 불가 | | OpenPencil | 오픈소스 디자인 에디터, AI 지원 | 아직 production ready 아님 | | bolt.diy | 프롬프트 기반 풀스택 앱 생성 | 디자인 시스템 연동 없음 | | Dyad | 로컬 우선 AI 앱 빌더 | 디자인 툴보다 코드 생성 중심 | | Design Something | 다중 툴 지원 + MCP + AI | 기존 디자인 시스템 활용, 툴 독립적 |

상세한 비교는 docs/competitive-analysis.md 참고

설치 및 사용

요구 사항

Node.js >= 18
Figma Personal Access Token (발급 방법)

빌드

git clone https://github.com/your-org/design-something.git
cd design-something
npm install
npm run build

환경변수 설정

export FIGMA_ACCESS_TOKEN="figd_xxxxxxxxxxxxx"

MCP Server 실행 (직접)

npm run mcp

stdio transport로 MCP 프로토콜을 사용합니다. 주로 AI 코딩 도구에서 자동으로 실행합니다.

Claude Code / Claude Desktop에서 사용하기

Claude Code (CLI)

.claude/settings.json에 다음을 추가하세요:

{
  "mcpServers": {
    "design-something": {
      "command": "node",
      "args": ["dist/server/mcp-server.js"],
      "cwd": "/path/to/design-something",
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_xxxxxxxxxxxxx"
      }
    }
  }
}

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) 또는 %APPDATA%\Claude\claude_desktop_config.json (Windows)에 추가:

{
  "mcpServers": {
    "design-something": {
      "command": "node",
      "args": ["/absolute/path/to/design-something/dist/server/mcp-server.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_xxxxxxxxxxxxx"
      }
    }
  }
}

Cursor / 기타 MCP 호환 도구

각 도구의 MCP 설정 방법에 따라 위와 동일한 command, args, env를 설정하세요.

사용 가능한 MCP Tools

`get_design_tokens`

디자인 파일에서 디자인 토큰(색상, 타이포그래피, 스페이싱 등)을 W3C DTCG 형식으로 가져옵니다.

파라미터: | 이름 | 타입 | 필수 | 설명 | |------|------|------|------| | provider | "figma" \| "penpot" | O | 디자인 툴 | | fileId | string | O | Figma 파일 키 (URL에서 확인) | | tokenType | string | X | 토큰 타입 필터 (color, number, string 등) |

사용 예시 (자연어):

"Figma 파일 abc123에서 색상 토큰 가져와"
"이 디자인 시스템의 모든 디자인 토큰 조회해줘"

`list_design_components`

디자인 파일의 컴포넌트 목록을 조회합니다.

파라미터: | 이름 | 타입 | 필수 | 설명 | |------|------|------|------| | provider | "figma" \| "penpot" | O | 디자인 툴 | | fileId | string | O | 디자인 파일 ID | | search | string | X | 이름/설명 검색어 | | category | string | X | 카테고리 필터 |

사용 예시:

"Figma에서 Button 관련 컴포넌트 찾아줘"
"디자인 시스템의 Form 카테고리 컴포넌트 목록 보여줘"

`get_design_component`

특정 컴포넌트의 상세 정보(속성, Variant 등)를 조회합니다.

파라미터: | 이름 | 타입 | 필수 | 설명 | |------|------|------|------| | provider | "figma" \| "penpot" | O | 디자인 툴 | | fileId | string | O | 디자인 파일 ID | | componentId | string | O | 컴포넌트 ID |

사용 예시:

"이 Button 컴포넌트의 Variant 정보 알려줘"

Figma 파일 키 확인 방법

Figma 파일 URL에서 파일 키를 추출합니다:

https://www.figma.com/design/ABC123xyz/MyDesignSystem
                              ^^^^^^^^^^^
                              이 부분이 fileId

개발

스크립트

npm run dev          # 개발 모드 (watch)
npm run build        # 프로덕션 빌드
npm run type-check   # TypeScript 타입 검증
npm run lint         # ESLint 검사
npm run test         # Vitest 테스트 실행
npm run test:ui      # Vitest UI 모드
npm run test:coverage # 커버리지 리포트

프로젝트 구조

src/
├── types/              # W3C DTCG 타입, Provider 인터페이스
├── utils/              # logger (pino), errors, cache
├── providers/          # 디자인 툴 Provider
│   ├── provider-registry.ts
│   └── figma/          # FigmaClient, FigmaAdapter, FigmaProvider
└── server/             # MCP Server
    ├── mcp-server.ts   # Server Factory + Entry Point
    ├── config.ts       # 환경변수 파싱 (Zod)
    └── tools/          # MCP Tool 구현
tests/
├── unit/               # 단위 테스트
└── integration/        # 통합 테스트 (E2E)

라이선스

MIT