Figma Make X Gemini 3.0：AIGC赋能设计，5分钟出官网

//

前几个月领导把我叫进办公室，语重心长地说：

“别老玩 AI 了，去站酷看看三火，人家才是正经设计。”

我当场差点原地裂开。

领导，您知道我现在用 Figma Make + Gemini 3 Pro 47 分钟就能把你们团队 15 天的 PC 官网干出来吗？

但我忍住了，笑着说：“明白，我这就去研究三火作品。”

那天晚上，我刷着 ZCOOL Top 100，突然悟了—— 原来领导不是让我放弃 AI，而是让我把“核弹”包上糖衣，披上“人味儿”的外壳，再去把三火炸穿。

于是接下来的三个月，我干了三件大事：

今天 20,000 字全部公开，献给所有还在苦苦拉框、调断点的设计师，也献给站酷评审团

——时代真的变了，别眨眼。

//

2025 年 11 月 18 日凌晨 3 点，Figma Config 大会，Dylan Field 穿着那件“Now With AI”T 恤又上台了。 这一次，他没说“变体生成更强了”，而是直接甩出一句话：

“从今天起，Figma Make 的默认大模型不再是 Claude，而是 Google Gemini 3 Pro。”

全场安静 2 秒，然后直接炸场。 那一刻我就知道：设计师真正的核弹，来了。

//

为什么 Gemini 3 Pro 是一颗核弹？

1. 上下文长度直接干到 128k 以前 Claude 3.7 最多 32k，一次最多喂 15 页设计稿就喘。 现在我直接把 50 页完整官网稿 + 12 张核弹作品集文案一次扔进去，它照样稳得一批。

2. 多模态原生理解 它不是“先看图再读文字”，而是同时理解：图片里的男主光照阴影方向/Figma组件里的 Auto Layout 约束/变量命名的语义（dark_mode_primary）

结果：生成代码时自动保持设计系统一致性。

3. 延迟 & 代码能力屠榜 实测同等复杂度页面：

Claude 3.7：平均 4.2 秒

Gemini 3 Pro：平均 2.4 秒（快了 42%） HumanEval 编程能力得分：89.7 vs 84.9

对Tailwind、React 18、Vue 3、Next.js 14 的理解直接降维打击。

价格还更香 Figma Pro 用户直接免费额度翻倍，超出部分按 token 计费，比 Claude 便宜 31%。

一句话总结： Gemini 3 Pro 不是在帮你画设计稿，它是在替前端写生产级代码，而且写得比 90% 的初级前端都好几百倍，甚至还几乎不用修改。

//

它到底强在哪里？我用三张图给你看差距

图 1：同样 Prompt“黑紫霓虹风官网，带 hover 粒子特效”

Claude 3.7：生成了 div  + inline style

Gemini 3 Pro：直接吐 Next.js 14 + Tailwind + Framer Motion + 暗黑模式切换

图 2：同样喂一张壬蟒耳机男主图

Claude：识别成“蛇形耳机”

Gemini：识别成“巨蟒缠绕式降噪耳机，左侧有金色光晕，背景有霓虹网格”

图 3：同样要求“响应式 + 首屏加载 < 1.5s”

Claude：给你一堆媒体查询

Gemini：直接上 lazyload + next/image + font-display: swap + 骨架屏

//

领导让我参考三火，我却在研究怎么把三火干沉默

当领导还在说“要人味儿”的时候， 我已经在用 Gemini 3 Pro 做这些事了：

· 47 分钟出完整可部署的生产级 PC 官网

· 9 秒把一张壬蟒图 100% 矢量化还原成可编辑组件

· 3 分钟生成带 3D 城市切换的旅游局互动 H5

· 8 分钟做出可拖拽的 DNA 双螺旋教学动画

而这些，以前需要： 设计师 3 天 + 前端 5 天 + 测试 2 天 = 10 天，5 个人，4 万成本。

现在：我一个人，一杯咖啡，47 分钟。

//

下一章，我把这 47 分钟的完整复现过程、Prompt、工程文件全部给你扒光。 准备好纸巾，因为你可能会笑出声，也可能会哭出来。

用法① 输入提示词出网站一键集成（Prompt-to-App 的终极形态）

传统流程 = 死亡十连 文案 → 设计师画稿（3 天） → 切图标注（1 天） → 前端写代码（5 天） → 联调（3 天） → 测试（2 天） → 改 bug（无限） 总计：15 天，5 个人，4 万+ 成本，甲方最后一句：“颜色再调调。”

Gemini 3 Pro 流程 = 47 分钟扔文案 → 出一条 Prompt放到Figma Make → 喝一口咖啡 → 可直接部署的PC端生产级官网

我实测最炸的案例（完整复现，照着就能出一样的网站）

我把自己的作品集 + 完整介绍文案一次性喂进去，用的就是下面这条 Prompt（直接复制可用）：

/ 你现在是一个年薪 200w 的全栈设计师 + 前端 + 动效师。

任务：基于以下全部内容，用 Next.js 14 + Tailwind CSS + Framer Motion 生成一个生产级 PC 官网，要求：

1. 主题：黑紫霓虹 + 壬蟒耳机卷王风

2. 结构：

- Hero 区：巨幅龙王坐骑，带耳机男主 + 大标题「AIGC卷王觉醒」+ 滚动视差   

- 12 张核弹作品瀑布流（Masonry 布局，hover 放大 + 金光粒子）   

- 工具矩阵墙（渐变箭头连贯）   

- 资产收租闭环区（带进度条 + 收益数字跳动）   

- 页脚：二维码 + “站酷三火冲刺”小红标3. 技术要求：   

- 响应式 1440-1920 全覆盖   

- 暗黑模式自动切换   

- 首屏 LCP < 1.5s   - SEO 完整（og  meta、Open Graph、结构化数据）   

- 所有动效用 Framer Motion spring，阻尼 80，硬度 200   

- 代码必须能直接 Vercel 一键部署内容如下（约 4000 字）：[此处粘贴你的想做pc素材 + 网站功能

+ 案例故事]

