创作者WoCStreet →@WoCStreet 使用 Google Nano Banana · Next.js · Shadcn UI完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗
Prompt
我确实在不到 2 分钟内用 google nano banana 为一个 web app 设计出了落地页。而且看起来很棒。 Prompt： "使用 Next.js（App Router）和 Shadcn UI，基于提供的粗略手绘线框图构建一个现代、可用于生产的 SaaS 落地页。 线框图只表示布局和层级——将其转化为适合真实创业公司发布的精致、高级 SaaS 设计。 网站描述 为 LaunchNest 创建一个落地页。LaunchNest 是一个帮助创始人验证创业想法、快速构建 MVP 并更快发布产品的平台，无需雇用完整团队。 页面应有以下感觉： 以创始人为中心 快速而简洁 高级但简单 以转化为导向 想象 Stripe × Linear × 早期创业公司的活力。 页面结构（严格遵循线框图） 固定顶部导航栏 居中的 Hero 区域 大标题（最多 6 个词） 简短辅助副标题（1–2 行） Hero 文案附近的两个 CTA 按钮 中央手机模型从底部部分露出 手机周围悬浮统计卡片和信息卡片 底部少量品牌/Logo 文字占位符 整洁的页脚对齐 不要改变布局——只提升视觉质量。 品牌与内容（严格使用这些文字） 品牌名：LaunchNest 导航栏 产品 工作原理 定价 资源 登录（次要、描边） 开始使用（主要、实心） Hero 区域 标题： 更快启动你的创业项目 副标题： 验证想法、构建 MVP，并在几周而非几个月内上线——无需雇用完整的开发团队。 主要 CTA：开始使用 次要 CTA：查看演示 悬浮统计卡片 ⚡ 平均 14 天发布 MVP 🚀 上市速度提升 3 倍 左侧信息卡片 在构建前验证想法 按钮：探索想法 右侧信息卡片 将概念变成真实产品 按钮：构建 MVP 手机模型叠加标签 想法验证 MVP 构建器 发布面板 底部品牌占位符 Founder Studio EarlyLaunch IndieWorks MVP Labs StartupKit 颜色调色板 主黑色：#0F0F0F 白色：#FFFFFF 柔和灰色文字：#6B7280 柔和灰色背景：#F4F4F5 强调黄色卡片：#FACC15 强调橙色卡片：#FB923C 柔和紫色渐变：#E9D5FF → #F5E9FF 设计原则 大号粗体 Hero 排版 充裕的间距和内边距 清晰的视觉层级 带细微阴影的圆角卡片 围绕手机分层排列的悬浮 UI 元素 整洁的网格对齐 即使内容很少也要看起来很好 UI 与组件要求 使用 Shadcn UI 组件： Button Card Badge 固定导航栏 主要 CTA：黑色背景、白色文字 次要 CTA：白色背景、黑色边框 手机模型居中，并在底部部分裁切 相对于 Hero 容器绝对定位悬浮卡片 完全响应式（移动端 → 桌面端） 技术要求： Next.js App Router Tailwind CSS 整洁、语义化 HTML 可复用组件 不要使用 lorem ipsum 占位文本 只输出代码，不要解释" 接下来会尝试用 Gemini 3 将其实现。
复用方法
关键决定
关键决定：把粗略线框明确限定为只负责布局和层级，再把 LaunchNest 的品牌文案、两张 CTA 卡片、手机模型与周围统计卡写成固定内容，生成器才不会自行改掉页面骨架。
换到你的题材
换到你的题材：可以替换产品名、价值主张、导航项、统计数字、信息卡文案、颜色和手机里的标签；不能动的是线框的空间关系、居中的 Hero、底部露出的手机以及围绕它分层的悬浮卡片。
容易翻车
容易翻车：网页生成器最容易把手绘线框重新排版，或在移动端把手机和悬浮卡片裁掉；复测时先逐项核对 LaunchNest 的固定文字、六个底部品牌占位和手机位置，再看窄屏是否发生遮挡或溢出。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
WoCStreet 在X输出 UI 工程化实践，《Nano Banana 手绘线框转 SaaS 落地页》搭 Google Nano Banana · Next.js · Shadcn UI 出方案，带可复现代码。
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
提示语
有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美
