Skip to content

Getting Started

Your first wireframe in five minutes. Assumes the plugin is already installed (see the main README for install steps).

1. Create a code block

In any note, type a fenced code block with the ui-sketch language tag:

```ui-sketch
screen:
  - button: { label: "Hello" }
```

Switch to Reading view (Cmd/Ctrl+E). You see a button.

2. Add a viewport frame

By default, the sketch renders at desktop width (1200px). Override it:

viewport: mobile
screen:
  - button: { label: "Sign in" }

Valid viewports: desktop (1200px), tablet (768px), mobile (375px), or custom with explicit width: and height:.

3. Stack components vertically

screen: is an array. Items render top-to-bottom:

screen:
  - heading: { level: 1, text: "Welcome" }
  - text: { value: "Sign in to continue." }
  - input: { placeholder: "Email" }
  - button: { label: "Continue", variant: primary }

4. Arrange side by side with row

Wrap items in a row to lay them out horizontally. col does the reverse for nesting:

screen:
  - row:
      gap: 16
      items:
        - card: { title: "Revenue", body: "$12,400" }
        - card: { title: "Users",   body: "342" }
        - card: { title: "Errors",  body: "0" }

gap: controls the spacing in pixels. Inside a col, you can set flex: to proportionally size columns (flex: 1 vs flex: 3 makes a 1:3 ratio).

5. Common props every component supports

Any component accepts these on top of its own props:

button:
  label: "Save"       # component-specific
  w: 160              # width (px or "50%")
  h: 40               # height
  align: center       # start | center | end
  pad: 12             # padding
  note: "Saves draft" # hover tooltip (ⓘ indicator appears)
  muted: true         # de-emphasized look
  id: primary-save    # optional identifier

See YAML Reference for details.

6. Add a note

note: is handy for design annotations — it adds a hover tooltip with a little ⓘ marker, so you can explain intent without cluttering the visual:

screen:
  - button:
      label: "Delete account"
      variant: danger
      note: "Requires password confirmation in follow-up modal"

Next steps

If something doesn't render the way you expect, check Troubleshooting — the plugin surfaces detailed error messages, and most mistakes have clear fixes.