Mockup Device 3d
- 1.7k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
mockup-device-3d is an agent skill that static iphone and macbook 3d-style showcase with real html embedded on screens, glass-lens refraction, and 360-degree turntable composition.
About
mockup-device-3d is an agent skill from nexu-io/open-design that static iphone and macbook 3d-style showcase with real html embedded on screens, glass-lens refraction, and 360-degree turntable composition. 【模板: 设备 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: Developers invoke mockup-device-3d during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.
- 【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】
- 【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by
- 画布**: 1920×1080, 暖灰渐变背景 `radial-gradient(#1a1a1f → #0a0a0f)`, 底部反射地面 (mirror gradient)。
- 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
Mockup Device 3d by the numbers
- 1,680 all-time installs (skills.sh)
- +127 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #205 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: HIGH risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
mockup-device-3d capabilities & compatibility
- Capabilities
- 【模板: 设备 3d 展架 (device 3d showcase / html in canv · 【意图】产品发布、app 演示、设计稿展示。把用户提供的 ui 内容真实渲染到 iphone / · 画布**: 1920×1080, 暖灰渐变背景 `radial gradient(#1a1a1f · macbook pro 14"** (可选第二台): 右侧, 略小, `rotatey(8deg · 玻璃 / 镜头光斑**: 顶部加 2 3 个 `radial gradient(ellipse,
- Use cases
- orchestration
What mockup-device-3d says it does
【模板: 设备 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)。
npx skills add https://github.com/nexu-io/open-design --skill mockup-device-3dAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.7k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- 1920×1080 device showcase image
- iPhone and MacBook poster composition
By the numbers
- Outputs 1920×1080 (16:9) static device showcase compositions
- Featured catalog entry with featured score 47 in open-design
Files
【模板: 设备 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 turntablerotateY -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"。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Device 3D Showcase · HTML-in-Canvas</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
body {
font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
background: radial-gradient(ellipse at 50% 40%, #1a1a22 0%, #08080c 70%);
color:#f5f5f7;
min-height:100vh;
margin:0;
}
.stage { perspective: 1800px; }
.iphone {
width:280px; height:580px;
border-radius:46px;
background:linear-gradient(140deg,#3a3a40 0%,#a8a8ad 35%,#1f1f24 60%,#5a5a60 100%);
padding:7px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 60px 80px -20px rgba(0,0,0,0.7);
transform: rotateY(-14deg) rotateX(4deg) translateZ(40px);
transform-style: preserve-3d;
}
.iphone-screen {
width:100%; height:100%; border-radius:40px;
background:#0a0a0e;
overflow:hidden; position:relative;
color:#f5f5f7;
}
.notch { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:108px; height:28px; background:#000; border-radius:18px; z-index:5; }
.lens {
position:absolute; pointer-events:none;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, transparent 60%);
mix-blend-mode: screen;
}
.mbp {
width:520px;
transform: rotateY(10deg) rotateX(-2deg) translateZ(-20px);
transform-style: preserve-3d;
}
.mbp-screen {
width:100%; height:320px;
border-radius:14px 14px 4px 4px;
background:linear-gradient(135deg,#222229 0%,#0a0a0e 100%);
border: 12px solid #1a1a1f;
border-bottom: 16px solid #1a1a1f;
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7);
overflow:hidden;
position:relative;
color:#f5f5f7;
}
.mbp-base {
width:560px;
height:14px;
margin:-2px auto 0;
background:linear-gradient(180deg,#3a3a40 0%,#1a1a1f 80%);
border-radius:0 0 14px 14px;
box-shadow: 0 30px 40px -20px rgba(0,0,0,0.8);
}
.mbp-notch {
position:absolute; top:0; left:50%; transform:translateX(-50%);
width:90px; height:8px; background:#000; border-radius:0 0 8px 8px; z-index:5;
}
.ground {
position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:1100px; height:140px;
background: radial-gradient(ellipse at center top, rgba(0,0,0,0.6) 0%, transparent 70%);
}
.chip { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; }
</style>
</head>
<body class="flex flex-col items-center justify-center p-14 min-h-screen relative overflow-hidden">
<!-- caption -->
<header class="absolute top-10 left-12 right-12 flex items-baseline justify-between chip opacity-60">
<span>HTML ANYTHING — CODENAME ATLAS — v0.4</span>
<span>2026 SPRING</span>
<span>HTML-IN-CANVAS</span>
</header>
<!-- devices -->
<div class="stage relative flex items-end gap-20" style="z-index:2">
<!-- iPhone -->
<div class="iphone relative">
<div class="iphone-screen">
<div class="notch"></div>
<!-- status bar -->
<div class="flex items-center justify-between px-7 pt-3 text-[10px] font-semibold relative" style="z-index:6">
<span>9:41</span>
<span class="flex items-center gap-1">▮▮▮▮ 5G</span>
</div>
<!-- header -->
<div class="px-6 pt-10">
<div class="chip opacity-60">新建任务</div>
<h2 class="text-[22px] font-bold mt-1 leading-tight">杂志风网页<br/>PPT</h2>
</div>
<!-- template tile -->
<div class="mx-6 mt-5 rounded-xl p-3 flex items-center gap-2.5" style="background:linear-gradient(135deg,#1a1a22,#222229);border:1px solid rgba(255,255,255,0.06)">
<span class="text-xl">📰</span>
<div class="flex-1">
<div class="text-[12px] font-semibold">杂志风网页 PPT</div>
<div class="text-[10px] opacity-60">16:9 横向翻页 · 9 帧</div>
</div>
<span class="text-[10px] opacity-50">✓</span>
</div>
<!-- input -->
<div class="mx-6 mt-3 rounded-xl p-3" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);min-height:140px">
<div class="text-[12px] opacity-90">// 公司 2026 Q1 路线图</div>
<div class="text-[11px] opacity-60 mt-1">- 推出 200 个新模板</div>
<div class="text-[11px] opacity-60">- 接入 28 个本地 agent</div>
<div class="text-[11px] opacity-60">- 周活 12K → 80K</div>
</div>
<!-- CTA -->
<div class="mx-6 mt-3 rounded-full py-3 text-center text-[13px] font-semibold" style="background:linear-gradient(135deg,#ff7849,#d97757);color:#08080c">⌘ + Enter 转换</div>
<!-- tab bar -->
<div class="absolute bottom-0 left-0 right-0 flex items-center justify-around py-3 backdrop-blur" style="background:rgba(10,10,14,0.85);border-top:1px solid rgba(255,255,255,0.06)">
<span class="text-[10px] flex flex-col items-center gap-0.5" style="color:#ff7849">■<span>任务</span></span>
<span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">▤<span>模板</span></span>
<span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">◌<span>设置</span></span>
</div>
</div>
<!-- lens flares -->
<div class="lens" style="top:-30px;left:-20px;width:160px;height:200px;transform:rotate(-20deg)"></div>
<div class="lens" style="bottom:50px;right:-30px;width:120px;height:160px"></div>
</div>
<!-- MacBook -->
<div class="mbp relative">
<div class="mbp-screen">
<div class="mbp-notch"></div>
<!-- top bar -->
<div class="flex items-center gap-1.5 px-3 py-1.5" style="background:#161620;border-bottom:1px solid rgba(255,255,255,0.06)">
<span class="w-2 h-2 rounded-full bg-red-500"></span>
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
<span class="ml-3 chip opacity-50">localhost:3456 — HTML Anything</span>
</div>
<!-- 3-pane layout mini -->
<div class="grid grid-cols-[1fr_1.4fr_1.4fr] gap-2 p-2 h-[260px]">
<!-- sidebar -->
<div class="rounded-md p-2 text-[10px] opacity-80" style="background:#1a1a25;border:1px solid rgba(255,255,255,0.04)">
<div class="opacity-50 mb-1.5">任务 / 11</div>
<div class="space-y-1">
<div class="rounded px-1.5 py-1 truncate" style="background:rgba(255,120,73,0.18);color:#ff7849">● 杂志风网页 PPT</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">小红书图文卡</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">Hyperframes 视频</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">Keynote PPT · 产品介绍</div>
</div>
</div>
<!-- editor -->
<div class="rounded-md p-2 text-[10px] opacity-90" style="background:#10101a;border:1px solid rgba(255,255,255,0.04);font-family:'JetBrains Mono',monospace">
<div class="opacity-50">// 输入</div>
<div class="mt-1"># Open Design — 2026</div>
<div class="opacity-70">## Q1-Q4 关键指标</div>
<div class="opacity-70">- 模板: 75 → 200</div>
<div class="opacity-70">- WAU: 12K → 80K</div>
<div class="opacity-70">- Agents: 17 → 28</div>
<div class="opacity-70">- Stars: 4.2K → 25K</div>
<div class="mt-2 opacity-50">▍</div>
</div>
<!-- preview -->
<div class="rounded-md overflow-hidden relative" style="background:#002FA7">
<div class="absolute inset-0 p-3 text-white">
<div class="chip opacity-80">№01 / 22</div>
<div class="mt-2 font-black text-[16px] leading-tight">Designing<br/>intelligence on<br/>warm paper.</div>
<div class="absolute bottom-2 left-3 right-3 flex justify-between chip opacity-70">
<span>OPEN-DESIGN</span><span>BERLIN</span>
</div>
</div>
</div>
</div>
</div>
<div class="mbp-base"></div>
<!-- lens flares -->
<div class="lens" style="top:-40px;right:60px;width:200px;height:140px;transform:rotate(10deg)"></div>
</div>
</div>
<!-- ground reflection -->
<div class="ground"></div>
<!-- bottom slug -->
<footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between chip opacity-50">
<span>HTML-ANYTHING.DEV</span>
<span>GLTF · LIVE-HTML SCREENS · TURNTABLE</span>
<span>STAGE — 1920 × 1080</span>
</footer>
</body>
</html>
HTML Anything · 移动版界面预览
iPhone 屏幕展示一个 mock 新建任务页, MacBook 屏幕展示桌面版编辑器
iPhone 内容
- App: HTML Anything Mobile
- 顶部: 选择模板 → 杂志风网页 PPT
- 中间: 输入框 + ⌘+Enter
- 底部: Tab bar (任务 / 模板 / 设置)
MacBook 内容
- 桌面版三栏布局: 任务列表 / 编辑器 / 实时预览
标签
2026 SPRING · CODENAME ATLAS · v0.4
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use Mockup Device 3D for static HTML-embedded device posters; use Figma or GLTF pipelines when you need editable layered design files or animated 3D models.
FAQ
What does mockup-device-3d do?
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
When should I use mockup-device-3d?
During build frontend work for design & ui/ux.
Is mockup-device-3d safe to install?
Review the Security Audits panel on this listing before production use.