讓想法，第一次出現在瀏覽器。
青禾設計工作室需要一個介紹頁。先找到自己的檔案，把需求說清楚，再請 AI 協助做出第一個畫面。
這關帶走：一個有介紹、三項服務、三個作品摘要與 APPA 的頁面。
先學一招：找到你的網站檔案
知道自己開的是哪一份檔案，分清楚內容與外觀。
帶上你的裝備
- Cursor 免費版
- 瀏覽器
- 本堂練習檔
解壓縮後找到裡面的 portfolio，把整個資料夾複製到自己建立的 student-work 裡，再用 Cursor 開啟它。你要改的是自己的副本。
student-work/
└── portfolio/
├── index.html 網頁的內容
├── styles.css 網頁的外觀
└── assets/ APPA 與作品示意圖HTML：放什麼內容
姓名、介紹、標題、連結，寫在 index.html。
CSS：內容長什麼樣
字級、顏色、間距，寫在 styles.css。
跟著觀察
- 先看完成網站，指出介紹、服務與作品三個區域。
- 在自己的 Cursor 資料夾中找到 index.html、styles.css、assets/。
- 從自己的 portfolio 開啟 index.html。現在看到「我的第一個網站」是正常的起始畫面。
這是你的實際操作確認，小測不會替你勾選。
動手挑戰：讓第一頁出現
把需求交給 AI，將回覆存回兩個檔案，看到完整頁面。
先準備
- 自己的 index.html、styles.css
- 實際資料夾結構
- assets/appa.png 保留原位
先在 Cursor 內建 AI 對話附上骨架檔與實際資料夾清單，再貼生成 Prompt，請 AI 協助建立頁面。ChatGPT 作為 Cursor AI 無法使用時的備援。
這一步先保留暫定姓名「範例設計師」與技能「內容整理」，下一輪再親手修改。
照這個順序開始
- 在 Cursor 內建 AI 對話附上自己的兩個骨架檔與檔案清單，再貼下方生成 Prompt。
- 先查看 Cursor 對 HTML 與 CSS 的修改差異，再保留並儲存；若 AI 只回覆程式碼，核對檔名後分別存回對應檔案。
- 儲存兩個檔案，切回自己的瀏覽器分頁，重新整理。
- 檢查三項服務、三個作品摘要、APPA，以及「查看練習作品」連結。
用 Cursor 生成第一個介紹頁
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 portfolio/index.html 與 portfolio/styles.css：附上目前的起始骨架。
- portfolio/ 實際檔案清單：貼成文字，列出 assets/appa.png 與三張作品圖；圖檔保留原位，不必重新生成或上傳圖片。
- 2．貼到哪裡
- 在 Cursor 開啟自己的 student-work/portfolio/，進入內建 AI 對話。
- 在輸入框輸入 @，從建議中選取 index.html、styles.css；確認附的是自己的骨架，再貼上檔案清單與下方 Prompt。
- 使用可用的 Agent 協助修改這兩個檔案；若只收到程式碼回覆，先核對檔名，再分別存回 HTML 與 CSS。
- 3．預期回覆與操作
- 取得完整介紹頁的 HTML、CSS，或看到 Cursor 對這兩個檔案的修改。
- 先查看檔案差異，確認沒有改動 assets/ 或其他專案，再保留並儲存修改。
- 4．自己檢查結果
- 重新整理自己的 index.html，確認介紹、三項服務、三個作品摘要與 APPA 都出現。
- 姓名先保留「範例設計師」、技能先保留「內容整理」；主要連結能跳到作品區。
- 確認紫綠配色與圖片正常；不要把程式碼框的反引號存進檔案。
生成介紹頁 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我已把本堂下載的 portfolio/ 複製到自己的 student-work/portfolio/，並用 Cursor 開啟這個資料夾。內有 HTML／CSS 骨架、assets/appa.png 與三張示意作品圖；這堂只顯示 APPA 與文字作品摘要。所有品牌與聯絡資料都是虛構練習內容。
本次任務：把附上的骨架改成青禾設計工作室的單頁個人介紹網站，只使用 index.html、styles.css 與既有 assets/appa.png，不增加 JavaScript 或外部套件。使用繁體中文、lang="zh-Hant"、viewport、語意 header/nav/main/section/footer，只有一個 h1「把想法整理成清楚的畫面。」；頁首顯示品牌及連到 #services、#works、#contact 的導覽。主視覺左側包含可單獨修改的姓名「範例設計師」、兩句簡介「我整理品牌想說的話，也練習把內容變成網站。」「這裡記錄我的設計服務與練習作品。」、獨立技能欄位「內容整理」，以及 href="#works"、文字「查看練習作品」的主要連結；右側放素材資料夾提供的完整 APPA 透明人物圖，alt 寫「APPA 紫色連帽角色，陪伴學員製作網站」，不把它當設計師本人照片、不重畫、不拉伸或裁切。三項服務為「品牌設計：整理品牌的視覺方向與基本識別。」「網站設計：規劃清楚的頁面內容與閱讀順序。」「版面設計：安排文字、圖片與資訊的先後。」；作品區含三篇文字摘要：「山間咖啡識別：用簡單色彩與字形，練習介紹一間虛構咖啡店。」「日常選物網站：把商品特色整理成容易閱讀的頁面內容。」「城市活動版面：用標題與留白，整理活動資訊的閱讀順序。」。聯絡區使用 mailto:demo@example.com 並明示範例信箱、不保證收信；頁尾明示虛構品牌、APPA 為課堂引導而非學員成果，原創示意作品圖與提供的 APPA 素材來源分開說明。使用本堂的 APPA 配色，建立 :root 色票：--night:#160e2c、--navy:#231146、--violet:#6633ff、--lime:#caff33、--muted:#c3bed2、--lavender:#e7deff、--white:#ffffff、--line:#ffffff26。背景用 night、主文 white、次文 muted、主視覺人物區用 violet、主要連結用 lime 配 navy 文字；服務卡深紫、作品卡淺紫配深紫文字；使用本機系統字型，內文至少 16px，內容最大 1080px 且左右留白，卡片有清楚內距。APPA 圖片顯示完整，桌面寬約 185px、手機約 145px，高度自動；figure 預留浮動空間，CSS 上下移動不超過 6px、週期約 6 秒，不改布局高度；prefers-reduced-motion:reduce 時停動畫。重複說明不另設展開提示，不加無用副標。桌面主視覺兩欄、服務與作品各三欄；未滿 700px 改單欄，320px 也不能水平溢出。圖片保留比例、連結能換行且有可見鍵盤焦點，不用固定高度截斷內容。標記唯一的姓名、技能與第三服務編輯位置；生成後先保留暫定姓名與技能，讓我下一步親手改成林小禾／版面設計。提供完整兩檔、儲存／開啟步驟及驗收項目；不用保證像素相同，需符合上述內容、版面與連結規格。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜修改後沒變，先確認開對檔案
確認 Cursor 和瀏覽器開的是同一份 student-work/portfolio。先儲存 HTML 與 CSS，再重新整理瀏覽器；不要誤開教材原件或參考成果。
線索 2｜畫面像程式碼，或只有文字沒有配色
HTML 存入 index.html，CSS 存入 styles.css；不要貼上程式碼框的反引號。確認 HTML 的樣式連結指向 styles.css，兩個檔案在同一層，assets 保留原位。
回到自己的作品，逐項檢查
- 介紹、三項服務與三個作品摘要都出現。
- APPA 與紫綠配色正常，三張作品圖保留在 assets/ 供後續使用。
- 點「查看練習作品」，能移動到作品區。
尚未完成可以先往下看，之後再回來補做。
讓第一頁，成為你的起點。
完成上面兩項操作確認，就會記下這一關。下一關，親手改出自己的內容。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 1 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 1 堂六步勾選，筆記、另一堂進度與網站檔案保留。