The interface

Mocky puts a great many controls on screen, and hardly any of them are labelled with a verb. That is deliberate — a canvas tool that spelled out what each button did would be a wall of text — but it leaves a gap this page fills: what each control actually does, which pairs of controls get confused with each other, and which ones spend tokens.

It is not a tour of the product. It assumes you can see the button; it tells you the part you cannot see.

---

How to read this page#

Every icon below is the real one, drawn from the same path data as the running interface (src/ui/Icon.tsx). If a button in your window looks like the icon in the table, it is that button.

Every label is quoted verbatim from src/i18n/en.ts and src/i18n/parts/*.ts. The French interface is not a translation of the English one — both are written — so if you run Mocky in French, read fr/interface.md instead of translating back.

Cost is the last column of every table:

There is a recap of every model control at the end of this page.

---

The main navigation#

The bar across the top of every route. Nothing here touches a project's contents; it is all navigation, theme and account.

Leaving a project is not free of consequence, even though the button is. Home, DESIGN.md, Media, Settings and Admin all unmount the project view, and its cleanup aborts the generation in flight and every repair attempt with it. If Mocky is mid-generation, that click cancels it.

The folded masthead#

Below md the row collapses to three controls: the sync indicator, the theme toggle, and Navigation menu, which opens a sheet. The sheet replays the same routes as 44-pixel rows, adds Docs as a link, and appends Sign out to the account row — the one label the wide header does not show, because there the account button is the sign-out button.

---

The projects page#

The header#

The selection bar#

Sticky, and only present in tick mode.

The tick boxes themselves are drawn, with a real underneath. That is not decoration for its own sake — a native checkbox paints the operating system's accent colour, the one colour on the page the theme cannot reach.

Lead, index, drafts#

The two folder dialogs#

New folder asks for a name (Folder name, placeholder Client, Drafts, To review…) and a list of projects to put in it. Create the folder stays disabled until both are filled, because a folder in Mocky is its projects: there is no record of an empty one to store.

File shows the existing folders as chips, offers a new-folder field, and adds Take out of the folder — but only when at least one of the chosen projects is currently filed, since otherwise the button would undo nothing.

---

The project toolbar#

Top-left of the canvas, and the densest thing in the product. Three defences keep it on screen: labels fold away below md, everything past Modify folds into More, and the row scrolls itself rather than pushing the page sideways.

1234567891011Enlarge

1Back1 / 11

Leaves the project — and aborts a generation in flight.

PreviousNext

1. Back Leaves the project — and aborts a generation in flight.
2. Link Pick an element in a screen and draw a cable to the screen it should open.
3. Modify Click an element and describe a change, or edit its text directly.
4. Interact Every preview becomes clickable at once.
5. Annotate Snip a region of a screen into the composer as a numbered reference.
6. Frame The iPhone frame around mobile screens. Greyed out when the project has none.
7. System The live design system: your tokens, and a way to recolour them.
8. Audit SEO and accessibility. Opening it evaluates nothing.
9. Motion Ultra Cut a film from the media library.
10. Demo Plays the prototype, in a device frame. See Demo mode.
11. Export A runnable Vite + React + Tailwind project, as a .zip.

The three that never fold#

The exclusivity is the point: all three modes make a click inside a screen mean something different, and two of them at once would make a click mean nothing.

The eight behind "More"#

Rendered as buttons at md and above, as menu rows below it — from a single list, so the two can never drift apart. More itself only exists below md.

The rule falls before Demo. The last two are the two ways to get something out of a project: a demo of screens that already exist, an archive of code that already exists. Motion Ultra is on the other side of it, with the modes and the panels, because it is the opposite operation — it makes something that did not exist a minute ago, out of the media library, and it opens a panel exactly as System and Audit do. Beside Export it read as a fourth output format, which is the one thing it is not.

It is still deliberately not in a screen's context menu. A cut is made from the media library; it does not read a screen and cannot be derived from one. Hanging it off a screen would promise a relationship the pipeline does not have, and the first thing the panel does — ask which pictures to use — would contradict it.

---

The canvas#

The zoom bar#

Bottom-left of the canvas from xl up; below that it moves to the top and tucks under the toolbar. Geometry, not taste: the bar is pinned to the left margin and the composer is a centred 672px block, so seven controls only clear it past roughly 1200px of window. Any narrower and the bottom-left corner sits behind the composer, which is opaque — which is how the only zoom control in the product came to be invisible on a laptop.

123456Enlarge

1Zoom out1 / 6

Around the centre of the view. Ctrl/⌘ + wheel does the same.

PreviousNext

1. Zoom out Around the centre of the view. Ctrl/⌘ + wheel does the same.
2. Zoom in Around the centre of the view.
3. Fit all Frames every screen, and keeps doing so until you move the view.
4. Latest screen Frames the most recent screen.
5. Arrange Repacks the board by each screen’s real size.
6. Cables Shows or hides the cables between screens outside link mode.

What the mouse does#

The hint in the top-right corner says it, and changes with the mode. Written out once:

• Drag on empty space — marquee selection. Hold a modifier to add to it.
• Space, or middle-click drag — pan.
• Wheel — pans. Ctrl or ⌘ + wheel — zooms. A trackpad pinch arrives as the second, which is why it means zoom.
• Double-click a screen — that one screen becomes interactive, and says so with an Interactive — click outside to leave badge. This is not the same thing as the Interact toolbar button, which does it to all of them.
• Right-click a screen — the context menu.

Cables between screens#

Every link is drawn as a cable, like a mind map: it leaves the element it was placed on and lands on the edge of the screen it opens, with the element's text written along it.

• Outside link mode the cables are a map: faint, behind the frames, deaf to the pointer, so they never steal a click from a screen. The zoom bar's Show the cables between screens / Hide the cables between screens turns that map on and off.
• In link mode they come to the front and become controls. Pick an element in a screen and a cable follows the pointer; the screen under it lights up, and a click — or letting go, if you dragged — plugs it in. Choose from the list is the keyboard way to the same choice, and Esc or a click on empty space cancels.
• An existing cable can be selected, removed (Remove the link (Delete key)) or reconnected: drag the socket at its end onto another screen.

The cables are routed around the frames rather than through them, and several leaving one screen fan out instead of piling up.

---

A selected screen's frame#

Select exactly one screen and a small bar appears above it. Select two and it disappears — every action in it is about one screen.

Drag any of the eight handles to resize; the pixel size is printed under the frame while it is selected.

The badges#

They sit beside the name, and three of them show even when the screen is not selected — a screen behaving unusually should say so without being clicked.

The cards beside the frame#

When a screen was built with a Muse image, that image sits in the grid to the right of the frame — outside its bounds, so it never covers the design. Below a certain zoom it is not drawn at all, on the grounds that an illegible card that sweeps across its neighbours is worse than no card.

The badge under the picture names its role, which is the thing you cannot see by looking at it:

• Placed — the image is in the screen, as a real .
• Inspiration — the image is not in the screen. It was shown to the model as an art-direction reference: palette, light, composition.
• Placed + ref. — both.
• Muse image — the role was never written down. Not a fourth role: it is what a screen generated before the distinction existed says instead of guessing.
• Motion Ultra · N pictures — the screen was built by Motion Ultra, and the card is the first picture of its series. With several, frames are stacked behind it; clicking opens the viewer on the whole series (arrows, ← →, thumbnails).

Under it, the media attached to the screen, when there is one — an exported cut, or a scroll sequence. Attached, never used: none of it is in the screen's code, which is the whole distinction Change the media… keeps in two sections. The still is drawn by the browser out of the file itself, because no poster is cut for a cut (that would mean ffmpeg, the one dependency Motion Ultra deliberately does not have). Clicking it plays the cut; a sequence opens in Media, where the frame-by-frame player already lives.

A media the library has lost keeps its card, and the card says so: Media not found, and the caption tells you it is still attached until you detach it. That state is reached by the file failing to load — a deletion, or a hash belonging to another account — and it exists because the alternative was a black rectangle under the ordinary caption, which is also what a cut opening on a black frame looks like.

Under that, the design system this screen was actually generated from. The card holds one of two buttons, never both — which is why they are easy to mistake for each other: you only ever see the one that applies, and the other is what the same corner of the screen shows on a different screen.

When something was recorded, the little rendering above the swatches is itself a button: it opens the document full size, where the same Use this design sits beside Save as…. At canvas zoom that card is a postage stamp, and a design system is judged on its words rather than on eight squares of colour.

---

The screen context menu#

Right-click a screen, or use in its label bar.

The menu of a document, which opens on its own two items:

1234567Enlarge

1Download…1 / 7

A document only: PDF with fillable fields, PowerPoint / Google Slides, or PNG images.

PreviousNext

1. Download… A document only: PDF with fillable fields, PowerPoint / Google Slides, or PNG images.
2. Fit to page A document only: when content runs past a page, measures it and asks the model to win the space back. Kept only if it fits better.
3. Regenerate The same prompt again, for a different design.
4. Polish Checks the design against named rules and corrects what it finds.
5. Notes Private notes on this screen, never sent to a model.
6. Share A temporary public link and a QR code.
7. Delete screen One confirmation, and it is gone.

The three groups of small buttons#

At the bottom of the menu, three rows that look alike and are not.

Display format — Mobile · Tablet · Desktop · Full. Resizes the frame and tells later passes what device this is. Full means full height, fitted to the content. Free: no code is rewritten.

Add animations — Subtle · Moderate · Rich. Rewrites the code to add motion, keeping content and layout. Costs model, and is revertable.

Play animations — Auto · Yes · No. Decides whether the motion already in the code runs. Free. Three visible choices rather than one cycling label, because in a menu a single item that changes wording never shows you what the other states are.

The middle one spends tokens. The two beside it do not.

---

The composer#

The floating bar at the bottom. It is the only control in the product that changes verb depending on what is selected.

123456789Enlarge

1Format1 / 9

Mobile, Desktop or Tablet for a screen. For a document, the same chips become page formats.

PreviousNext

1. Format Mobile, Desktop or Tablet for a screen. For a document, the same chips become page formats.
2. Screen type The kind of screen or document; its structure guides the generation. It stays armed until you remove it.
3. New direction This prompt rewrites the project’s art direction. It unticks itself after the screen.
4. Muse Inspiration, an art direction, real copy and pictures for the next screen.
5. Motion Ultra A project setting: a storyboard and a series of pictures for each new screen.
6. Screenshots of a site Attach screenshots of an existing site to reproduce it or redesign it. They are never stored.
7. The prompt Describe the screen. Ctrl/⌘ + Enter sends it.
8. Improve Rewrites your few words into a complete brief for the chosen format and type. Back to your text undoes it.
9. Generate Creates the screen — or Update when screens are selected.

Screen type opens this menu — a screen type for a screen, or a document:

1234Enlarge

1What a type does1 / 4

It gives the model the structure of that kind of screen. Your words still come first, and the style stays your direction’s.

PreviousNext

1. What a type does It gives the model the structure of that kind of screen. Your words still come first, and the style stays your direction’s.
2. Documents to print or export Flyer, poster, report, documentation, résumé, invoice or quote, certificate, menu — fixed pages. See Documents.
3. Social media Instagram, Facebook and LinkedIn posts, in the platforms’ own sizes.
4. Screens Dashboard, planning, kanban, table, landing page, pricing, product, checkout, sign-in, onboarding, settings, messaging, booking, article, portfolio.

The chips above the field#

Above those sit the transient rows: numbered annotation thumbnails, each with a remove button that is visible at rest rather than on hover — hover does not exist on a phone, and a control that appears only on hover is not hard to find there, it is unreachable. And, when screens are selected, one chip per screen with Remove from selection, plus clear.

The field and its two buttons#

That one button doing two jobs is the single most common surprise in Mocky: if a screen is selected, you are editing it, and there is no new screen coming. clear next to the chips is the way out.

Screenshots of an existing site#

Attach up to four screenshots of a site that already exists — from the floating bar, or from the welcome card of an empty project — and choose what they are for. A prompt becomes optional — the screenshots are the request; a sentence can still say which page to build or what matters.

Pictures inside a screenshot (photos, illustrations, logos) cannot be lifted out of it — they are the site's, and they are never stored. What they show can be: the reading step lists up to six of them (section, subject, shape), and each gets a replacement from the composer's Images choice — a free photo that a vision model picks among thumbnails (or refuses them all), or a generated one. Each lands where the original was. One that finds nothing, and every picture past the sixth, stays a block of the same size and dominant colour, and a sentence says how many. A redesign with Muse on takes its pictures from Muse's dossier instead, so there are never two sets. Logos and icons are drawn as SVG or text.

A full-page capture is cut, in the browser, into near-screen-shaped parts of 1 280 px wide with a slight overlap, because a 1 440 × 9 000 page shrunk whole to a model's input size arrives 250 px wide with every line of copy unreadable. The thumbnail says ×5 when that happened. Eight parts in all per request.

The screenshots are never saved. They leave the browser in the one request that uses them and nowhere else — no upload, no library, no sync. A screen remembers that it was built from a site and in which mode, so Regenerate reuses the screenshots during the same session and, after a reload, says it needs them again rather than inventing a page from "Reproduce this site".

On a selected screen, attached screenshots are plain references like the annotations: the words say what to take from them. A model without vision is refused up front, with a sentence saying so.

---

The side panels#

All three open at the same place, on the right, under the toolbar.

Links#

Open with Link. Lists every link in the project, with a count.

System#

Open with System. Your DESIGN.md's colour tokens, as a palette and a rendered sample.

Audit#

Open with Audit. One screen at a time, chosen from thumbnails — thumbnails already captured, never taken here, because a capture needs a same-origin iframe and running model-written code on Mocky's own origin is not something a panel should do as a side effect of opening.

Two things the panel says out loud rather than in a tooltip. Source-only analysis: the score is about markup and what classes declare, so a 100 does not mean "conformant". And a family row can read not applicable or not measured instead of a number — a screen with no form and a screen whose forms are perfect produce the same empty finding list, and only one of them has earned a score.

Findings marked Advisory — not corrected automatically have no Fix button by design; they are judgement calls the correction pass is not allowed to spend an iteration on.

The last block, Exported document, is not about the chosen screen at all. It is computed once for the project and repeated under every screen, because a Mocky screen is a component: it has no title, no language and no description, and those three exist only in the HTML the export writes. Nothing there has a Fix button either — the fault, when there is one, is in the project's name or in its product name, not in any screen's markup.

---

The Motion Ultra panel#

Open with Motion Ultra. A film for a screen. The ordinary answer is composed: a model builds each scene out of a catalogue of typed blocks over a ground that can move, and five ready-made compositions stay reachable by name — a slideshow, a banded screenshot, a phone-shaped cut, animated titling, a product spotlight. The render runs on the Remotion worker, not in this browser — and that worker is a separate, opt-in Docker service, so the first thing the panel does is say whether it is there. Why it is built that way is in Motion Ultra.

No film is made on its own. There are two ways to get one: Motion Ultra's Video background, which gives one section of each new screen a film rendered for it, and this panel, where you cut one by hand, revise one, or ask for another. (The composer's animation switch, which used to make a film for every screen when set to "forced", is gone: page animations are always on, and a screen is held still from its own menu.)

The feature was called "Video export" and the file names still are. That is deliberate and explained on the page above: what a user reads says Motion Ultra, what a developer greps says video.

An account the feature is not enabled for gets one terse sentence and nothing else: it learns nothing about how the instance is configured, nor about what a valid cut looks like.

The first control is Composition, and its default is Automatic. Six cards: automatic, then the five compositions, each with its name, one sentence saying what it makes, one saying what it requires, and its own bounds. The third line is the one that decides the choice — "animated titling" does not say that it uses no picture at all, and somebody who has just spent a minute choosing images should learn that before the click rather than after it.

Automatic is the default rather than an option further down the page, because it is the position that serves a brief best: the model reads your sentence and takes the composition built for it. On automatic there is nothing to render yet — the selection is what the model is given to work from — so the render button names that as the reason it will not fire, and a proposal is what decides the composition. The selector then moves to whatever came back.

Choosing one by hand changes the form under it, which is the point of choosing: a composition that uses no image shows no image picker and an Add a card button instead; a product spotlight shows a headline, three argument boxes and a call to action; a banded screenshot shows a band title and where the band sits, and no camera move at all, because a pan across a screenshot slides half the interface out of frame. Switching composition keeps your pictures and your words — nothing is dropped, and a scene count over the new composition's ceiling is reported so you can remove rows yourself.

There is one form, and two ways to fill it in — behind a switch, one visible at a time. Stacked, the two of them filled a 900-pixel window on their own, so the scenes, the running total and the render button all started below the fold on a panel nobody had touched yet. They are alternatives, not steps, and two open forms said the opposite. Which one you last used survives inside the open panel and is not remembered afterwards: it is a fact about the cut you are making now.

A proposal is a pre-fill, not a mode. What comes back is written into the same controls, all of them still live, and replacing a cut you arranged by hand asks first. A read-only preview would have to be taken whole or thrown away whole, and the first thing anyone wants to do with a proposed running order is move two scenes. The switch is about which assistant is on screen; neither of them is a state the timeline is in, and switching away loses nothing — a brief you typed, a picture you have not confirmed and a call still in flight all survive it.

Four things the panel states rather than implies, because each is a fact about your instance that changes what you get:

• Where the colours and the typefaces come from. They come from the project's art direction, they are shown under the composition cards — the swatches and the family names — and there is no control here to change them. Saying nothing would invite the opposite reading, that a colour setting waits further down; there is none, and there cannot be, because the schema a composed document is validated against has no theme key at all. Only what the direction actually states travels: a project whose accent was inferred rather than written shows no accent, and the composition uses its own default. With no direction, the panel says that instead.
• Whether the variants will really derive from your picture. With an Edit image profile configured they come out of an image-to-image model fed with your own image; without one they are born of the same text — same subject, another photograph. The sentence appears twice: before the click, from what the server promises, and afterwards, from what the answer actually did.
• {used} s of {max} s. Two minutes total, twenty scenes, and the button names the reason it will not fire rather than sitting there greyed out.
• Last scene: this transition never plays. The field is on every scene because the schema is uniform. Hiding the control would give one row a different shape from the others for no visible reason the moment anything is reordered.

When a render fails, the banner is a heading and a next step, never "the export failed". Four situations arrive as the same kind of error and send you somewhere completely different: the volume is full (shorten nothing — ask the administrator), the worker is unreachable (an instance setting, not your cut), the pictures left the library (replace those scenes), the render stopped answering (reopen the panel; it may have finished anyway). A fifth is not a failure at all — Some images are awaiting your confirmation means the server refused a picture nobody has looked at, which is the whole reason that guard is on the server and not in this panel.

Where the finished file goes, and the panel says it rather than leaving a download link that disappears with it: Media, under the Motion Ultra tab — attached to the project you cut it in, or to no project at all when you cut it from the standalone Media page. That tab carries the name of the feature, not of the object, because it is where the panel sends you and the two have to read the same. The object itself is a cut, the word this panel already uses in Propose a cut and New cut; a scroll sequence in the Videos tab is a sequence, and calling both of them a video is what made an export impossible to find in the first place.

---

Demo mode#

Demo plays the prototype full screen: click the linked areas to follow a flow, Back and Restart walk the history. The bar also switches screens without the links — Previous screen, the Go to a screen list, Next screen, or ← → — and each step counts as a followed link, so Back still works.

1234567Enlarge

1Exit demo1 / 7

Back to the canvas. Esc does the same.

PreviousNext

1. Exit demo Back to the canvas. Esc does the same.
2. Back The previous screen of the path you followed.
3. Restart Back to the first screen.
4. Device The line-drawn frame: a computer, a tablet or a phone by the screen’s size; a hand for a printed document, a phone feed for a post.
5. Screen switcher Previous, a list of every screen, next — or ← →. Each step counts as a followed link.
6. The screen Live and clickable: the linked elements take you to their screens.
7. Caption The size the screen was designed at, and the device it was given.

Device puts the screen in a line drawing of where it will be seen, chosen from its size — a computer, a tablet or a smartphone, in the interface's own ink. A document gets its own frame: a printed page is held in a drawn hand, and a social post is shown on a phone, in its feed or as a full-screen story (see Documents). A presentation has none, so the button is off there. The choice is remembered by the browser.

---

The modals#

Everything that opens over the canvas. The first is a dropdown rather than a dialog, and it is listed here because it is where the export decision is actually made.

The Element card, opened by clicking something in Modify mode, is the one place where three costs sit in one dialog:

• Text → Update — free when the text you typed is a unique verbatim match in the source, in which case it is a string substitution and lands instantly. When it is ambiguous, it silently falls through to a model edit.
• Recolor swatches — each one is a model edit of that element. They are one tap, which is exactly why they are worth flagging: a swatch that costs tokens looks identical to a swatch that does not, and the panel next door has swatches that do not.
• Or describe any change → Apply change — a targeted model edit. Ctrl/⌘ + Enter submits.

The note at the bottom of that card says the same thing in one line: text changes apply instantly when they are unique, other changes go through the model, everything is revertable from the screen menu.

---

Controls you will confuse#

This, not that#

The four correction passes#

Mocky can rewrite a screen for four different reasons, and the four are not interchangeable. Merging them is the tempting refactor, and it breaks all of them.

Read the middle row again: each instruction is fatal to the others.

• A slop finding is a styling problem. Hand it to a model told not to restyle and it returns the screen unchanged, having obeyed.
• An accessibility fix that restyles has failed even when every finding is gone, because a semantics correction came back as a redesign.
• And a repair that felt free to restyle would answer a compile error with a new design, which is not what anyone asked for while looking at a broken screen.

What they do share is the transport and the write-back conventions — an abort controller, a snapshot of the code checked again before writing, and a previous version so Revert to the previous version works — and the first three share the loop with its four stop conditions. That loop is runPolishLoop, and it is generic over its report type for exactly this reason: the stopping rules are worth having once, and the checks that feed them are not the same check. Fit to page measures progress in pixels rather than in rule ids, so it keeps its own single step.

---

Everything that spends tokens#

Nothing in Mocky calls a model on its own. Every entry below is a click, and this is the complete list.

And the notable absences — things that look expensive and are not: Evaluate in the audit panel with Deep analysis off, Suggest links, Use this design, Export, Download .tsx, a document's Download (the PDF, the .pptx and the PNGs are all built in your browser), Duplicate, Arrange, the whole System panel, opening the Motion Ultra panel, and every format, frame and playback toggle in the product.