The design harness for AI coding agents.
A design harness is everything around an AI coding agent that makes it work like a design tool: design guidance it follows, a live preview you judge it in, and a way to share the result. Prototo is a design harness for Claude Code and Codex. It gives the agent a native iOS project, Prototo's design guidance and a live iPhone preview, and turns the result into a link anyone opens natively on their iPhone.
What a harness adds to a coding agent
Claude Code and Codex are general coding agents. Out of the box they know how to write code, but nothing tells them what good design looks like for your app, where to show you the result, or how to get it onto someone's phone.
A harness supplies those three things. The agent stays the same. What changes is what it is told, what it can see and what happens to its work.
- Guidance: design rules the agent reads before and while it builds.
- Preview: a live view where the designer judges every change.
- Publishing: a way to put the result in other people's hands.
What Prototo's harness gives the agent
- A native iOS project that is already set up, so the agent starts from a working app.
- Design profiles (Warm, Utility, Editorial, Expressive) that set colors, typography, spacing and shapes for light and dark mode.
- Rules for hierarchy and composition: one clear primary action, deliberate type roles, room before borders.
- Native iOS patterns and motion that responds to the user, with Reduce Motion honored.
- Accessibility basics: Dynamic Type, 44 point touch targets and checked contrast.
- A DESIGN.md that records your design decisions so every change stays consistent.
- A review step: the agent checks the real preview before it presents the result.
Harness or raw agent
You can open Claude Code in a terminal and ask for an iPhone app. You will get code, but you still need to set up a project, run a simulator, judge the design on your own and find a way to share it. Each step is a reason a designer stops.
With a harness, the designer only does the design part: describe, look, decide. The rest is already wired up.
Harness or canvas
A canvas tool asks you to draw the design and then explain it to someone who builds it. A design harness skips the translation. What you see in the preview is the app, so what you share is what you designed.
Questions
What is a design harness?
A design harness is the setup around an AI coding agent that makes it work as a design tool: design guidance the agent follows, a live preview where the designer judges each change, and a way to share the result. Prototo is a design harness for Claude Code and Codex that builds native iPhone apps.
Why do AI coding agents need a design harness?
General coding agents can write an app, but they do not know your design direction, cannot show a designer the result as they work, and do not share it. A design harness adds design guidance, a live preview and publishing, so a designer can work with the agent without setting up code tools.
Does Prototo work with Claude Code and Codex?
Yes. Prototo Desktop runs Claude Code or Codex on the plan you already have, and adds Prototo's design guidance, a live iPhone preview and one-click publishing around it. Prototo does not charge for AI usage.
Is Prototo a design harness?
Yes. Prototo is the design harness for iPhone apps. It wraps Claude Code or Codex with design profiles, layout and accessibility rules, a live iPhone preview and Publish, which shares a link that runs natively on any iPhone.
Keep reading
Download Prototo for Mac. Free to build, and viewers get the free Prototo app on iPhone.