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

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

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

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

raw-image


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

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


raw-image


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


raw-image


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


raw-image


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

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


raw-image


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

https://claude.ai/public/artifacts/dca1c319-54a3-40b0-a5c7-dda904a7e04b


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



留言
avatar-img
留言分享你的想法!
avatar-img
與AI探索天文
1會員
17內容數
為了延伸並實踐《資料視覺化:用Python為星空作畫》書中「與AI探索天文」的想法,我會在這分享如何運用各種AI工具,來探究你我好奇的天文主題、將它連結到生活及其他學科領域,並結合相關開放資料,打造有趣的天文應用程式與遊戲。我希望藉由這些分享,讓每個人都可以與AI創造出專屬自己的天文探索故事,拉近你們與星空的距離。
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
分享我最近畫的風景、花草、建築及人像作品。透過使用不同的繪畫工具,展現出不同的畫風。繪畫對我而言,既療癒也是紓壓,也是對生活的紀錄。
Thumbnail
分享我最近畫的風景、花草、建築及人像作品。透過使用不同的繪畫工具,展現出不同的畫風。繪畫對我而言,既療癒也是紓壓,也是對生活的紀錄。
Thumbnail
放一點圖證明我會畫畫 其實我一直很想放出來講一點自己對滿版圖的心得(?)
Thumbnail
放一點圖證明我會畫畫 其實我一直很想放出來講一點自己對滿版圖的心得(?)
Thumbnail
作者回顧過去擔任PM主導動漫風手遊專案的經驗,分享專案背後的故事以及對卡通渲染技術的個人興趣。後記並附上了近期學習3D建模&卡通渲染的小小成果。
Thumbnail
作者回顧過去擔任PM主導動漫風手遊專案的經驗,分享專案背後的故事以及對卡通渲染技術的個人興趣。後記並附上了近期學習3D建模&卡通渲染的小小成果。
Thumbnail
今天參考臉書上一些高手的作品,練習幾款水晶球造型的圖片發想: 覺得把景物、人物透過ai繪圖,裝在水晶球裡呈現,感覺好療癒喔。
Thumbnail
今天參考臉書上一些高手的作品,練習幾款水晶球造型的圖片發想: 覺得把景物、人物透過ai繪圖,裝在水晶球裡呈現,感覺好療癒喔。
Thumbnail
嘗試用Bing會圖,但有些疑問,遠景、主體、光線 三層的描述不知應如何寫在同一次的設計指令中。莫非只能像現在這樣,分批寫逐漸疊圖嗎?
Thumbnail
嘗試用Bing會圖,但有些疑問,遠景、主體、光線 三層的描述不知應如何寫在同一次的設計指令中。莫非只能像現在這樣,分批寫逐漸疊圖嗎?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News