NEWChats on branches, templates and design systemsChats on branches

Design in your repo, edited by Claude Code.

Boards, components and specs live as code in git. Say what to create, and Claude designs it on its own branch beside the canvas. Comment, check every render, and merge it like any pull request.

Sign in with GitHub Request an invite

Invite-only while we build · Works with any dc-runtime design repo

The DesignRepo editor: a chat's branch open, with the files and frame tree on the left, the board on the canvas with Select, Comment and Inspect in the toolbar, and the chat with Claude on the right, showing its reply and the files it edited.
How it works

One loop, and all of it in git

The same four steps for a new app and a one-word fix. Nothing leaves the repo, and every step leaves a branch or a commit you can point at.

  1. 01

    Say what to create

    Start on the home page: describe it, pick the repo, a design system and a template (mobile app, responsive, design system), and send.

    Mobile app design · library
  2. 02

    Claude designs on a branch

    Every chat starts its own branch in its own worktree, so several run at once. Claude reads your CLAUDE.md and skills and edits the boards and components.

    design/booking-flow · 4 files
  3. 03

    Comment, check, refine

    Comment on any element, inspect a component, reply in the chat. Render health runs after every turn and the visual diff shows what moved.

    health clean · 1a 6.4%
  4. 04

    Merge it like code

    The Changes pane drafts the commit message. Commit, then Create PR: the branch is pushed and the diff lands on the pull request.

    PR #128 → dev
acme/storefront-design · one chat, start to PRlog
# 1  say what to create: a prompt, a template and a design system
“Design a mobile app for booking a bike repair” · Mobile app design · library
# 2  Claude designs on its own branch, in its own worktree
→ design/booking-flow · Edited 4 files · boards/app/01 Booking.dc.html
# 3  checked after every turn, then compared with the base
→ render health 6 frames · clean     visual diff 1a 6.4% · 1b 2.1%
# 4  commit with the drafted message, then open the pull request
→ Commit “Add the booking flow” · Create PR #128 into dev
acme/storefront-designlog
“Design a bike repair app”
→ design/booking-flow
→ Edited 4 files
→ health clean · diff 6.4%
→ PR #128 into dev
Features

Everything a design needs to live in a repo

A canvas, Claude in a chat beside it, and the checks a pull request deserves. The new ones are what we built this season.

The DesignRepo home page: “What should we create?” over a prompt box with Repo and Design system pickers, a grid of templates (Blank, Mobile app design, Responsive design, Design system, more coming soon), and the projects across connected repos.
Start from a promptPick the repo, a design system and a template, and describe what you want. Projects from every connected repo sit below.
The Changes pane on a chat's branch: Create PR, the branch against dev, a drafted commit message (design: rework Home), Commit 1 file, the changed file and the frames it changes, beside the edited board on the canvas with the toolbar's Healthy render-health button.
Changes, like source controlThe open files, the frames they change and a drafted commit message. Commit, then Create PR.
The visual diff of a branch: frame 1b in the Heat mode, the changed pixels of the edited hero pill marked over the base, the modes Base, Head, Heat, Slider and Side by side, and the five changed frames in a rail.
Visual diffBase and head under a slider, a heat overlay or side by side, frame by frame.
Inspect mode: a template tile selected on the canvas and outlined, with the Details panel showing its file, the component it is set inside, its props as mounted and a reference to paste into a prompt.
Select, Comment, InspectThree modes over the same canvas: pick a frame, pin a comment on any element, or inspect a component's props and uses.
For teams

One source of truth, three ways in

Designers comment, Claude edits, engineers build from a citation. Everyone works on the same files.

Handover

A citation that doesn't move

Copy for dev turns a frame into the markdown a developer, or an agent, builds from: the pinned sha, the board and frame, the route, the parts and the acceptance. A later design change lands on a new sha, so the target being built stays put.

Copy for dev · 03 Checkout 3amd
## 03 Checkout · 3a · Payment
storefront-design@4f2a91c · app/boards/checkout/03 Checkout
route   /checkout/payment
parts   screens/checkout/Payment · patterns/OrderSummary
states  default · card declined · Apple Pay unavailable
accept  matches 3a at 1440 and 3a-p at 390 · health clean
Pricing

Free while we build it with you

You bring Claude: your Anthropic API key, or Claude Code on your own machine through drepo runner. We never bill for model usage.

Beta

invite-only

Freewhile in beta

  • Unlimited repos, projects and chats
  • Claude with your own API key or runner
  • Render health, visual diff, a11y lint
  • GitHub Action and MCP server
Request an invite

Team

later

Soonper seat, after the beta

  • Seats and roles
  • Single sign-on
  • Hosted runners
  • Priority support
Tell us what you need