ecomfe/tempad-dev

TemPad Dev – 소개

TemPad Dev는 Figma 디자인 파일과 코딩 에이전트(LLM 기반 코드 어시스턴트) 및 개발자의 IDE를 연결하는 오픈소스 Chrome 확장 프로그램입니다. 디자인의 CSS/JS를 검사하고, 레이아웃 데이터를 가져오고, AI 에이전트가 Figma 캔버스를 생성하거나 편집하고 선택한 디자인에서 직접 구현 코드를 생성하도록 할 수 있습니다.

핵심 기능

영역	할 수 있는 일	작동 방식
디자인 검사	Figma 파일에서 요소를 선택하면 CSS, Tailwind 스타일 객체, 변수, JSX/Vue 스니펫이 즉시 표시됩니다.	확장 프로그램은 로컬 MCP(멀티 클라이언트 프로토콜) 서버를 호출하며, 이 서버는 플러그인 API를 통해 Figma를 쿼리하고 `get_code`, `get_structure` 등을 반환합니다.
딥 선택 / 측정 / 스크롤	단축키 없이 중첩된 레이어를 드릴다운하고, 간격을 측정하고, 노드를 보기로 스크롤할 수 있습니다.	패널에 내장된 UI 도우미; 백그라운드에서 동일한 Figma API 호출을 실행합니다.
에이전트 기반 캔버스 편집	LLM(예: Claude, Qwen Code, Cursor, VS Code 에이전트)에게 화면 생성, 간격 조정, 타이포그래피 수정을 요청할 수 있습니다.	확장 프로그램은 MCP 도구(`apply_canvas`, `upload_asset` 등)를 노출하며, 에이전트가 이를 호출하여 Figma 문서를 읽고 씁니다.
디자인-투-코드	에이전트에게 선택한 Figma 컴포넌트를 코드베이스에 구현하도록 프롬프트하고, 컴포넌트 라이브러리와 스타일 규칙을 존중하게 합니다.	`figma-design-to-code` 스킬이 레이아웃, 에셋, 디자인 시스템 메타데이터를 제공하고, 에이전트가 시작 코드를 작성합니다.
플러그인 시스템	생성된 코드를 변환하는 작은 JavaScript 플러그인을 작성할 수 있습니다(예: Stylus 출력, CSS 변수를 Sass로 변환, 사용자 정의 스케일링 적용).	플러그인은 URL에서 로드되는 ES 모듈이며 브라우저의 로컬 저장소에 저장됩니다.

시작 방법

Chrome 웹 스토어에서 확장 프로그램을 설치합니다.
Figma 파일을 열고 요소를 선택한 다음 사이드 패널에서 코드를 확인합니다 – AI가 필요 없습니다.
AI 에이전트를 활성화하려면 설정 → 에이전트 통합 → MCP 액세스를 열고 에이전트 설정을 클릭한 다음 선택한 클라이언트(Claude, Codex, Cursor, VS Code 등)의 화면 지침을 따릅니다.
**Node 22/24/26+**가 설치되어 있는지 확인하세요. MCP 서버(@tempad-dev/mcp@latest)는 로컬에서 실행되며 127.0.0.1을 통해 확장 프로그램과 통신합니다.
(선택 사항) 코드 블록을 사용자 정의하려면 출력 플러그인을 설치하거나 작성합니다.

관심 있을 기술적 세부 사항

MCP 서버 – 확장 프로그램의 요청을 Figma 플러그인 API 호출로 변환하는 작은 Node 서비스(@tempad-dev/mcp). 함께 사용되는 버전: 확장 프로그램 0.23.1, MCP 0.11.0, 에이전트 플러그인 0.5.0.
스킬 – 에이전트가 호출할 수 있는 사전 패키지된 명령 세트(design-in-figma, figma-design-to-code). 리소스 검색, 캔버스 차이, 검증을 처리합니다.
지원되는 에이전트 – Qwen Code, Qoder, ZCode, Kimi Code, Pi, Hermes, 그리고 일반적인 “기타 에이전트”. 통합은 주로 UI 기반입니다. 확장 프로그램은 특정 모델에 고정되지 않습니다.
에셋 처리 – 생성된 PNG/JPEG/GIF 에셋은 로컬 Hub에 업로드됩니다. MCP 응답에는 캔버스 편집에서 참조할 수 있는 assetHash가 포함됩니다.
구성 – 선택적 환경 변수는 packages/mcp-server/README.md에 문서화되어 있습니다. UI 설정에서 CSS 단위, 변수 표시 모드, 딥 선택 등을 전환할 수 있습니다.

누구에게 유용한가?

프론트엔드 엔지니어 – 수동 토큰 변환 없이 Figma에서 정확한 CSS/JS를 빠르고 안정적으로 복사하려는 사람.
제품 팀 – LLM 기반 코딩 어시스턴트를 사용하고 디자인 시스템에 대한 안정적인 브리지가 필요한 사람.
디자인 시스템 관리자 – 에이전트가 디자인 카탈로그(get_design_system)를 읽고 코드를 동기화하도록 하려는 사람.
도구 빌더 – 브라우저 확장 프로그램과 외부 AI 클라이언트 모두와 통신하는 로컬 프로토콜(MCP)의 참조 구현을 찾는 사람.

더 알아보기

Chrome 웹 스토어 페이지 – 원클릭 설치.
Discord 커뮤니티 – 실시간 도움말 및 기능 토론.
에이전트 플러그인 README – 각 지원 클라이언트에 대한 자세한 설정.
소스 코드 – 저장소에는 확장 프로그램, MCP 서버, 플러그인 레지스트리가 포함되어 있습니다.

TL;DR

TemPad Dev는 Figma 디자인을 검사하고, AI 에이전트를 실행하여 캔버스를 편집하고, 시작 UI 코드를 생성할 수 있는 Chrome 확장 프로그램입니다. 에이전트가 호출할 수 있는 도구 세트(get_code, apply_canvas 등)를 노출하는 로컬 MCP 서버를 통해 작동합니다. 작은 JavaScript 플러그인으로 출력을 사용자 정의할 수 있으며, 전체 스택은 오픈소스이며 더 긴밀한 디자인-투-코드 루프를 원하는 개발자를 대상으로 합니다.