Theme
Sign in Try it
NewBuilt-in MCP server

Say it.
Your agent mocks it up.

The design tool where your team and your agents work on the same board. Real HTML + Tailwind, multiplayer, with a built-in MCP server.

Try it, no sign-up Connect your agent
claude mcp add --scope user --transport http saymock https://app.saymock.com/mcp
You Design a 3-screen mobile onboarding for a running app.
Welcome
Run at your own pace

A plan that adapts to your runs every week.

Continue
Goal
What’s your goal? 5K 10K Half marathon Continue
Let’s go
First easy run
Tuesday5 kmPace 6:10 /km
Start
Claude checking the layout

Your agent, your account: Saymock never calls an AI model itself. Plug in Claude Code or any MCP client.

How it works

One sentence in, screens out. Then refine them together.

  1. 01

    Connect your agent

    One command adds Saymock to Claude Code or any MCP client. The agent acts with your permissions, in your workspace, and can read your code.

  2. 02

    Describe the screen

    The agent builds frames in HTML + Tailwind, checks a screenshot of the result and fixes layout issues before handing it back to you.

  3. 03

    Refine together

    Edit by hand while it works. Pin a comment that mentions @claude: it picks up the element, checks its work and replies in the thread.

Agents

Your agents, on the board

They show up in presence like any teammate, in their own color. Their edits are highlighted and undo separately from yours, and every request becomes a task tracked in its thread.

Kestrel / Onboarding TL Present Share
Layers ⌥1
Week
Hi, Léa
Today’s workout
Schedule
Start buttonClaude
Workout in progress
Summary
iPhone 15 · Week
9:41100%

Tuesday, November 5

Hi, Léa

Today’s workoutEasy run, 5 kmPace 6:10 /km · 31 min
  • Wed Rest
  • Thu Intervals 8 × 400 m
  • Sat Long run 14 km
Start workout 358 × 48
Claude editing
Tristan
TTristan · 2 min ago

@claude make the button full width and check it at 390 px.

Claude · just now

Done: added w-full, checked the layout at 390 px, no overflow.

DesignPrototypeHTML
Layout
W358
H48
X16
Y772
Classes
w-fullh-12rounded-xlbg-gray-900text-whitefont-semiboldmt-auto
Fill
#111827 gray-900
Layout OK · 0 issues

Your screens keep your design’s colors: only the interface around them wears Saymock’s.

Features

A real design tool, not an image generator

Native HTML + Tailwind

What you see is code: flex, grid, Tailwind v4, Lucide icons. Copy a screen’s HTML straight into your project.

Comments → tasks

Mention @claude on an element: the thread becomes a task your agent picks up from its inbox.

Layout checks

Overflows, elements a few pixels off center, empty elements: the audit flags them to the agent and to you alike.

Real-time multiplayer

Cursors, selections and presence for the whole team, agents included. Everyone undoes their own edits.

Playable prototypes

Link screens with data-goto, pick a transition and present them in a device frame.

Share by link

View, comment or edit, with expiry and revocation. Your guests don’t need an account.

Developers

The format your agent knows best

No coordinates to compute, no proprietary format: your agent reads and writes HTML with Tailwind classes. Repeated elements are written once as a template, and every element keeps its identity from one rewrite to the next.

  1. Add the server to Claude Code:
    claude mcp add --scope user --transport http saymock https://app.saymock.com/mcp
  2. In Claude Code, run /mcp and sign in to Saymock. Claude (web and desktop), Cursor and VS Code: Settings → Connect your agent.
  3. Ask for a screen. To handle your comments as you review, run /saymock:session.

MCP tools: create_frameedit_htmlupdate_nodesget_htmlget_screenshotcheck_layoutwait_for_tasksreply_comment

Pro plan · HTML
<div data-id="k2f9" class="flex flex-col gap-3 rounded-2xl bg-white p-6 shadow-lg">
  <h2 class="text-lg font-semibold">Pro</h2>
  <ul class="space-y-2">
    <template data-each="features">
      <li class="flex gap-2">
        <i data-lucide="check" class="size-4"></i>{{.}}
      </li>
    </template>
  </ul>
  <button data-goto="checkout" class="rounded-xl bg-zinc-900 py-3 text-white">
    Choose plan
  </button>
</div>
data-id keeps comments and selections · data-each repeats an element · data-goto links prototype screens

FAQ

Frequently asked questions

Do I have to pay for an AI on top?

Saymock never calls a model itself. You plug in your own agent, such as Claude Code: it works with your account and can read your code to design screens that are true to your product.

Which agents work with it?

Any client that speaks MCP over Streamable HTTP. A personal access token links the agent to your account and your workspace.

Are my designs real code?

Yes. Every screen is HTML with Tailwind v4 classes, no scripts. Copy it into your project, or ask your agent to build it in your stack.

Can I use it without an agent?

Yes. The editor stands on its own: frames and devices, a Tailwind inspector, layers, prototypes, comments and sharing.

Who can see my files?

The members of your workspace, and the people you send a share link to, with the role you chose: view, comment or edit.

Say it.
Your agent mocks it up.

Try it now