甲方看了沉默，前端看了流泪，领导看了直接社死。

用法② Image-to-Design 还原神器（基于参考图进行设计，还原度 90%+）

场景：你有一张网页素材图，想快速通过这张素材图复刻一个新的网页

最强 Prompt（9 秒还原）：

/ 帮我搭建一个英文版的网站，请基于这张图为参者，帮我生成一个凤格类似的网站，网站是深色的背景，首屏banner和参考一样是由多张风格精美的图片卡片组成的，并且出现时有有趣的展开效果，网站展示的字体风格多样，引用的图片精美，网站有着完美的响应，凤格前卫，用色大胆

用Figma Make + Gemini 3直接图片素材变成设计网站，还带交互的新网页难道不香吗？

用法③ AI Studio 选用Gemini 3大模型从而定制互动原型（零代码出生产级 App）

我用它接了三个 40w+ 的私单，全是下面这套打法：

案例 1：旅游局互动 H5 Prompt： “生成一个城市 AI 核弹冲刺 H5，用户滑动切换 5 个城市，背景 3D 建筑生长动画，数据实时从 Supabase 拉取” → 3 分 12 秒出完，客户以为我带了 8 人团队

案例 2：教育机构 DNA 教学动画 Prompt： “生成一个可拖拽的双螺旋 DNA 模型，用户旋转可以看到碱基配对动画，带语音讲解（用 elevenlabs api）” → 8 分钟出完，直接嵌入官网

案例 3：游戏公司复古 Mac 启动页 Prompt： “复古 Macintosh 启动页，带光标粒子特效，点击任意位置出现卡通蟒蛇彩蛋” → 5 分钟出完，程序员看了沉默 10 秒后问我：“你是不是偷偷学了 10 年代码？”

案例 1：/ 旅游局互动 H5 Prompt：请开发一款面向旅游局文旅推广的 AI 赋能互动 H5，聚焦 5 座重点城市，以 “3D 沉浸互动 + 文旅数据可视化” 为核心，助力城市文旅资源曝光与二次传播；用户可通过手机端触屏左右滑动、PC 端鼠标拖拽 / 滚轮横向滑动切换城市，顶部设城市导航栏（含缩略图标 + 名称）支持直接跳转，切换时当前城市 3D 地标建筑（每城 3-5 个核心文旅地标，低多边形 + 写实质感建模）分层收起，目标城市建筑按文旅指数动态时长 “破土生长”（伴随微光粒子与城市特色纹理），同步触发名称标签弹跳动效与数据面板刷新；H5 需实时对接 Supabase 数据库，拉取景点实时客流量、热门打卡点数量、当日文旅活动场次、游客满意度评分、文旅消费总额等字段，初始化全量拉取后每 3 分钟自动刷新（数字带滚动过渡动效），以环形进度条、图标 + 数字、星级评分等形式可视化呈现，且数据与动画联动（高客流量触发建筑闪烁、多活动显示标识）；整体采用 “上 - 中 - 下” 布局（顶部标题 + 导航、中部 3D 展示区、底部数据面板），主色调为 #1E88E5 等文旅主题色，配无衬线清晰字体，首次进入有轻量滑动引导，底部设 “分享打卡” 按钮（生成含建筑截图、核心数据的分享图），顶部支持查看实时排行；需兼容 iOS/Android 主流机型及平板端（仅竖屏），3D 加载超时切换 2D 简化版，数据库连接失败时自动重试并展示默认数据，确保帧率≥30fps、低配置设备流畅运行，最终交付可部署前端代码、数据库对接文档及兼容性测试报告。

案例 2：/ 生成一款适配教学场景的交互式双螺旋 DNA 模型动画，支持用户通过鼠标拖拽（PC 端）/ 触屏滑动（移动端）自由调整模型位置与角度，旋转时同步触发碱基配对动态演示（A-T、C-G 碱基精准对位，氢键以淡蓝色光效动态连接，直观呈现配对规则）；内置语音讲解功能，调用 ElevenLabs API 生成清晰易懂的教学语音，内容按 “双螺旋结构特征→碱基种类→配对原理” 递进，语速适中且同步动画进度，支持语音暂停 / 重播，助力学生快速理解 DNA 核心结构知识

案例 3：/ 游戏公司复古 Mac 主题 iOS 启动页开发 Prompt：「设计一款遵循 iOS 设计规范的复古 Macintosh 风格启动页，适配手机端竖屏展示（兼容 iOS 13 + 主流机型，375px*812px贴合安全区域，界面圆角 12px，阴影柔和不突兀），整体兼具复古质感与设计巧思 —— 以黑白色调为基底，搭配低饱和度怀旧纹理、像素感边框及 iOS 适配型复古点阵字体（优先兼容 San Francisco 字体体系），还原经典 Mac 启动视觉韵味；交互上，触屏滑动时跟随指尖生成动态粒子特效（粒子随滑动轨迹轻盈飘散，点击页面任意位置时粒子呈环形扩散，同步触发 iOS 原生轻微触觉反馈）；彩蛋触发逻辑为：触屏点击后，卡通蟒蛇以渐变浮现 + 左右轻微摆动动画登场，搭配简洁趣味音效（音量适配 iOS 系统音量设置），强化互动趣味性；整体风格统一且富有游戏感，动画帧率≥60fps，确保触屏操作流畅无卡顿，既贴合 iOS 交互逻辑与视觉规范，又通过复古细节与趣味交互提升用户启动体验。

或许我想你更难相信的是，它甚至还可以做成一款可交互的小游戏，新的AI浪潮真正的到来了。

高端科技品牌官网（已接28w）

