我在這篇文章中，分享如何藉由程式編輯器Windsurf的AI助手，不用自己寫程式，也能製作出一個蒸汽龐克風格的歌詞網站，以有趣的方式讓人認識蓋亞太空望遠鏡的觀測任務。你們對哪些天文主題感到好奇呢？想要將它們連結到哪些學科領域呢？數學？文學？物理學？社會學？生物學？程式開發？遊戲製作？外語學習？…歡迎在「與AI探索天文」FB粉絲專頁或我的Threads留言分享你們的想法。

你閱讀著《資料視覺化：用Python為星空作畫》的6.1節，置身於一個蒸汽龐克的科幻世界。你在旅店中四處奔走，協助老獵星者安娜蒐集繪圖用的機械裝置。過程中，你逐漸了解蓋亞(Gaia)太空望遠鏡的觀測任務，以及如何透過Python程式取得它的資料。最終，安娜用你收集來的裝置，結合Gaia的資料，繪製出一張全天空星圖。

你闔上書，想起之前看過的一篇文章：「在《獵星者旅店》中創造屬於你的探索旅程，將星空連結到你的生活」。文中作者示範如何運用ChatGPT，在《獵星者旅店》遊戲中創作出介紹Gaia太空望遠鏡的歌詞。你心想：我是否也能利用AI工具，打造一個具有蒸汽龐克風格的歌詞網站，以有趣的方式讓人認識Gaia的觀測任務呢？

懷著這個想法，你打開筆電，開始瀏覽「與AI探索天文」的FB粉絲專頁。一篇貼文吸引了你的目光：「如何用Replit製作一個網頁小遊戲來了解測量星體距離的方法並從中學習三角函數？」。你因此得知Replit不僅適合開發網頁，還內建功能強大的AI助理，能協助使用者進行開發。不過，在查閱訂閱方案後，你卻發現每月25美金的費用對目前的你來說稍嫌吃力……

於是，你向筆電視窗中的我問道：「除了Replit，還有沒有其他價格較親民、內建AI助理的程式開發工具，可以協助我製作網頁呢？」

我回答：「你可以試試Windsurf(注意，偵測到此連結含有推薦碼)。雖然它不是線上工具，需要下載安裝，但每月僅需15美元，還提供兩週免費試用，應該比較符合你的預算。我已幫你下載安裝好Windsurf程式編輯器，完成註冊登入並開啟它。現在畫面右側顯示的是它的AI助手Cascade，對話框下方有個下拉選單可以讓你切換AI模型，我先幫你選了『Claude 3.7 Sonnet』。那麼，你想打造什麼樣的網頁呢？請直接在對話框中告訴Cascade吧。」

你思考了一下，然後輸入：我想製作一個具有蒸汽龐克風格的歌詞網站，網站整體設計(包含文字描述、按鈕文字、配色風格等)都要呈現出蒸汽龐克的視覺與氛圍。網站內容以台灣繁體中文呈現，並以Gaia太空望遠鏡為主題，讓使用者能透過歌詞了解Gaia的科學任務、觀測目標與資料取得方式。請先產生一個簡單的網站雛型，功能不需複雜，僅需收錄三首歌詞。

Cascade正依照你的指示建立專案資料夾，並在左側視窗中開啟它正在編寫的網頁程式檔案。不久之後，它回報網頁已經開發完成，並提供一個「Open Preview」按鈕，讓你可以預覽目前的網頁成果。

你瀏覽了一遍這個網頁，雖然覺得還不錯，但也感到少了點有趣的操作體驗。靈光一閃，你便向 Cascade發出新的挑戰：「目前網站的操作流程類似一般歌詞網站，較為平凡。請重新設計整體體驗，使其轉化為一台充滿蒸汽龐克風格的『歌詞展示機器』。使用者不再只是點擊與滑動，而是透過旋轉齒輪、拉動銅製拉桿、調整壓力閥與觀察蒸汽儀表來探索歌詞。請設計具敘事性的互動流程，像是在啟動一台大型裝置，逐步揭示歌詞內容。」

Cascade開始根據你的需求著手修改程式碼。在左側視窗中，你看見它以不同顏色標示出刪除與新增的程式區塊，像是讓你親眼見證程式的重塑過程。

於是，你就這樣持續向Cascade發出一連串優化網站的挑戰指令，例如：「目前機械控制介面佔用過多版面，導致機器操作指南與歌詞內容被擠壓至頁面下方，影響使用體驗，請優化調整**」、**「『主題選擇器』和『歌詞選擇器』切換時無法對準文字，請改成橫向操作」、「修改版權宣言」…..等等。

最終，你完成了一個自己覺得既有趣又獨特的網站版本。依照我的指引，你點擊對話框下方那個帶有火箭圖示的「Deploy」按鈕，將這台奇幻的歌詞展示機器正式發布上線，分享到網路世界中：https://gaia-steampunk-lyrics-v1-yihaosu.windsurf.build/

此篇文是由蘇羿豪經ChatGPT和Windsurf協助創作，文章以「創用CC姓名標示─非商業性 4.0(CC BY-NC 4.0) 國際版授權條款」釋出。歡迎分享並追蹤「與AI探索天文」FB粉絲專頁或我的Threads。