ZSeven-W/openpencil

어떤 프로젝트인가요?

핵심 기능

• 01스트리밍 출력으로 텍스트 프롬프트에서 UI를 생성해 무한 캔버스에 바로 표시합니다.
• 02여러 에이전트가 각기 다른 페이지 섹션을 병렬로 디자인합니다.
• 03내장 MCP 서버를 Claude Code, Codex, OpenCode, Kiro 및 Copilot CLI에서 사용할 수 있습니다.
• 04사람이 읽기 쉽고 Git에서 관리하기 좋은 JSON `.op` 파일로 디자인을 저장합니다.
• 05React, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose 등으로 코드를 내보냅니다.
• 06`op` CLI와 임베드 가능한 읽기 전용 웹 뷰어 SDK를 제공합니다.

활용 사례

• AI 어시스턴트에게 설명해 UI 화면의 프로토타입을 만듭니다.
• 코딩 에이전트가 MCP를 통해 디자인 파일을 읽고 수정하도록 합니다.
• 수작업으로 다시 구현하지 않고 디자인을 프레임워크 코드로 변환합니다.
• 자체 웹 앱에 디자인 파일의 읽기 전용 뷰어를 임베드합니다.

빠른 시작

1. 1

   서브모듈을 포함해 저장소를 클론합니다

   git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
2. 2

   빌드에 필요한 사전 조건으로 Rust(stable)를 설치합니다

3. 3

   웹 개발 서버를 시작합니다

   bash scripts/start-web-rust.sh
4. 4

   또는 데스크톱 앱을 대신 실행합니다

   cargo run -p op-host-desktop

사용 전 알아둘 점

• !아직 초기 단계인 프로젝트이며 README도 계속 바뀌고 있으므로 다듬어지지 않은 부분이 있을 수 있습니다.
• !CLI와 ACP 에이전트는 네이티브 데스크톱 앱에서만 작동하며 웹 호스트에서는 작동하지 않습니다.
• !소스에서 빌드하려면 Rust와 서브모듈 설정이 필요하며, Windows용 별도 빌드 가이드도 필요합니다.

토픽

자주 묻는 질문

openpencil은(는) 무엇인가요?

프롬프트로 캔버스 생성, 병렬 에이전트 팀, MCP 서버, 코드 내보내기를 지원하는 오픈소스 AI 네이티브 벡터 디자인 도구 OpenPencil은 무한 캔버스에서 UI를 만드는 벡터 디자인 도구입니다. 사용자가 자연어로 페이지를 설명하면 AI가 캔버스에 바로 생성하며, 기존 요소를 선택해 채팅으로 수정을 요청할 수도 있습니다. 디자인은 JSON 형식의 `.op` 파일로 저장되므로 Git에서 읽고, diff를 확인하고, 버전 관리할 수 있습니다.

openpencil은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

openpencil은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

openpencil은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. openpencil의 마지막 커밋은 2026년 10월 19일입니다.

openpencil은(는) 어디에 사용할 수 있나요?

AI 어시스턴트에게 설명해 UI 화면의 프로토타입을 만듭니다. 코딩 에이전트가 MCP를 통해 디자인 파일을 읽고 수정하도록 합니다. 수작업으로 다시 구현하지 않고 디자인을 프레임워크 코드로 변환합니다. 자체 웹 앱에 디자인 파일의 읽기 전용 뷰어를 임베드합니다.

openpencil는 어떻게 설치하나요?

서브모듈을 포함해 저장소를 클론합니다: git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git 빌드에 필요한 사전 조건으로 Rust(stable)를 설치합니다 웹 개발 서버를 시작합니다: bash scripts/start-web-rust.sh 또는 데스크톱 앱을 대신 실행합니다: cargo run -p op-host-desktop

openpencil은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ZSeven-W/openpencil