用ChatGPT Claude Gemini做Bento Grid動效網頁的提示詞模板和避坑

想做一個像蘋果官網那種「滾動就動起來」的網頁，又不想從零啃前端？我更推薦用「三個聊天模型寫程式碼＋Midjourney出圖」的組合拳，效率高到離譜。

一套流程搞定頁面 結構動效素材

ChatGPT 負責搭骨架

它寫HTML5＋Tailwind最快，適合把Bento Grid、黑底＋高亮色#2657FD、超大數字標題這些「硬需求」一次鋪好。

可直接複製的提示詞：輸出單個HTML檔案，使用TailwindCSS CDN與必要JS，Bento Grid佈局，黑色背景，#2657FD高亮，中文大標題英文小字點綴，含資料小圖形佔位，不要省略內容要點。

Claude 負責把動效寫順

Framer Motion用CDN寫起來容易「能跑但很抖」，Claude更擅長把滾動觸發、入場動畫、節奏曲線調得順眼點（它也更愛幫你補邊界條件）。

Gemini 負責查漏補缺

遇到瀏覽器報錯、樣式被覆蓋、元件不對齊，讓Gemini按「逐段解釋＋定位問題＋給替換程式碼」來修，省掉你對著控制台發呆。

Midjourney 負責主視覺

像「反應爐核心／銀河爆發／能量釋放」這種主視覺（素材裡提到的極彩炫光＋暗黑底）交給它最合適，再把圖丟回ChatGPT做響應式適配。

我常見的兩句小吐槽

• 模型寫的CDN連結偶爾過期，跑不起來別懷疑人生，換成官方最新即可。
• 動效別堆太滿，Bento Grid越克制越高級，不然像PPT年會風。

如果你還卡在「怎麼選模型／怎麼配提示詞／怎麼把帳號和工具一次配齊」，可以去Titikey逛逛，我自己也常用它來少走彎路。