Pencil

Design

Free

Design on canvas. Land in code.

https://www.pencil.dev/ ↗2026-04-05 기준

플랫폼

VS CodeCursorOpenVSX

가격

현재 완전 무료. 향후 유료 플랜 도입 시 사전 고지 예정.

장점

+IDE를 벗어나지 않고 디자인과 코드를 동시에 작업
+별도 디자인 툴 없이 혼자 프로토타입 완성 가능
+현재 완전 무료

단점

−VS Code 계열 IDE 전용 — 다른 환경 미지원
−아직 초기 단계로 기능이 제한적
−향후 유료화 가능성 있음

무엇인가

Pencil은 디자인과 개발 사이의 간극을 없애기 위해 만들어진 도구다. 기존에는 Figma 같은 별도 디자인 툴에서 작업한 뒤 개발자가 이를 코드로 옮기는 과정이 필요했다. Pencil은 이 과정을 IDE 안으로 끌어들인다. 캔버스에서 직접 UI를 설계하면, 그 결과가 즉시 코드로 변환된다.

주요 기능

• IDE 통합 캔버스 — Cursor, VS Code, OpenVSX 환경에서 바로 실행 • 디자인 → 코드 변환 — 캔버스에서 그린 UI가 실제 동작하는 코드로 출력 • 프롬프트 갤러리 — 자주 쓰는 UI 패턴을 갤러리에서 불러와 재사용

이런 사람에게 유용

디자이너와 협업 없이 혼자 프로토타입을 빠르게 만들어야 하는 개발자, 또는 코드를 쓸 줄 알지만 Figma 같은 툴이 익숙하지 않은 경우에 특히 잘 맞는다. 프론트엔드 속도를 높이고 싶은 솔로 개발자에게 추천.

Integrations

MCP

Pencil MCP (내장) ↗

확장 설치 시 자동 실행. Claude Code가 .pen 파일을 직접 읽어 정확한 좌표·토큰 기반으로 컴포넌트를 생성.