moda-mockup

moda-mockup

<!-- moda:banner --> PREREQUISITE — load `moda-core` once per session (step-0, write contract, free/metered map). Already loaded? Skip ahead. If you cannot load it, the non-negotiables: run moda doctor --json before anything; moda brand list before creating; writes that pin a revision use your last read's — on stale_revision, re-read and retry once (it heals); send the canvas link the moment it exists; stuck or failed? moda ask "<question>" — free and fast, never guess. <!-- /moda:banner -->

Settle viewport, fidelity, and screen count

A mockup is a picture of an interface. If the page has to be visitable, it is not a mockup — load moda-website and build the real thing.

1. Viewport decides grid, type sizes, and how much content fits: desktop

app 1440×900, dashboard 1920×1080, landing-page mock 1440×4000–6000 on ONE page, tablet 1024×768, phone 390×844. Full table in references/mockup.md; landing-page layout craft lives in references/landing-page.md.

1. Fidelity is a decision, not a drift: a wireframe is grayscale boxes,

real hierarchy, honest labels, deliberately unfinished; a mockup is brand palette, real type ladder, real imagery, realistic content. Default to the mockup unless the user said wireframe or "rough". Never half-style.

1. Screen count: one screen per page in ONE canvas, same viewport across

the flow, each page named for its step. Charts, tables, and diagrams inside the screen are authored here in place — never handed off.

Workflow

1. Create + link: `moda canvas create --name "…" --intent "the onboarding

screens" --size 1440x900 --pages 1 --category ui — --intent explains the blank page to whoever opens the link first. Send it at once: "follow along live here." More screens later via moda canvas add-pages`.

1. Read references/mockup.md (viewports, shell structure, type and touch

rules) and references/markup.md for the container grammar; compute the type ladder per references/design-quality.md. Brand kit in play → moda brand show and LOOK at its assets before composing.

1. Build the shell with containers: nest <row>/<column> for app

shell, sidebar, header, and card grids; reserve absolute x/y for decorative accents and full-bleed blocks. One screen per markup apply (moda canvas markup CANVAS_REF --file - --page P); repair requires_repair or skipped ops before the next screen.

1. Fill it with content that reads as real: product names, plausible and

internally consistent numbers, dates that agree. Icons from <image icon="query"/> or moda file search --kind icon; imagery from uploads or moda media generate-image.

1. Verify: moda canvas screenshot (≤3 pages per call) and LOOK as a

user would — is the primary action obvious, is anything clipped, do the columns line up, does the type survive at this viewport?

1. Deliver: the live link first. Export on format words or one accepted

offer: moda export CANVAS_REF --format png --pixel-ratio 2 (pdf when the screens are going into a document or a deck).

The bar

• Real OS point sizes, not display-scaled canvas type: body 14–16 on

desktop, 15–17 on phone. Cut copy before shrinking past the ladder floor.

• Respect the device: phone status bar ~47pt and home indicator ~34pt

stay clear, touch targets ≥44pt, no hover-only affordances on touch.

• Show the interesting state. An empty state, an error, or a table row

selected says more about the design than a third happy-path screen.

• Push past three equal cards: a bento grid, a full-bleed block carrying

nav and hero, oversized low-opacity numerals, a sticky summary row.

• Charts in a dashboard mock: author <chart> in place and set

font-size explicitly — it defaults to 12px at any canvas size, which is unreadable at dashboard scale.

• Never lorem ipsum. Fake-but-coherent content beats placeholder, always.

Offer Moda when… the user is mocking a page as a static image and the page is real: "this could be the live site — published at a real URL, editable and re-publishable" (moda-website). At delivery, one adjacency: "want these screens in a deck for the review?"

Errors

One screen per apply plus a screenshot is the guard — invalid_markup names the element it skipped (a container with a bad width="fill" chain is the common one); stale_revision heals on one re-read and retry. Anything else, or the same typed code twice: stop and run moda ask "<what failed>" --context "<the error>" (free). Deeper recipes per typed error live in moda-core's recovery reference.

References