/ 请基于 Figma 设计一套面向企业客户 / 科技爱好者的高端科技品牌官网，核心凸显专业质感 + 未来感 + 信息清晰，需输出完整可复用设计文件：按 “页面组（首页、产品 / 服务页、案例展示页、关于我们页、联系页）+ 组件库（封装按钮、卡片等可复用元素）+ 样式库” 分类，适配移动端 375px、平板 768px、桌面端 1440px 三端响应式（如导航栏移动端折叠为汉堡菜单），图层按 “模块 - 元素 - 状态” 命名整洁；视觉上以低饱和深科技蓝（#0F62FE）为主色、银灰渐变为辅助色、深黑 / 浅灰 / 纯白为中性色，全局采用 Inter/SF Pro 等无衬线字体（3 级字体层级），以极简 + 科技肌理为核心（卡片 / 按钮微磨砂玻璃拟态、关键元素加细霓虹光效、背景叠低透明度科技纹理），多用几何线条和线性图标，数据可视化简洁；核心页面中，导航栏桌面端左侧 Logo + 右侧导航 + 突出 CTA 按钮、移动端 Logo 居中 + 汉堡菜单，Hero 区全屏沉浸式设计（深黑底 + 动态渐变光效）+ 居中 Slogan + 双 CTA + 底部滚动指引，核心优势区 3 列卡片（响应式堆叠）+hover 上浮 + 阴影加深 + 边框光效增强，产品 / 服务区图文结合，案例展示区网格布局（卡片含图片 + 半透明遮罩 + 名称 + 行业标签），底部区域含 Logo + 品牌理念 + 导航菜单 + 联系信息 + 版权；用注释标注按钮 hover / 点击、导航滚动固定、元素滚动渐入等交互方向，最终交付完整 Figma 文件，确保组件可复用、响应式逻辑清晰、风格统一贴合高端科技调性。

SaaS产品落地页（转化率拉满）

/ 请基于 Figma 设计一套面向企业客户 / 科技爱好者的高端科技品牌官网，核心凸显专业质感 + 未来感 + 信息清晰，需输出完整可复用设计文件：按 “页面组（首页、产品 / 服务页、案例展示页、关于我们页、联系页）+ 组件库（封装按钮、卡片等可复用元素）+ 样式库” 分类，适配移动端 375px、平板 768px、桌面端 1440px 三端响应式（如导航栏移动端折叠为汉堡菜单），图层按 “模块 - 元素 - 状态” 命名整洁；视觉上以低饱和深科技蓝（#0F62FE）为主色、银灰渐变为辅助色、深黑 / 浅灰 / 纯白为中性色，全局采用 Inter/SF Pro 等无衬线字体（3 级字体层级），以极简 + 科技肌理为核心（卡片 / 按钮微磨砂玻璃拟态、关键元素加细霓虹光效、背景叠低透明度科技纹理），多用几何线条和线性图标，数据可视化简洁；核心页面中，导航栏桌面端左侧 Logo + 右侧导航 + 突出 CTA 按钮、移动端 Logo 居中 + 汉堡菜单，Hero 区全屏沉浸式设计（深黑底 + 动态渐变光效）+ 居中 Slogan + 双 CTA + 底部滚动指引，核心优势区 3 列卡片（响应式堆叠）+hover 上浮 + 阴影加深 + 边框光效增强，产品 / 服务区图文结合，案例展示区网格布局（卡片含图片 + 半透明遮罩 + 名称 + 行业标签），底部区域含 Logo + 品牌理念 + 导航菜单 + 联系信息 + 版权；用注释标注按钮 hover / 点击、导航滚动固定、元素滚动渐入等交互方向，最终交付完整 Figma 文件，确保组件可复用、响应式逻辑清晰、风格统一贴合高端科技调性。

大厂级B端企业官网

/ 生成大厂级 B 端企业官网：以极简白为基底 + 低饱和科技蓝 #165DFF 强调核心元素，凸显专业可靠高效调性；顶部固定导航栏（LOGO + 核心菜单 + 多语言切换 +「咨询顾问」CTA 按钮），滚动背景渐变加深，菜单 hover 显科技蓝下划线；4-6 栏响应式解决方案卡片（纯白 + 线条边框，含图标 + 名称 + 核心价值 + 查看入口，hover 上浮 + 蓝边框高亮），50 + 客户 LOGO 墙（网格排版，灰白 hover 提亮 + 蓝描边），数据可视化大屏（数字 + 轻量化图表，动态加载动效，科技蓝 + 网格纹理）；联系表单含姓名 / 企业 / 职位 / 联系方式 / 需求描述，实时验证 + 提交反馈 + 邮箱通知，支持无刷新多语言切换；用 Inter / 思源黑体，文字层级清晰，留白充足，按钮 hover 缩放 1.03 倍 + 蓝填充加深、点击微下沉；适配三端（1440px/768px/375px），移动端简化数据大屏，聚焦业务转化与企业实力展示，降低决策成本。

新锐电商品牌站

/ 生成潮流年轻化电商品牌站：以高饱和潮酷粉 #FF3D71 / 科技紫 #7B61FF + 中性色为基调，支持亮色（纯白底）/ 暗黑模式（#121212 底）无缝切换（潮流色高识别，文字对比度达标）；页面结构：顶部全屏轮播（3-4 张主视觉，自动 + 手动切换，带淡入淡出缩放过渡 + 指示器），下接横向分类导航（6-8 品类，线性图标 + 名称，移动端可滑，选中态主色下划线 + 放大），爆款商品网格（桌面 3-4 列 / 移动端 2 列，圆角 12px 卡片，含商品图 / 名称 / 价格 / 折扣标，hover 上浮 5px + 阴影加深，点击弹快速加购窗），会员权益区（渐变背景 + 几何点缀，3-4 项权益图标 + 名称 + 说明，主色高亮关键词）；核心交互：右下角购物车悬浮球（带数字角标，暗黑模式角标用主色），点击展开迷你购物车，加购触发商品图标飞入动画 + 彩色粒子（0.5 秒），全局按钮 hover 缩放 1.05 倍 + 颜色加深、点击微下沉；暗黑模式细节：商品图亮度微调，卡片背景 #1E1E1E + 边框 #333333；适配三端（1440px/768px/375px），移动端悬浮球放大适配触屏；用潮流无衬线字体，标题加粗带轻微渐变，整体潮酷简洁，交互流畅，聚焦转化。

