加载中…
创作者 · uxsweta
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
有几个人询问提示词,所以放在这里 👇
附言:根据你的使用场景进行调整。
创建一个现代、极简的 3D 发票生成器机器组件,采用高级 SaaS 风格美学。
视觉设计
- 设计一台宽幅横向的发票打印机,灵感来自小票打印机,但外观未来感十足且干净利落。
- 使用细微的灰色线条、柔和阴影和极少细节。
- 机器应显得高级、轻盈而现代,而不是写实或工业化。
- 保持整体设计足够干净,使其可以放入仪表盘或落地页的 Hero 区域。
- 直接在机器上添加一个醒目的 Print Invoice 按钮。
动画
当用户点击 Print Invoice 按钮时:
- 机器应做出细微的按压或点击动画。
- 一张收据应逐渐从打印机槽口中伸出。
- 收据必须从机器内部平滑地移动到外部,让人感觉它确实正在被打印。
- 动画应显得真实、流畅且令人满足。
- 收据应逐行滑出,而不是瞬间出现。
- 加入轻微的运动缓动和细微的纸张移动,以增强真实感。
收据设计
收据应保持极简且可编辑。
不要填入复杂的客户信息。
使用如下占位内容:
客户姓名
产品
总金额
收据应看起来像干净的发票预览,而不是详细账单。
交互
- 收据初始时应隐藏。
- 只有在点击 Print Invoice 按钮后,收据才应出现。
- 用户每次点击按钮时都应可以重复播放动画。
- 全程加入平滑过渡和微交互。
风格参考
Apple 式极简主义
Linear / Stripe 设计品质
高级 SaaS 仪表盘美学
柔和灰色线条
干净的排版
现代 3D 插画
高度重视交互细节
目标:
创造一种令人愉悦的视觉体验,让用户感觉发票确实是从一台漂亮的 3D 机器中生成并打印出来的,而不是简单地出现在屏幕上。适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现
继续探索

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

暗色编程教育平台 hero,规格逐条编号写死,从背景布局到响应式断点不留发挥空间,适合学怎么把设计稿翻译成可执行规格。
提示语
使用 React 和 Tailwind CSS,为名为“CodeNest”的编程教育平台创建一个高端深色主题的 hero section。设计必须响应式,并严格遵循以下规范: 1. 背景与布局: 背景:使用以下 HLS stream 实现全屏背景视频:https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8。使用 hls.js,并设置 enableWorker: false,以确保在

提示语
为一家名为 "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
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。