# 策展 · X (Twitter) 🔥

> 作者：Hyperbrowser (@hyperbrowser) · 平台：X (Twitter) · 日期：2026-03-17

> 原始來源：https://x.com/hyperbrowser/status/2033608785953267759

## 中文摘要

HyperSkill 是一套開源工具，讓 AI Agent 能自動從網路文件中學習整套技能樹。使用者只需輸入主題，系統就會讀取相關文件並建構出 Agent 可以導航的技能圖譜，隨後可以預覽、下載並直接整合到專案中。

**驅動技術**：這個工具由 Hyperbrowser 驅動，採用 Next.js 14 開發。核心功能包括三個環節：
- 透過 Serper API 搜尋相關內容
- 使用 Hyperbrowser SDK 爬取並提取關鍵資訊
- 透過 OpenAI GPT-4o 生成結構化的技能文件

系統會自動生成 SKILL.md 檔案，使用者無需手動組織知識庫。

**操作模式**：HyperSkill 提供兩種操作模式。單一模式讓使用者輸入主題或貼上網址後點擊「生成 SKILL.md」，系統隨即搜尋資源、爬取內容、生成文件，完成後可預覽、複製到剪貼簿或下載檔案。全新的批次模式則支援一次處理多個網址，用戶切換到批次模式、貼上多個網址（每行一個），點擊「生成 X 個技能」，系統會並行處理每個技能並即時顯示進度。批次模式還支援將所有生成的技能下載為 ZIP 檔案，適合一次性導入整套技術棧或同時生成多個技能。

**技術棧**包括：
- Next.js 14（應用路由與 TypeScript）
- Tailwind CSS 樣式
- Hyperbrowser SDK 進行網路爬取
- Serper API 網路搜尋
- OpenAI GPT-4o 內容生成
- Lucide React 圖示與 React Markdown 做 Markdown 預覽

系統採用無資料庫設計，API 路由以無伺服器架構運作。

**安裝需求**：使用者需準備三個 API 金鑰才能運行：Hyperbrowser、Serper 與 OpenAI。安裝流程標準化，只需複製儲存庫、執行 npm install、複製 .env.example 為 .env 並填入 API 金鑰、執行 npm run dev，即可在本地開發伺服器上運作。

**應用場景**涵蓋程式編寫助手、自動化工具與 AI 工作流程。對於需要快速導入新功能的成長團隊、開發者與 AI 建構者而言，該工具提供了從網路資源自動生成結構化知識庫的解決方案。批次爬取功能使用 Hyperbrowser 原生的批次 API，在單一 API 呼叫中並行處理多個網址，提高效率。

**程式碼結構**：程式碼採開源 MIT 授權，完整儲存庫包含：
- app 資料夾（API 端點、根佈局、主 UI）
- components 資料夾（輸入區段、Markdown 預覽、動作按鈕）
- lib 資料夾（搜尋整合、爬取邏輯、技能文件生成）
- types 資料夾（TypeScript 型別定義）

功能特色包括批次模式、並行處理、即時進度更新、ZIP 下載、簡約黑白 UI 設計、Markdown 預覽與語法高亮、單鍵複製、檔案下載功能。