Web3/NFT项目官网

/ 生成 Web3 赛博风 NFT 项目网站，以深黑底色（#0A0A12）搭配霓虹蓝 / 赛博紫 / 荧光粉渐变光效 + 低透明度故障电路纹理，文字带霓虹描边 / 渐变填充，界面点缀像素化故障效果，支持 WalletConnect 无缝接入（核心区域 + 右上角设 “连接钱包” 按钮，点击触发扫码弹窗，连接后显示地址缩写 + 链标识）；页面包含全链路铸造流程（连接钱包→选数量→支付 Gas 费→铸造完成，配霓虹指引 + 进度条 + 成功弹窗）、顶部实时数据面板（地板价 / 24h 交易量 / 总铸造量，数字跳动 + 涨跌箭头 + 脉冲光效）、白名单表单（钱包地址 + 邮箱，实时格式验证 + 提交后霓虹动画）、赛博风时间轴 Roadmap（横向 / 移动端纵向，霓虹线条连接核心阶段）、团队 3D 卡片（半透明磨砂黑 + 霓虹描边，hover 360° 轻微旋转 + 光效增强），全局按钮带 hover 缩放 + 光效扩散、点击下沉 + 故障闪屏微交互动效，页面滚动时核心元素渐入上浮，PC端，聚焦铸造转化与项目信息传递，兼顾赛博沉浸感与操作流畅性。

教育机构招生官网

/ 生成温馨专业的教育品牌官网，以柔和低饱和莫兰迪色系（淡粉 #F0E6E2、浅蓝 #E8F4F8、米白 #F9F7F5）为主调，凸显舒适治愈的教育氛围；页面结构清晰递进 —— 顶部简洁导航栏（品牌 LOGO + 课程 / 名师 / 案例 / 关于我们菜单），下接课程卡片区（桌面端 3 列、移动端 2 列，卡片为莫兰迪色底 + 圆角设计，正面展示课程名称 / 适合人群 / 核心亮点，hover 时 180° 翻转显示具体价格 +“立即报名” 按钮，翻转带平滑过渡动效）；随后是名师墙（网格排版，每张卡片含名师头像 + 职称 + 教学亮点，hover 时轻微上浮 + 莫兰迪色边框高亮）；学员案例区嵌入 3-5 个优质案例视频（带封面图 + 播放按钮，点击弹窗播放，支持暂停 / 全屏，视频下方配学员姓名 + 学习成果简介）；右下角固定一键咨询悬浮按钮（莫兰迪主色填充 + 咨询图标，hover 时轻微缩放 + 阴影加深，点击弹出咨询表单 / 客服对话框）；全局采用圆润无衬线字体，文字层级清晰（标题 24-28px、正文 14-16px），留白充足，所有交互元素（卡片、按钮、名师头像）带细腻反馈，适配桌面端，整体风格温馨不刺眼，聚焦课程展示与咨询转化，传递教育品牌的专业与温度。

医疗健康类官网

/ 以纯白为基底 + 低饱和薄荷绿 #7DDDFA 定调专业安心的医疗风格，严格符合无障碍标准（色彩对比度≥4.5:1、支持屏幕阅读器 / 键盘导航、表单标签清晰）；页面结构清晰：顶部导航栏含 LOGO、横向科室导航（配极简图标，选中态薄荷绿下划线，移动端可滑）与预约挂号入口，医生 3D 卡片网格排版（纯白圆角，含形象 / 职称 / 擅长，hover 上浮 + 绿细边框，点击看详情），预约挂号拆解为五步流程（配图标指引，表单带标签提示，支持回车提交），健康数据区用薄荷绿简洁图表（折线 / 环形）展示指标（带图例标注，点击详情）；全局用无衬线字体，文字层级分明，按钮为绿填充 / 白描边款（移动端≥44px），hover 颜色加深，交互元素支持键盘聚焦，图片带 alt 文本，适配双端，整体极简无冗余，流程清晰，兼顾专业与无障碍体验。

DOTA游戏公司官网

/ 生成暗黑史诗风游戏官网，DOTA 类游戏类别，以深黑 #0A0814 为基底，叠加暗紫 #4A1A5E、暗红 #6E1227 渐变光效 + 灰烬 / 符文 / 星光粒子背景（粒子随鼠标移动缓慢飘散，滚动时密度动态变化），凸显恢弘神秘的史诗氛围；页面核心模块：顶部全屏粒子背景融合游戏主视觉，中间嵌入可交互角色 3D 模型（支持鼠标拖拽 / 触屏滑动 360° 旋转，旋转时角色带武器发光、披风飘动特效）；下接世界观时间线（横向暗黑质感线条串联 3-5 个核心剧情阶段，配复古羊皮卷纹理卡片 + 史诗风图标，已解锁阶段带红光高亮，hover 时弹出剧情梗概弹窗）；中部设多平台下载按钮（PC / 主机 / 移动端图标 + 文字，暗金渐变填充 + 金属质感边框，hover 时缩放 1.05 倍 + 火焰粒子环绕，点击触发下载弹窗）；底部排列社区链接（Discord/Twitter/B 站 / 小红书等，暗黑系线性图标，hover 时变红光 + 轻微抖动）；全局采用哥特式无衬线字体，标题带暗金描边，正文对比度达标，所有交互元素（模型旋转、按钮、时间线卡片）带细腻反馈，适配桌面端 / 移动端，整体沉浸感拉满，突出游戏史诗质感与交互趣味。

AI工具聚合站（目前市场经常需要）

