메뉴
iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
推特金句 / 数据卡, 适合配推文
小红书风格知识卡片, 多张联排可滑动浏览
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
| name | mockup-device-3d |
| zh_name | iPhone × MacBook 立体展架 |
| en_name | Device 3D Showcase |
| emoji | 📱 |
| description | iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图 |
| category | poster |
| scenario | product |
| aspect_hint | 1920×1080 (16:9) |
| featured | 47 |
| tags | ["device","mockup","iphone","macbook","html-in-canvas","product"] |
| example_id | sample-mockup-device-3d |
| example_name | iPhone × MacBook 立体展架 |
| example_format | markdown |
| example_tagline | HTML-in-Canvas 设备秀 |
| example_desc | iPhone 屏幕 + MacBook 屏幕都嵌入真实 UI 内容, 玻璃镜头折射 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · vfx-iphone-device |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"product","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】 【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。
【硬性构图】
radial-gradient(#1a1a1f → #0a0a0f), 底部反射地面 (mirror gradient)。transform: rotateY(-12deg) rotateX(4deg) translateZ(40px); 边框钛金属银 #a8a8ad (实心 4px) + 屏幕圆角 56px; 屏幕内嵌 iframe-like div, 真实渲染用户的 HTML 内容 (mobile viewport 375×812)。rotateY(8deg); 上盖屏幕嵌入桌面 viewport 内容 (1440×900 缩放); 底座键盘 + trackpad 用 CSS 阴影线条绘制 (不画键帽细节)。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%)。【屏幕内容来源】
【可选附加元素】
@keyframes turntable rotateY -12 ↔ 12, ease-in-out infinite alternate; 可被 prefers-reduced-motion 关闭。【设计细节】
Inter Tight / SF Pro 风格; 设备内根据用户内容自适应。<div class="screen"> + Tailwind 渲染内容。