create-chatgpt-mockup

create-chatgpt-mockup

Purpose

Generate single-frame ChatGPT mobile screens that read as real iOS captures — accurate header chrome, user/assistant message styling, composer pill, status bar, and the OpenAI spiral mark. Designed for use inside ad creatives, social posts, video storyboards, and product mockups.

If you need an animated, video-recorded chat reveal (bubbles popping over time, SFX, music bed, end card), use the molecule skills/molecules/create-chatgpt-video-ad. This atom only produces a single still frame.

Inputs

Compose a thread.json matching the schema below, then pass it to render.js.

Thread JSON schema

{
  "statusBar": {
    "time": "9:41",
    "dnd": false
  },
  "header": {
    "style": "model-tag",
    "title": "ChatGPT",
    "model": "5.1",
    "rightIcons": ["personPlus", "dottedCircle"]
  },
  "messages": [
    { "type": "user-image", "src": "assets/photo.jpg", "aspect": "square" },
    { "type": "user-text",  "text": "Make this face sunscreen better" },
    {
      "type": "assistant",
      "title": "Optional H1 with spiral logo",
      "feedback": true,
      "text": "Markdown-ish prose. **bold**, *italic*, ## H2, * bullet, 1. ordered, [[cite:Source +1]], [[icon:💡]] inline-icon."
    }
  ],
  "composer": {
    "placeholder": "Ask anything",
    "text": "Typed text to show with caret",
    "cursor": true,
    "streaming": false,
    "chip": { "name": "SeatGeek" }
  }
}

Field reference

statusBar

• time — string shown top-left (e.g. "9:41", "08:18").
• dnd — when true, renders a small moon glyph next to the time (matches iOS Focus-on indicator).

header.style — one of:

• "model-tag" — ≡ ChatGPT 5.1 ▾ ●● — used when a specific model is active.
• "title-only" — ≡ ChatGPT › ●● — the plain in-chat header.
• "plain-title" — ≡ Get Plus ✦ ●● — for the upsell/empty-state title.

header.rightIcons — array of icon keys, rendered left-to-right on the right side. Available: "personPlus", "dottedCircle", "edit", "more". Default is ["personPlus", "dottedCircle"] for model-tag, ["edit"] for title-only.