개요
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 연동이 강점.