前端工程師失業倒數？AI 一句話就能生出整個網站 做出這些網站不用寫任何一行程式碼。今天帶你一起來看怎麼一步一步優化我們的網站。 先來挑戰將既有的網站重新拉皮製作 為了避免評論他人的網站，因此我請 AI 參考了各個年代的網站風格先做了一版，也順便帶大家看看過去網站的特色。 1995 年到 2000 年 喜歡用 table 做巢狀排版，利用 frameset 做分割畫面 尤其是這些閃爍的圖示和訪客計數器，看著都很有年代感 接下來請 Claude Code 直接重新設計這個網站。可以看到成果，隨意的指令就能夠做一些簡單的排版與色調調整，算是還蠻堪用的。 2000 年到 2005 年 喜歡利用一個 Flash 開場動畫，並且搭配 iframe 甚至還有需要 Flash Player 6.0 以上的提示 但這個階段的排版仍然是靠 table 居多 一樣可以請 Claude Code 重新設計網站，成果看起來很舒服。從排版到色調，Claude Code 都可以一個指令直接完成。 2005 到 2010 年 這個階段 Flash 開始式微，純 CSS 能做到更多效果 排版也有大革命，從 table 改成 CSS float 我們一樣請 Claude Code 重新設計網站，利用簡單的藍色作為主色調，並且將網站整體做排版的改造，整體看起來很舒服。 2010 到 2014 年 響應式革命到來，從固定的寬度變成會自動適應所有裝置而調整 framework 的時代也來臨，這個階段大部分都是利用 Bootstrap 來做 讓 Claude Code 直接重新設計網站，可以發現其實沒有什麼太大的改變，好像只換了顏色。所以代表我們的模型有很大的部分學習了這個時期的資料，因此如果不給它做一些調整的話，是沒有辦法變更好的。 所以我們新增了一個 impeccable 這個 skill，它的目的是避免讓 AI 一直做出很類似的風格。再一次，我們請 Claude Code 利用這個 skill 重新幫我設計這個網站。可以再次看到成果，確實長得很不一樣，但好看嗎？不確定。不過我們學到了 skill 會影響 Claude Code 的表現。 2015 到 2018 年 從原本的 jQuery 改成用 SPA 的形式來開發 Bootstrap 也不再是主流 從扁平的設計漸漸變成利用陰影做到半扁平的設計 我們在這裡裝另一個 skill 叫做 shadcn-ui。它不是傳統的 component library，是一組可複製貼上的 React 元件原始碼，建立在 Radix UI 加 Tailwind CSS 之上。 再來請 Claude Code 參考這個 skill 重新設計網站，畫面上看起來沒有太大的差別，因為主要的改動更偏向使用不同的套件轉換不同的框架而已。 做到這裡我們學到了兩件事 如果隨意下一個 prompt，會做出 2014 年以前風格的網站 要透過 skill 的方式，才能再優化網站的風格 接下來我們要嘗試做一個新的網站 先來看成果：電商平臺、點餐系統、音樂串流平臺、旅遊規劃平臺、醫療預約平臺、聊天室、數據分析平臺。 這些網站都是利用 shadcn-ui 這個 skill 就可以做出來，有些完整度已經蠻高的，可以直接使用。所以如果要做一個市面上常見的網站，千萬不要從頭來，直接請 AI 起一個底是最快的方式。 Claude Code 能夠做有動畫特效的網站嗎？ Awwwards 是一個評選全球最佳網頁設計獎的網站，由業界的設計師和開發者評分，被視為網頁設計的最高榮譽指標。我們挑幾個網站來復刻看看。 第一個：dontboardme.com 這個網站主要是用 Lottie 和 scroll trigger 這個效果做出來的。其實要復刻也沒有想像中的這麼容易，如果直接丟給 Claude Code 很容易失敗，尤其是這種帶有動畫特效的網站。它會做出一個很像又有點不太像的網站。 我參考了一些做法後自製了一個工具，目標就是將圖片元素下載下來，並且找到每個元素的定位以及 CSS。這是 clone 下來的結果，每個區塊還是有點小差異，會需要再微調一下，就可以復刻出一個大概 95% 像的網站。 但不能直接去抄襲別人的網站，必須做一些調整才行。例如將狗變成貓，把貓換成火箭，把火箭換成燈泡，後續再針對主題做客制化的調整，就會變成我們專屬的網站。 動畫可以在 Lottie 這個網站找到，如果要自己畫的話，可以用它專屬的工具或套件，自己畫也是沒問題的。 再嘗試這個網站（主要用 Lottie 加上 Three.js 做的） 用一樣的方法 clone 下來後，來嘗試替換 3D 模型的部分。3D 模型其實是一個模型搭配一個材質渲染出來的，所以可以請 Gemini 生成別的包裝的材質來做替換。 來看成果，基本上可以得到相似的結果。我們也嘗試把飲料換成漢堡來試試看，效果感覺還不錯。 這個漢堡模型是用 Hyper3D 生成的，它可以上傳很多張圖片讓它生成 3D 模型，但效果可能需要抽卡一下，不一定會很理想。 做到這裡可以發現，其實不需要去建立 3D 模型，因為用戶並不會去真的轉動它，而是一個固定的動作方式，因此用動畫呈現也可以。 用動畫替代 3D 模型的流程 先把一個漢堡丟給一個圖片生成模型（這邊是用 Google 的 Whisk），然後給它一個炸裂的 prompt 抽到一個喜歡的圖片之後，把它丟到有首尾幀生成影片的 AI 服務。想要有免費小額度的試用的話，可以選擇 Google 的 Flow 把首幀設定為完整的漢堡，尾幀設定為炸裂的漢堡，再給它一個絲滑轉場的 prompt，可以得到一個影片 如果覺得效果不如預期或有點怪怪的，可以重新請 AI 調整 prompt 後再生成一次 影片完成後，可以用 Ezgif 這個工具把影片轉成圖片之後整包下載下來 再把整個資料夾丟給 Claude Code，跟它說要套用 scroll trigger 這個特效，邊往下滑邊讀取圖片 可以看到成果：用戶在滑動滾輪時，漢堡的特效也會一幀一幀的變化，就像漢堡的內餡炸出來一樣，看起來美味可口。 用同樣的流程，你可以改成一棵樹生長的過程、一本書由角色跑出來、投影機投影出生動的畫面、冰箱打開後展示食物的新鮮、市區的街景從白天到黑夜。要怎麼動，只要你想得到都可以。 一個重要的提醒 一個好的網站並不是單純做很多動畫特效就是好，而是要針對受眾以及目標去量身訂作。 例如這個網站（一個工作室的網站），這個網站展現出他們在網頁特效上的功力。而特效帶來的代價就是效能不佳，以及無障礙的操作可能比較低。 嘗試利用同樣的內容，做出三種不同面向的拆解 讓客戶來找你合作版 讓人看懂你在幹嘛版 最快看懂重點版 第一版：讓客戶來找你合作 主要溝通的邏輯是：看到 → 信任 → 理解 → 行動。而 CTA 的點擊率以及聯絡表單的完成率是我們最關注的指標。 網站的架構設計成一個說服的漏斗： Hero 的區塊會講清楚價值 Trust Bar 會提高信任度 Project 的區塊會呈現我曾經做過哪些案子 服務的區塊會讓客戶知道我能做什麼 流程的區塊會降低客戶「不知道怎麼開始」的門檻 獎項和證言會有數字的佐證，加客戶真實的回饋來提高信任度 最後會有個 Call to action 的 button 第二版：讓人看懂你在幹嘛（敘事方式） 第二版的邏輯是用敘事的方式來重新設計網站，因此網站會設計成很像一本雜誌、一本書的形式。 Hero 會呈現「我們用程式說故事」，可以和別的競爭對手做出差異化 第一章 Motion：展示我們的方法論 第二章 Craft：細節工藝搭配數據作為品質佐證 第三章 System：展現系統思維，暗示長期價值不只是交付頁面，而是可持續性的系統 第四章 Collaboration：放一些客戶的證言和 Trust Bar 來呈現信任度 最後是 Call to action button，而且是用問句邀請而非按鈕推銷 整體需要追蹤的指標是：客戶願意花多少時間讀完我們的思考方式。可以去看點進去頁面的人有幾個，滑到最下面看完的又有幾個，來看這樣的設計是否符合當初的假設。 第三版：最快看懂重點版 要做的事情是：如果我把這些裝飾都拿掉，那品牌的價值還剩什麼？ 資訊架構著重在最短路徑： Hero 直接呈現價值主張 Trust Bar 呈現信任度 挑選三個精選作品 呈現簡潔的服務列表 最後有一個 Call to action 這個版本不用華麗的動畫特效，而是設定最簡單的 CSS 互動，更追求速度、效率、效能。因此追蹤的指標是 Mobile contact conversion rate。因為用手機可能網路不穩定，耐心只有 5 秒，打開網站能夠聯絡到人成為重要的指標。 結語 看完了原版以及修改後的三種版本，你最喜歡哪一版呢？可以在留言區跟我說。 做前端本來就是 Claude Code 的守備範圍，不過記得不要過度包裝、過度追求動畫特效，回歸網站的本質才是更重要的。