Bearisbug

Quilt — AI skill for Claude Code

AI community

AI-native infinite-canvas design tool: describe an app, get multi-screen HTML designs on an infinite canvas, click through them as a prototype, and let your local coding agent read and write the canva.

How to install Quilt

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Bearisbug/Quilt and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Quilt does

Alternatives in AI

Cursor Talk To Figma MCP — TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code, Codex) and Figma, allowing Agentic AI to c 7k ★
Nodeterm — Node-based terminal manager for AI coding agents — tmux-backed terminals and parallel agent sessions as dragga 1.3k ★
Usage — macOS menu bar & Windows tray app pinning Claude Code, Codex & Antigravity quota, burn rate, and cost to your 301 ★

README

Quilt

AI-native infinite-canvas design tool.
Describe an app, get a set of consistent multi-screen HTML designs on an infinite canvas,
click through them as a working prototype, and let your local coding agent read and write the canvas over MCP.

English · 中文

Quilt runs entirely on your machine: one process, no accounts, no cloud backend. Data lives in `~/.quilt`. Generation goes through whichever channel you choose: your local Claude subscription (the `claude` CLI), an Anthropic / Gemini / OpenAI-compatible API key, or a Claude Code session you already have open.

What it does

Generate ("造"). Type what the app is. The planner lays out a 4–6 screen main flow (or exactly the number you pick, 1–4), each screen is generated as self-contained HTML against the project's design system, linted, screenshotted and placed on the canvas. Ask for up to 4 candidate versions per screen and adopt the one you like.
Edit ("改"). Select screens and describe the change. Edit at element level with zero tokens (text, style, link target), regenerate one subtree with AI, or pin annotations on elements and send them in a batch.
Chat ("聊天"). A conversational mode with per-project memory. The assistant looks at the project through Quilt's own MCP, decides its own scope, and writes back revisions attributed to the chat turn.
Infinite canvas. Screenshots tiled on a pan/zoom canvas, drag to arrange, multi-select alignment, positions persisted. Double-click a screen to focus it as a live iframe you can scroll, type into and click.
Prototype playback. Links, form actions and data-href buttons navigate between screens inside the focused iframe with state kept and a back stack. The app map is derived from the HTML; broken links are fla