前面幾篇，我們花了不少時間研究一件事：我要怎麼把自己平常做事的方法，教給 AI 分身？

我們從過去做過的提案、文件與工作成果裡，把那些原本只存在腦中的判斷方式慢慢挖出來，再整理成 Hermes Agent 可以重複使用的 Skill。這很適合處理那些我真的有一套自己做法的工作。

例如，我做提案時可能習慣先釐清真正要解決的問題，再安排資訊順序；寫文章時，也有自己習慣的結構、語氣與品質標準。這些東西如果直接拿別人的版本來套，做出來的結果反而可能不像我。

但做到這裡，很容易不小心走到另一個極端：既然 Skill 可以教 AI 做事，那以後分身少了什麼能力，我是不是都得自己做一個 Skill 教它？

其實沒這個必要。

前陣子我想請 Hermes 幫我把一份「小宅空間規劃」的內容做成一頁式網站。我會做內容，也大概知道什麼網站這個主題的受眾看了會喜歡，但我畢竟不是前端工程師師，更沒有整理出一套什麼「R森獨門前端網頁設計方法」。

如果只是為了做個網站，我還得先把 Typography、Layout、Responsive Design、互動效果全部研究一輪，再自己寫成 Skill 教它，這條路顯然繞太遠了。

這時候，更合理的做法是直接借用別人已經整理好的方法。

《R森小叮嚀》

有「我的做法」的，自己教；沒有非得照我的方式做，就先看看前人有沒有教好了。

有自己獨到的做法就自己教，沒有就先站在前人的肩膀上

要不要自己做一個 Skill，我現在會先問一個問題：

「這件事情，我有沒有特別想堅持的做法？」

如果答案是有，例如我怎麼做提案、怎麼分析客戶需求、怎麼寫文章，甚至怎麼判斷一份成果能不能交出去，那就值得把自己的方法留下來。因為真正有價值的地方，就在那些帶有個人判斷、工作習慣與品質標準的細節。

但有些工作，我其實沒有那麼強烈的個人風格，也沒有一套非照不可的工作流程。

前端網頁設計就是一個很好的例子。

我需要的是「幫我把內容做成一個有質感、資訊清楚、可以正常使用的網站」。只要有人已經整理出一套成熟的方法，我沒有必要重新發明一次。

Skill 在這裡就多了一種用法。

前面我們用 Skill 保存的是「我的工作方法」；現在，也可以把別人已經整理好的專業方法，直接裝進自己的 AI 分身中。

先看看沒有前端 Skill 時，Hermes 會怎麼做網站

我先把一份談「小宅從隔間改成功能分區」的原始文章內容交給 Hermes，請它直接做成一頁式網站。

這時候我還沒有額外安裝前端設計相關的 Skill，也沒有丟任何參考網站給它。

第一版其實不算差。

它有完整的視覺設定，深綠搭配米白，標題跟內文也有基本層次；最上面的 Hero 放了一張很簡單的空間線稿，左邊還安排了 Contents。從「有沒有把內容做成一個完整網頁」來看，它的確完成了。

但一路往下看，就會發現整頁的思考方式很接近「把一篇文章排得漂亮」。

大量內容還是靠標題與內文一路往下讀。像「少做隔間，把空間按照生活功能重新分配」這種很適合用圖解說明的概念，畫面上雖然已經有一些簡單的空間元素，真正負責解釋概念的仍然主要是文字。

也就是說，Hermes 已經知道怎麼把內容放進網頁，卻還沒有太多方法去思考：

這段內容到了網頁上，有沒有更直覺的呈現方式？

不會網頁設計與前端程式？直接裝大神們做好的 Skill

這次我使用的是 Anthropic 官方公開的兩個 Skill：frontend-design 與 web-artifacts-builder。

Anthropic 把 Agent Skill 做成一組可以被 Agent 讀取的指令、腳本與相關資源，需要某項能力時再載入，不需要每一次都把整套方法塞進 Prompt。官方也公開了一系列 Skills，讓其他人可以直接查看它們的內容與結構。

這兩個 Skill 都跟前端有關，但負責的事情不太一樣。

一、frontend-design：先讓分身知道「怎樣才算有經過設計」

如果沒有特別引導，LLM 很容易做出一種熟悉的「AI 網頁」：安全的字體、常見的卡片排列、很保守的版型，什麼都有，但也很難留下印象。

Anthropic 自己在介紹 frontend-design 時，就提到這種現象。他們希望模型在開始寫程式之前，先去思考網站的目的、對象與視覺方向，再決定 Typography、色彩、版面、動態效果與細節，而不是一路往最常見的設計選項靠攏。

