10d • General discussion
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 抓錯誤
- 在瀏覽器中打開 AI 生成的網頁
- 按 F12 打開開發者工具
- 切換到「Console」分頁
- 把紅色錯誤訊息複製下來，貼給 AI
這樣 AI 就能精準知道哪裡出錯了。
技巧 2：截圖標記問題位置
- 用截圖工具圈出有問題的地方
- 加上文字說明「這裡的按鈕位置太靠左」
- 圖片 + 文字雙管齊下，AI 理解更快
技巧 3：一次只改一個部分
❌ 錯誤：「幫我把顏色改成藍色，順便調整字體，然後加動畫，還有按鈕改大一點⋯⋯」
✅ 正確：「先把主色調改成藍色 (#3B82F6)」→ 確認 OK → 下一輪再改字體
為什麼要這樣？
因為 AI 每次修改都是基於「當下的版本」。如果你一次改太多，AI 很容易搞混，把上一版的正確程式碼改壞。
技巧 4：選對 AI 模型
- 簡單調整（改顏色、字體）→ 用 Sonnet（快速、省成本）
- 複雜除錯（功能壞掉、邏輯錯誤）→ 用 Opus（推理能力更強）
💡 Tip：
除錯的黃金組合 = 瀏覽器 Console 錯誤 + 截圖 + 文字描述。三管齊下，AI 修 bug 的準確率大幅提升。
💡 最重要的一句話：
跟 AI 合作建網站，就像管理一個遠端員工 —— 你不會一次把所有需求丟給他，而是先交代一件事，做好了再交下一件。溝通的節奏，決定了專案的成敗。
📌 重點回顧
- 前端界面 = AI 成果的展示間
- 建前端的 3 步流程
- 建網站的核心心法
2
1 comment
Agent Skills Day3：讓你的 Skills 成果被「看見」— 用 AI 搭建前端界面完整教學
powered by
skool.com/hei-ai-8196
這是一個幫助你掌握AI自動化工作以及AI Agent (AI代理) 的中心。讓我們一起利用AI令你的人生更精彩！
升級至VIP:
skool.com/ai-plus-8477
Suggested communities
Powered by