설명
pen.dev는 High Agency Inc.의 에이전틱 디자인 캔버스이며, 이전에 Pencil(pencil.dev)로 알려졌던 제작자가 만든 제품입니다. 이 제품은 이제 단순한 정적 화면이 아닌 소프트웨어를 구축하기 위해 설계되었다고 설명합니다: 디자이너와 개발자는 AI 에이전트가 함께 디자인하고, 기존 작업을 개선하거나, 프롬프트에서 새로운 화면을 구축할 수 있는 열린 캔버스에서 작업합니다.
더 읽기
캔버스는 .pen이라는 열린 파일 형식으로 디자인을 저장하며, 이는 사람과 에이전트 모두가 읽고 편집할 수 있는 일반 JSON 파일로, 설명하는 제품과 동일한 코드베이스에 저장됩니다. 작업은 Figma와 Sketch에서 익숙한 도구인 펜 도구, 그라디언트, 컴포넌트 및 플렉스 레이아웃을 사용하여 수동으로 진행되거나, 에이전트에게 화면을 초안 작성, 개선 또는 확장하도록 지시하여 진행됩니다. 내장된 브라우저와 Chrome 확장 프로그램을 통해 사용자는 웹페이지, 앱 또는 디자인을 편집 가능한 레이어로 캔버스에 직접 가져올 수 있으며, 벡터, 텍스트 및 스타일을 포함한 Figma 파일도 직접 가져올 수 있습니다.
사용자는 자신의 모델을 캔버스에 가져옵니다: pen.dev는 Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek 및 Minimax와 함께 작동하며, 기존의 ChatGPT 또는 Claude 구독, API 키, MCP, WebMCP 또는 명령줄을 통해 연결됩니다. 동일한 MCP 링크를 통해 Claude Code, Codex, Cursor 또는 Antigravity와 같은 도구가 pen.dev의 CLI를 통해 헤드리스 디자인을 수행할 수 있으며, 캔버스를 전혀 열지 않고도 작업할 수 있습니다.
기타 캔버스 기능으로는 Vibe Shaders라는 실시간 셰이더 효과, AI Pen이라는 AI 지원 아이콘 및 일러스트레이션 그리기, 파일 간 공유 컴포넌트 라이브러리, 수천 개의 레이어 또는 수십 기가바이트의 콘텐츠와 함께 부드럽게 유지되도록 구축된 맞춤형 WebGL 렌더링 파이프라인이 포함됩니다. 완성된 작업은 PNG, JPEG, WEBP 또는 PDF 형식으로 어떤 크기로든 내보낼 수 있으며, HTML 및 CSS 또는 Tailwind로 한 번의 클릭으로 내보내거나, 최신 버전을 모든 브라우저에서 열 수 있는 공유 가능한 링크로 내보낼 수 있습니다. 슬라이드 및 프레젠테이션 모드가 내장되어 있어 캔버스 작업을 덱으로 변환할 수 있습니다.
pen.dev는 현재 무료입니다; 회사는 유료 계획에 대해 청구하기 전에 명확하게 설명할 것이라고 말합니다. 다운로드 가능한 데스크톱 앱과 Chrome, VS Code, Cursor 및 OpenVSX용 브라우저 및 편집기 확장 프로그램으로 제공되며, a16z의 Speedrun 프로그램의 지원을 받습니다. 이는 도구를 전환하지 않고 시각적 디자인과 작업 코드를 오가고자 하는 제품 디자이너와 소규모 소프트웨어 팀에 적합하며, 순수 그래픽 디자인 제품을 찾는 팀보다 더 적합합니다.
- 카테고리AI UI/UX 디자인 도구
- 요금제프리미엄
- 배포데스크탑, IDE 확장, CLI
- 플랫폼macOS, Windows, Linux
pen.dev의 핵심 기능
에이전트가 본래 읽고 편집할 수 있는 열린 .pen 파일 형식
Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek 및 Minimax에 대한 사용자 모델 지원
Claude Code, Cursor 또는 Codex에서 헤드리스 디자인을 위한 MCP, WebMCP 및 CLI 연결
내장된 브라우저와 Chrome 확장 프로그램을 통해 편집 가능한 레이어로 웹페이지 가져오기
벡터, 텍스트 및 스타일을 보존하는 Figma 가져오기
수천 개의 레이어와 함께 부드럽게 유지되도록 구축된 맞춤형 WebGL 캔버스
실시간 시각 효과 및 그라디언트를 위한 Vibe Shaders
에이전트와 함께 아이콘 및 일러스트레이션을 생성하는 AI Pen
HTML/CSS/Tailwind 또는 PNG/JPEG/WEBP/PDF로 한 번의 클릭으로 내보내기
캔버스 작업을 덱으로 변환하기 위한 슬라이드 및 프레젠테이션 모드
pen.dev 사용 방법은?
다운로드: pen.dev 데스크톱 앱을 받거나 Chrome, Cursor 또는 VS Code 확장 프로그램을 추가합니다.
캔버스 시작: 빈 캔버스를 열거나 Figma, 웹페이지 또는 자신의 코드베이스에서 디자인을 가져옵니다.
모델 연결: Claude 또는 ChatGPT 구독으로 로그인하거나 API 키를 추가하거나 MCP를 통해 에이전트를 연결합니다.
디자인 또는 프롬프트: 펜 도구와 컴포넌트를 사용하여 수동으로 그리거나 에이전트에게 화면을 구축하거나 개선하도록 요청합니다.
효과 추가: 필요한 곳에 셰이더, 그라디언트 및 AI로 그린 아이콘을 적용합니다.
내보내기 또는 공유: HTML/CSS, 이미지 형식 또는 PDF로 내보내거나 최신 버전의 링크를 보냅니다.
pen.dev의 사용 사례
- 에이전틱 UI 디자인
- 디자인-코드 인계
- 웹 페이지 복제
- MCP를 통한 헤드리스 디자인
