设备样机预览

Name: Device Mockup Preview
Author: @media_lin

ReactMockupDevicePreview演示更新于 2026-08-14

使用场景： 在设备样机中展示 UI：营销页、作品集、应用商店截图、投资演示与设计交付预览。

安装

npx skills add mockup-device-preview

克隆

git clone https://github.com/skillhub-community/mockup-device-preview.git

仓库文档

描述

把你的 UI 渲染进真实感硬件框架的设备样机工具包。设备：iPhone（灵动岛风格 15、多色）、Android（Pixel 风格）、iPad、MacBook（屏幕+带标志性灯条的底座）、iMac 与浏览器 chrome 框架。每个 DeviceFrame 接受 URL（经 iframe 渲染实站）或截图，可配置边框颜色、屏幕反光与阴影。包含多设备展示的 Stage 组件（手机+笔记本并排）与 CSS 3D 变换+玻璃透镜折射的 3D 倾斜展示。

导出选项：捕获加框预览为 PNG（应用商店截图与作品集拍摄的绝佳选择），或渲染响应式「全家福」（全部设备并排）用于 hero 区。所有框架都是矢量 SVG 外壳，任意缩放清晰。覆盖实用细节：浏览器框架显示 URL 栏+标签+favicon、手机框架支持刘海/灵动岛变体、带阴影/反射开关让截图「有设计感」。零外部资源——全部内联。

AI Hub

跑 Skill 需要模型接口？

AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。

打开 AI Hub

元数据

作者@media_lin

许可证MIT

版本1.0.0

依赖0