我們不仿把 frontend-design 理解成：

它補的是「設計判斷」。

它會提醒 Agent，做網站不能只想「這一段要放左邊還右邊」，還要想這是什麼主題、給誰看、該呈現什麼氣質，以及哪些視覺選擇真的符合這份內容。

二、web-artifacts-builder：讓比較完整的 Web 介面做得出來

web-artifacts-builder 則比較偏向實際製作。

Anthropic 為它準備了一套建立複雜 Web Artifact 的流程，會使用 React、TypeScript、Tailwind CSS、shadcn/ui 等前端技術，也附上初始化與打包用的腳本。它原本就是為了讓 Agent 在遇到多元件、需要狀態管理或比較複雜互動的介面時，不全部硬塞進一個簡單的 HTML 檔案裡，未來較好維護。

《R森小叮嚀》

frontend-design 處理「怎麼設計得更好」；web-artifacts-builder 處理「比較完整的前端要怎麼做出來」。

兩個搭在一起，剛好就是我這次需要的能力。

Anthropic 也不是唯一公開官方 Skill 的公司。OpenAI 同樣有自己的 Agent Skills catalog，把可重複使用的指令、腳本與資源整理成 Skill，供 Codex 使用；只是原本獨立的 Skills repository 目前已標示為 deprecated，新的範例正往 Plugins 的方式整合。

所以碰到自己沒有特殊做法的工作時，我現在通常會先做一件事：去看看這個領域是不是已經有人把方法整理好了。

Hermes Agent 怎麼安裝別人寫好的 Skill？

找到 Skill 之後，要把它加進 Hermes 其實不麻煩。我目前最常用兩種方式。

方法一：直接從 Desktop 的 Skills Hub 找

如果使用 Hermes Desktop App，可以直接進入「技能與工具」。

畫面裡除了會列出目前已經安裝的 Skill，也可以進入 Skills Hub 搜尋其他可用的 Skill。

這是最適合剛開始使用的人走的路。

你不需要先跑去 GitHub 翻一堆 repository，只要搜尋自己需要的能力，找到適合的 Skill，再直接安裝即可。Hermes 本身也提供 hermes skills browse、hermes skills search 與 hermes skills install 等指令，背後使用的是同一套 Skills Hub 機制。GitHub

例如今天缺的是前端設計能力，就搜尋前端、Web、Design 相關 Skill；哪天要處理 PDF、研究資料或其他工作，也可以先來這裡找看看，許多時候，輪子不需要造第二次。

方法二：把外部 Skill 直接交給 Hermes

另外一種方式，更符合我平常使用 Agent 的習慣。

如果我已經在 GitHub 或官方網站找到想用的 Skill，就直接把來源交給 Hermes，請它幫忙安裝。

直接在指令提示框中輸入：

請幫我安裝這個 Skill 到 Hermes Agent

【貼上 github 連結】

Hermes 目前支援從 Skills Hub 的 identifier、公開 GitHub repository，以及 HTTP(S) 上的 SKILL.md 安裝 Skill。安裝完成後，Skill 就會出現在 Hermes 可使用的 Skill 清單裡。

這裡還有一個小地方很值得注意：Skill 可以有不同的「能見度」。

如果這項能力之後很多工作都會用到，例如我長期都希望 Hermes 有前端網頁設計能力，可以放在 Hermes 的 Skill 根目錄 ~/.hermes/skills/。這樣不同的專案、對話都可以使用。

但有些 Skill 只服務眼前這個專案。

例如你正在做某個網站，這個 Skill 只跟這個專案的技術規範或特殊需求有關，做完之後大概不會再使用，那就可以放在專案底下的：

<project-root>/.hermes/skills/

或：

<project-root>/.agents/skills/

Hermes 會把這類 Project-local Skill 限定在該專案的工作環境裡使用，而且專案內的 Skill 具有較高優先權。第一次使用這類 Skill 時，Hermes 也會要求你先信任該專案。

我自己的判斷原則很簡單：

會跨專案反覆使用的能力，放共用；只服務眼前專案的能力，留在專案裡。

這樣就不用做過一次特殊工作，便把所有 Skill 永久塞進 AI 分身。

裝上前端 Skill，同一份內容再做一次

把 frontend-design 和 web-artifacts-builder 裝好之後，開一個新的對話，還是使用前面同一份「小宅裝修新觀念：從隔間改成功能分區」的內容，再請 Hermes 做一次網站。

主題沒有換，內容也沒有重新改寫成一份特別適合展示的 Demo。

你會發現，這一次 Hermes Agent 明確地載入了這兩個 skill，然後才開始寫前端網頁程式：

