「與AI探索天文」如何用Claude製作一個能邊塗鴉邊認識多波段天文觀測的網頁小遊戲？

我在這篇文章中分享如何用Claude的Artifacts功能，不用自己寫程式，也能製作出一個簡單的小畫家，讓人邊塗鴉邊認識多波段天文觀測的概念。你們對哪些天文主題感到好奇呢？想要將它們連結到哪些學科領域呢？數學？文學？物理學？社會學？生物學？程式開發？遊戲製作？外語學習？…歡迎在「與AI探索天文」FB粉絲專頁或我的Threads留言分享你們的想法。

你閱讀著《資料視覺化：用Python為星空作畫》的10.1節，置身於一個Cyberpunk的科幻世界，眼前是拿著噴漆灌在牆上塗鴉的蕾娜·閃電，她正在向你解說多波段天文觀測的概念。

你闔上書，打開筆電，向視窗中的我問道：「我能利用AI工具，例如Claude，製作出能邊塗鴉邊認識多波段天文觀測的網頁小遊戲嗎？」

我回答：「你可以利用Claude的Artifacts功能來製作網頁小遊戲。它會開啟另一個視窗顯示AI產生的網頁程式，並能即時預覽成果。你要先在設定頁面中確認有開啟Artifacts功能，接著就可以在Claude的對話框中描述你想製作的網頁小遊戲。​」

這時螢幕呈現Claude的設定頁面。

你思考了一下，然後開始輸入給Claude的指示：產生一個網頁版的塗鴉小遊戲，場景設定在一個賽博龐克風格的街頭，玩家可以使用不同顏色的噴漆在廢棄牆面上創作塗鴉。每種噴漆顏色代表不同波段的光(如可見光、紅外線、紫外線等)，玩家透過這過程會學習到多波段天文觀測的基本概念。

此時畫面分為兩個部分，左側是與Claude的對話視窗，右側則顯示程式碼內容。隨著程式碼逐步撰寫完成，右側視窗最終自動切換為即時預覽的網頁畫面。

你試著操作第一版網頁，發現有些問題，思考該如何優化，然後繼續指示Claude：「請優化修正以下幾點：

1. 目前遊戲場景尚未具備賽博龐克風格街頭作畫的氛圍，若無法以視覺方式呈現，請以簡短文字敘述遊戲世界觀，並說明玩家為何要在這面牆上使用不同波段的噴漆進行創作，強化遊戲背景與動機

2. 儲存按鈕目前無作用

3. 把目前畫面顯示的字CYBERPUNK 2077改成CYBERPUNK 404」

你覺得Claude修改後的版本有比較好，但發現儲存按鈕仍然沒作用，於是乾脆請它先移除這功能。最後，你依照我的指引，點選右上角的「Publish」按鈕，產生網頁連結以便分享給其他人：claude.ai/public/art...

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