Documents and social posts

Most of what Mocky makes is a screen: a page of an app or a site, laid out for a viewport and meant to be clicked. A document is the other kind of thing it can make — a flyer, a report, a résumé, an Instagram carousel — and it is not a screen at a different width. It is a stack of pages of a fixed size, composed one by one like a sheet in a layout program, and it leaves Mocky as a file: a PDF, a PowerPoint deck, or images.

This page covers what changes when the thing you are making is a document, and the three things you can only do with one: download it, fit it to its page, and see it held in a hand or posted in a feed.

Making one#

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 type stays armed after the generation, and a project opens on the type and format of its latest screen: the next request in a project of flyers is a flyer too, not a web page. The ✕ beside the chip (Remove the screen type) goes back to screens, and that choice is remembered the same way.

A document skips what only makes sense for a screen: the planner, Motion Ultra, the scroll video and every animation — a page is printed at rest. Muse and the project's direction still apply, so a flyer looks like the rest of the project.

The types#

Each type gives the model the structure of that kind of piece. Your words win on any conflict, and the look stays your direction's.

Page formats#

The format chips show only the formats of the type's family: paper and slides for a document, social sizes for a post. A post laid out for a phone is not the same piece at A4, so the composer never offers the jump — and a format picked for a report does not follow you to the Instagram post typed next.

Paper sizes are in CSS pixels at 96 per inch, which map exactly to PDF points, so a page exports at its real paper size. Social sizes are the platforms' own pixels, so the exported image is the file they ask for, as it is.

The model is told the margins that must stay clear: 40 px on paper, past what an office printer cannot reach; 64 px on a post; and on a story, the top and bottom bands where the app draws its own bars.

Fields#

A blank someone fills in — a name, a date, a box to tick, a choice — is a field, not a drawn line. On the canvas it looks like the rest of the design; in the exported PDF it becomes a real form field, fillable in any PDF reader. Two fields with the same name on a recto-verso are renamed so both keep their own value.

The social types ask for none: nobody fills in an Instagram post.

Downloading#

A document's frame carries a Download pill, and the screen context menu a Download… item. Both open Download the document, with three buttons:

1234Enlarge

1The format1 / 4

The page format the document was laid out in. The file downloads directly — no print dialog.

PreviousNext

1. The format The page format the document was laid out in. The file downloads directly — no print dialog.
2. PDF To print or send. Text stays selectable; every field becomes a real form field.
3. PowerPoint / Google Slides To keep editing: the design as a picture, every text as an editable box. Open it in Google Slides from Drive.
4. PNG images To post: one image per page, in a .zip when there are several. A social post comes out at its exact pixels.

The file is built in your browser, page by page, and downloads by itself. A Save “{file}” link stays in the dialog, because a browser may block a second automatic download from the same page.

When something could not be exported perfectly, the dialog says so under the link rather than hiding it: content cut at the page edge, rotated text left in the picture of a slide, a page drawn by the fallback renderer, a picture or font that could not be embedded.

When content runs past the page#

A page has one size, and the model writes it without seeing it rendered: it can guess a height and guess it long. When text or a field ends up past a page's edge, Mocky says so — a notice names the document and the page — because on paper that content is simply cut.

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.

Right-click the document → Fit to page asks the model to win the space back. It is not an edit and not a polish:

1. The document is rendered off screen and measured the way the export reads it: how many pixels past which edge, and which words are outside.
2. The model gets those numbers and a strict instruction — tighten spacing, then pictures, then oversized type; keep every section, the copy, the palette and the number of pages.
3. The answer is rendered and measured again before anything is written.

One model call per click, never retried on its own. Adding a page is a different document, so it is left to you: ask for it in the composer.

Social posts#

A post is one image or a carousel of several: each is one image, swiped one at a time, and each must work on its own. The PNG images download gives them numbered, at the platform's size; for LinkedIn, the PDF download is a ready-made document post.

A story is sized 9:16, and the model keeps text out of the bands the app covers at the top (progress, name) and at the bottom (reply field).

In demo mode#

With Device on, the demo shows a document the way it will be seen:

• A printed document is held in a hand, drawn in the same line as the device frames, one page at a time with a pager under it.
• A social post is shown on a phone, in its feed: an author row, the picture at the full width of the screen, the actions and the caption — under the picture on Instagram, above it on Facebook and LinkedIn — and the next post starting. A carousel shows its counter and its dots; the arrows under the phone turn the pages.
• A story fills the phone's screen, with its progress segments and the reply field.
• A presentation has no frame: it is projected, not held.

A flyer, held:

1234Enlarge

1Device1 / 4

On for a printed document: it is held in a hand, drawn in the same line as the devices.

PreviousNext

1. Device On for a printed document: it is held in a hand, drawn in the same line as the devices.
2. The page The real document, one page at a time; a pager appears under it when there are several.
3. The hand Only the thumb lies on the sheet, along its edge; the rest of the page stays clickable.
4. Caption The page format.

A carousel, in its feed:

12345Enlarge

1Author row1 / 5

The feed drawn around the post: generic, in the phone’s ink — no logo, no copied interface.

PreviousNext

1. Author row The feed drawn around the post: generic, in the phone’s ink — no logo, no copied interface.
2. The post At the full width of the screen, where the platform puts it.
3. Carousel counter The page shown and the carousel’s length.
4. Actions and caption Under the picture on Instagram; above it on Facebook and LinkedIn.
5. Pages Turns the carousel’s pages. A story fills the screen instead.

The drawn app is deliberately generic — no logo, no copied interface. It says where the picture will live and leaves the eye on the picture.