Gemini 3.1 Pro 震撼發布！邏輯能力翻倍　生成精細動態 SVG 動畫｜網頁美感大升級　實際應用效果全公開！【AI實測】

Hello 大家好 這裡是步行魚的頻道 就在昨天 Google 推出了 Gemini 3.1 Pro 模型 在設計與程式能力方面有所提升 並且能夠做出更加複雜的網頁效果 今天我們就來跟大家簡單介紹一下 以及試用一下 Gemini 3.1 Pro 首先 這次的 Gemini 3.1 Pro 是基於 Gemini 3 Pro 模型的改進 官方在部落格文章中特別強調

在製作像是 SVG 動畫的方面 它可以有更加豐富的細節與動態效果 網頁設計的部分 Gemini 3.1 Pro 則是能夠更好的理解情緒 設計出特別風格的網頁 在測試資料集表現的部分 根據 Google 官方提供的資料 Gemini 3.1 Pro 相較於 Gemini 3 Pro 有著大幅度的提升 相比於其他的模型

也幾乎只有 Claude Opus 4.6 Thinking Max 可以跟它鬥一下法 在 Humanity's Last Exam 測試中 不使用工具的情況下 Gemini 3.1 Pro 獲得了 44.4% 的得分 超越了 3 Pro 的 37.5% 而在 ARC-AGI 這個測試抽象推理能力的測試上 Gemini 3.1 Pro 更是拿到了 77.1% 的分數

相較於 Gemini 3 Pro 的 31.1% 直接翻了倍還不止 科學能力測試的 GPQA Diamond 也一樣有所提升 而程式能力方面 Terminal-Bench 2.0 SWE-bench Verified SWE-bench Pro Public LiveCodeBench Pro 與嘗試讓模型解決實際科學問題的 SciCode Gemini 3.1 Pro 相較於 3 Pro 一樣有長足的進步

但有些項目並沒有提供 Opus 4.6 的測試結果 所以不確定與 Claude 相比如何(個人估計還是 Opus 4.6 會贏) 代理工具調用的部分 ta2-Bench 上的 Opus 4.6 表現最好 而 Gemini 3.1 Pro 相較於 3 Pro 一樣是有進步 多步驟的調用 MCP 工作流測試 可能是因為在調用 MCP 工具的時候 上下文長度通常會拉得比較長 所以導致說

長文理解能力比較擅長的 Gemini 系列 取得了比較好的分數 最後來到 Gemini 系列一直以來的優勢 多模態與長文理解 在這個方面 Gemini 3.1 Pro 模型 都取得了較好的分數 除了 MMMU-Pro 這個多模態理解與推理能力的測試中 不知道為什麼 Gemini 3 Pro 的表現 其實比 3.1 Pro 還要好

其他則是 3.1 Pro 都有一些進步 當然理論性能歸理論性能 接下來我們還是要看一點實際的東西 給大家測試一下 Gemini 3.1 Pro 現在生成出來的東西的效果 當然在開始測試之前 我們還是要來講一下 Gemini 3.1 Pro 目前我們已經可以在 Google AI Studio 以及 Antigravity 中使用 理論上 Gemini 網頁版現在它也支援了

但最近在 Reddit 論壇上有不少的人在討論 Gemini 的網頁版似乎有一些問題 有可能會隨機降級我們所使用的模型 也就是明明選擇 Pro 卻感覺像是在使用 Flash 模型 Google 官方目前還沒有對這個狀況 做出詳細的回應 因此也不太確定是 Bug 還是 Google 有嘗試做類似 OpenAI 的那種 模型路由機制

來偷偷幫你降級模型 所以我個人目前是不太建議使用 Gemini 的網頁版 來測試 Gemini 3.1 Pro 的表現 另外在 API 調用的部分 Gemini 3.1 Pro 與 Gemini 3 Pro 它的價格是完全一樣的 有在使用的開發者 如果追求比較好的品質可以直接轉 首先動態 SVG 的部分 這邊我先讓它測試看看 生成一個貓的動態 SVG

要求要有貓的細節與互動動畫 我提示詞下得非常簡單 思考等級這邊統一調高(High) 接下來就是看看它的生成效果 在生成時長的這個部分 這個 SVG 的效果它是生成的 老實說真的蠻久的 中間我甚至離開 到廚房去倒了杯水 回來它都還沒開始生成 但是最終成品的結果

看起來表現得還不錯 有閒置狀況下的動畫 並且在 Hover 的時候 也有動態的效果 這種效果在 Gemini 3 Pro 上 是做不到的 應該說 Gemini 3 Pro 生成出來的效果 線條會明顯簡陋許多 並且很容易會有位移 這邊兩個放在一起給大家比較看一下 這邊再來測試一點其他的東西 像是讓它做一個動態的 SVG Switch Button

