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

Gemini 3.1 暗色科技网站 Prompt

创作者 · aiedge_

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

Prompt

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

Gemini 3.1 Pro 在网站设计上强得离谱。

要使用的确切提示词:

为一个 [插入公司名] 做 UI/UX 网页设计,暗色模式,极简主义,高级企业科技美学。抽象的 3D 流体形状背景,深蓝、紫色和翠绿色的发光渐变。卡片式布局,带细微玻璃拟态,干净的无衬线字体,高对比度白色文字,充裕的负空间。高保真,8k,Dribbble 风格,精致而未来感。」

如果你要修改这条提示词,需要包含的关键元素:

配色:暗色背景配鲜艳的霓虹发光强调色。

字体:现代、干净的无衬线字体。

图形:抽象的流体 3D 波浪或光带。

布局:宽敞、卡片式、高度结构化。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

Gemini 3.1 ProGPT-5.6 Sol
稳定度
92 / 100
成本
中
对应 Skill3D / 动效 Hero ↗落地页信息结构 ↗

独立复测证据

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

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

gpt-5.6-sol

2026年8月9日

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

多人复现

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

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

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

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
AntiGravity + Gemini 3.1 落地页
AI 编程(UI)X收录 2026/07/28

AntiGravity + Gemini 3.1 落地页

@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 构建一个 Hero 区域,具体规格如下: 整体布局: 全宽版块,背景色 #000000(纯黑) overflow hidden 所有内容背后播放背景视频(详情见下) 背景视频: 来源: 自动播放、循环、静音、playsInline 缩放到容器的 120%(宽度和高度均为 120%) 水平居中,焦点锚定在底部 位于所有内容之下(最低层级) 模糊背景元素: 绝对定位,水平居中,顶部偏移约 215px 尺寸:宽 801px × 高 384px,完全圆角(药丸

来源热度 · X
97
稳定度
89
查看 Case →
Claude 滚动叙事网站
AI 编程(UI)X收录 2026/07/28

Claude 滚动叙事网站

@Oluwaphilemon1 使用 Claude · Three.js · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

我如何用 Claude 构建它 👇 1. Prompt:“构建一个叙事网站,每个滚动区块都通过流畅的色彩过渡揭示一个新的章节” 2. 使用 Three.js 制作会响应光标的绘画质感背景 3. Prompt:“加入 GSAP ScrollTrigger,让每个区块像电影场景一样进入动画” 4. 使用 Lenis.js 实现高级网站那种丝滑的平滑滚动

来源热度 · X
95
稳定度
88
查看 Case →
Gemini 3.1 一次生成动效网站
AI 编程(UI)X收录 2026/07/28

Gemini 3.1 一次生成动效网站

@viktoroddy 使用 Gemini 3.1完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 构建一个高级电动车落地页,具有深色电影感美学。整个网站使用黑色背景(hsl(0,0%,0%)),配浅色文字(主色 hsl(0,0%,95%))和橙色强调色(hsl(25,100%,50%))。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块: 设计系统(index.css) --background: 0 0% 0% --foreground: 0 0% 12%(用于 CTA 按钮内圆等深色元素) --primar

来源热度 · X
93
稳定度
66
查看 Case →

同模型

同模型最新 · Gemini →

  • Gemini 中类似 CapCut 的视频编辑器 UIAI 编程(UI) · Gemini 3 Pro · 2026-08-12
  • 生成 40 个带下载按钮的简单 SVG 图标AI 编程(UI) · Gemini 3 Pro · 2026-08-12
  • 基于 React 的高端瑞士风格着陆页生成器AI 编程(UI) · Gemini 3 Pro · 2026-08-12
  • 纽约天际线 SVG 单 HTML 场景AI 编程(UI) · Gemini 3 Pro · 2026-08-12
  • 为客户 AP 打造的代理机构风格网站AI 编程(UI) · Gemini 3 Pro · 2026-08-12
  • Mediapipe 实时人脸激光眼特效网页AI 编程(UI) · Gemini 3 Pro · 2026-08-04

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