不只生成，也能改成自己的樣子。
介紹頁已經出現了。現在先親手修改姓名與技能，再把範圍說清楚，請 Cursor 只調整第三項服務，練習保留已經做好的部分。
這關帶走：改姓名與技能，讓 AI 只改指定的一項服務。
先學一招：內容與外觀分開看
找到姓名、技能與服務各自的位置，知道應該改哪個檔案。
帶上你的裝備
- 已生成的介紹頁
- Cursor 中的 index.html 與 styles.css
先看一小段就好。標籤包住內容，class 是方便找到區塊的名稱。
<strong class="designer-name">範例設計師</strong>
<strong class="skill-name">內容整理</strong>把標籤中間的文字改掉，內容就會不同；改 CSS 的字級，則改變它看起來的大小。
h1 { font-size: 48px; }姓名與技能
介紹區的兩個獨立欄位，下一步親手修改。
第三項服務
服務區的標題與說明，稍後才請 AI 修改。
跟著觀察
- 在 HTML 搜尋 designer-name，再搜尋 skill-name，對照畫面位置。
- 找到第三項服務，確認它和技能欄位不是同一段。
- 在 CSS 找到 h1 的 font-size，說出這一行改變的是什麼。
這是你的實際操作確認，小測不會替你勾選。
動手挑戰：先親手改，再請 AI 延伸
先改兩個文字，再限制 AI 只修改一項服務。
先準備
- 自己的正常版本
- 一份修改前副本
先親手完成兩處修改
姓名
範例設計師 → 林小禾
技能
內容整理 → 版面設計
儲存、重新整理，先確認這兩處已更新。這一段不要交給 AI 代改。
再請 AI 只調整第三項服務
第三項服務改成「活動頁設計」，說明改成「整理活動資訊與報名入口的靜態頁面」。介紹區的技能仍要保留「版面設計」。
照這個順序開始
- 複製正常版本留作備份，親手修改姓名與技能。
- 儲存並重新整理，保存修改前後的畫面或檔案差異。
- 在 Cursor 內建 AI 對話附上目前 HTML，貼延伸修改 Prompt，只處理第三項服務。
- 只套用第三項服務的修改，再確認其他兩項服務、姓名、技能與圖片沒變。
用 Cursor 只修改第三項服務
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 portfolio/index.html：先親手把姓名改成林小禾、技能改成版面設計，再附上這個最新版。
- 目前第三項服務的標題與說明；先保留一份修改前副本。
- 2．貼到哪裡
- 在 Cursor 開啟自己的正常 portfolio，用 @ 選取目前的 index.html。
- 把下方 Prompt 貼到內建 AI 對話，讓可用的 Agent 只修改第三項服務。
- 查看檔案差異；若收到修改片段，核對原文與位置後只替換指定部分。
- 3．預期回覆與操作
- 第三項服務改為「活動頁設計」，說明改為「整理活動資訊與報名入口的靜態頁面」。
- 修改範圍只在 index.html 的第三項服務，不應連帶改動姓名、技能、另外兩項服務、CSS 或圖片。
- 4．自己檢查結果
- 儲存並重新整理，確認第三項服務的標題與說明正確。
- 姓名仍是林小禾、技能仍是版面設計，其他兩項服務與圖片不變。
- 點作品入口，確認原有跳轉仍正常。
修改第三項服務 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我已把本堂下載的 portfolio/ 複製到自己的 student-work/portfolio/，並用 Cursor 開啟這個資料夾。內有 HTML／CSS 骨架、assets/appa.png 與三張示意作品圖；這堂只顯示 APPA 與文字作品摘要。所有品牌與聯絡資料都是虛構練習內容。
本次任務：將第三項服務『版面設計』改為『活動頁設計』，並把該項說明改成『整理活動資訊與報名入口的靜態頁面』。只改這一項文字，保留姓名、其他服務、作品、圖片與樣式。先指出預計改的檔案與區塊，再給最小差異，最後列出如何確認三項服務數量未變。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜姓名與技能要先親手改
在自己的 HTML 搜尋 designer-name 與 skill-name，只改標籤中間的文字。儲存並重新整理，先確認林小禾、版面設計已出現，再交給 AI。
線索 2｜AI 改太多，先停下來比對
把檔案差異與修改前副本對照，只保留第三項服務的必要變更。若 AI 連姓名、技能或 CSS 都換掉，先還原這些變更，再明確要求只改第三項服務。
回到自己的作品，逐項檢查
- 姓名是林小禾，技能是版面設計。
- 第三項服務為「活動頁設計」，說明為「整理活動資訊與報名入口的靜態頁面」。
- 其他兩項服務、圖片、CSS 與作品連結保持正常。
尚未完成可以先往下看，之後再回來補做。
每一次修改，都說得出理由。
先實際確認兩項操作。下一關，我們會練習從圖片消失的現象找出原因。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 1 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 1 堂六步勾選，筆記、另一堂進度與網站檔案保留。