# 用簡單對話，做出互動小島

先看原始參考網站：[HEART 政策島](https://puma.taipei/heart-island)。挑一個你喜歡的特點，例如模型感、旋轉探索或點選介紹，再開始自己的作品。

你只需要說目標、觀察結果、提出下一個調整；細部程式與參數請 AI 建議。下面的短指令可以換成自己的主題。操作畫面來自本課獨立範例，內容與關係都是虛構資料。

## 1. 先說想做什麼

```text
我想做一座可以旋轉的小島，點建物能看介紹。
請先做最簡單的版本，技術細節由你建議。
```

工具有內建預覽就開預覽；使用本機程式編輯器時，請 AI 帶你建立專案與開啟本機網址。第一次只檢查「網頁真的打得開」。

```text
請帶我把網頁打開預覽。需要我操作時，一次說明一個步驟。
```

沒有開發環境，也可以先操作課程頁的「一島一屋範例」，了解旋轉、點選與介紹如何配合。

## 2. 第一版只做一島一屋

```text
先放一棟圖書館。點它會顯示一句介紹，也能關閉介紹。
完成後請告訴我怎麼檢查。
```

**自己試：** 拖曳旋轉小島，點小屋開介紹，再關掉介紹。先確認能打開、能旋轉、點得到、看得懂。

**不如預期時：** 描述看到的結果。例如「目前只有圖片，我要能拖曳旋轉的 3D 場景」。先修好這一步，再加功能。

## 3. 用白話補內容

```text
加上交通、公共空間、文化三個主題，每個先放兩項。
請幫我整理內容，並保留文字清單。
```

直接列名稱與一句介紹，不必先寫資料格式。例如交通有步行導覽、單車路線；文化有故事展間、典藏工坊。

**自己試：** 改一個名稱，看看清單、建物標籤與介紹是否一起更新。真實資料要附出處；練習資料標示為虛構。

## 4. 調整外觀，一次只改一件事

```text
改成溫暖的玩具模型風格，小島像六角積木，用小橋連接。
先讓主要建物清楚，再加少量樹木。
```

**自己看：** 島有沒有重疊？橋有沒有接好？樹有沒有擋住建物？半徑、陰影尺寸與橋面做法由 AI 建議。

**太擠時可以說：**「減少裝飾，讓主要建物更清楚。」可搭配課程頁的「外觀與動態範例」觀察。

## 5. 加搜尋，檢查同一筆介紹

```text
加入搜尋。從文字清單或建物點進去，都要看到同一份介紹。
拖曳旋轉時不要誤開卡片。
```

**自己試：** 搜尋「典藏」，從清單開一次介紹；清除搜尋，再點同一棟建物。兩邊應是同一份內容。

**不同步時可以說：**「我搜尋典藏後，清單剩一筆，場景卻還顯示全部。請只修正不同步的問題，保留其他功能。」

## 6. 想增加效果，再逐項加入

```text
加上白天和夜晚兩個按鈕。夜晚讓窗戶亮起，建物和文字仍要看得清楚。
```

**自己試：** 切換幾次，原本的搜尋與點選仍能用。太暗就說「保留夜晚氣氛，但讓主要建物更清楚」。

想練習角色移動，再提出：

```text
先加一個沿步道和橋移動的小人，標示為示意搬運，並提供暫停。
不要用它表示真實進度。
```

這兩個效果都屬於選做。完成一島一屋與可讀介紹，已經是能繼續修改的起點。

## 7. 手機試一次，再保存版本

```text
幫我調整手機版：按鈕好按、介紹不擋畫面，保留文字清單，並能停止動畫。
```

**自己試：** 縮小視窗後，文字有沒有被擋住？清單能不能捲動？再拿實際手機按一次。也用鍵盤選清單，確認不用拖曳 3D 場景也能讀內容。

```text
幫我整理目前怎麼使用、哪些功能已完成、還有哪些問題，並保存這個可操作的版本。
```

每次遇到問題，都說清楚「我做了什麼、看到什麼、希望變成什麼」。先修一件事，重做失敗的操作，再檢查其他功能。

## 可以怎麼繼續練習

把一個主題換成閱讀、校園或活動介紹，再挑一種外觀或效果調整。不需要一次完成十二座島、幾十筆內容或整份工程規格。

- [操作一島一屋範例](../first-island/)
- [操作三島擴充範例](../demo/)
- [選做：外觀與動態調整](../advanced/)
- [操作外觀與動態範例](../advanced/demo/)
- [編者與前端工程選讀](../engineering/)

## 本次校訂說明

長版創島提示詞用來校對教材的技術完整性，沒有要求初學者自行想出同等規格。六角布局、可重用建物、日夜、點選與路網等細節，由 AI 和編者處理。

原站外觀觀察、第三方提示詞和本課實作選擇分開敘述。資料如何分檔、使用哪版套件、未確認關係如何呈現，都是範例的設計選擇，不能直接用來推定原站。入門範例的圓島、三主題與資料分檔是最小練習的選擇；外觀範例的六角島、單一 DATA 與模型種類是另一份獨立實作。

未確認的關係可以保留文字；若畫靜態線，須明示未確認，避免演成已證實的合作或真實進度。不同範例採不同顯示做法。

想直接執行既有 starter ZIP，可依 ZIP 內 README 安裝 Node.js 22+，依序執行 npm ci --ignore-scripts、npm test、npm run check、npm start。這是選用的工程入口。原始接收教材與舊版成品另行保留。