GoodCase.aiGoodCase.ai中文 AI Case 证据库
案例Skills创作者收藏投稿
中文EN
Agent 接入 →
GoodCase.ai · 中文 AI Case 证据库案例库加载中。
更新日志反馈
GoodCase.aiGoodCase.ai中文 AI Case 证据库
案例Skills创作者收藏投稿
中文EN
Agent 接入 →
AI 编程(UI)X2025-11-19证据 L1#youmind#Gemini 3 Pro#human-reviewedGemini 3 Pro

Mediapipe 实时人脸激光眼特效网页

愚|创作者愚瞳 | winterx →

三行技术栈清单直接对应三个实现步骤:摄像头取流、Mediapipe 抓人脸关键点、Three.js 按关键点实时渲染激光眼特效,提示词本身就是一份技术方案而不是效果描述,作者后来还把它做成了开源网页。

查看原始来源 ↗
原帖 ♥ 2.7k

Prompt

使用电脑的前置摄像头
使用 mediapipe 库捕捉面部关键点
使用 threejs,根据 mediapipe 提供的实时 3D 关键点信息,为摄像头捕捉到的面部应用激光眼特效

复用方法

关键决定

提示词直接用三行技术栈清单代替效果描述,每一行都是具体到库名的技术实现步骤,摄像头取流、mediapipe 抓关键点、three.js 渲染特效,这种写法要求模型对提到的每个具体库都有扎实的训练数据支持,换成小众或者过时的库名大概率会失败。三个步骤之间有明确的数据流向,摄像头的画面传给 mediapipe,mediapipe 算出的关键点传给 three.js,这个数据流顺序本身就是需求说明,模型不需要额外推理三个技术模块该怎么衔接。

换到你的题材

骨架就是技术栈清单加数据流向说明,换成其他实时人脸特效,比如猫耳朵、彩虹泪光,都能套用同一个模板,只需要把最后一步 three.js 做的具体视觉效果换掉,摄像头取流和 mediapipe 抓关键点这两步几乎不用变。

容易翻车

这类提示词严重依赖运行环境,浏览器权限、摄像头硬件、光线条件都会影响 mediapipe 关键点识别的准确度,复测时如果特效对不上脸的位置,先排查是不是关键点识别本身出了问题而不是 three.js 渲染的问题。三行技术栈描述对非工程背景的使用者来说复现门槛较高,收录这类案例时最好在方法说明里补充清楚每个库的作用,不能假设读者都懂这几个库名。

建议模型

Gemini 3 Pro
稳定度
成本
低

Derived Skill

这个 Case 可以学走的方法。

Skill 只从多个已发布 Case 的重复模式中派生,不是另一套投稿内容。

通用 Skill落地页信息结构查看证据 →
愚|

创作者

愚瞳 | winterx

愚瞳 | winterx 长期扎根X,交付可运行的界面,《Mediapipe 实时人脸激光眼特效网页》配了完整实现思路。

编辑精选AI 编程(UI)来源互动高低成本可学
查看创作者 →

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
Gemini 模拟理论交互网站
AI 编程(UI)X@chetaslua →

Gemini 模拟理论交互网站

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

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

提示语

🚨 Gemini 3.0 pro - ecpt checkpoint Holy shit,我们的 Prompt 和想象力就是唯一的限制,去看看这个网站。 Prompt:编写一个关于模拟理论的神秘网站。让它感觉像现实正在实时渲染——实体物体下方出现线框网格,纹理逐步加载,元素短暂漂浮的物理故障。加入 Matrix 风格的代码雨背景,让各个区块在“已渲染”和“源代码”视图之间闪烁切换,并加入环境计算机处理声音;最后设计一个元叙事时刻,让网站承认自己正在被观看。把它设计成一位

来源热度
73
稳定度
投票催复测
查看 Case →
一句话新粗野主义网页
AI 编程(UI)X2025/11/13Dorksense →

一句话新粗野主义网页

三句话生成一整个可交互网页:风格、动效、色彩三个关键词加一个页面标题,证明 Gemini 3 对新粗野主义这种视觉语言高度共识的风格,短提示词也能跑出完整效果,而不需要逐段拆解排版要求。

Skill · 落地页信息结构

提示语

做一个新粗野主义风格的网页,尽可能极具创意,把限制推到极致。加上流畅的滚动动画,加上花哨的配色和 Tailwind CSS 样式。做成响应式的。页面标题是 dorksense

来源热度
86
稳定度
投票催复测
查看 Case →
从一张图片生成 Three.js 体素艺术场景
AI 编程(UI)X2025/11/18Ian Goodfellow →

从一张图片生成 Three.js 体素艺术场景

用一张参考图代替文字描述整套视觉风格,只留一句话要求把图片转成体素艺术风格的 Three.js 单页代码,考验的是模型的图生代码能力而不是文字理解能力,和纯文字提示词是完全不同的技术路径。

Skill · 3D / 动效 Hero

提示语

我提供了一张图片。请根据这张图片编写一个漂亮的体素艺术场景。用 Three.js 写成单页代码

来源热度
81
稳定度
投票催复测
查看 Case →
GoodCase.ai · 中文 AI Case 证据库Case 详情页把作品、方法、作者与复测证据放在同一条阅读路径里。
更新日志反馈