Skip to content
cccskills
FreePublished on GitHubEnglish overview

mockup-device-3d

Create a product showcase with real HTML content displayed inside CSS-drawn iPhone and optional MacBook screens. Add glass-like highlights and floor reflections to present app interfaces or design work in a three-dimensional style.

OriginalShow the original description

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

nexu-io/open-design
AI rating90/ 100See how to install

Good for

  • Presenting an app interface for a product launch
  • Showing mobile and desktop designs together
  • Turning text and data into an app-style showcase

Overview

What it does

mockup-device-3d creates a product showcase page that places your HTML, text, or data inside iPhone and MacBook screens. The devices are drawn with CSS and SVG. Tilted positioning, glass-like highlights, and floor reflections give the composition a three-dimensional appearance. The default is a static 1920×1080 layout, with options to add a MacBook or a CSS animation that slowly turns the devices from side to side.

When it helps

Use it to show app screens for a product announcement or display mobile and desktop designs together. Supplied HTML is embedded within the screens, while text and data are arranged as an app-style interface. This lets you build a showcase using the actual content you want to present.

Example requests

  • “Put this HTML inside an iPhone screen and create a product showcase page with reflections.”
  • “Arrange this data as an app interface and show it on an iPhone and MacBook side by side.”

Notes

The output is a single HTML file. The interface inside the screens uses Tailwind. External mockup images are not used, and you need to provide actual content or data. The three-dimensional appearance is created with CSS; the composition does not use GLTF models.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodProduct announcements and app showcases are named uses, with actual user content placed inside device screens.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodCanvas dimensions, CSS transforms, placement by input type, and single-file HTML output are explicitly specified.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodThe task generates a single HTML file, prohibits external mockup images, and includes no deletion or authentication instructions.
Easy setupDoes it need few tools or API keys, and are they documented?
BPartly lackingTailwind is required for the screen interface, but installation or loading instructions are absent.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md4.4 KB
  • example.html8.7 KB
  • example.md434 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design102.8KUpdated Oct 20, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design102.8KUpdated Oct 20, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design102.8KUpdated Oct 20, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design102.8KUpdated Oct 20, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design102.8KUpdated Oct 20, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design102.8KUpdated Oct 20, 2026

See all skills by nexu-io

Report a problem with this skill