AI 科技

我怎麼用 Gemini 3 在 10 分鐘內做一個精美又實用的蕃茄鐘?分享給大家

Google 最新推出的 Gemini 3 號稱是最聰明的 AI 模型,可以理解你的想法,所以我想說那就讓他來幫我把最近一直停在我腦海中,想要用程式寫出來的蕃茄鐘讓他幫我做,而且實作以後效果真的還蠻不錯的。

下面就帶大家來看看我是怎麼用 Gemini 3 做出一款我覺得精美、實用的蕃茄鐘!如果你喜歡的話,最後我會把載點提供給大家下載拿回去用。

為什麼我要用 Gemini 3 做蕃茄鐘?

其實會想做這個蕃茄鐘,主要是想讓小朋友可以用視覺化的方式知道他現在還剩下多少時間吃飯、看電視或是完成手上的事情,因為過去都是用 iPhone 的倒數計時器,每次都只能等到時間到了、鬧鐘響了才知道,所以希望可以有一個圖像化的方式,可以用看得知道自己可以用的時間不多了。

下面就分享我整個製作過程給大家,真的很快!

用 Gemini 3 製作超好用蕃茄鐘

首先,開啟 Google AI Studio 或是 Gemini 網頁版,我會推薦用 Google AI Studio,因為生成的結果可以直接下載來用。

開啟後,選擇 Gemini 3 Pro,然後在下方的指令框中輸入你想要做的東西,一開始可以不用想得太複雜或是要求多完美,因為後續要調整都可以用聊天的方式讓 Gemini 去修改。

所以我就先下了這樣的指令:

幫我寫一個互動式網頁,UI 要精美且現代化,頁面上有兩個鐘 (顯示指針的那種),一個是正常的時鐘,另外一個是番茄鐘,會依照我設定的時間倒數,倒數的範圍以綠色顯示

然後 Gemini 會開始撰寫程式,看不懂沒關係,等他跑完以後,點選右上角的下載按鈕,你會得到一個 html 檔案。

直接把這個 html 檔案點開來,就看到第一個版本的結果。

老實說這個結果已經完全符合我要的功能了,可以設定時間、翻截鐘倒數時會看到綠色區域不斷變小….等,而且也很簡潔。

用聊天的方式進一步修改

上面說到如果有想要調整一樣可以用聊天的方式請 Gemini 修改,所以我想說要讓他再更精美一點,於是我就請他把時鐘大小再放大一點、再更有設計感一點,甚至是請他參考 Apple 的 Liquid Glass 去做設計。

而且目前那個綠色的區域是以「每分鐘」為單位在遞減,我覺得這樣子會看不太出來時間的流逝,所以我另外請他加入一個紅色以「每秒」為單位的指針,這個指針會轉比較快,比較可以知道時間一直在流動。

最終的成果長這樣。

而且時間到了以後還會跳出提示,這個是我當初沒有想到的,所以我以為當倒數時間到了以後就單純只是會回到最原始的狀態,沒想到 Gemini 3 自己幫我想到這點並加上了。我之後應該會改成時間到以後看看能不能發出些聲音或是讓畫面震動、閃爍之類的吧。

整個蕃茄鐘實際運作的效果大概如下:

而且因為我也沒有要上架 App Store,所以只要透過瀏覽器,無論是電腦、手機、平板都可以打開來用,在功能與設計上又完全符合我的需求,真的是蠻不錯的。

如果大家喜歡的話,這裡也把檔案分享給大家(然後我發現因為我把檔案傳到蘋果仁上,所以直接點連結就可以使用了 XD)

立即取得

蘋果仁用 Gemini 3 做的蕃茄鐘:點此下載

Gemini 3:幫你把想法實現的好工具

這次用 Gemini 3 打造蕃茄鐘的過程,真的讓我感受到「AI 不是幫你寫程式,而是跟你一起做產品」。從需求、設計到功能微調,全都只靠聊天就能完成,甚至還能主動補上我沒想到的細節。最終做出一個跨平台、視覺清楚、又完全符合我和小朋友使用情境的工具。如果你也想讓生活更方便,或是腦中有想做卻一直沒時間動手的點子,不妨也試試看讓 Gemini 3 幫你把它實現。

延伸閱讀》

Google 全新 Gemini 3 正式發佈!實際帶你玩號稱最聰明的 AI 模型

Gemini 現在可以直接查圖片是不是 AI 生成的!而且很多早已被「做記號」

Google 推出 Nano Banana Pro!連中文字的圖像都可以生成,還可以自己去查資料補進來

如果想知道更多關於 Apple 的消息、教學、小技巧或是科技新知,一定要點擊以下任一 LOGO,追蹤我們的 Facebook 粉絲團、訂閱 IG、YouTube 以及 Telegram。

加入LINE好友  追蹤FB粉絲團  追蹤 Instagram  訂閱 YouTube  訂閱 Telegram

Related Articles