GoodCase.aiAI 动态 · Radar↗图谱 · AI Map↗课程 · LearnPrompt↗
出品GoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
GoodCase.ai
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

出品

AI 动态 · Radar ↗图谱 · AI Map ↗课程 · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

加载中…

GoodCase.ai · AI提示语案例合集
DSH 插件榜更新日志反馈
模型创作者Seedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKling 可灵Qwen ImageGPT Image 1.5MiniMax H3

3D 发票打印机 SaaS 组件

创作者 · uxsweta

AI 编程(UI)X收录 2026/07/28已有人复测#web#human-reviewed
更多标签 (4)
#web-ui#motion-3dAI UI BuilderGPT-5.6 Sol
查看原始来源 ↗
原帖 ♥ 32

Prompt

复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。

有几个人询问提示词,所以放在这里 👇

附言:根据你的使用场景进行调整。

创建一个现代、极简的 3D 发票生成器机器组件,采用高级 SaaS 风格美学。

视觉设计

- 设计一台宽幅横向的发票打印机,灵感来自小票打印机,但外观未来感十足且干净利落。
- 使用细微的灰色线条、柔和阴影和极少细节。
- 机器应显得高级、轻盈而现代,而不是写实或工业化。
- 保持整体设计足够干净,使其可以放入仪表盘或落地页的 Hero 区域。
- 直接在机器上添加一个醒目的 Print Invoice 按钮。

动画

当用户点击 Print Invoice 按钮时:

- 机器应做出细微的按压或点击动画。
- 一张收据应逐渐从打印机槽口中伸出。
- 收据必须从机器内部平滑地移动到外部,让人感觉它确实正在被打印。
- 动画应显得真实、流畅且令人满足。
- 收据应逐行滑出,而不是瞬间出现。
- 加入轻微的运动缓动和细微的纸张移动,以增强真实感。

收据设计

收据应保持极简且可编辑。

不要填入复杂的客户信息。

使用如下占位内容:

客户姓名

产品

总金额

收据应看起来像干净的发票预览,而不是详细账单。

交互

- 收据初始时应隐藏。
- 只有在点击 Print Invoice 按钮后,收据才应出现。
- 用户每次点击按钮时都应可以重复播放动画。
- 全程加入平滑过渡和微交互。

风格参考

Apple 式极简主义
Linear / Stripe 设计品质
高级 SaaS 仪表盘美学
柔和灰色线条
干净的排版
现代 3D 插画
高度重视交互细节

目标:
创造一种令人愉悦的视觉体验,让用户感觉发票确实是从一台漂亮的 3D 机器中生成并打印出来的,而不是简单地出现在屏幕上。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

AI UI BuilderGPT-5.6 Sol
稳定度
86 / 100
成本
中
对应 Skill3D / 动效 Hero ↗产品与电商转化页 ↗

独立复测证据

同一段 Prompt,在我们的测试里实际生成了什么。

复测生成 · 非作者原作
UI生成证据AI 自动评分

gpt-5.6-sol

2026年8月9日

复测分78.3
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5 · 64.1gpt-5.6-sol · 92.5分歧 · 28.4
  • 与建议模型同族(AI UI Builder / GPT-5.6 Sol)。作者在 Prompt 之外用了哪些参数,我们不知道。
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。

多人复现

1 个人用同一段 Prompt 跑出了自己的作品。

复现作品 · 非作者原作
卡尔
复现者卡尔
2026年10月15日
卡尔 的复现作品打开复现作品 ↗
glm-5.3

GLM-5.3 单次生成;Codex 人工修复运行依赖、必要源码及移动布局,未重新生成。桌面/手机真实渲染和资源检查通过;完整功能与视觉还原尚未全部验收。源码、截图和修复记录见复现出处。

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
Digitwist AI 构建器
AI 编程(UI)MotionSites收录 2026/08/19

Digitwist AI 构建器

AI 建站工具的暗色 hero,依赖精确到 motion 的版本号,动画库的具体用法是核心看点。

Skill · 3D / 动效 HeroSkill · 产品与电商转化页

提示语

为 AI 网站构建器创建一个深色模式 Hero 区块,严格遵循以下规格: ## 技术设置 ### 必需的软件包 安装以下软件包: - `motion`(版本 12.23.24 或更高)——用于动画 - `hls.js`(版本 1.6.15 或更高)——用于视频流播放 - `lucide-react`(版本 0.487.0 或更高)——用于图标 ### 字体 导入以下 Google Fonts: ```css @import url('https://fonts.goog

来源热度 · MotionSites
—
稳定度
88
查看 Case →
CodeNest 编程平台
AI 编程(UI)MotionSites收录 2026/08/19

CodeNest 编程平台

暗色编程教育平台 hero,规格逐条编号写死,从背景布局到响应式断点不留发挥空间,适合学怎么把设计稿翻译成可执行规格。

Skill · 产品与电商转化页Skill · 网页区块像素复刻

提示语

使用 React 和 Tailwind CSS,为名为“CodeNest”的编程教育平台创建一个高端深色主题的 hero section。设计必须响应式,并严格遵循以下规范: 1. 背景与布局: 背景:使用以下 HLS stream 实现全屏背景视频:https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8。使用 hls.js,并设置 enableWorker: false,以确保在

来源热度 · MotionSites
—
稳定度
79
查看 Case →
SaaS 软件
AI 编程(UI)MotionSites收录 2026/08/13

SaaS 软件

PR 机构 SaaS Convix 的全响应式 hero,页面框架从外层 wrapper 的类名写起,浅色底。

Skill · 产品与电商转化页Skill · 网页区块像素复刻

提示语

为一家名为 "Convix Software" 的公关代理机构 SaaS 构建一个完全响应式、占满整个视口的 hero section,严格遵循以下规格: 页面框架 外层 wrapper:min-h-screen w-full bg-[#ededed] p-3 sm:p-4,font-family Inter Hero container(裁剪内部所有内容):relative w-full h-[calc(100vh-24px)] sm:h-[calc(100vh-32px

来源热度 · MotionSites
—
稳定度
93
查看 Case →

Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。