而這次做出來的第二版，處理內容的方法已經明顯不同：

如果只把差異說成「第二版比沒用 skill 的第一版更美觀」，其實漏掉了真正重要的部分。

變化最大的地方，在於 Hermes 透過安裝的那二個 skill，開始多了思考「讀者要怎麼看這份內容」而進行重新設計。

強化一、原本只是在排版，現在開始設計目標用戶的閱讀方式

第一版大量沿用文章本身的結構：標題、正文、小標、正文一路排下去。

第二版則把相同資訊拆成不同功能的網頁區塊。

最上面的 Hero 先說清楚主題，接著用一整塊深色區域把核心觀念拉出來；往下再透過三欄內容、空間圖解、問題清單與 CTA，把原本散在文章裡的資訊重新分組。

內容沒有突然增加很多，但讀者接收資訊的方式變了。

第一版比較像「把文章做成網頁」；第二版開始像「重新為網頁設計這篇文章」。

強化二、原本靠文字解釋，現在開始直接畫給你看

這次最明顯的差異，是圖解變多了，而且不是單純拿圖來裝飾。

例如文章談到「功能分區」時，第二版直接在 Hero 右側放了一張空間配置圖，把生活／用餐、彈性工作、安靜休息幾個區域畫出來。

讀者甚至還沒開始讀長段落，就已經大概知道這篇文章在談什麼。

到了「同一坪空間，容得下不同時刻」的區塊，它又再次用視覺方式呈現不同功能如何共存在同一個空間裡。

Skill 不只處理 CSS 這種技術細節，也會讓分身去思考：有些概念不用全部寫成一段話，換一個視覺圖解的呈現方式，讀者可能更快理解。

強化三、頁面開始有閱讀節奏

第一版的排版單調，所以往下滑時，閱讀起來有點無聊。

第二版則開始利用深色區塊、白色內容區、淺色圖解區交錯，再搭配大標、Icon、圖解與問答，把不同層次的資訊分開。

每往下一段，讀者都能感覺自己進入另一個主題。

裝上 Skill 後的分身懂設計了，但我還是可以決定它要用什麼風格

第二版已經比第一版更完整，但它走的是偏資訊設計的方向：線稿圖解、深藍綠配色、清楚的內容模組，看起來比較理性，也很適合知識型內容。

如果我今天想要的是另一種感覺，例如更接近室內設計品牌、生活風格網站的氣質，怎麼辦？這時候最簡單的方法，就是給它你想要的類似的參考就可以了。

我們可以去 Pinterest (https://www.pinterest.com/) 找了一張自己喜歡的網站視覺，把圖片復製下來，丟回原本同一個對話裡，請 Hermes 保留目前的內容與資訊架構，再參考圖片裡的設計風格，重新設計一次。

這個做法跟實際跟設計師溝通很像：

你不一定能用文字精準說出「我要 87% 北歐風、加一點 Japandi、但不要太 Minimal」到底長什麼樣子；附上圖直接說「我喜歡這種感覺」，讓設計師去分析，通常更快。

同一份內容，換一個 Reference 重新設計，就能變成不同風格的網站

第三版出來之後，設計已經完全不同：

第二版比較偏資訊設計。它強調圖解、內容模組與閱讀效率，整體感覺理性、清楚。

第三版則換成比較接近 Lifestyle 與室內品牌的視覺語言。

首頁直接使用大幅室內空間照片，配色轉成暖米白與自然色；留白更多，文字密度降低，照片和文字開始交錯排列，整體看起來更像一個室內設計品牌的形象網站。

《R森小叮嚀》

Skill 幫分身補上設計能力和前端程式碼框架能力，Reference 則可幫它對準這一次要走的視覺方向。

AI 分身的能力，不需要全部從我身上複製

之前幾篇，我們一直走的是這條路：

我的工作經驗 → 萃取我的方法 → 做成 Skill → 教給 AI 分身

這條路當然還是很重要。因為那些真正屬於我的判斷方式、工作習慣與品質標準，本來就沒辦法從別人的 GitHub 直接下載回來。

但這一篇多出另一條路：

前人整理好開放出來的 Skill → 我們找到適合的 → 直接裝進 AI 分身中

當然，如果有一天，我真的發展出一套「R森獨門前端網頁設計方法」，當然可以再把它整理成自己的 Skill，然後在觸發條件中寫清楚何時觸發。這樣就可以將通用的與自己獨門的技能，依不同的情況下使用。

不過在那之前，沒必要什麼都從零開始研究一次。

有些事情，我親自教它。

有些事情，直接讓它站在前人的肩膀上。