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
Taskly

Taskly

创作者 · MotionSites

AI 编程(UI)MotionSites收录 2026/08/19已有人复测#not-rerun#web-ui
查看原始来源 ↗

Prompt

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

System Prompt:高保真“Liquid Glass”主视觉区

核心布局:创建一个最大宽度为 1600px 的落地页主视觉区。背景应为纯白色,左上角带有细腻的分层渐变光晕(使用浅蓝色 #60B1FF 和 #319AFF 的模糊椭圆)。设计必须完全响应式,从移动端单列视图过渡到桌面端双列布局。

字体排印:

标题与品牌:使用 Fustat(Bold)。
正文与 UI:使用 Inter(Normal/Medium)。
主视觉标题:`更聪明地工作,更快速地达成目标`(75px,1.05 line-height,-2px tracking)。

“Strong Liquid Glass”Navbar:

位置:Sticky at top-[30px],居中,w-fit。
视觉效果:backdrop-blur-[50px],背景 rgba(255,255,255,0.3),rounded-[16px]。
保真细节:
外描边:1px solid rgba(0,0,0,0.1)。
内部高光阴影:inset 0px 4px 4px 0px rgba(255,255,255,0.25)。
项目:Logo `Taskly`(Fustat)、Nav 链接(首页、功能、公司、定价),以及带箭头图标的玻璃质感 `注册` 按钮。

玻璃质感 Orb(主视觉右侧):

来源 URL:https://future.co/images/homepage/glassy-orb/orb-purple.webm
混合模式:必须使用 mix-blend-screen 来滤除黑色背景。
缩放:scale-125,使其尺寸巨大,并稍微偏离中心溢出。
精确调色(CSS Filter):hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1)。这会将紫色资源转换为鲜明、高端的“Electric Brand Blue”,与主 CTA 相匹配。

主视觉内容(主视觉左侧):

社会认同:一个 `2700+ 位客户评分 4.9/5` 徽章,带五颗橙色 #FF801E 星星。
副标题:`轻松管理项目、与团队协作,并借助我们直观的任务管理工具实现目标。`(18px,Inter,-1px tracking)。
主要 CTA:`立即开始` 按钮。
颜色:rgba(0,132,255,0.8),搭配 backdrop-blur-[2px]。
细节:rounded-[16px]、白色文字、内部高光阴影 inset 0px 4px 4px 0px rgba(255,255,255,0.35),以及白色圆形箭头图标。
动画:悬停时 Scale 1.02,并带平滑过渡。

页脚 Logo:在底部加入 `深受顶级产品公司的信赖` 区域,其中包含 5 个灰度 SVG Logo(例如科技公司的占位 Logo),以 gap-[100px] 间隔排列。

面向开发者的关键技术规格:

Video Tag:autoPlay loop muted playsInline。
Container:为背景光晕使用 relative wrapper,为内容使用 z-10 main container。
平滑处理:应用 -webkit-font-smoothing: antialiased,以获得最清晰的字体呈现。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型
稳定度
88 / 100
成本
中
对应 Skill网页区块像素复刻 ↗

独立复测证据

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

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

gpt-5.6-sol

2026年10月11日

复测分88.3
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5-5 · 82.5gpt-5.6-terra · 94分歧 · 11.5
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。

多人复现

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

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

GLM-5.3-Flash通过已付Coding套餐单次生成,未调用DeepSeek或HAO。Codex只修复装饰层及超大视频造成的手机横向溢出。桌面1440×1000和手机390×844真实渲染、原视频播放与按钮悬停效果通过;CTA为原设计展示,不含真实注册后端,未进行逐像素还原验收。

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
3D Jack 作品集
AI 编程(UI)MotionSites收录 2026/08/13

3D Jack 作品集

3D 创作者 Jack 的作品集落地页,React + TypeScript + Framer Motion,#0C0C0C 暗底。

Skill · 3D / 动效 HeroSkill · 个人作品集叙事

提示语

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React,为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题(背景为 #0C0C0C),字体使用 Kanit(Google Fonts,字重 300-900)。页面标题为「Jack -- 3D Creator」。 全局样式 html、body、#root 和主容器的背景:#0C0C0C 字体族:'Kanit', sans-serif 全局重置:b

来源热度 · MotionSites
—
稳定度
65
查看 Case →
404 星球
AI 编程(UI)MotionSites收录 2026/08/13

404 星球

主机商 NEXOVA 的 404 页,循环视频背景加导航,错误页做出了落地页的完成度。

Skill · 网页区块像素复刻

提示语

为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局,包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React icons。不要使用其他 UI 库。 --- **字体** 在 `index.html` 中通过以下样式表加载“Helvetica Now Var”: ``` <link href="https://db.onlinewebf

来源热度 · MotionSites
—
稳定度
94
查看 Case →
ADHD 规划器
AI 编程(UI)MotionSites收录 2026/08/13

ADHD 规划器

ADHD 友好的日程应用 Drift 落地站,React + Vite + TypeScript + Tailwind,安静低刺激的视觉方向本身就是产品卖点。

Skill · 网页区块像素复刻

提示语

为 "Drift" 构建一个单页落地网站——这是一款平静、对 ADHD 友好的规划应用。使用 React + Vite + TypeScript + Tailwind CSS + lucide-react 提供图标。不要使用其他 UI 库。 ### 字体 通过 Google Fonts 在 `index.css` 中导入: - **Inter**(字重 400、500、600)——用作基础正文字体 - **Instrument Serif**(仅斜体)——用于首屏标题中的

来源热度 · MotionSites
—
稳定度
91
查看 Case →

同作者

同作者更多 · MotionSites →

  • Quantum LucidAI 编程(UI) · 2026-09-18
  • 珍稀画廊AI 编程(UI) · 2026-08-30
  • Palomar LabsAI 编程(UI) · 2026-08-30
  • Quantum CoreAI 编程(UI) · 2026-08-30
  • Agent WaveAI 编程(UI) · 2026-08-19
  • Aurex FinanceAI 编程(UI) · 2026-08-19

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