Pencil - IDE 내 AI 디자인 도구

개요

Pencil은 IDE(Cursor, VS Code 등)에 통합되는 AI 기반 디자인 도구로, 디자이너와 개발자 간의 핸드오프 없이 작업할 수 있게 해준다.

핵심 기능

IDE 통합

• VS Code, Cursor 등 IDE 확장 또는 독립 앱으로 설치
• 디자인 파일(.pen)이 코드베이스에 저장되고 Git으로 버전 관리
• 디자인이 개발 워크플로우의 일부가 됨

AI 연동 (MCP)

• MCP 서버가 로컬에서 실행 - 클라우드 의존성 없음
• Claude Code, Codex, Gemini 등 AI 코딩 도구와 연동
• AI가 디자인 요소, 화면, 플로우를 병렬로 생성 가능 (AI Multiplayer)

Figma 호환

• Figma에서 복사/붙여넣기로 디자인 가져오기
• 벡터, 텍스트, 스타일 그대로 유지

코드 생성

• 디자인을 HTML, CSS, React 코드로 직접 변환
• IDE 내에서 미리보기 가능
• 디자인 캔버스와 코드 간 실시간 동기화

의미

"Cursor for Design"이라고 불리며, 디자인-개발 간 격차를 줄이는 새로운 접근방식. 특히 AI 코딩 도구와의 MCP 연동이 강점.