還在用 Gemini 3 寫(xiě) ppt？太土了，來(lái)看看最酷炫手勢(shì)互動(dòng)（附提示詞）

Gemini 3 發(fā)布之后這些日子里，我逐漸感到疑惑：為什么總讓 AI 寫(xiě)網(wǎng)站寫(xiě) PPT，Gemini 都發(fā)到第三代了，不能干點(diǎn)更有意思的事嗎？

要那種科幻感強(qiáng)的、效果酷炫的、難度系數(shù)高的，但小白也能做的。比如這種：

或者這種：

Gemini：手勢(shì)交互？沒(méi)問(wèn)題，包的。

在開(kāi)始之前，先準(zhǔn)備好 Gemini 3，這里是一點(diǎn)點(diǎn)的注意事項(xiàng)

目前有三種方式開(kāi)啟玩耍：Gemini 客戶(hù)端 Canvas 模式、Google AI studio-Playground 和 Google AI studio-Build。

其中，最不推薦的是客戶(hù)端，親測(cè)無(wú)法有效拉起攝像頭，并且，下面都是手勢(shì)互動(dòng)項(xiàng)目，舉著手機(jī)，手自然也是沒(méi)法做操控的。

后兩者中，Build 是直接形成一個(gè) app，你可以分享給其它朋友，缺點(diǎn)是 tokens 有限。而 Playground 會(huì)生成一套代碼，需要下載到本地再打開(kāi)，一旦換個(gè)電腦就可能運(yùn)行不了，但優(yōu)點(diǎn)是幾乎沒(méi)有 tokens 限制，每天一百萬(wàn)，量大管飽。

考慮到交互項(xiàng)目比較消耗 tokens，所以 Playground 更為合適，個(gè)別小項(xiàng)目用 Build 也可以，這就看個(gè)人情況而定。

Jarvis

Jarvis HUD 面板是在推上超過(guò)二十萬(wàn)次瀏覽的熱門(mén)爆款，手勢(shì)操控儀表球，就像鋼鐵俠操控 Jarvis 那樣，酷斃了。

參考 prompt 如下：

create a webapp using vanilla js， html， css， modern threejs， mediapipe. it should be a sci-fi tony stark / iron man / jarvis experience focused on simulating an AR heads up display experience. full screen webcam input shown. add a heads up display that tracks the user's head (offset to the right)， with live updating metrics. a minimal 3D world globe should be shown on the left center of the screen， that should be able to be rotated / sized by the user hand gestures

在 Build 模式下，親測(cè)完全可以實(shí)現(xiàn)一次成型，Gemini 會(huì)自動(dòng)安排任務(wù)、編寫(xiě)代碼，調(diào)用不同的接口，進(jìn)度條顯示完成后，點(diǎn)擊 Preview 就能直接打開(kāi)——記得放行攝像頭權(quán)限。

Gemini 3 自己就把效果設(shè)計(jì)安排得明明白白：左手是放大縮小，右邊是轉(zhuǎn)動(dòng)，雙手進(jìn)入攝像頭范圍后會(huì)顯示觸控點(diǎn)——這些都是 prompt 里沒(méi)有的，都是它自己的「想」出來(lái)的。搭配大屏幕或者投影，真的很有 Jarvis 既視感。

左邊的地球建模和右邊的面板的內(nèi)容都是可以改變的，最初 Gemini 3 讓右邊的面板顯示人體體溫（顯然是憑空編的），后來(lái)被我改成了「實(shí)時(shí)顯示左側(cè)地球模型的直徑」。反正 vibe coding 一下，想怎么改怎么改。

雨滴控制

Jarvis 都有了，驚天魔盜團(tuán)不也得安排上。

看電影時(shí)只有特效，但現(xiàn)在，有 Gemini 3 了。參考 prompt 如下：

用 HTML+JS+ML 模型做個(gè)網(wǎng)頁(yè)應(yīng)用，通過(guò)攝像頭檢測(cè)手勢(shì)，實(shí)現(xiàn)用手勢(shì)來(lái)控制雨滴動(dòng)畫(huà)的暫停、靜止和升格效果。動(dòng)畫(huà)效果保持在雨滴垂直方向，風(fēng)格參考電影《驚天魔盜團(tuán)》

這個(gè) prompt 的第一輪表述完全是按照我看電影之后的想法寫(xiě)的，每個(gè)細(xì)節(jié)都可以通過(guò) vibe coding 再調(diào)節(jié)。根據(jù)第一輪 prompt，Gemini 會(huì)加入它自己的設(shè)計(jì)，比如這具體的手勢(shì)就是它想出來(lái)的。

