@uxsweta 使用 AI UI Builder完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt · 原文 / 翻译
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wide, horizontal invoice printing machine inspired by receipt printers, but with a futuristic and clean appearance. - Use subtle gray strokes, soft shadows, and minimal details. - The machine should feel premium, lightweight, and modern rather than realistic or industrial. - Keep the overall design clean enough to fit inside a dashboard or landing page hero section. - Add a single prominent "Print Invoice" button directly on the machine. Animation When the user clicks the "Print Invoice" button: - The machine should react with a subtle press/click animation. - A receipt should gradually emerge from the printer slot. - The receipt must animate smoothly from inside the machine to outside, giving the impression that it is being physically printed. - The animation should feel realistic, fluid, and satisfying. - The receipt should slide out line-by-line rather than appearing instantly. - Add slight motion easing and subtle paper movement for realism. Receipt Design The receipt should remain highly minimal and editable. Do NOT fill it with complex customer information. Use placeholder content such as: Customer Name Product Total Amount The receipt should look like a clean invoice preview rather than a detailed bill. Interaction - The receipt should be hidden initially. - It should only appear after clicking the Print Invoice button. - The animation should be repeatable every time the user clicks the button. - Include smooth transitions and micro-interactions throughout. Style References Apple-style minimalism Linear / Stripe design quality Premium SaaS dashboard aesthetic Soft gray strokes Clean typography Modern 3D illustration High attention to interaction details Goal: Create a delightful visual experience where users feel like an invoice is actually being generated and printed from a beautiful 3D machine, rather than simply appearing on the screen.
复用方法
可复用结构
把“目标结果 → 产品名称、目标用户、页面模块和主按钮 → 约束条件”抽成模板,后续可复用到同类任务。
复测标准
围绕 模块顺序、价值主张写法与 CTA 位置 做单变量对照,并记录模型、成本和失败结果;重复成立后再沉淀为 Skill。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生,不是另一套投稿内容。

创作者
uxsweta 长期扎根X,写的是能跑起来的界面而不是截图,《3D 发票打印机 SaaS 组件》配了完整实现思路。
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
@shushant_l 使用 AI Website Builder完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color pa

@AbhinavGirdhar 使用 AI Website Builder完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
👗 Create a beautiful website in minutes! 👗 No more hectic website creation. Simply use this prompt: "Design a wedding shopping website to be every bride's dream, offering a curated selection of wedding dresses with d