mockup-device-3d

Skill

Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.

0Hardware

Install

git clone https://github.com/nexu-io/open-design.git ~/.claude/skills/mockup-device-3d

What is mockup-device-3d?

Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~35 tokens of context used while enabled, before you invoke anything

Documentation

README · ~1 min read

【模板: 设备 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)。

Reviews

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Skillssimilar to this one

All skills →

m5-onboard

End-to-end onboarding for a freshly-plugged-in M5Stack ESP32 device (Cardputer, Cardputer-Adv, Core, CoreS3, Stick) — detect on USB, flash UIFlow 2.0 firmware, and install the Claude Buddy MicroPython app bundle. Use whenever the user plugs in or wants to flash/provision/reset an M5Stack or ESP32 bo

32.8K stars

cardputer-buddy

Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add

32.8K stars

huggingface-spaces

Build, deploy, and maintain applications on Hugging Face Spaces — Gradio / Docker / Static SDKs, ZeroGPU and dedicated hardware, model loading, debugging, buckets, inference providers, community grants. Use whenever the user asks to create or host an app on Hugging Face, port code onto ZeroGPU, fix