雖然是用 AI 做的，但是在識(shí)別手勢(shì)動(dòng)作時(shí)非常靈敏，包括不同手勢(shì)之間的切換都能夠快速響應(yīng)。

3D 粒子

控制雨滴曾經(jīng)是非常復(fù)雜的特效技術(shù)，就在《驚天魔盜團(tuán) 2》上映之后，有一個(gè)飲料公司做了一支廣告，通過(guò)控制雨滴，實(shí)現(xiàn)靜態(tài)的粒子效果。

那么參考「控雨術(shù)」，Gemini 完全可以實(shí)現(xiàn)上面這種結(jié)合實(shí)拍和速度控制才能出現(xiàn)的效果，最接近的就是 3D 粒子。所以我又做了一個(gè) 3D 粒子效果的交互案例。

非?？犰?！prompt 參考如下：

用 Three.js 創(chuàng)建一個(gè)實(shí)時(shí)交互的 3D 粒子系統(tǒng)。通過(guò)攝像頭檢測(cè)雙手張合控制粒子群的縮放與擴(kuò)散，提供 UI 面板可選擇愛(ài)心/花朵/土星/佛像/煙花等模型，支持顏色選擇器調(diào)整粒子顏色，粒子需實(shí)時(shí)響應(yīng)手勢(shì)變化。界面簡(jiǎn)潔現(xiàn)代，包含全屏控制按鈕

一次成型，最后出來(lái)的交互非常絲滑，尤其是對(duì)于手勢(shì)的識(shí)別很準(zhǔn)確又靈敏。

【小技巧】 涉及到顏色、布局、UI 設(shè)計(jì)等等細(xì)節(jié)，如果每次都用 vibe coding 的方式來(lái)調(diào)節(jié)，表述起來(lái)會(huì)很麻煩。并且每一次 vibe code 都存在抽卡的情況，所以有一個(gè)非常實(shí)用的技巧是：加上自定義模塊，尤其是顏色、大小等，這樣可以完全自主搭配自己喜歡的配色方案。

技能五子棋

由雨滴想到粒子，由粒子想到移動(dòng)，由移動(dòng)想到——五子棋！我終于可以做技能五子棋了！！

仔細(xì)想想，五子棋不也是一個(gè)手勢(shì)控制、飛來(lái)飛去的交互方式嗎！飛沙走石移動(dòng)棋子，力拔山兮移動(dòng)棋盤(pán)，全都安排上！

Prompt 參考如下：

做一個(gè)手勢(shì)互動(dòng)小游戲「技能五子棋」：主頁(yè)面為五子棋棋盤(pán)，默認(rèn)已經(jīng)擺放好棋子。當(dāng)用戶(hù)做出「單手甩手」的動(dòng)作時(shí)，棋子會(huì)跟隨甩動(dòng)的方向飛出棋盤(pán)。當(dāng)用戶(hù)做出「雙手甩動(dòng)」的動(dòng)作時(shí)，棋盤(pán)會(huì)跟隨甩動(dòng)方向飛動(dòng)

Gemini 自己完成了物理邏輯和手勢(shì)之間的銜接，我的 prompt 只需要描述效果，而具體的速度向量計(jì)算、檢測(cè)閾值，都不用我管。

它甚至還重新命名了「技能」：萬(wàn)象天引。

這叫飛沙走石啊 Gemini 老師！

節(jié)奏音樂(lè)游戲

綜合上面的幾個(gè)嘗試，Gemini 的毋庸置疑，而且回想一下這些技能樹(shù)：手勢(shì)識(shí)別、色彩變化，這些組合起來(lái)，不就是小游戲嗎？

于是我嘗試了更復(fù)雜一點(diǎn)的項(xiàng)目：節(jié)奏游戲。

音游玩過(guò)很多了，但是零經(jīng)驗(yàn)小白真要做一個(gè)游戲、怎么給 Gemini 形容我想達(dá)到的效果，還真是花了一點(diǎn)腦筋 ，后來(lái)第一版 prompt 如下：

做一個(gè)用手勢(shì)操控的音樂(lè)游戲，主界面為四條音軌，用戶(hù)上傳音樂(lè)文件后，四條音軌上按節(jié)拍出現(xiàn)光點(diǎn)，用戶(hù)需要用手勢(shì)準(zhǔn)確拍擊出現(xiàn)的光點(diǎn)，背景為復(fù)古合成波（Synthwave）風(fēng)格，背景、音軌和光點(diǎn)的顏色可以自定義調(diào)節(jié)

