Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Mockup Device 3d · nexu-io | DecimalAI

nexu-io/mockup-device-3d

SkillScore50Maintained

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

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-mockup-device-3d/SKILL.md

decimalai skills pull nexu-io-mockup-device-3d --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-mockup-device-3d/SKILL.md https://app.decimal.ai/s/nexu-io-mockup-device-3d/SKILL.md

Raw file: /s/nexu-io-mockup-device-3d/SKILL.md ↗ · machine-readable summary at /s/nexu-io-mockup-device-3d.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

24 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

Yes — +17% lift · at higher cost+68% tokens0% turns50% of whole cases pass with skill (12/24)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-06	✗→✓	▲ Improved	12%	0%
case-11	✗→✓	▲ Improved	-10%	0%
case-13	✗→✓	▲ Improved	181%	0%
case-18	✗→✓	▲ Improved	246%	0%
case-19	✗→✓	▲ Improved	251%	0%

Showing 5 of 24 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/mockup-device-3d/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

【模板: 设备 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 turntable rotateY -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"。

Illustrative Want to see what nexu-io/mockup-device-3d would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 00:55 UTC · 24 cases

Lift

+17%

50% vs 33%

Agent turns

0%

1.0 vs 1.0

Tokens

+68%

6,551.88 vs 3,906.38

fail → pass · 5pass → pass · 7fail → fail · 11pass → fail · 1