/ 生成兼具设计感与实用性的黑紫科技风 AI 工具导航站，以深黑 #12101F 为基底，叠加科技紫 #7B2FFD→深空蓝 #2F4BFF 渐变光效，搭配细腻流动的电路网格纹理（随页面滚动轻微动态发光），支持亮色 / 暗黑模式无缝切换（切换带 0.3 秒渐变过渡）；视觉设计凸显精致质感 —— 顶部搜索框采用 “半透明磨砂黑 + 科技紫发光边框”，聚焦时边框光效外扩，内置放大镜图标与 “搜索 AI 工具 / Prompt” 灰色提示文字，输入时文字自动高亮；工具卡片分类区按写作 / 画图 / 视频 / 代码四大场景分区，每个分类顶部配专属渐变图标 + 科技感标题（文字带轻微紫蓝渐变），卡片采用 “半透明磨砂玻璃拟态 + 1px 渐变描边”，圆角 12px，内含 “工具图标 + 名称 + 3 行内核心功能描述”，底部横向排列热门标签（圆角胶囊状，淡紫底色 + 白色文字，hover 时渐变反转）；交互设计强化细节：卡片 hover 时轻微上浮 8px + 阴影加深 + 描边光效增强，内置 “复制 Prompt” 按钮（悬浮于卡片右下角，科技紫图标 + 文字，点击后触发 “复制成功” 霓虹弹窗 + 粒子飘散特效），右上角收藏按钮（空心→实心渐变切换，收藏时带轻微弹跳动画）；页面顶部增设热门标签导航栏（可横向滑动，选中态用科技紫下划线 + 缩放效果），右下角设模式切换开关（带月亮 / 太阳图标，切换时图标旋转 180°）；全局采用 Inter 无衬线字体，标题带轻微渐变光泽，正文对比度≥4.5:1，所有按钮（搜索 / 复制 / 收藏 / 切换模式）均带细腻微交互，页面滚动时工具卡片按顺序渐入上浮，适配桌面端 / 移动端，整体兼具科技感与设计精致度，既满足高效检索需求，又带来沉浸式视觉体验。

这10个扔进去随便哪个，都是能直接交甲方、直接部署、直接收钱的生产级官网

4:3，赛博朋克国潮融合的未来都市封面，以参考图中金色机械龙为主体，龙身覆盖精密齿轮与霓虹灯带，鳞片呈现金属光泽与发光纹路；龙首高昂，紫色发光瞳孔，龙须飘逸带金色流光，龙爪紧握数据流构成的祥云（数据线条为蓝色，祥云边缘有橙红色光晕）；背景为超高层建筑群，中式阁楼与未来摩天楼交错，建筑表面有红色灯笼投影和全息广告（含中文书法字体），空中悬浮复古飞行器与无人机；整体高饱和度霓虹灯光效（主色调为金、红、蓝、紫），光源来自龙身发光部件、建筑霓虹招牌及云层间的光束，超广角透视增强空间纵深感，精细渲染金属质感、玻璃反光和烟雾层次，8k 分辨率，站酷三火标志性笔触风格（锐利线条与厚重色块结合），科幻与传统元素碰撞的视觉张力，构图饱满具有封面级冲击力的杰作。

4：3，8K 分辨率，奇幻自然美学，核心元素为活火山喷发瞬间，岩浆与火山灰向四周飞溅，火山顶部有彩虹色极光缠绕；色彩方案：岩浆红 + 荧光橙 + 墨黑撞色，天空背景为深邃紫蓝渐变，岩浆边缘泛金色光晕；质感：岩浆带熔融流动质感，表面有气泡破裂特效，火山灰呈烟雾朦胧感，岩石带粗糙颗粒纹理；排版：主标题‘火山纪元’用粗体渐变字体（红→橙），带立体阴影，置于画面上方，副标题‘自然之力’用白色纤细字体，点缀在右侧火山灰中；细节：岩浆中夹杂发光水晶碎片，极光带动态流光效果，岩石缝隙透出荧光绿，整体画面炸裂且富有层次感，符合站酷三火‘细节精湛 + 视觉冲击’要求

4:3，万圣节主题场景，画面中央是戴着黑色尖顶巫师帽的骷髅巫师，帽子上有黄色月亮标志，巫师穿着紫色斗篷，面部为白色骷髅头带绿色眼睛；背景是满月夜空，天空中有多只黑色蝙蝠飞舞，地面是大片南瓜地，每个南瓜都雕刻有发光的杰克灯，南瓜间点缀着黄色小灯串；远处有亮着暖黄色灯光的木屋，周围有树木和灌木丛，整体色调以深紫、橙色、黑色为主，营造神秘又温馨的节日氛围，细节包括南瓜表面的纹理、巫师斗篷的褶皱、蝙蝠的动态姿态和空中漂浮的落叶。

4:3，古风武侠场景，画面中央是身着黑色与橙色相间武士铠甲的男性角色，手持长剑，站姿挺拔，背后有爆炸产生的橙黄色火焰；角色两侧各有一个巨大的破损战鼓，鼓面有裂痕和图腾图案，鼓身放置在木制支架上；背景是欧式古典白色建筑群，建筑有圆顶、拱形门窗和雕花装饰，空中绽放金色烟花，建筑两侧悬挂黄色油纸伞和红色灯笼；地面为圆形石质平台，有积水倒映火光，周围散落碎石和纸张，整体色调以黑、橙、白为主，光影对比强烈，细节包括铠甲纹理、剑刃反光、火焰动态和建筑雕花

16:9，赛博朋克风格场景，画面中央是破碎的立体字母 “3D”，字母由金属材质构成，内部迸发蓝、紫、粉、绿、橙五彩霓虹光效，光效呈放射状向四周扩散；背景是未来都市夜景，左侧有高楼大厦和全息投影屏幕，右侧有古典柱式建筑残骸；地面为深色木质地板，字母前方散落着金属碎片、电路板和菱形晶体；画面中有蓝色闪电状光带贯穿左右，整体色调以深黑为底，霓虹色彩鲜艳明亮，细节包括金属字母的破损边缘、光效的粒子质感、建筑的结构层次和地板的木纹反光。

