Velloo: 코딩 에이전트가 디자인할 수 있는 공간

코딩 에이전트에게 디자인할 장소를 제공하세요.

Velloo는 코딩 에이전트를 사용하여 디자인을 탐색하기 위한 오픈 소스, 로컬 우선(local-first) 캔버스입니다. 실제 컴포넌트에서 방향성을 시도하고, 스스로 또는 다른 사람의 피드백으로 다듬은 다음, 신뢰하는 것을 구현해 보세요.

Quickstart · Watch the film · Documentation · Contributing · Discussions · velloo.design

▶ 사운드가 있는 79초 분량의 필름 시청하기
·
게시된 보드 열기

모의(mocked)가 아닌 실제 실행: Claude Code가 빈 폴더에서 실행 중인 앱까지 Velloo 0.6을 구동합니다.

npm install -g velloo # 또는: pnpm add -g velloo
cd your-app # 또는, 새로운 것을 시작하기 위한 빈 폴더
velloo init # 위자드: 라우트, 컴포넌트 및 테마를 읽고 에이전트를 연결합니다.
...

에이전트가 MCP 설정 init을 가져오도록 에이전트를 재시작하세요.

대안을 탐색하고 피드백으로 다듬는 것이 좋은 디자인이 항상 작동해 온 방식입니다. 바뀐 점은 화면의 시작 지점입니다. 이제 코딩 에디터, 즉 에이전트 안에서, 심지어 아무도 디자인에 대해 이야기하기 전에 시작합니다. 처음 완성된 것처럼 보이는 작업 가능한 인터페이스가 도착하면, 그 대화는 건너뛰기 쉽습니다.

Velloo는 이를 레포지토리와 이미 사용하고 있는 에이전트로 가져와서, 코드가 들어오기 전에도 이 과정이 가능하게 합니다.

영화에서 보여주는 루프는 다음과 같습니다:

탐색(Explore). 하나의 프롬프트로 여러 방향을 제시하고, 실제 컴포넌트를 이용해 캔버스에 구성하며 에이전트가 자체 스크린샷과 비교하여 검토합니다.다듬기(Refine). 마음에 드는 부분에 댓글을 고정합니다. 에이전트가 그 댓글들을 처리하고 스레드에 답변하거나, 사용자가 직접 props와 스타일을 조정할 수 있습니다.게시 및 검토(Publish and review) (선택 사항). 보드를 Velloo Cloud로 전송합니다. 링크만 있으면 누구나 브라우저에서 댓글을 달 수 있고, 그 메모들은 캔버스로 돌아옵니다.배포(Ship). 에이전트가 선택된 화면을 프레임워크 네이티브 출력으로 읽고, 실제 애플리케이션 코드를 작성하며, 실행 중인 앱과 디자인을 비교합니다.

캔버스 아래에는 각 화면이 컴포넌트, props, 스타일로 이루어진 사람이 읽을 수 있는 JSON 트리 형태로 사용자가 소유한 폴더에 존재합니다. 사용자는 인터페이스를 보고, 에이전트는 동일한 구조를 읽어내며, 이것이 에이전트가 정확하게 변경하고 디자인을 코드로 옮기는 방식입니다. 개념 →

처음부터 시작하기(Start from scratch). 앱이 필요하지 않습니다. 컴포넌트 라이브러리를 선택한 후, 샘플 보드나 빈 캔버스에서 새로운 제품을 디자인합니다. 영화가 보여주는 방식과 같습니다. 화면 디자인 → 기존 화면 재디자인하기(Redesign an existing screen). 경로를 충실한 기준선으로 다시 만들고, 그 옆에 대안들을 탐색하며 실행 중인 앱과 비교합니다. 기존 페이지 포팅하기(Port an existing page) → 라이브 페이지에서 작업하기(Work from a live page). velloo capture로 공개되거나 로그인된 페이지를 캡처할 때 시작점이 경로가 아니라 브라우저일 경우 사용합니다.피드백에 따라 행동하기(Act on feedback). 에이전트에게 열린 댓글, 로컬 또는 게시된 링크에서 온 댓글을 전달합니다. Velloo Cloud → 선택된 디자인 구현하기(Implement the chosen design). 화면을 앱의 컨벤션에 맞춰 코드로 변환합니다. 디자인에서 코드까지 →

이 작업 방식의 배경에 대한 생각은 [Why I created Velloo]를 읽어보세요.

MCP를 통해 Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode, Windsurf 및 기타 MCP 클라이언트에 연결되며 macOS, Linux, Windows에서 실행됩니다. 프레임워크 네이티브하고 깊이 있는 기능까지 →

로컬 도구는 무료이며, 완전하고, 계정 등록이 필요 없으며, 원격 측정(telemetry)도 없습니다. 자체적으로 요청하는 유일한 것은 공개 npm 릴리스 버전의 익명적이고 최대 일일 확인입니다 (VELLOO_DISABLE_UPDATE_CHECK=1로 비활성화 가능).

Velloo Cloud는 선택적인 반쪽 부분으로, 명시적인 velloo login을 통해 접근할 수 있습니다. 게시된 보드, 검토 링크, 캔버스로 돌아오는 댓글, 호스팅된 에셋 생성 등이 포함됩니다. velloo publish는 사용자의 기기에서 렌더링한 것을 업로드하며, 클라우드는 절대 앱 코드를 실행하지 않습니다. 검토자는 설치, 리포지토리 접근 권한 또는 유료 좌석이 필요 없습니다. 플랜은 가격 책정 페이지를 참조하세요.

velloo.design/docs에는 가이드, 개념 및 참고 자료가 있습니다:
CLI · MCP 도구 · 디자인 폴더 · 테마 · 새로운 기능 · FAQ

Velloo 자체가 어떻게 구축되었는지에 대해서는 docs/를 참조하세요: 아키텍처, MCP 표면(surface), 프레임워크 어댑터 작성 방법, 리포지토리 외부에 보관된 디자인 등이 포함됩니다.

기여는 환영합니다 — 버그 보고서, 어댑터, 문서, 그리고 디자인 피드백 모두 좋습니다. CONTRIBUTING.md는 설정 및 우리가 녹색으로 예상하는 검사 항목을 다루며, AGENTS.md는 기본 구조를 변경하기 전에 패키지 레이아웃과 아키텍처 불변성(invariants)을 설명합니다.

bun install # 스냅샷 매니페스트도 빌드합니다
bun run --cwd packages/canvas build # 캔버스 SPA를 빌드합니다
bun run velloo init /tmp/velloo-smoke
...

좋은 첫 이슈는 good first issue로 라벨링됩니다.

질문, 아이디어 공유 및 시연 → Discussions 버그 및 기능 요청 → 이슈 생성 (open an issue) 보안 취약점 → SECURITY.md

— 공용 이슈를 제기하지 마세요 지침 → CODE_OF_CONDUCT.md

Velloo는 Apache License 2.0 하에 오픈 소스입니다.

Velloo 이름과 interlinked-frames 마크는 상표이며 코드 라이선스의 보호를 받지 않습니다. 코드는 자유롭게 포크할 수 있지만, Velloo 이름이나 로고로 파생된 결과물을 배포하지 마십시오. TRADEMARK.md를 참조하십시오.