在開始之前：
(｡･∀･)ﾉﾞ嗨，歡迎來到 Yong’s MD 的網站！
我們已經對網站進行較大的更動内容啦！我們也即將在接下來的時間，慢慢整理這個網站的一點一滴！
讓他看起來可以跟這個網站比較符合一點 :3

前置步驟 : 準備什麽工具#

1. AI 工具 (可以自行選擇，本次我使用的是 Gemini Flash Extended, 和 Claude Opus)
2. Vercel.com (可免費托管你的網站)
3. Github 賬號 (存放 Vercel 托管網站的文件)
4. (可選) VS Code Editor (可以讓你更方便寫文章/修理framework)

步驟1 : 產出網站的 Prompt.#

在製作一個網站之前，我們先需要準備關於網站的主視覺，功能，以及需要的板塊等等。
這裏我就拿我那時候喂給 AI 的資料給你們看看，但不是每個人都適用我的模板，有需要請自行調整。

現在，我需要用 Claude 生成一個屬於我的個人介紹網站，請你幫我生成一段提示詞出來。

我的要求有這些：

1. 頁面必須可在 Vercel 平臺上運行，可以使用 Astro.js / Next.js 等編程語言編寫

2. 頁面需要展示我的個人資訊，及我的 CV (Resume)。Resume 部分我想我會上傳在我的 Github 倉庫内。

3. 網站設計需要使用最近很流行的 Apple Liquid Glass 設計。因此，請收集 Apple 的 Liquid Glass 設計需要使用什麽 UI 提示詞

4. 可使用 Gradiant (漸變) 製作網站背景，但不要有太明顯的 AI 感。 

在輸入后，你可能需要等他生成一陣子。如果你對網站風格還是沒有什麽想法的，可以讓他生成 10 個風格讓你參考。
生成后，請複製他生成的提示詞，并且把它放在一個 txt 文檔中 (如果你會怕不見的話)

步驟2 : 生成網站框架#

把提示詞輸入 Claude 后，他會幫你生成整個網站的框架，以及根據你的要求設計自己的 css.
在生成后，他會告訴你整個框架長怎麽樣。拿我的例子來説，我的網站長這樣：

portfolio/
├── app/
│   ├── globals.css        ← 整個玻璃系統 + Aurora CSS
│   ├── layout.tsx         ← Server Component：字體 + SEO metadata
│   └── page.tsx           ← Server Component：組裝所有 section
└── components/            ← 全部為 "use client" Client Components
    ├── AuroraBackground   ← 固定背景，4 個 CSS 動畫 blob
    ├── Navbar             ← 捲動後出現 glass pill navbar（含手機漢堡選單）
    ├── Hero               ← 全螢幕：名字漸層 + 狀態徽章 + CTA
    ├── Projects           ← 兩張玻璃卡片 + 技術棧摘要列
    ├── Skills             ← 4 個類別的彩色技能 pills
    ├── Resume             ← 大型 glass panel + 兩個 CTA 按鈕
    └── Contact            ← 4 個社群圖示卡片

在這裏，你會看到整個框架會長怎麽樣。這會在 Github 或 VS Code 中，讓你知道每一個文件會放在哪裏。

步驟3 : 根據格式，輸入文件#

我這邊建議使用 VS Code 來進行接下來的活動，因爲 VS Code 可以直接解壓縮 zip 到repo當中。 關於 Github 和 Vercel 的部分，我之後會繼續更新 (目前半夜三點了)。

完整repo可以查看這邊：