16:9，奇幻卡通风格场景，画面中央是戴着紫色尖顶巫师帽的小女孩，手持蓝色水晶法杖，站在悬浮岛屿中央，岛屿上有木桥、绿色植被和蓝色魔法袋；周围环绕多个悬浮岛屿，岛上有彩色屋顶的小屋、风车和塔楼，空中有多个热气球（棕色带绿色条纹、紫色带白色条纹）和发光的粉色小龙；背景是淡紫色天空和白色云朵，紫色与蓝色魔法光带呈螺旋状环绕岛屿，地面有绿色草地和彩色花朵，整体色调明快梦幻，细节包括巫师袍的褶皱、法杖的水晶光泽、小龙的翅膀纹理和岛屿的岩石质感。

16:9，梦幻云端场景，画面中央是巨大的半透明蓝色鲸鱼，身体上承载着一座粉色城堡，城堡有多个尖顶和塔楼，周围环绕小型悬浮岛屿，岛上有绿色树木和白色小屋；鲸鱼在粉色和紫色的云层中游动，眼睛发出柔和的蓝光，身体周围有白色光点；空中有几只白色飞鸟和蓝色小龙，背景是渐变的粉紫色天空，整体色调柔和梦幻，细节包括鲸鱼的皮肤纹理、城堡的窗户设计、云朵的棉花糖质感和小龙的翅膀透明度。

16:9，童话森林场景，画面中央是巨大的红色七星瓢虫，背部有黑色斑点，头部有两只大眼睛，背上坐着两个戴棕色探险帽的小男孩，他们正向地面挥手；地面有三个同样装扮的小男孩，背着棕色背包，手持木棍，站在蘑菇林间的小径上；周围是超大型蘑菇（红色带白点、浅棕色），蘑菇茎上有苔藓，地面覆盖绿色苔藓和蓝色小花，空中漂浮透明泡泡；背景是夕阳下的绿色草丛，光线从蘑菇间隙斜射进来，整体色调温暖明亮，细节包括瓢虫的腿部绒毛、男孩的表情神态、蘑菇的菌褶纹理和泡泡的光影折射。

16:9，赛博朋克卡通风格场景，画面中央是悬浮的白色机器人，头部有蓝色圆形眼睛，身体为蓝白配色，胸前有发光核心，双臂向两侧张开；机器人周围是破碎的几何环形结构，环内有蓝色霓虹光效和放射状光芒，环形上分布着全息投影屏幕（显示图表、数据和圆形图案）；背景是未来都市夜景，高楼大厦林立，建筑表面有紫色和蓝色霓虹灯条，空中有飞行汽车（银色、蓝色）和小型悬浮机器人；画面左右两侧各有一个站立在楼顶的小型机器人，地面是多层城市建筑群，整体色调以深紫、蓝、粉为主，光影对比强烈，细节包括机器人的关节设计、全息投影的动态效果、飞行汽车的流线型外观和建筑的玻璃幕墙反光。

16:9，赛博朋克神话风格场景，画面中央是身着金色机械战甲的女性角色，头戴流线型头盔，面部有蓝色发光面罩，左手持透明全息投影屏幕（显示复杂数据图表、圆形雷达图和代码文本），右手手指触碰屏幕交互；角色侧身坐在一条巨大的机械蛇身上，蛇身覆盖鳞片状金属装甲，背部有发光黄色线条，蛇首位于角色右下方，眼睛发出黄色光芒，蛇口微张露出机械獠牙；背景是古希腊风格的废墟建筑，有残破的多立克柱式和石块，地面散落齿轮和金属碎片，整体环境为暗金色调，光源来自角色战甲、机械蛇的发光部件和全息屏幕，光影对比强烈，细节包括战甲的金属质感、蛇鳞的纹理层次、全息投影的动态效果和废墟的风化痕迹。

/ 在Figma make中使用 Gemini 3 Pro，给我生成一个完整的单屏微信裂变邀请 H5，尺寸 750×1334px，背景纯黑 #000000 + 紫色霓虹渐变，顶部大标题「邀请好友得壬蟒耳机」，中间一个输入框（placeholder「输入邀请码」）+ 金色提交按钮，提交后全屏金币雨粒子特效（金色 #FFD700），然后弹出用户专属头像（圆角 50%），最下方生成一张分享海报（海报里自动带当前用户的专属邀请码和小程序二维码），海报右下角有个「保存图片」按钮，全程用 Figma 组件、variant、prototype 交互实现。

/ 在Figma make中使用 Gemini 3 Pro，给我生成一个双11秒杀 H5，尺寸 750×1624px，全屏深紫 #4F0A7A + 霓虹粉渐变，顶部倒计时「距离结束还剩 00:23:45」（用 Figma 文本组件模拟倒计时），中间巨型价格标签「￥99」被咬碎动画（用遮罩+位移动画），底部一个金色「立刻领取」按钮，点击后全屏红包雨（红色红包从天而降）+ 金币爆炸粒子特效，全部用 Figma prototype 交互实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个品牌5周年庆 H5，尺寸 750×全屏，黑紫星空背景（带微光粒子），顶部大字「5th Anniversary」，中间一个翻牌倒计时（用 variant 做 5 个状态，每天翻一张），每张牌翻开后出现一个彩蛋动效，最后一天翻完后全屏烟花粒子 + 中间弹出「专属优惠券 88 折」卡片，用 Figma 组件和交互实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个圣诞祝福 H5，尺寸 750×1334px，背景白色+雪花飘落（用多个雪花组件+向下位移动画），中间一个输入框「输入你的名字」，下方金色「生成圣诞卡」按钮，点击后生成一张定制卡片（卡片上写「2025 圣诞快乐，XXX」+ 一个戴圣诞帽的小人），右下角「发送给TA」按钮，用 Figma variant 和交互实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个开学季抽奖大转盘 H5，尺寸 750×1334px，黑金赛博风，中间一个可旋转的大转盘（用 Figma 旋转交互模拟），转盘分为 8 个奖品格（MacBook、AirPods、谢谢参与等），下方金色「开始抽奖」按钮，抽中后对应奖品从转盘飞到屏幕中央，没抽中弹出「叫好友帮你再抽一次」按钮，用 Figma prototype 实现完整流程。

