# AI use cases for Quilt (Bearisbug/Quilt)

Repo: [Bearisbug/Quilt](https://github.com/Bearisbug/Quilt) | Use cases: 3 | Page: https://dedupedai.com/use-cases/bearisbug-quilt/

Quilt is a local, single-user AI design tool that generates multi-screen HTML app designs on an infinite canvas and lets a coding agent read and write that canvas over MCP.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Turn an app idea into a clickable multi-screen prototype: https://dedupedai.com/use-cases/bearisbug-quilt/prototype-app-from-description/
- Let your coding agent read and edit design screens: https://dedupedai.com/use-cases/bearisbug-quilt/let-coding-agent-edit-canvas-over-mcp/
- Set one brand palette and reuse shared navigation across screens: https://dedupedai.com/use-cases/bearisbug-quilt/build-shared-design-system-and-components/

## How to turn an app idea into a clickable multi-screen prototype with Quilt

Repo: [Bearisbug/Quilt](https://github.com/Bearisbug/Quilt) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README

Describe an app and get linked HTML screens you can click through and export as one offline file.

**Who it is for:** A founder or product builder with an app idea who needs a clickable mockup before writing any frontend code.

**The problem:** Writing a clickable prototype by hand takes time, and static mockups do not show how screens connect.

**The outcome:** A set of consistent HTML screens on an infinite canvas, linked into a playable prototype that can be exported as a single offline HTML file.

### Steps

1. Run `pnpm install` and then `pnpm build` in the Quilt repo folder.
2. Start the app with `node apps/cli/bin/quilt.js` and open http://127.0.0.1:3100.
3. In the composer, type what the app is and generate the main flow (4 to 6 screens, or pick 1 to 4).
4. Double-click a screen to focus it as a live iframe, then click through the links to test the flow.
5. Use the export action to save the whole prototype as one offline HTML file.

### Prompt to paste into your agent

```text
In the Quilt repo at <repo-path>, start the packaged app and generate a main flow for this app idea: <app-idea>. Report the screen names from the app map and list any broken links. Verify that the export produces one HTML file that opens without a server.
```

### Caveat

Quilt needs Node.js 22, a browser for screenshots, and a generation channel before the first screen can be produced.

Risk, credentials: If you add an Anthropic, Gemini, or OpenAI-compatible key, store it only in the settings panel or config.env on your own machine, since Quilt encrypts keys at rest but you control the file.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/bearisbug-quilt/prototype-app-from-description/

## How to let your coding agent read and edit design screens with Quilt

Repo: [Bearisbug/Quilt](https://github.com/Bearisbug/Quilt) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Connect Claude Code to Quilt over MCP so it can inspect and patch screens without losing others' edits.

**Who it is for:** A developer using a coding agent who wants the agent to revise existing design screens directly instead of copying HTML by hand.

**The problem:** Copying screen HTML between a design tool and an agent is slow, and two writers can overwrite each other's changes.

**The outcome:** The agent reads a compact outline, edits one part of a screen, and writes a new revision that is safe against stale bases.

### Steps

1. Start Quilt with `node apps/cli/bin/quilt.js` and keep it running.
2. Connect the agent with `claude mcp add --transport http quilt http://127.0.0.1:3100/mcp`.
3. Ask the agent to call `get_outline` first, then `get_screen` for the screen it needs.
4. Have the agent change part of a screen with `patch_screen`, passing the current revision ID as expectedRevisionId.
5. Open the canvas and check the new revision in the revision tree, then roll back with `restore_revision` if needed.

### Prompt to paste into your agent

```text
Using the quilt MCP server at http://127.0.0.1:3100/mcp, call get_outline, then get_screen for the screen named <screen-name>, and use patch_screen to change <change-description>. Report the new revision ID. Verify the write succeeded and that a stale expectedRevisionId returns a 409 response.
```

### Caveat

The MCP server binds to loopback only and has no authentication, so it is meant for the same machine.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/bearisbug-quilt/let-coding-agent-edit-canvas-over-mcp/

## How to set one brand palette and reuse shared navigation across screens with Quilt

Repo: [Bearisbug/Quilt](https://github.com/Bearisbug/Quilt) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README

Define tokens once and edit a shared tab bar or sidebar to update every screen that uses it.

**Who it is for:** A designer or developer who keeps the same navigation and colors across many generated screens and wants one place to change them.

**The problem:** Re-styling each screen by hand and fixing the same tab bar in ten places is error-prone.

**The outcome:** A design system with a brand palette and a shared component that re-bakes every screen that references it, with no model calls.

### Steps

1. Start Quilt with `node apps/cli/bin/quilt.js` and open the canvas at http://127.0.0.1:3100.
2. Set a seed color or an explicit light and dark brand palette in the design system panel.
3. Turn an existing tab bar, app bar, or sidebar into a project-level shared component.
4. Edit the component once, from the composer or by hand, and confirm every screen that uses it updates.
5. Save the design system as a preset to apply to the next project.

### Prompt to paste into your agent

```text
In the Quilt project <project-name>, update the design system with the brand palette <palette> using update_design_system, then edit the shared component <component-name> with edit_component. Report how many screens were re-baked. Verify that the active link is marked correctly on each route.
```

### Caveat

Shared components only update screens that reference them, so screens built without the component keep their own markup.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/bearisbug-quilt/build-shared-design-system-and-components/