Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Quilt는 AI 네이티브 무한 캔버스 디자인 도구로, 앱 설명만으로 일관된 다중 화면 HTML 디자인 세트를 생성합니다. 이 도구는 로컬에서 실행되며, 사용자가 프로토타입처럼 탐색하고 요소 레벨 편집 및 대화형 채팅을 통해 디자인을 개선할 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub AI Coding Assistants의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기Quilt는 전적으로 사용자의 기기에서 실행됩니다: 단일 프로세스, 계정 불필요, 클라우드 백엔드가 없습니다. 데이터는 ~/.quilt에 저장됩니다. 생성을 위해서는 선택한 채널을 통해 진행할 수 있습니다: 로컬 Claude 구독(<code>claude</code> CLI), Anthropic / Gemini / OpenAI와 호환되는 API 키, 또는 이미 열려 있는 Claude Code 세션입니다.
⌘K를 누르면 이름, 경로 또는 목적별로 화면으로 이동합니다; 화면 목록 패널은 끊어진 링크 / 보류 중인 후보 / 편차 / 진행 중인 항목별로 필터링할 수 있습니다; 미니맵은 모든 카드와 뷰포트를 보여줍니다.화면을 더블클릭하여 스크롤하고, 입력하고, 클릭할 수 있는 라이브 iframe으로 포커스합니다.
프로토타입 재생(Prototype playback). 링크, 폼 액션 및 data-href 버튼은 상태를 유지하며 백 스택을 통해 포커스된 iframe 내부의 화면들 사이를 탐색합니다. 화면을 오버레이 (bottom sheet, dialog)로 표시하면, 해당 화면을 열었던 화면을 대체하는 대신 그 위에 나타납니다. 화면에 상태 변형(state variants) (empty, error, logged out…)을 부여할 수 있습니다. 이는 동일한 경로와 레이아웃을 가지지만 재생 중에 전환 가능합니다. 앱 맵은 HTML에서 파생되며, 깨진 링크는 플래그가 지정되고 한 번의 클릭으로 수정할 수 있고, 누락된 경로는 지연적으로 생성될 수 있습니다. 전체를 단일 오프라인 HTML 파일로 내보낼 수 있습니다.
디자인 시스템(Design system). 시드 색상(seed color)은 Material 3 토큰 세트와 DESIGN.md 및 컴포넌트 레시피를 파생합니다. 명시적인 브랜드 팔레트(라이트 및 다크)로 재정의하고, 로고와 에셋을 업로드하며, 전체를 다음 프로젝트를 위한 프리셋으로 저장할 수 있습니다. 토큰을 변경하면 모든 화면이 결정론적으로 리플로우됩니다.
공유 컴포넌트(Shared components). 탭 바(tab bar), 앱 바(app bar) 또는 사이드바(sidebar)를 프로젝트 수준의 컴포넌트로 변환하여 화면 옆 캔버스에 배치할 수 있습니다. 화면들은 이를 참조하며, Quilt는 모든 작성 시 HTML을 채우고 경로별 활성 링크를 표시합니다. 컴포넌트를 한 번 편집하면 (수동으로, composer에서, 또는 MCP를 통해) 해당 컴포넌트를 사용하는 모든 화면이 모델 호출 없이 재구축됩니다.
리비전 트리(Revision tree). 모든 생성, 편집 및 에이전트 작성은 부모가 있는 리비전입니다. 어떤 버전으로든 롤백하고, 후보 브랜치를 유지하며, 나중에 채택할 수 있습니다.
채널(Channels). 설정 패널에서 생성 채널을 관리합니다: Anthropic, Gemini (AI Studio 또는 Vertex), OpenAI 호환 엔드포인트, 로컬 Claude 구독, 또는 실행 중인 Claude Code 세션. 키는 저장 시 암호화됩니다. 사용 내역 장부(usage ledger)가 작업별 토큰을 기록합니다.
MCP (Message Control Protocol), 양방향. 코딩 에이전트가 http://127.0.0.1:3100/mcp에 연결하여 54개의 도구와 7개의 리소스를 얻습니다. 이들은 캔버스가 수행할 수 있는 모든 것, 즉 디자인 계약서 읽기, 화면 및 스크린샷부터 화면 생성, 편집, 롤백, 배열 및 삭제, 컴포넌트, 에셋, 프리셋, 주석 관리, 작업(job) 및 프로토타입 내보내기까지 포함합니다. Quilt는 또한 실행 중인 Claude Code 세션에 작업을 위임하고 완료될 때까지 기다릴 수 있습니다.
Browser (React 19 canvas) ──REST / SSE──▶ quilt process (Hono, 127.0.0.1:3100)
◀─iframe────── preview origin (127.0.0.1:3101, read-only HTML)
├─ in-process job queue + worker (LLM, lint, inject, screenshot)
...
생성된 화면은 Tailwind 클래스와 프로젝트의 토큰을 가진 순수 HTML이며, 안정적인 요소 ID를 포함하여 편집 및 주석 처리가 서브트리(subtree)를 대상으로 할 수 있게 합니다. 미리보기 원본(preview origin)은 캔버스와 다른 원본이므로, 생성된 스크립트는 도구 자체의 저장소에 접근할 수 없습니다.
docs/DESIGN.md는 요구사항, 데이터 모델, API 계약, 상태 머신 및 ADRs의 단일 진실 공급원(single source of truth)입니다. docs/TEST.md는 모든 변경 사항이 검증되는 승인 장부(acceptance ledger)입니다.
요구사항:
npx playwright install chromium을 한 번 실행하세요.claude CLI (기본값, LLM_DRIVER=agent-sdk) 또는 Anthropic/Gemini용 API 키, 또는 설정 패널에 추가된 OpenAI 호환 엔드포인트 중 하나.pnpm install
pnpm build # 웹 번들 및 apps/cli/dist 빌드
node apps/cli/bin/quilt.js # 또는: npx quilt-canvas, 패키지가 게시된 후
최초 실행 시 ~/.quilt (임베디드 PGlite 데이터베이스, 객체 저장소, 생성된 비밀 정보가 포함된 config.env)를 생성하고 마이그레이션을 실행한 후 http://127.0.0.1:3100에서 캔버스를 엽니다. 같은 홈 디렉터리에서 다시 실행하면 모든 프로젝트가 복구됩니다.
플래그:
--home <dir>: 다른 데이터 디렉터리를 지정합니다.--port / --preview-port: (기본값 3100 / 3101)--no-open기본 채널을 전환하려면 ~/.quilt/config.env를 편집하세요:
LLM_DRIVER=agent-sdk # agent-sdk (로컬 Claude 구독) | anthropic | gemini
ANTHROPIC_API_KEY=
GEMINI_API_KEY=
pnpm install
cp .env.example .env # 임베디드 PGlite 사용을 위해 DATABASE_URL을 비워둡니다.
docker compose up -d # 선택 사항: DATABASE_URL을 유지하는 경우 127.0.0.1:5439의 Postgres
...
http://localhost:6688을 여세요. 마이그레이션은 API 시작 시 자동으로 실행됩니다. .env.example의 모든 키는 인라인으로 문서화되어 있습니다.
claude mcp add --transport http quilt http://127.0.0.1:3100/mcp
서버는 루프백(loopback)에만 바인딩되므로 인증 과정이 없습니다. 54개의 도구들은 캔버스에서 수행하는 모든 기능을 포괄합니다: 프로젝트 관련(quilt.list_projects, create_project, get_project, update_project, delete_project), 읽기 기능(get_outline, get_screen, get_screenshot, get_revision, list_revisions, list_candidates, get_design_contract, get_app_map, list_assets, list_annotations, list_messages, list_jobs, get_job, get_job_events, list_runners, list_design_presets), 화면 쓰기 기능(validate_screen, create_screen, update_screen, patch_screen, create_upload_url, append_upload, link_screens, move_screens, edit_element, restore_revision, adopt_candidate, delete_screen), 공유 컴포넌트(create_component, update_component, delete_component), 디자인 시스템(update_design_system, create_design_preset, apply_design_preset, delete_design_preset, create_asset, delete_asset), 모델 작업(generate_screens, edit_screens, regenerate_subtree, edit_component, propose_design_system, export_prototype, get_export, cancel_job, finish_job), 그리고 주석 관련(update_annotation, delete_annotation, send_annotations). 채널 설정(API 키)만 설정 패널에 남아 있습니다. 리소스는 다음과 같습니다: design-md, tokens, app-map, golden, screen-html, screen-screenshot, attachment.
에이전트가 권장되는 읽기 순서는 get_outline(모든 화면의 간결한 구조적 요약)을 먼저 수행하고 그 다음 get_screen(화면 본문)을 사용하는 것입니다. 쓰기는 작게 유지하세요: patch_screen으로 화면 일부를 변경(본문의 찾기/바꾸기), 그리고 여러 개의 append_upload 청크를 사용하여 ~8 KB 크기의 화면을 create_upload_url로 작성하는 것이 좋습니다. 하나의 긴 도구 인수는 스트리밍되는 모델 응답(
반대로 가려면, 컴포저에서 채널을 "hand to local Claude Code"로 선택하고 실행 중인 세션 중 하나를 고르세요. Quilt가 프롬프트를 해당 세션으로 전달하면, 세션은 동일한 MCP를 통해 응답을 작성하고 작업을 종료합니다.
apps/api Hono 서버: REST, MCP, SSE, preview origin, in-process worker, Drizzle 스키마 + 마이그레이션
apps/web Vite + React 19 + Tailwind 4 캔버스
apps/cli api + core + web의 esbuild 번들 → `quilt-canvas` npm 패키지
...
pnpm typecheck # core / api / web 전반에 걸친 tsc 실행
pnpm test # 단위 테스트 (node:test, 약 0.5초 소요, 데이터베이스 또는 브라우저 없음)
pnpm build # 웹 번들 + CLI 패키지 빌드
...
엔드투엔드(E2E) 스위트는 tests/e2e (core, proto, edit, agent, install, chat)에 있습니다. 이들은 연결된 데이터베이스를 초기화하므로, DATABASE_URL이 quilt_test를 가리키지 않으면 실행을 거부합니다. 실제 모델 호출을 하는 턴(turn)을 건너뛰려면 LIVE_LLM=0으로 설정하세요. 환경 세부 정보는 docs/TEST.md §3에 있습니다.
변경 규율은 다음과 같습니다: 먼저 docs/DESIGN.md를 업데이트하고, 그다음 코드를 수정하며, 그 다음 docs/TEST.md의 영향을 받는 케이스들을 업데이트한 후, 실행하여 결과를 기록합니다.
v0.45 버전으로, 로컬 단일 사용자 에디션입니다. 모바일 및 데스크톱 화면만 지원합니다. 다중 사용자 SaaS(로그인, 할당량, 원격 전송)는 보류되었으며, 제외된 기능은 다음과 같습니다: 실시간 협업, 프로덕션 React 코드 생성, 네이티브 렌더링.
Apache-2.0. LICENSE 참조.