這基本上是我能想到的雛形，根據(jù)第一版 prompt，Gemini 選擇了 Pygame 作為游戲引擎，繼續(xù)使用 MediaPipe 做手勢(shì)追蹤，并且加入了 Librosa 用來(lái)分析音樂(lè)。

選擇復(fù)古合成波風(fēng)格是因?yàn)樗忻鞔_的視覺(jué)標(biāo)志——Gemini 也識(shí)別出來(lái)了——落日、霓虹漸變色、網(wǎng)格和駛向地平線(xiàn)的道路，非常適合節(jié)奏音游。

果然做游戲比前面的一些小交互復(fù)雜多了……先是只能識(shí)別一只手，得調(diào)整；然后是無(wú)法上傳音樂(lè)，得調(diào)整；到了第三版才稍稍有點(diǎn)樣子

但是在體驗(yàn)過(guò)中我發(fā)現(xiàn)一個(gè)比較 bug 的地方：判定線(xiàn)的位置離屏幕邊緣太近了，而攝像頭的識(shí)別范圍是有限的，我的手稍微放低一點(diǎn)就無(wú)法被識(shí)別。

一開(kāi)始我嘗試的方法是，把判定線(xiàn)移動(dòng)到屏幕居中位置，保證我的手始終能在攝像頭捕捉范圍內(nèi)。

但是又出來(lái)一個(gè)問(wèn)題：光點(diǎn)出口和判定線(xiàn)之間的距離過(guò)短，留給我的反應(yīng)時(shí)間也很短，更別提點(diǎn)擊動(dòng)作還有一點(diǎn)點(diǎn)點(diǎn)的延遲，整個(gè)可玩性大大下降?？墒欠盘途瓦€是會(huì)出現(xiàn)手掉出識(shí)別范圍的情況。

一時(shí)之間我還真想不到這個(gè)矛盾該怎么辦，于是，我直接去問(wèn)了 Gemini 能怎么解決。

它直接指出了這個(gè)問(wèn)題的癥結(jié)所在，并且提出了「視覺(jué)欺騙」的方式來(lái)優(yōu)化體驗(yàn)，并且加了一個(gè)自定義滑塊來(lái)調(diào)節(jié)偏移，這樣一來(lái)無(wú)論手在什么位置，都可以通過(guò)調(diào)節(jié)滑塊來(lái)對(duì)齊判定線(xiàn)。

天才。

后來(lái)我還指出，感覺(jué)光點(diǎn)的出現(xiàn)跟節(jié)奏不太一致，為了解決這個(gè)問(wèn)題，Gemini 又加了一個(gè)滑塊用來(lái)調(diào)節(jié)延遲。雖然我仍然認(rèn)為它并沒(méi)有很好地分析節(jié)奏型，但是這個(gè)滑塊的設(shè)計(jì)還是很有效，尤其是解決了戴著藍(lán)牙耳機(jī)導(dǎo)致的延遲。

【一些小技巧】 本質(zhì)上，只要有 prompt 就有抽卡的情況存在，但抽卡未必就不好。當(dāng)碰到非常硬傷的 bug，比如始終無(wú)法調(diào)用攝像頭、無(wú)法上傳文件等等，vibe coding 時(shí)反復(fù)修改也沒(méi)效果，不如就直接「新建項(xiàng)目」。核心功能反映在代碼上，彼此之間有所牽連，重新跑一遍，讓 AI 整體性地補(bǔ)足，遠(yuǎn)比一點(diǎn)點(diǎn) vibe coding 要更有效率。當(dāng)然，能看懂代碼就會(huì)更有效率，可以針對(duì)性地解決。 只不過(guò)，對(duì)于完全的零碼選手來(lái)說(shuō)，還不如直接重新抽卡。

在 AI 之前，做手勢(shì)交互的應(yīng)用，得先學(xué)點(diǎn)兒 Touch Designer，最好還懂點(diǎn)兒部署。這些都得一點(diǎn)點(diǎn)翻教程，反復(fù)研究，在這個(gè)過(guò)程中搞不好就被勸退了。

有了 AI 之后有多簡(jiǎn)單，自然不用多說(shuō)。更關(guān)鍵的是，手勢(shì)交互原本的門(mén)檻遠(yuǎn)比生圖、做 PPT 要更復(fù)雜，卻又能讓小白零碼選手快速領(lǐng)略到做應(yīng)用的樂(lè)趣。

唯一留下的，是對(duì)審美的挑戰(zhàn)。在這些案例里能看到，Gemini 有點(diǎn)審美，但不多，設(shè)計(jì)、配色等等都是差強(qiáng)人意。代碼的「硬」技能它可以掌握，留給我們的，就是對(duì)于審美的挑戰(zhàn)。