pen.dev 운영 중

pen.dev는 코딩 환경에서 실행되는 디자인 캔버스로, 개발자는 이곳에서 제품 인터페이스를 만들고 페이지 흐름을 탐색하며 디자인과 코드를 연결된 상태로 유지할 수 있습니다. 디자인 파일은 .pen 형식으로 코드 저장소에 저장되며, Git을 사용해 버전, 브랜치 및 병합을 관리할 수 있습니다. 또한 디자인을 HTML, CSS 또는 React로 변환할 수 있습니다. MCP를 통해 캔버스를 읽고 쓰는 기능도 제공합니다.

프런트엔드 개발자

IDE에서 직접 페이지와 컴포넌트를 디자인하고 결과물을 HTML, CSS 또는 React로 변환하여 디자인 도구와 코드 환경 사이의 전환을 줄일 수 있습니다.

AI 코딩 도구를 사용하는 개발자

Cursor, VSCode, Claude Code 또는 OpenAI Codex를 통해 캔버스 기능을 호출하고 인터페이스를 생성하거나 여러 페이지 방향을 동시에 탐색할 수 있습니다.

디자인 시스템을 보유한 개발팀

코드 저장소의 기존 디자인 시스템을 캔버스에 연결하고 컴포넌트 기반 디자인 키트로 인터페이스를 구축하여 디자인과 구현의 일관성을 유지할 수 있습니다.

무한 디자인 캔버스

IDE에서 제품 인터페이스를 만들고 조정할 수 있으며, 픽셀 단위 배치를 지원해 디자인과 코드가 항상 가까운 작업 환경에 있도록 합니다.

AI 페이지 및 흐름 생성

프롬프트를 통해 완성된 페이지나 전체 인터페이스 흐름을 생성하고, 여러 AI 어시스턴트가 서로 다른 디자인 방향을 동시에 탐색하도록 할 수 있습니다.

컨텍스트 기반 디자인 작업

전체 화면이나 일부 영역을 대상으로 요구사항을 입력하고 사전 설정된 작업으로 빠르게 조정할 수 있으며, 처음부터 사용자 지정 작업을 작성할 수도 있습니다.

디자인을 프런트엔드 코드로 변환

캔버스의 디자인을 HTML, CSS 또는 React로 변환하여 개발자가 시각적 구상을 실제로 사용할 수 있는 애플리케이션 구현으로 발전시킬 수 있도록 합니다.

디자인 파일 버전 관리

.pen 파일로 디자인 내용을 저장해 코드 저장소에 넣고, 개발 코드와 마찬가지로 Git을 사용해 버전, 브랜치 및 병합을 관리할 수 있습니다.

Figma 디자인 가져오기

Figma 디자인을 직접 복사해 붙여넣고 벡터, 텍스트 및 스타일을 pen.dev로 가져와 계속 편집할 수 있습니다.

MCP 양방향 캔버스 작업

MCP를 통해 디자인 캔버스를 읽고 쓸 수 있으며, 데이터베이스, API, 차트 데이터 또는 Playwright, Puppeteer 등의 외부 소스와 연동할 수 있습니다.

코드 저장소에 존재하는 디자인 파일

디자인이 별도의 도구에 격리되지 않고 파일 형태로 프로젝트 저장소에 저장되므로 코드와 함께 버전 관리할 수 있습니다.

개방형 파일 형식

디자인 파일을 읽고 디버깅하고 확장할 수 있습니다. 공식적으로 폐쇄적인 형식을 사용하지 않으며, 개발자가 자신의 도구로 파일을 처리할 수 있습니다.

양방향 MCP 기능

캔버스 정보를 읽는 것뿐 아니라 완전한 쓰기 권한도 제공하여 외부 MCP, 데이터 소스 및 기타 에이전트가 캔버스 작업에 참여할 수 있도록 합니다.

디자인과 코드를 한 화면에서 작업

픽셀 단위 디자인 캔버스를 코딩 환경에 배치하여 개발자가 디자인과 구현 사이를 빠르게 전환하고 기존 디자인 핸드오프 과정을 줄일 수 있도록 합니다.

• 공식 홈페이지: pen.dev – Design on canvas. Land in code.
• 공식 가격 페이지: pen.dev – Design on canvas. Land in code.