{"id":"7281918e-4888-42e2-b3fa-9032379ceb2e","shortId":"6XW25A","kind":"skill","title":"mockup-device-3d","tagline":"iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图","description":"【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】\n【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook \"屏幕\"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。\n\n【硬性构图】\n- **画布**: 1920×1080, 暖灰渐变背景 `radial-gradient(#1a1a1f → #0a0a0f)`, 底部反射地面 (mirror gradient)。\n- **iPhone 15 Pro 模型**: 左侧 / 中部, `transform: rotateY(-12deg) rotateX(4deg) translateZ(40px)`; 边框钛金属银 `#a8a8ad` (实心 4px) + 屏幕圆角 56px; 屏幕内嵌 iframe-like div, 真实渲染用户的 HTML 内容 (mobile viewport 375×812)。\n- **MacBook Pro 14\"** (可选第二台): 右侧, 略小, `rotateY(8deg)`; 上盖屏幕嵌入桌面 viewport 内容 (1440×900 缩放); 底座键盘 + trackpad 用 CSS 阴影线条绘制 (不画键帽细节)。\n- **玻璃 / 镜头光斑**: 顶部加 2-3 个 `radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%)` 的椭圆 highlight, 模拟 morphing glass lens。\n- **地面反射**: 设备下方 `transform: scaleY(-1)` + `mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%)`。\n\n【屏幕内容来源】\n- 用户提供的是文本/数据 → 自动渲染为一个 mock app 界面 (顶部 status bar + 标题 + body + 底部 tab bar 或 home indicator)。\n- 用户提供的是 HTML → 原样嵌入屏幕 div 内 (注意缩放 transform 让它适配屏幕宽高)。\n- 屏幕内 UI 用 Tailwind, 字号要按 mobile 真实尺寸 (text-sm / text-base, 不要 text-9xl)。\n\n【可选附加元素】\n- 右下角 \"product slug\" 角标: 大 logo + 一行 tagline + 副标 hairline。\n- 顶部一行 caption (英文 sans, 字号小, 透明 0.6): 产品 codename / 日期 / 版本。\n- 加 8s 自动 CSS 转盘: `@keyframes turntable` rotateY -12 ↔ 12, ease-in-out infinite alternate; 可被 `prefers-reduced-motion` 关闭。\n\n【设计细节】\n- **绝不**: 用外部 mockup 图片 URL (任何 unsplash / dribbble link), 全部用 CSS / SVG 绘制设备。\n- 字体: 设备外的 caption / logo 用 `Inter Tight` / `SF Pro` 风格; 设备内根据用户内容自适应。\n- 背景可选 4 套调色: charcoal / pearl / midnight blue / mocha; 不要彩虹渐变。\n- 单文件 HTML; iframe 不要用 srcdoc 嵌套 (容易出问题), 用 `<div class=\"screen\">` + Tailwind 渲染内容。\n- 必须用用户真实数据填充屏幕内容, 严禁 lorem ipsum 或 \"Your text here\"。","tags":["mockup","device","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-mockup-device-3d","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/mockup-device-3d","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,738 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:16.215Z","embedding":null,"createdAt":"2026-05-15T12:50:32.630Z","updatedAt":"2026-05-18T18:50:16.215Z","lastSeenAt":"2026-05-18T18:50:16.215Z","tsv":"'-1':148 '-12':76,237 '-3':124 '0':135,158,159,160 '0.4':134,161 '0.6':224 '0a0a0f':64 '1080':58 '12':238 '14':102 '1440':111 '15':69 '1920':57 '1a1a1f':63 '2':123 '255':131,132,133 '360':14 '375':98 '3d':4,18,21,41 '4':277 '40px':81 '4deg':79 '4px':85 '56px':87 '60':137 '70':163 '812':99 '8deg':107 '8s':230 '900':112 '9xl':206 'a8a8ad':83 'altern':244 'app':29,169 'bar':173,178 'base':202 'blue':282 'bodi':175 'bottom':156 'canva':26 'caption':219,267 'charcoal':279 'codenam':226 'css':40,117,232,262 'deg':77 'devic':3,20,54 'div':92,185 'dribbbl':259 'eas':240 'ease-in-out':239 'ellips':129 'glass':142 'gltf':8,44 'gradient':62,67,128,154 'hairlin':217 'highlight':139 'home':180 'html':11,24,94,183,286 'html-in-canva':23 'hyperfram':50 'ifram':90,287 'iframe-lik':89 'imag':151 'indic':181 'infinit':243 'inspir':48 'inter':270 'iphon':5,35,53,68 'ipsum':298 'keyfram':234 'len':143 'like':91 'linear':153 'linear-gradi':152 'link':260 'logo':213,268 'lorem':297 'macbook':6,36,100 'mask':150 'mask-imag':149 'midnight':281 'mirror':66 'mobil':96,195 'mocha':283 'mock':168 'mockup':2,254 'mockup-device-3d':1 'morph':141 'motion':249 'pearl':280 'prefer':247 'prefers-reduced-mot':246 'pro':70,101,273 'product':209 'radial':61,127 'radial-gradi':60,126 'reduc':248 'rgba':130,157 'rotatex':78 'rotatey':75,106,236 'san':221 'scaley':147 'sf':272 'showcas':22 'skill' 'skill-mockup-device-3d' 'slug':210 'sm':199 'source-nexu-io' 'srcdoc':289 'status':172 'svg':263 'tab':177 'taglin':215 'tailwind':193,293 'text':198,201,205,301 'text-9xl':204 'text-bas':200 'text-sm':197 'tight':271 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'trackpad':115 'transform':42,74,146,188 'translatez':80 'transpar':136,162 'turntabl':235 'ui':33,191 'unsplash':258 'url':256 'vfx':52 'vfx-iphone-devic':51 'viewport':97,109 '一行':214 '上盖屏幕嵌入桌面':108 '不画键帽细节':119 '不要':203 '不要彩虹渐变':284 '不要用':288 '严禁':296 '个':125 '中部':73 '产品':225 '产品发布':28 '任何':257 '仿':7 '全部用':261 '关闭':250 '内':186 '内容':12,95,110 '内容真实渲染到':34 '副标':216 '加':229 '单文件':285 '原样嵌入屏幕':184 '可被':245 '可选第二台':103 '可选附加元素':207 '右下角':208 '右侧':104 '周围用':39 '图片':255 '地面反射':144 '大':212 '套调色':278 '字体':265 '字号小':222 '字号要按':194 '实心':84 '容易出问题':291 '屏幕':37 '屏幕内':190 '屏幕内容来源':164 '屏幕内嵌':88 '屏幕内嵌真实':10 '屏幕圆角':86 '展架':19 '嵌套':290 '左侧':72 '底座键盘':114 '底部':176 '底部反射地面':65 '必须用用户真实数据填充屏幕内容':295 '意图':27 '或':179,299 '把用户提供的':32 '折射':47 '数据':166 '日期':227 '暖灰渐变背景':59 '标题':174 '模型':71 '模型的玻璃':45 '模拟':43,140 '模板':16 '注意缩放':187 '渲染内容':294 '演示':30 '版本':228 '玻璃':120 '玻璃镜头折射':13 '用':116,192,269,292 '用外部':253 '用户提供的是':182 '用户提供的是文本':165 '画布':56 '界面':170 '略小':105 '的椭圆':138 '真实尺寸':196 '真实渲染用户的':93 '硬性构图':55 '绘制设备':264 '绝不':252 '缩放':113 '背景可选':276 '自动':231 '自动渲染为一个':167 '英文':220 '角标':211 '让它适配屏幕宽高':189 '设备':17 '设备下方':145 '设备内根据用户内容自适应':275 '设备外的':266 '设计稿展示':31 '设计细节':251 '转盘':233 '转盘构图':15 '边框钛金属银':82 '透明':223 '里':38 '镜头光斑':121 '阴影线条绘制':118 '静态展架':9 '顶部':171 '顶部一行':218 '顶部加':122 '风格':274 '高光':46","prices":[{"id":"c3335fdc-1b9d-42a2-a3b3-6712de5b3ce3","listingId":"7281918e-4888-42e2-b3fa-9032379ceb2e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:32.630Z"}],"sources":[{"listingId":"7281918e-4888-42e2-b3fa-9032379ceb2e","source":"github","sourceId":"nexu-io/open-design/mockup-device-3d","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/mockup-device-3d","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:32.630Z","lastSeenAt":"2026-05-18T18:50:16.215Z"}],"details":{"listingId":"7281918e-4888-42e2-b3fa-9032379ceb2e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"mockup-device-3d","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"a30fe20bb703c1302afa639d93ffb92dccb8ab9b","skill_md_path":"skills/mockup-device-3d/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/mockup-device-3d"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"mockup-device-3d","description":"iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/mockup-device-3d"},"updatedAt":"2026-05-18T18:50:16.215Z"}}