What is the mockup-device-3d skill?
The mockup-device-3d skill is a template in nexu-io/open-design called Device 3D Showcase. It tells your AI coding agent to build a single-file HTML scene of an iPhone and an optional MacBook, drawn with CSS and SVG, with real content rendered inside the screens.
The mockup-device-3d skill is an OpenDesign template named Device 3D Showcase. It produces a static iPhone and MacBook 3D-style scene with real HTML embedded on the screens, glass-lens refraction and a 360-degree turntable composition.
It is meant for product launches, app demos and design presentations. Your content is rendered inside the device screens, and CSS 3D transforms imitate the glass, highlights and refraction of a GLTF model.
The fixed composition
- Canvas of 1920 by 1080 with a dark radial gradient from #1a1a1f to #0a0a0f and a mirrored ground reflection at the bottom.
- iPhone 15 Pro on the left or center, tilted with rotateY(-12deg) rotateX(4deg), a silver bezel of #a8a8ad and a 56px screen radius.
- Optional MacBook Pro 14 inch on the right, slightly smaller, with rotateY(8deg) and a keyboard and trackpad drawn with CSS shadow lines.
- Two or three elliptical radial-gradient highlights at the top that imitate a morphing glass lens.
Where the screen content comes from
Text or data you provide becomes a mock app screen with a status bar, a title, a body and a bottom tab bar or home indicator. HTML you provide is embedded as is and scaled to fit the screen.
Who the mockup-device-3d skill is for
Best for
- Product launch visuals and app demos that need a device scene without a stock mockup image.
- Design presentations where the real interface should appear inside a phone or laptop, including HTML from a mockup or deck workflow such as Baoyu Design.
- Teams that want a single HTML file they can edit, with four palettes: charcoal, pearl, midnight blue and mocha.
- Scenes that use the optional turntable motion, with its easing and timing tuned using animation principles.
Not for
- Scenes built from external mockup images. The skill never uses an unsplash or dribbble link and draws every device in CSS or SVG.
- Placeholder demos. It requires real user data on the screens and rules out filler copy such as Your text here.
- Real GLTF models. The 3D look comes from CSS transforms and gradients, not from a model file.
- App screen artwork as generated images. The skill puts real HTML on the screens, so an image skill such as Imagegen Frontend Mobile suits that job.
How to install Mockup Device 3D Skill: iPhone and MacBook Showcase Scenes
od mcp install <agent>Connect OpenDesign to your agent
Run
od mcp install <agent>with your agent name, for exampleod mcp install codex. The README lists claude, codex, cursor, copilot, opencode and more.Or install from the app
In the OpenDesign desktop or web app, open the Plugin page to browse the marketplace and click Install.
Find the skill
The skill folder is plugins/_official/examples/mockup-device-3d and holds SKILL.md, example.html and open-design.json.
Use the example prompt
Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens.
Check that it loaded
Give the agent a short product brief. Expect a single HTML file with a tilted iPhone showing your content, an optional MacBook, glass highlights and a mirrored floor.
Key features
- Fixed 16:9 canvasThe scene is 1920 by 1080 with a dark radial gradient from #1a1a1f to #0a0a0f, and the aspect hint in the skill is 16:9.
- iPhone 15 Pro modelThe phone is drawn in CSS with a silver bezel of #a8a8ad, a 56px screen radius and a tilt of rotateY(-12deg) rotateX(4deg) translateZ(40px).
- Optional MacBook Pro 14A second, slightly smaller device sits on the right with rotateY(8deg), and its keyboard and trackpad use CSS shadow lines instead of keycap detail.
- Real HTML on screensUser HTML is embedded as is and scaled to fit, at a 375 by 812 mobile viewport for the phone and a scaled 1440 by 900 viewport for the laptop.
- Mock app from dataPlain text or data becomes a mock app with a status bar, title, body and a bottom tab bar or home indicator.
- Glass lens highlightsTwo or three elliptical radial gradients with rgba(255,255,255,0.4) at the center fading to transparent at 60% imitate a morphing glass lens.
- Ground reflectionDevices are mirrored under the scene with scaleY(-1) and a mask-image gradient from 0.4 black to transparent at 70%.
- Turntable animationAn optional 8s CSS keyframe named turntable swings rotateY between -12 and 12 degrees with ease-in-out, and prefers-reduced-motion can turn it off.
- Palettes and captionsChoose charcoal, pearl, midnight blue or mocha with no rainbow gradients, plus an optional product slug badge and a small caption for codename, date or version.
Frequently asked questions
What is the mockup-device-3d skill?
It is the Device 3D Showcase template in the nexu-io/open-design repository, listed under plugins/_official/examples. It instructs an AI coding agent to build a static iPhone and MacBook 3D-style scene with real HTML embedded on the screens, glass-lens refraction and a 360-degree turntable composition.
How do I install mockup-device-3d?
Run od mcp install followed by your agent name, such as od mcp install codex, to connect OpenDesign to the AI coding agent you already use. The template is the folder plugins/_official/examples/mockup-device-3d in nexu-io/open-design. You can also open the Plugin page in the OpenDesign app and click Install.
What size is the mockup-device-3d canvas?
The canvas is 1920 by 1080, a 16:9 frame. It uses a dark radial gradient from #1a1a1f to #0a0a0f with a mirrored reflection on the floor. The iPhone screen renders a 375 by 812 mobile viewport, and the MacBook screen renders a scaled 1440 by 900 desktop viewport.
Does mockup-device-3d use real 3D models?
No. The skill imitates a GLTF model with CSS 3D transforms, gradients and highlights. Every device is drawn with CSS or SVG, and the skill forbids external mockup images from sites such as unsplash or dribbble. The output is a single HTML file.
What goes inside the device screens?
Real content from you. If you provide text or data, the skill renders a mock app with a status bar, title, body and a tab bar or home indicator. If you provide HTML, it is embedded as is and scaled to fit. Filler copy such as Your text here is ruled out.
Does mockup-device-3d support animation?
Yes, as an option. An 8 second CSS keyframe named turntable swings rotateY between -12 and 12 degrees with ease-in-out and runs infinitely in alternate direction. The motion can be switched off with prefers-reduced-motion for anyone who needs a still scene.
Which color palettes does mockup-device-3d offer?
It offers four background palettes: charcoal, pearl, midnight blue and mocha. Rainbow gradients are ruled out. Captions and logos outside the devices use an Inter Tight or SF Pro style, while the text inside the screens adapts to the content you supply.
What license does mockup-device-3d use?
It is Apache-2.0 licensed. The template ships in the nexu-io/open-design repository, which GitHub lists under the Apache License 2.0, and it lives at plugins/_official/examples/mockup-device-3d in that repository. Use and redistribution follow the terms of that license.