Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →gooseworks-ai/create-chatgpt-mockup
Render pixel-accurate ChatGPT mobile (iOS) screen mockups in light mode from a thread JSON. Supports user text bubbles, user image attachments, assistant markdown prose, citation chips, the OpenAI spiral logo, the Apps-SDK GPT chip in the composer, and three header styles (model-tag, plain title, "Get Plus"). Fixed 9:16 viewport. Outputs HTML + PNG.
Passed 15 of 19 test cases with the skill, and 3 of 19 without it.
and 21 more in the full report
14 fixed3 passed either way5 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
Provide the exact command line invocation for render.js passing input file spec.json, saving output under ./builds with folder slug release-v2.
| Checked | Without skill | With skill |
|---|---|---|
| Includes --thread spec.json in CLI command | Missed | Passed |
| Includes --output ./builds in CLI command | Missed | Passed |
| Includes --name release-v2 in CLI command | Missed | Passed |
The instructions your model reads when the skill loads.
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.
Compose a thread.json matching the schema below, then pass it to render.js.
{
"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,
test cases passed, vs 3 / 19 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.