Agent Skills Day3:讓你的 Skills 成果被「看見」— 用 AI 搭建前端界面完整教學
從 Day1 的基礎認識到 Day2 的五大法則,相信大家已經開始動手做出自己的 Skills 了。 但你有沒有發現一個問題?AI 跑完之後,結果全部散落在終端機的對話紀錄裡 或是一堆 Markdown 檔案堆在資料夾裡。想找上週的分析結果?先翻 10 個資料夾再說 這就是 Day3 的核心主題 —— 讓你的 Skills 成果被「看見」。我們要用 AI 幫你建一個前端界面,把所有成果整合到一個清清楚楚、有結構的網頁中。 📍 第一部分:為什麼需要前端界面?AI 成果管理的痛點 你是不是也遇過這些狀況? 場景 1:Podcast 分析成果散落各處 你用 AI 分析了一個 3 小時的英文 Podcast,得到了: - 核心重點整理(在對話紀錄裡,要一直往上滾) - 5 篇社群文章(分散在 10 個 Markdown 檔案裡) - 金句截圖(在螢幕截圖資料夾裡,光看檔名根本不知道是什麼) 場景 2:找資料像大海撈針 上週做的 YouTube 影片分析在哪裡? - 先開啟終端機對話紀錄 → 往上滾 200 行 - 再打開資料夾 → 翻 10 個 .md 檔案 - 找到了!但這是草稿還是最終版?不確定⋯⋯ 場景 3:資料越多,管理越崩潰 - 剛開始用 AI 時:5 個檔案,還能管理 - 用了一個月後:50 個檔案,開始混亂 - 用了三個月後:200 個檔案,完全放棄整理 前端界面就是解法 想像你走進一個整齊的展示間: 📂 左邊是分類選單 - YouTube 影片分析 - Facebook 長篇文章 - Instagram 短文案 - Patreon 深度內容 📄 右邊是清晰的內容展示 - 點一下「YouTube」→ 立刻看到所有影片的標題、說明、章節 - 點一下「Facebook」→ 所有社群文章整齊排列 🔍 上方有搜尋列 - 輸入「Podcast」→ 立刻找到所有相關分析 - 輸入「上週」→ 過濾出最近 7 天的成果 💡 Tip: 前端界面就像把你的「AI 辦公室」從雜亂的桌面升級成有系統的檔案櫃。資料不會變少,但管理效率會暴增。 📍 第二部分:讓 AI 幫你建前端界面(3 步流程) Step 1:明確告訴 AI 你想呈現什麼 ❌ 錯誤做法: 「幫我建一個網頁。」 這太模糊了!AI 不知道你要呈現什麼內容、什麼結構。 ✅ 正確做法: 「我要一個前端界面,用來展示我的 Skills 成果。 功能需求: - 左邊是平台分類選單(YouTube、Facebook、Instagram、Patreon) - 右邊是文章內容展示區 - 點選不同平台時,右邊會顯示對應的文章 - 上方要有搜尋功能,可以用關鍵字找內容 風格需求: - 深色模式 - 字體用 Montserrat(標題)+ Inter(內文) - 主色調用藍色系」 關鍵心法:越具體越好!把你腦中的畫面用文字描述出來。 Step 2:拿到初稿後逐步調整 不要期待 AI 一次做到完美。就像你請設計師做海報,一定會來回修改 3-5 次。 核心技巧: 技巧 1:用瀏覽器 F12 Console 抓錯誤 1. 在瀏覽器中打開 AI 生成的網頁 2. 按 F12 打開開發者工具 3. 切換到「Console」分頁 4. 把紅色錯誤訊息複製下來,貼給 AI 這樣 AI 就能精準知道哪裡出錯了。 技巧 2:截圖標記問題位置 - 用截圖工具圈出有問題的地方 - 加上文字說明「這裡的按鈕位置太靠左」 - 圖片 + 文字雙管齊下,AI 理解更快 技巧 3:一次只改一個部分 ❌ 錯誤:「幫我把顏色改成藍色,順便調整字體,然後加動畫,還有按鈕改大一點⋯⋯」 ✅ 正確:「先把主色調改成藍色 (#3B82F6)」→ 確認 OK → 下一輪再改字體 為什麼要這樣? 因為 AI 每次修改都是基於「當下的版本」。如果你一次改太多,AI 很容易搞混,把上一版的正確程式碼改壞。 技巧 4:選對 AI 模型 - 簡單調整(改顏色、字體)→ 用 Sonnet(快速、省成本) - 複雜除錯(功能壞掉、邏輯錯誤)→ 用 Opus(推理能力更強) 💡 Tip: 除錯的黃金組合 = 瀏覽器 Console 錯誤 + 截圖 + 文字描述。三管齊下,AI 修 bug 的準確率大幅提升。 💡 最重要的一句話: 跟 AI 合作建網站,就像管理一個遠端員工 —— 你不會一次把所有需求丟給他,而是先交代一件事,做好了再交下一件。溝通的節奏,決定了專案的成敗。 📌 重點回顧 1. 前端界面 = AI 成果的展示間 2. 建前端的 3 步流程 3. 建網站的核心心法