Mockup Device 3d
Turn real product UI HTML into a static iPhone and MacBook 3D showcase for landing pages, decks, and catalog hero shots.
Overview
Mockup-device-3d is an agent skill most often used in Launch (also Validate prototype, Build frontend) that converts real embedded HTML into static iPhone and MacBook 3D product showcases.
Install
npx skills add https://github.com/nexu-io/open-design --skill mockup-device-3dWhat is this skill?
- Static iPhone × MacBook turntable composition with glass-lens refraction styling
- Screens embed real HTML UI—not lorem placeholders—via HTML-in-canvas workflow
- Prototype mode with index.html preview, debounced reload, and 1920×1080 aspect hint
- Featured poster template tagged device, mockup, product; upstream ties to html-anything
- Example prompt enforces preserving visual signature while swapping in真实 content and data
- 1920×1080 (16:9) aspect hint
- Dual-device iPhone and MacBook composition
Adoption & trust: 690 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a working web UI but only flat screenshots or fake device chrome for launch and investor materials.
Who is it for?
Indie SaaS and app builders who already have HTML UI snippets and need premium device mockups without a 3D toolchain.
Skip if: Teams needing interactive WebGL apps, native iOS/Android store capture workflows only, or pure wireframe gray boxes without real UI.
When should I use this skill?
You need a static Device 3D Showcase from the open-design catalog: product poster scenario, real HTML on iPhone and MacBook screens, no lorem ipsum.
What do I get? / Deliverables
You get a 16:9 static showcase with authentic HTML on both device screens, ready for catalog, landing, or social distribution assets.
- Static 16:9 device showcase composition with embedded screen HTML
- Updated index.html or poster artifact preserving template visual signature
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Device mockups are canonical launch/distribution assets even though teams often draft them while validating or building the UI embedded on screen. Polished 16:9 product visuals support distribution, social, and catalog placement rather than backend implementation.
Where it fits
Frame an early index.html prototype inside iPhone and MacBook shells for a waitlist landing critique.
Snapshot the shipped dashboard HTML into device screens while iterating on component polish.
Export a catalog hero matching hyperframes-style device 3D for Product Hunt or investor deck.
Reuse the showcase template for changelog or feature announcement graphics with live UI embeds.
How it compares
Use as a fixed poster/device template skill, not a general Figma MCP or runtime 3D engine integration.
Common Questions / FAQ
Who is mockup-device-3d for?
Solo builders and small design-minded teams promoting a web or hybrid product who want iPhone and MacBook hero art with real UI on screen.
When should I use mockup-device-3d?
At Launch for distribution and catalog art; during Validate when prototyping landing visuals; at Build frontend when you want to preview marketing framing alongside live HTML.
Is mockup-device-3d safe to install?
It is a design template workflow over local HTML preview surfaces—review the Security Audits panel on this page and avoid embedding untrusted third-party scripts in showcase HTML.
SKILL.md
READMESKILL.md - Mockup Device 3d
【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】 【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。 【硬性构图】 - **画布**: 1920×1080, 暖灰渐变背景 `radial-gradient(#1a1a1f → #0a0a0f)`, 底部反射地面 (mirror gradient)。 - **iPhone 15 Pro 模型**: 左侧 / 中部, `transform: rotateY(-12deg) rotateX(4deg) translateZ(40px)`; 边框钛金属银 `#a8a8ad` (实心 4px) + 屏幕圆角 56px; 屏幕内嵌 iframe-like div, 真实渲染用户的 HTML 内容 (mobile viewport 375×812)。 - **MacBook Pro 14"** (可选第二台): 右侧, 略小, `rotateY(8deg)`; 上盖屏幕嵌入桌面 viewport 内容 (1440×900 缩放); 底座键盘 + trackpad 用 CSS 阴影线条绘制 (不画键帽细节)。 - **玻璃 / 镜头光斑**: 顶部加 2-3 个 `radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%)` 的椭圆 highlight, 模拟 morphing glass lens。 - **地面反射**: 设备下方 `transform: scaleY(-1)` + `mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%)`。 【屏幕内容来源】 - 用户提供的是文本/数据 → 自动渲染为一个 mock app 界面 (顶部 status bar + 标题 + body + 底部 tab bar 或 home indicator)。 - 用户提供的是 HTML → 原样嵌入屏幕 div 内 (注意缩放 transform 让它适配屏幕宽高)。 - 屏幕内 UI 用 Tailwind, 字号要按 mobile 真实尺寸 (text-sm / text-base, 不要 text-9xl)。 【可选附加元素】 - 右下角 "product slug" 角标: 大 logo + 一行 tagline + 副标 hairline。 - 顶部一行 caption (英文 sans, 字号小, 透明 0.6): 产品 codename / 日期 / 版本。 - 加 8s 自动 CSS 转盘: `@keyframes turntable` rotateY -12 ↔ 12, ease-in-out infinite alternate; 可被 `prefers-reduced-motion` 关闭。 【设计细节】 - **绝不**: 用外部 mockup 图片 URL (任何 unsplash / dribbble link), 全部用 CSS / SVG 绘制设备。 - 字体: 设备外的 caption / logo 用 `Inter Tight` / `SF Pro` 风格; 设备内根据用户内容自适应。 - 背景可选 4 套调色: charcoal / pearl / midnight blue / mocha; 不要彩虹渐变。 - 单文件 HTML; iframe 不要用 srcdoc 嵌套 (容易出问题), 用 `<div class="screen">` + Tailwind 渲染内容。 - 必须用用户真实数据填充屏幕内容, 严禁 lorem ipsum 或 "Your text here"。