/ 在Figma make中使用 Gemini 3 Pro，生成一个情人节表白 H5，尺寸 750×全屏，背景玫瑰雨（红色玫瑰花瓣从天而降），顶部两个输入框「他的名字」「她的名字」，下方粉色「生成祝福」按钮，点击后全屏出现两颗心合成一个大心，中间写「XXX ❤ YYY 在一起」，最后全屏烟花粒子，用 Figma 交互和遮罩实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个新品发布倒计时 H5，尺寸 750×1334px，极简黑+紫色霓虹边框，中间超大倒计时「03:15:27」（用文本组件模拟），倒计时结束后自动触发表面玻璃破碎效果（用遮罩+碎片位移动画），破碎后露出新品 3D 渲染图 + 底部「立即预约」按钮，用 Figma prototype 实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个每小时限时秒杀 H5，尺寸 750×全屏，背景深紫渐变，中间倒计时「00:59:47」，下方商品卡片「壬蟒耳机 ￥1」，右侧「立即抢购」按钮，时间到后按钮变灰并显示「手慢无」，下方出现「下场整点再来」+ 微信分享按钮，用 Figma 状态变体实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个内推裂变 H5，尺寸 750×1334px，黑金风，顶部标题「年薪50w+内推」，中间姓名和电话两个输入框，下方「生成专属海报」按钮，点击后生成一张海报（海报里自动填入用户姓名+专属内推码+二维码），海报右下角「转发朋友圈」按钮，下方实时排行榜（前10名），用 Figma variant 和交互实现。

/ 在Figma make中使用 Gemini 3 Pro，生成一个虚拟展会邀请 H5，尺寸 750×全屏，赛博城市夜景背景（紫色霓虹大楼），中间一个巨大的「进入展会」按钮，点击后触发飞船从天而降动画（用位移动画），飞船停稳后弹出个人3D门票（门票上写用户姓名+专属二维码），下方倒计时「距离开幕还有 03:21:15」，全程用 Figma 组件和 prototype 交互实现。

/ 开发一款面向中小学、地理培训机构及科普平台（博物馆 / 科技馆）的地理地形 3D 交互教学系统，以 “3D 可视化 + AI 模拟 + 互动任务” 为核心，解决地形抽象、地理现象难理解、缺乏实操体验的痛点，适配课堂教学、研学活动、地理竞赛场景，支持网页嵌入及电脑 / 平板 / 手机多设备适配（触屏端简化操作、竖屏信息排版）；核心功能包含：1. 3D 地形交互（全球地形库、360° 旋转 / 缩放 / 定位、真实 / 卡通双风格、点击高亮 + 信息卡、基础操作栏）；2. AI 现象模拟（按地形 / 现象触发动态演示，支持暂停 / 慢放 / 循环，关键节点注解 + 步骤解析，预留语音接口）；3. 互动闯关（标注 / 判断 / 问答三类任务，对错反馈 + 知识点解锁，教师端数据面板 + 导出功能）；4. 多端适配嵌入（API 接口 + 嵌入代码，支持机构定制）；最终输出分模块技术实现方案、UI 设计规范、AI 调用细节及场景定制方案。

2025・个体聚变：一人即军团（实时聚变交互原型）

/ 生成 “2025・超级个体觉醒” 双端交互原型（PC / 移动端适配，即开即用）：极暗黑紫渐变背景（#0A0418-#1A0F3F）+ 5-15px 星尘粒子（30%-70% 透明），中央 350px 透明水晶球（80% 透明 + 霓虹金 #FFD700 1px 描边），发光元素带 5-10px 光晕；靠近 200px 内触发涟漪（0.3s ease-out）+ 紫金渐变电弧（2-5px 线宽、10 次 /s 闪烁）；绘制≥5 节点闭合形状（首尾距≤30px），水晶球碎裂为 3000 + 碎片（5-20px、60%-90% 透明），飞溅后贴合轨迹聚合（误差≤5px），同步冲击波、镜头抖动 + 震动音效；聚合后生成 3D 发光线框，12 颗技能光球（含 UI/AI 等文字）沿外围旋转渐显；拖拽光球带金色尾焰，松手回归；按住 1 颗以上光球≥0.5s（间距≤100px）触发 “觉醒”：金色粒子风暴 + 剧烈震动，逐字浮现 “一人即军团・2025”（打字机效果 + 镜头拉近）；结束前 2s 出现 “点燃时代” 按钮，点击触发核爆冲击波、震动 + 彩色纸屑雨，所有动效遵循物理规律，交互实时无延迟。

下面这是一款适配双端、以 “意识上传” 为核心主题的沉浸式科技交互网页，用户通过涂抹唤醒液态金属人形并触发高光特效，适用于科技活动开场、品牌发布会互动或设计作品展示

/ 生成可直接鼠标 / 触摸交互的实时原型，全屏极暗黑紫背景（#0d001a），中央用 canvas+simplex noise+metaball 算法渲染液态金属人形，初始半透明流动状态；用户鼠标按下 / 手机触摸后在屏幕随意涂抹，涂抹路径实时生成高亮金色液态金属轨迹并被 “吸” 进人形，人形缺口瞬间填补且带吸力扭曲效果；人形 100% 完整时自动抬头，双眼爆发出强金光（glow 滤镜），0.6 秒后触发全屏金色冲击波（径向放射粒子 + 镜头剧烈震动 + Web Audio 低频轰鸣），随后中央逐字打字机出现烫金霓虹字 “意识已上传・2025”；再次点击已成型人形，其瞬间碎裂成上万颗液态金属微粒四散飞溅（带重力 + 拖尾效果），全程 60fps 丝滑流畅，适配手机与电脑操作，打开即可体验无需额外配置

这是一款适配双端、以 “意识上传” 为核心主题的沉浸式科技交互网页，用户通过涂抹唤醒液态金属人形并触发高光特效，适用于科技活动开场、品牌发布会互动或设计作品展示

