domains / families / media / create-apple-notes-mockup
create-apple-notes-mockup
separate
Render pixel-accurate Apple Notes (iPhone, light mode) screenshot mockups from a JSON note spec. Outputs HTML + PNG at the iPhone 16/15 Pro native 1180×2556. Supports paragraphs, images, checklists, dividers, autocorrect underline, smart quotes, and an optional iOS keyboard chrome overlay used by the parent video-ad molecule.
When to use
- 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 an Apple Notes video ad drives frame-by-frame to fake a typ…
- 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 ad.
- Need a static "noted to self" beat in a storyboard.
When not to use
- rendering an iMessage thread
Skill page
Source