Ruddle

The design tool for coding agents.

Download for MacSee how it works

Free trial, no card · macOS 27 or later

Why Ruddle

Ruddle is for the hundred small calls after your agent’s first draft.

How it works

Just say the word.

Ask for a screen in Ruddle’s chat, or in the terminal where your agent already lives. It makes the design right in your repo and starts drawing.

Claude CodeCodex

Bring your own agent

BYOA.

Whichever one you already use.

Ruddle doesn’t ship an AI of its own. It runs the Claude Code or Codex you already use, with your sign-in and your settings, in a chat right next to the canvas. Prefer something else? Keep your agent where it is. Ruddle’s skill and MCP server give it the same tools.

Your sign-in
Ruddle starts the claude or codex you installed, with your skills, MCP servers, and instructions.
No second AI bill
Your agent runs on the plan you already pay for. We’re not in the token business.
Other agents welcome
Anything that can run a command can use the ruddle command and the design-canvas skill.

Why it works

Your agent already speaks Ruddle.

A Ruddle design is a folder of HTML and CSS, the stuff coding agents have written more of than anything else. Figma and Sketch take orders from agents too, but your agent has to learn their API first and draw one call at a time. In Ruddle it just writes code, and that makes it quicker and a lot better at it.

In your repository

Your design lives next to your code.

A Ruddle design is a folder in your repository, next to the code it describes. Design changes go on your branch and into your pull request with everything else, and Ruddle compares every board with main, so reviewing a design works like reviewing code.

Yes, git blame works on pixels now.

Designing for Apple?

Liquid Glass, the real thing.

Designing for Apple platforms? Ruddle draws glass with the same system material your app uses, so the glass you approve looks like the glass you’ll ship. Import Apple’s UI kits for Sketch once, and your agent builds screens out of the real controls instead of guessing at them.

  • macOS
  • iOS
  • watchOS
  • visionOS

Native to the Mac

A real Mac app. Remember those?

Ruddle is built with AppKit and SwiftUI, with proper menus, real windows, and a shortcut for everything you do a hundred times a day. If you grew up on Sketch, you’ll feel right at home.

  • CComment on anything
  • IShow implementation status
  • ⌘commandKGo to a board
  • ⌥option⌘commandPPlay the prototype
  • ⇧shift⌘commandDEvery decision waiting for you
  • ⌘command.Hide the interface

Pricing?

Pricing.

RuddleFree trial, then monthly or yearly

€12a monththat’s €144 a year

Agent not included. You already have one.

Start your free trial

No card. The trial starts when you open your first design.

  • Unlimited designs and boards
  • Claude Code, Codex, or your own agent
  • Comments your agent answers
  • Alternatives and decisions
  • Comparisons with main and any branch
  • Clickable prototypes
  • Apple’s UI kits and Liquid Glass
  • Every update while you subscribe

Prices exclude VAT. In the US, Ruddle is $13 a month or $130 a year, before sales tax.

Questions

Fair questions.

Something else on your mind? Ask us. You’ll hear back from the people who make Ruddle.

You can. There, your agent drives a design app through an API it has to look up first. In Ruddle, it writes HTML and CSS into files next to your code, which it already knows well, and you review its designs where you review the rest of its work. It’s quicker that way and gets more right the first time.

Go forth and iterate.

Download for MacSee pricing

Free trial, no card · macOS 27 or later

rud·dle /ˈrʌd(ə)l/ noun Red ochre, the pigment shepherds use to mark their sheep. And an awesome design app.