# Figma Cost Optimizer Bridge

<div align="right">
  <a href="./index.md">English</a> | <strong>한국어</strong>
</div>

![Figma Cost Optimizer Bridge 시스템 개요](./assets/system-overview-kr.svg)

Figma Desktop 디자인 컨텍스트를 LLM 코딩 에이전트가 구현하기 좋은 토큰 효율적인 다중 웹 프레임워크 handoff로 압축하는 로컬 MCP 브리지입니다.

## 벤치마크 요약

최신 fixture: `DashStack Dashboard`, 측정일 `2026-06-16` (블라인드 3회, `claude-sonnet-4-6`).

| 경로 | 총 추정 입력 토큰 | 픽셀 유사도(평균) |
|---|---:|---:|
| 공식 Figma MCP raw | 13,926 | 83.12% |
| Bridge handoff | 7,232 | 84.76% |

**추정 입력 토큰 절감률: 48.07%** — 게다가 bridge 쪽이 평균 +1.65 pp 더 정확했습니다.

[전체 벤치마크 리포트 보기](./BENCHMARK_RESULTS_KR.md)

![Bridge 렌더](./assets/benchmarks/dashstack-dashboard/bridge.png)

## 설치

```bash
npm install -g decrease-token-figma
figma-bridge
```

## MCP 클라이언트 설정

```json
{
  "mcpServers": {
    "figma-cost-optimizer-bridge": {
      "command": "npx",
      "args": ["-y", "decrease-token-figma"],
      "env": {
        "FIGMA_BRIDGE_ROOT": "/absolute/path/to/your/app"
      }
    }
  }
}
```

## Codex와 Claude Code 설정

`FIGMA_BRIDGE_ROOT`가 올바른 파일시스템 위치를 가리키도록, 구현할 앱 프로젝트 루트에서 실행하세요.

```bash
codex mcp add figma-cost-optimizer-bridge \
  --env FIGMA_BRIDGE_ROOT="$PWD" \
  -- npx -y decrease-token-figma
```

```bash
claude mcp add -s local figma-cost-optimizer-bridge \
  -e FIGMA_BRIDGE_ROOT="$PWD" \
  -- npx -y decrease-token-figma
```

등록 확인 또는 제거:

```bash
codex mcp list
claude mcp list

codex mcp remove figma-cost-optimizer-bridge
claude mcp remove figma-cost-optimizer-bridge
```

브리지가 시작되면 `FIGMA_BRIDGE_ROOT`의 `AGENTS.md`와 `CLAUDE.md` 맨 위에 가드레일을 추가해, Figma 작업에서 `figma-cost-optimizer-bridge`만 사용하고 공식 Figma MCP로 폴백하지 않도록 안내합니다. 이 동작을 끄려면 `FIGMA_BRIDGE_WRITE_AGENT_RULES=0`을 설정하세요.

## 도구 충돌 방지

공식 `figma-mcp` 서버를 이 브리지와 함께 등록하지 않는 것을 권장합니다. 아래 명령으로 점검하고 정리하세요.

```bash
figma-bridge doctor
figma-bridge migrate-config --yes
```

브리지는 `get_design_context`, `get_figma_context`, `get_screenshot` 같은 compatibility alias도 제공하므로 일반 workflow에서 공식 Figma MCP 서버를 대체할 수 있습니다.

## 왜 로컬에서 실행하나요?

이 브리지는 호스팅 웹 서비스가 아닙니다. 다음에 접근해야 합니다.

- Figma Desktop local MCP: `127.0.0.1:3845`
- 캐시와 에셋을 저장할 사용자의 프로젝트 파일시스템
- 자동 준비되며 handoff 생성에 필요한 로컬 Ollama 분석

실제 설치와 실행은 npm 또는 GitHub를 사용하세요. GitHub Pages는 문서와 벤치마크 리포트 공개용입니다.

## 링크

- [GitHub 저장소](https://github.com/junseo2323/decrease-token-figma)
- [npm 패키지](https://www.npmjs.com/package/decrease-token-figma)
- [English page](./index.md)