Create Apple Notes Mockup

Superseded: the video kit now does this with the phone-chat part, version 1.1.4, in the parts folder of this repository. Every phone-chat style is a style file that draws the same screen frame by frame from the plan's scenes, with the original sounds, in the kit's browser. This atom stays, unchanged in behaviour, for skills outside the kit until they move; its scripts still run.

create-apple-notes-mockup

Generate Apple Notes screens that look like real iPhone screenshots — correct status bar, floating toolbar pill, bold title, body text with paragraph spacing, yellow text cursor, autocorrect underline, optional embedded images and checklists, and an optional iOS keyboard.

Purpose

Turn a JSON note spec into a pixel-accurate Apple Notes (iPhone, light mode) screenshot — HTML + PNG at the native 1180×2556 (DPR 2). It is the deterministic, no-LLM renderer that the create-apple-notes-video-ad molecule drives frame-by-frame to fake a typing animation, and a standalone tool for one-off "noted to self" beats in ads, social posts, and storyboards. The orchestrating agent owns the copy; this atom owns the fidelity (status bar, smart punctuation, cursor, autocorrect underline, toolbar, keyboard chrome).

When to use

• Need a fake Apple Notes screenshot for an ad, social post, video scene, or product mockup.
• Need a sequence of Apple Notes frames (title-only → adding paragraphs → cursor moves) to drive a typing-animation video — used by create-apple-notes-video-ad.
• Need a static "noted to self" beat in a storyboard.

If you're rendering an iMessage thread, use skills/atoms/messaging/create-imessage-mockup instead.

Inputs

The skill is deterministic — it does not embed an LLM. The orchestrating agent composes a note JSON matching the schema below, then invokes the renderer.

Note JSON schema

{
  "title": "Hello",
  "body": [
    { "type": "paragraph", "text": "This is a screen recording of me typing on apple notes app." },
    { "type": "paragraph", "text": "Let's see how this feels." }
  ],
  "cursor": "end",
  "autocorrect_underline": ["this", "how"],
  "status_bar": {
    "time": "9:41",
    "battery_pct": 87,
    "battery_low": false,
    "show_focus_glyph": false
  },
  "show_keyboard": false,
  "keyboard_state": {
    "suggestions": ["see", "go", "do"],
    "shift": "lower",
    "letters_row1": "qwertyuiop",
    "letters_row2": "asdfghjkl",
    "letters_row3": "zxcvbnm"
  },
  "with_iphone_frame": false
}

• title — string. Bold display headline, single line.
• body[] — block list. Supported block types:
  • paragraph — { "text": "..." }. Smart punctuation is auto-applied (' → ', " → ", ... → …, -- → –, --- → —).
  • image — { "src": "<path|url>", "caption": "optional" }. Relative paths are resolved against the spec file's directory and inlined as data URIs. examples/with-image.json uses a placeholder src; point it at an image of your own before rendering.
  • checklist — { "items": [{ "text": "...", "checked": true|false }] }. Checked items get yellow filled circles with strikethrough; unchecked get gray-outlined circles.
  • divider — horizontal rule.
• cursor — "title" | "end" | null. "title" places the yellow caret at the end of the title; "end" places it at the end of the last paragraph; null hides it.
• autocorrect_underline[] — exact-case word list. Each occurrence gets the Apple Notes mid-typing yellow underline (<span class="spell">).
• status_bar — time, battery_pct (0–100), battery_low (color battery red), show_focus_glyph (DND/car icon next to time). The Dynamic Island is not rendered.
• show_keyboard — true overlays the iOS QWERTY + formatting toolbar.
• keyboard_state — only consulted when show_keyboard is true. shift = "lower" | "upper".
• with_iphone_frame — adds a thin dark bezel inset (for hero compositions).

CLI

node render.js --note examples/mid.json
node render.js --note examples/long.json --output ./my-exports/ --name todays-note
node render.js --note my-note.json --with-keyboard
node render.js --note my-note.json --viewport 1080x1920   # 9:16 ad delivery size

Flags

Output

<output>/<YYYY-MM-DD>-<slug>/
  index.html       # full standalone HTML (images inlined as data URIs)
  screenshot.png   # rendered PNG at the chosen viewport × DPR
  spec.json        # copy of the input for reproducibility

Default <output> is ./apple-notes-mockup-exports/ in the cwd.

Workflow

1. Receive a prompt or existing note JSON.
2. If only a prompt was given: compose a note.json matching the schema, save it.
3. Run node render.js --note <path> [--with-keyboard].
4. Open the resulting PNG to verify the layout. If something looks wrong (wrong wrap, wrong cursor position, wrong battery color), edit the JSON and re-render.

Setup (one-time)

cd create-apple-notes-mockup
npm install
npx playwright install chromium

A symlink to create-imessage-mockup/node_modules ships with the repo, so on a fresh clone npm install is only needed if you want this skill to be self-contained.

Files