mockup-device-3d

by nexu-io9.1k

iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图

Install

The skill file stays in the publisher's repository.

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

npx skills add nexu-io/html-anything --skill mockup-device-3d -a cursor -y

Download skill next/src/lib/templates/skills/mockup-device-3d/SKILL.md on GitHub

Related skills

View all

O
open-designThe 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work,
H
html-ppt-zhangzara-broadside|
H
html-ppt-zhangzara-block-frame|

Questions

How do I install mockup-device-3d?: Download next/src/lib/templates/skills/mockup-device-3d/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does mockup-device-3d live?: The publisher keeps it at https://github.com/nexu-io/html-anything.
Which agents can use mockup-device-3d?: Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.

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"

【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。

【硬性构图】