昨天為了交作業 (Karen 的 Vibe Coding 課程) 第一次使用 Claude Code 開發 Web app, 將 11 月底的京都奈良賞楓行程製作成網站, 佈署在 Vercel, 效果非常令人驚豔, 參考 :
因為 Vercel CLI 是以全域方式安裝, 所以除了在 Claude Code 可用外, 在 Antigravity 中也可以用. 本篇要將我幫老同事阿中規劃的 11 日岡山廣島瀨戶內海之旅行程用 agy 製作成 Web app, 並發布到 Vercel (雖然這行程被薔琵颱風攪局而取消, 但還是製作出來讓阿中眼睛亮一下, 再出發時間確定後再更新).
本系列全部文章索引參考 :
首先建立一個專案資料夾, 然後切換到此資料夾下開啟 chungs_okayama_trip :
D:\claude_code\projects\mkdir chungs_okayama_trip
D:\claude_code\projects\cd chungs_okayama_trip
D:\claude_code\projects\chungs_okayama_trip\agy
素材就用颱風前定稿的 v8 版, 我放在 GitHub :
將此 pdf 檔放在專案目錄 chungs_okayama_trip 下後即可開工, 提示詞如下 :
>請參考專案資料夾下的 PDF 檔 "阿中的岡山廣島瀨戶內海之旅行程規劃_v8.pdf" 內容，幫我設計一個『阿中的岡山廣島瀨戶內海 11 天秋季之旅』一頁式行程網站。採用清爽的瀨戶內海蔚藍與秋日楓紅配色，包含出發倒數計時、Day 1 到 Day 11 的時間軸切換頁籤（需標註 Day 4 ~ Day 8 使用 JR Pass）、每個景點的時間／交通／美食提示卡片，以及一個使用 LocalStorage 記錄勾選狀態的行前打包清單。介面需針對手機瀏覽最佳化，並以單一 HTML 檔案輸出，方便直接發布到 Vercel。
選預設 Allow Creation 按 Enter 後 agy 就會讀取 pdf 內容, 依據行程規劃製作出一頁式網頁檔 index.html :
但它花了比 Claude Code 還久的時間才完成, 可能是預設模型 Gemini Argon 推理需時較久 :
點擊專案資料夾下 agy 生成的 index.html 會開啟瀏覽器顯示成果 :
這麼巧, 剛好離阿中原定要搭的虎航 IT262 只剩四分鐘起飛, 趕緊傳給阿中, 他信以為真馬上打電話問我, 航班不是取消了嗎? 我說只是幫你製作網站而已啦! 被罵很壞心, 害他嚇一跳哈哈.
檢視功能完整後叫 agy 幫我發布到 Vercel :
> 請幫我佈署到 Vercel
佈署完成後會顯示主網址 :
分享此網址給同行旅伴, 即可用手機輕鬆掌握行程細節囉!
如果不是颱風攪局, 阿中的班機這時應該已經越過沖繩朝九州方向飛去啦!
沒有留言 :
張貼留言