/ 生成品牌 IP 网页原型（PC / 移动端适配，即开即交互）：首屏中央科技液态金属风 IP 动态形象，hover / 触摸不同部位触发动作（抬手展 Logo、眨眼弹 Slogan），点击胸口弹出品牌理念弹窗（IP 特质绑定品牌价值观）；下滑展开叙事卷轴，以 IP 成长线串联品牌节点，点击章节弹 IP 插画 + 品牌事件图文，滑动切换 IP 姿态；右侧 DIY 按钮可自定义 IP 配饰 / 背景，生成带品牌水印形象图，支持分享（复制链接）/ 保存；视觉用品牌主色调（暗黑紫 + 鎏金），60fps 丝滑动画，IP 全程融入品牌元素，深度绑定品牌。

可直接交互的照片粒子化动态生成工具网页原型，符合现代极简美学（暗黑模式 + 霓虹渐变 UI）

/ 生成可交互照片粒子化工具网页原型（PC / 移动端适配，极简暗黑 + 霓虹渐变 UI）：支持拖拽 / 点击上传 JPG/PNG 照片，双窗格展示原图 + 粒子化实时渲染；右侧面板滑块调节光效强度、粒子大小 / 密度、散射速度、轨迹拖尾，参数即时同步；粒子运动匹配空灵电子音效（速度 / 光效联动音效节奏），可开关；进阶功能含粒子形态、色彩映射、动态模式切换；支持导出 GIF/MP4（带水印）、分享社交 / 生成短链；界面分层简洁，60fps 丝滑渲染，操作无门槛，现代科技感。

超级简单 3 步流程（大白话）

//

2. 加载快到飞起将页面优化至极致性能/加载优化：首屏≤1s，WebP + 懒加载 + 骨架屏，优化字体 / 资源加载，压缩后体积≤500KB

3. 自动暗黑模式为页面添加无缝的暗黑模式支持：适配系统偏好，40x40 开关，CSS 变量切换 + 0.4s 过渡，对比度达 WCAG AAA 标准。

4.移动端适配：设 viewport，文字≥16px、按钮 48x48，删 hover 效果，多断点 + 60fps 滚动，加缓冲适配各屏

5.弹簧动效：用 Framer Motion 做交互动效，触碰放大 + 光晕、松手微回弹，保持 60fps 丝滑运行

6. 强化 SEO：配置≤20 字 title、≤160 字 meta 描述，加 OG/Twitter 卡片、JSON-LD、sitemap，补 canonical/hreflang 标签，提升多引擎索引效率

7. 无障碍适配：图片加精准 alt、交互区标 aria-label，优化 Tab 顺序，支持屏幕阅读器，动画适配 reduced-motion，确保读屏 / 键盘流畅用

8.升级 PWA：生成 manifest 图标，service worker 缓存实现离线，弹出跨系统安装提示，支持添加至手机桌面

9. 极致压缩：图片转 AVIF（WebP 回退）、精简字体 / 冗余代码，启用 gzip/brotli，压缩后≤300KB 且保 90% 视觉质量

10.代码文档：代码加中文注释，生成含技术栈、部署 / 修改指南的 README.md，助力快速上手

/ AI 会出现 1440px 窄屏，客户说“气势不够，像个人博客”

翻车图：左右各空 240px 黑边

修复一句：全屏 1920px 宽，内容最大 1720px 居中，两侧留 100px 呼吸边，背景通屏

字体小到看不见，客户放大浏览器到 150% 才勉强认出来

翻车图：正文 14px，标题也才 32px，在 27 寸 2K 屏上像蚂蚁

修复一句：正文最小 20px（推荐 22px），小标题 32px，主标题 120–160px，行高 1.6，重点字金色描边

留白严重不足，画面挤得喘不过气

翻车图：元素之间只隔 20–40px，满屏塞满

修复一句：段落间距最小 160–240px，卡片内边距 80–120px，负空间占比 >45%

有些网站的图片会加载不出来，客户直接骂“你们是实习生做的？”

翻车：打开页面一堆小叉叉、404、破图

修复一句：所有图片必须用 WebP 格式 + 加 LQIP 低质量占位图 + 外链走 jsDelivr 或自己图床 + 代码里加 onerror 兜底图

只出现一个界面，并且有很多入口点击不了，客户以为是静态图

翻车图：鼠标放上去一点反应都没有

修复一句：所有按钮卡片加原型交互，hover 变手型 + 放大 105% + 金色光晕，点击有跳转动画

第 1 步（30 秒）：客户发需求 → 我直接扔进 Figma Make 原始 Prompt 生成

第 2 步（1 分 30 秒）：按顺序跑上面 10 句优化的提示词给Figma Make（复制粘贴就行），并结合自身需求进行对于原型的改版进行功能增加/减少

第 3 步（30 秒）：导出代码 → Vercel 一键部署 → 拿到链接

Figma Make 右上角 → Export → Code → 点 Vercel 图标 → 第一次授权一下 → 以后每次点一下 8

秒就出链接(当然你也可以选择出html文件给客户进行手机预览)

第4步 （30秒）：手机录15秒丝滑视频甩客户

第5步 （60秒）：客户看完视频“牛逼，要这个” → 我发收款码 → 收钱走人

Figma Make × Gemini 3.0 的现在与未来 + 你的超级个体时代

单人47分钟出生产级官网（传统团队15天）

9秒100%矢量化一张壬蟒图

3分钟做出旅游局要10w的互动H5

8分钟搞定教育机构要2w的DNA教学动画

把1278个AIGC资产做成模板，估值360w+，月入收租5位数

我没带团队，没外包，没通宵。

我只有一杯咖啡、一台Mac、一个Figma Make联动Gemini3 Pro。

有人会喷我“没灵魂”。

我做好了被喷的准备。

但我更准备好迎接属于我们的时代。

Gemini 3 Pro 不是取代我们，而是让超级个体诞生。

以后再也没有“我只是个设计师”“我只是个前端”“我只是个产品”的说法了。

以后只有一种人：

一个人就能打出一支军队的人。