Per-case results (24)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-02 Can you build an HTML showcase file to demo our team collaboration web tool? I want a modern 3D hardware showcase that displays a laptop screen alongside a smartphone display. Embed our live UI content—workspace activity feeds, project task lists, and user avatars—into the device screens, incorporating subtle top lens glints, ambient background gradients, and ground mirror effects using pure web code.	fail→fail	29,949	30,174	+1%	1	1	0%	6,218	6,989	+12%	0	0	—
case-01 I need a single standalone HTML page to present my new habit tracking application for our upcoming product launch. Please generate a sleek 3D presentation stage with CSS-based device frames where my app's actual UI—showing current streak stats, daily goals, and a bottom tab bar—is rendered directly inside the mobile screen viewport. The canvas should feel like a studio environment with glass reflections and ground shadows, rendered entirely with CSS and inline markup without loading any external mockup images.	fail→fail	29,972	29,611	-1%	1	1	0%	6,236	7,007	+12%	0	0	—
case-03 I am launching a personal finance mobile app called 'WealthPulse' and need an HTML page featuring a 3D-angled phone mockup. The device screen must render our real app data including account balances, transaction history cards, and home navigation elements. Please include a ambient studio backdrop, hardware highlight effects, ground reflections, and a product tagline badge in the corner.	fail→fail	29,618	29,554	-0%	1	1	0%	6,214	6,985	+12%	0	0	—
case-04 I want to present my SaaS analytics dashboard on an iPhone frame in HTML. Should I embed standard Unsplash device mockup background images using <img> tags or overlay standard Dribbble frame PNGs onto the page layout?	pass→pass	13,182	29,525	+124%	1	1	0%	2,153	6,955	+223%	0	0	—
case-05 For embedding real HTML UI into a 3D CSS smartphone mockup frame, should I render the app UI inside an <iframe> with srcdoc or use direct DOM elements inside a CSS screen viewport container?	pass→pass	15,651	32,126	+105%	1	1	0%	2,664	6,952	+161%	0	0	—
case-06 Create a 3D CSS phone showcase for a ride-sharing app called 'Velocity'. Populate the UI cards with placeholder text like 'Lorem ipsum dolor sit amet' or 'Your text here' so we can see where text goes.	fail→pass	25,736	27,783	+8%	1	1	0%	6,188	6,959	+12%	0	0	—
case-07 How should glass lens glints and light reflection highlights be created over top of the 3D CSS phone mockup stage?	fail→fail	14,960	28,254	+89%	1	1	0%	3,089	6,870	+122%	0	0	—
case-08 We want to display our web app inside a MacBook Pro 14 frame alongside our mobile app. How should the laptop lower deck and keyboard trackpad area be constructed in CSS?	fail→fail	26,931	28,092	+4%	1	1	0%	5,065	6,948	+37%	0	0	—
case-09 We want our 3D CSS device mockup canvas to slowly rotate back and forth to create a studio motion effect. How should this animation be styled?	fail→fail	13,295	29,180	+119%	1	1	0%	2,569	6,942	+170%	0	0	—
case-10 I need a single-file HTML studio showcase for our mobile fitness app 'FitPulse'. I want a vibrant neon rainbow gradient background behind the device stage.	fail→fail	27,646	31,318	+13%	1	1	0%	6,171	6,943	+13%	0	0	—
case-11 How should the product slug badge in the bottom-right corner of the device 3D showcase canvas be formatted?	fail→pass	13,515	8,469	-37%	1	1	0%	2,630	2,358	-10%	0	0	—
case-12 Where and how should top metadata captions like build version 'v2.4-beta', release date, and codename be rendered on the showcase canvas?	fail→fail	13,344	29,374	+120%	1	1	0%	2,234	6,943	+211%	0	0	—
case-13 What exact CSS border and radius properties should be applied to the iPhone 15 Pro mockup frame container element?	fail→pass	15,076	26,028	+73%	1	1	0%	2,469	6,934	+181%	0	0	—
case-14 How is the realistic mirrored floor reflection created under the 3D floating phone frame in pure CSS?	pass→pass	22,434	28,713	+28%	1	1	0%	3,957	6,932	+75%	0	0	—
case-15 I have raw text statistics for our food delivery app: 'Order #4021 - 2 items - $24.50 - Arriving in 12 mins'. Generate a 3D phone showcase HTML page with this text.	fail→fail	29,135	28,042	-4%	1	1	0%	6,192	6,963	+12%	0	0	—
case-16 I have a pre-designed HTML dashboard card (600px wide) that I want to display inside the 375x812 mobile screen viewport of our 3D CSS phone frame. How should it be placed inside the screen container?	pass→pass	12,828	28,931	+126%	1	1	0%	2,455	6,965	+184%	0	0	—
case-17 When rendering text headers and labels inside the mobile app screen container of the 3D phone showcase, I want to use giant Tailwind text sizes like text-8xl or text-9xl so they are readable from far away.	fail→fail	14,280	29,987	+110%	1	1	0%	2,570	6,958	+171%	0	0	—
case-18 What structural canvas dimensions should be set for the overall 3D device showcase stage container in HTML/CSS?	fail→pass	10,613	27,508	+159%	1	1	0%	2,006	6,934	+246%	0	0	—
case-19 Where should the MacBook Pro frame be positioned relative to the iPhone in a dual-device showcase layout, and what rotation angle should be applied to it?	fail→pass	10,890	28,017	+157%	1	1	0%	1,979	6,942	+251%	0	0	—
case-20 I am building a WebGL 3D interactive viewer in Three.js where users can drag and drop actual GLTF 3D model files (.gltf/.glb) of a phone, load custom HDR environment maps, and orbit lighting with OrbitControls. Please write the Three.js JavaScript setup code with GLTFLoader and RGBELoader.	pass→fail	22,398	27,305	+22%	1	1	0%	4,898	6,984	+43%	0	0	—
case-21 I need a standard flat responsive CSS grid layout for a SaaS marketing landing page hero section. It should render three flat feature card UI boxes side-by-side using CSS Grid layout with standard hover scale transitions. No floating hardware frames or studio stage effects needed.	pass→pass	25,635	27,068	+6%	1	1	0%	6,065	6,964	+15%	0	0	—
case-22 I have an exported SVG icon set from Figma containing raw vector path nodes. Please clean up the SVG code by removing unused defs, flattening group transforms, and optimizing viewBox attributes for inline SVG icon usage in a navbar.	fail→fail	9,639	29,547	+207%	1	1	0%	1,625	6,956	+328%	0	0	—
case-23 Generate a 3D phone showcase HTML for our ocean tracking app 'BlueTide'. I'd like to use a dark midnight blue backdrop palette for the showcase canvas.	pass→pass	31,148	29,028	-7%	1	1	0%	6,176	6,947	+12%	0	0	—
case-24 What font families should be applied to the canvas captions, version tags, and product slug badges outside of the device hardware screen?	pass→pass	11,648	6,466	-44%	1	1	0%	1,930	1,915	-1%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted. The headline lift of +17 percentage points is the difference between those two pass rates over the 24 comparable cases. 2 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 33.3%
Pass rate with the skill: 50%
Cases attempted: 24
Cases counted toward lift: 24
Cases that regressed: 2
Skill version measured: v1
Run completed: 8/12/2026, 00:55 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-06

Prompt

Create a 3D CSS phone showcase for a ride-sharing app called 'Velocity'. Populate the UI cards with placeholder text like 'Lorem ipsum dolor sit amet' or 'Your text here' so we can see where text goes.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run50

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+72% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 47 days ago

Other measured skills in the registry, with their headline benchmark lift.