moda-mockup

moda-core

moda doctor --json

moda brand list

stale_revision

moda ask "<question>"

Settle viewport, fidelity, and screen count

1. Viewport decides grid, type sizes, and how much content fits: desktop app 1440×900, dashboard 1920×1080, landing-page mock 1440×2000+, tablet 1024×768, phone 390×844. Full table in references/mockup.md.
2. 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.
3. 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

   .
2. 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.
3. 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.
4. 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

   .
5. 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?
6. 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.

Errors

invalid_markup

width="fill"

stale_revision

moda ask "<what failed>" --context "<the error>"

References