Claude MarketplacesSubmit
nexu-io avatar

Mockup Device 3d

nexu-io/open-design

Renders iPhone and MacBook mockups entirely in CSS with real HTML content embedded on the screens instead of static images. Think product launch visuals or design portfolio pieces where you want actual UI running inside device frames. It builds the device chassis with transforms and gradients (titanium edges, glass highlights, floor reflections), then drops your content into mobile and desktop viewports at proper scale. Includes optional 8s turntable rotation. The whole thing lives in a single HTML file at 1920×1080, no external mockup PNGs. Good for when Figma exports feel too flat and you need something that looks like a GLTF render without actually loading 3D models.

skills.sh installs
2.8K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill mockup-device-3d --agent claude-code

Installs into .claude/skills of the current project.

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)。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Categories
Frontend Development, Code Review & Quality, Design & UI/UX
First seen
Jul 14, 2026

More from nexu-io/open-design

All 217

Recommended

More Frontend Development
1supabase avatarvitestsupabase/supabaseVitest API and config reference (Jest-compatible) — mocking with vi.*, spies, fake timers, coverage configuration, fixtures, snapshots, and test filtering. Use 2.8Kskills.sh installs
2copilotkit avatarcopilotkit-developcopilotkit/copilotkitUse when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handlin2.8Kskills.sh installs
3daymade avatari18n-expertdaymade/claude-code-skillsThis skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales)2.7Kskills.sh installs
4payloadcms avatarpayloadpayloadcms/payloadUse when working with Payload projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, secur2.7Kskills.sh installs
5nexu-io avatarimpeccable-design-polishnexu-io/open-designFollow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page 2.7Kskills.sh installs
6freshtechbro avatarscroll-reveal-librariesfreshtechbro/claudedesignskillsSimple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites req2.6Kskills.sh installs