Weft Studio

Design interfaces with your AI agent, on a live canvas.

Weft Studio is a desktop design tool where you and a coding agent work on the same screen. Describe what you want, watch the agent draw it, then move, restyle and rewrite it by hand. Every change lands in a readable HTML file.

Works with Claude Code, Codex, OpenCode and Antigravity, using the accounts you already have.

Download for Linux or Windows View on GitHub

Beta. Linux x86_64 (AppImage, .deb) and Windows 11 x64. Updates itself from inside the app.

The Weft Studio editor: a legal assistant landing page on the canvas with its headline selected, the style inspector on the right and the conversation with the agent on the left.

From a sentence to code you can ship

Each design is a frame on the canvas with its own agent and its own history.

  1. 1

    Describe it

    Ask for a screen in the chat. Try one, two or three directions at once, each with its own agent and model.

  2. 2

    Watch it appear

    The agent writes the design file and the canvas updates while it writes. It can ask you questions first.

  3. 3

    Refine by hand

    Select, drag and resize. Change text, colour and spacing in the inspector. Point the agent at elements you selected.

  4. 4

    Hand it to your code

    Your coding agent reads the design through a read-only MCP server and builds it into your project.

The design is a file you can read

No proprietary canvas format. A design is plain HTML with ids, variables and a small logic class, saved as design.ws.html and versioned with Git.

  • Agents write it with the tools they already use.
  • Exports open in any browser, as HTML or a ZIP with its assets.
  • Imports Claude Design .dc.html files.
<cw-if data-cw-id="00000a" test="{{ view === 'inicio' }}">
  <section data-cw-id="00001c" class="hero">
    <img data-cw-id="000036" src="./assets/statue-amparo-gray.png">
    <h1 data-cw-id="000020">{{ headline }}</h1>
  </section>
</cw-if>
<!-- one view of four; the canvas shows a frame for each -->
<script type="application/json" data-cw-props>
{ "view": { "type": "enum", "views": true,
    "options": ["inicio", "asistente", "privacidad", "perfil"] } }
</script>

Everything in one window

Five frames on the Weft Studio canvas: the same legal assistant landing page in light and dark, plus its assistant, privacy and profile views.
Multi-screen apps
One design can declare its views, such as home, pricing and contact, and the canvas shows a frame for each.
Your own assets
Upload images, GIFs and videos to a design. The agent knows they exist and uses them.
Versions
Every valid agent turn saves a version. Restore or discard from the frame's history.
Comments and Present
Pin comments to elements, then present the design full screen, live and interactive.
Export
Readable HTML with its runtime, a ZIP with assets, or PNG and JPEG pictures of a frame or a selection.
Projects
A home screen with covers, renaming and trash, so finished work stays out of the way.

Download

Get the latest beta from the releases page. You need git and at least one agent with its account; the welcome screen finds the ones you have and offers to install the rest.

Linux x86_64Weft-Studio-<version>-x86_64.AppImageMake it executable and open it.
Debian / Ubuntuweft-studio_<version>_amd64.debsudo apt install ./weft-studio_<version>_amd64.deb
Windows 11 x64Weft-Studio-<version>-x64-Setup.exeInstalls for your user, without admin rights. Not code-signed yet: check it against SHA256SUMS.txt.