用途是用作網頁的明亮與黑暗模式的切換鈕 要有晝夜變換的動態 做出來的效果也非常的好 甚至還有一些背景流星動畫 在程式與網頁設計這個方面 Gemini 3.1 Pro 現在可以處理更為複雜的架構 像 Google DeepMind 的官方 X 帳號上 它有提供一個 Demo 影片 他們使用 Gemini 3.1 Pro

開發了一款逼真的城市規劃應用 可以處理複雜的地形 繪製基礎設施圖 與模擬城市中的交通 接下來我們就簡單來測試一下 它網頁生成的效果 首先我先來測試一下 之前有在 Gemini 3 Pro 上面測試過的提示詞 生成 Awwwards 獲獎等級的設計網頁 充滿滾動互動元素與滑鼠 Cursor 互動元素 平面化插圖風格

最終它生成了一個平面化 或新粗野主義的設計網頁出來 效果看起來還不錯 接下來再來試試看 讓它生成一個充滿 3D 互動元素的網頁 生成的效果它初步上看起來是比 Gemini 3 Pro 還要好一些 我們再稍微微調一下 在 AI Studio 中 輸入我們要製作的 是個人履歷作品集網站

這次它生成出來的效果 包含了我們剛剛那些元素 只不過它背景的 3D 粒子效果 並不像剛剛表現的那樣 稍微有點可惜 再接著 我們移步到 Antigravity 中 來嘗試看看在實際開發環境中 可以調用工具 並且有現成程式碼 或者是架構更複雜的情況下 它的表現如何 首先我讓它先修改個簡單的

我讓它修改我目前這個記帳 App 它裡面的其中一個插件功能 要求就是將我們的貓咪的 SVG 為原本簡陋的圖片 添加更多的細節 並修復互動的 Bug 這個部分它的表現相當不錯 一次就達到了要求 後續我只修改了顏色 因為它的橘色我覺得有點太深 再來就是讓它幫我為這個應用 添加一個 RWD

因為我原本是完全沒有做 RWD 的 導致在電腦或平板上 使用這個應用會比較困難 那這邊我就一樣輸入提示詞 讓它幫我製作電腦版的網頁 這邊它也是很快速地就把它做出來 後續只要再稍微微調 因為調整過後造成的一點點排版錯誤 以及補足在電腦上的輸入功能 這樣就算是完工了 不要看只是調個 RWD

這個我之前也有嘗試讓 Gemini 3 Pro 做過 只不過它做出來的東西基本上就是一團災難 可惜那個時候沒有截圖 我就直接還原了 最後就是直接測試 它從零開始設計網頁的能力 這邊我先簡單測試個 讓它使用時尚雜誌的風格 製作一個販售茶葉的 Landing Page 然後這邊我們可以看到 畢竟在 IDE 裡面

所以素材我們甚至不需要自己去找 它直接幫我們用 Nano Banana Pro 生出來了 雖然說有一張圖確實看起來有點奇怪 但是整體來說它的網頁效果是還算可以的 最後我想要給大家看的是 我自己測試的一個算蠻有趣的東西 這是一個叫做 Remotion 的開源專案 它是可以使用程式來剪輯或生成影片

那這個部分的話我使用 Gemini 3.1 Pro 來測試它製作動畫的效果 它的整體效果其實沒這麼穩定 但有時候還能夠給出一些 算相對不錯的結果 我這邊讓它來生成一個我的頻道開頭動畫 那我想看看它的效果怎麼樣 至於目前得到的效果是看起來還算不錯

雖然說它的轉場有點僵硬 但整體來說算意外地得出一個還可以的結果嗎 大致上就是這樣 OK 以上就是今天影片全部的內容 整體來說 Gemini 3.1 Pro 它的表現進步算是有 在程式方面的進步也算蠻大 感覺有變得更加能夠理解複雜的程式架構 因此相較之下也比較不容易搞壞程式

整體直出的設計也變得比較有美感 當然如果要做到一些更為複雜或是特殊的設計 還是要仰賴使用者精確下提示詞 並掌握整體架構的能力 至於如果有想要參考一些設計的話 那 Google AI Studio 中 Build 裡面的 Gallery 頁面 依舊會算是一個還不錯的選擇 在裡面我們可以看到一些其他人 使用模型生成出來的作品

好了 那麼今天的影片就在這邊結束啦 如果喜歡影片的話 可以在影片下方幫我們按個喜歡 或幫我們頻道按個訂閱 另外也可以點擊右側的片尾資訊 查看我製作的 Gemini Nano Banana 浮水印移除工具影片 OK 那麼各位觀眾 我們就 下支影片見w