Claude Code ! Claude Code ! 停不下來了~ 兩天前, Claude Code 可以自定義自己的 AI Agent 了 -> https://docs.anthropic.com/en/docs/claude-code/sub-agents.

正好週末也把博客遷移主題完成了 -> 《使用 Claude Code 和 Qwen3 Coder 將博客主題成功遷移到了 Stellar 🎉》. 順便把玩下新出的 Sub Agent 功能. 現在使用 Claude Code 製作 Agent 很簡單, 通過 Slash 命令 /agents 即可開始創建自己的 Agent, 把意圖描述清楚即可.

在場景的挑選上, 我選擇了兩個博客文章寫作除了內容之外, 最主要的兩個場景:

• 1、文章 banner 頭圖製作: 文章出現點圖片讓自己看得會舒服點, 一般比較“花”的封面更容易吸引人;
• 2、博客的 SVG 圖標製作: 新的博客主題 Stellar 拋棄了之前的使用的圖標庫 fontawesome, 文章內如果想嵌入, 經常需要找, 找不到滿意的, 感覺可以拿 AI 製作下.

我已經把 Agent 的系統提示詞放到了博客的開源 GitHub 倉庫中, 感興趣的小夥伴可以拿來玩玩 -> .claude/agents.

接下來我們看看這兩個 Sub Agent 的工作流程.

文章 banner 頭圖製作 Agent

我使用 AI 基於系統提示詞, 將 Agent 工作流 wechat-cover-layout-designer.md 抽取成為了 mermaid 時序圖, 如下：

sequenceDiagram
    participant 用户 as 用户
    participant 設計師 as 微信封面設計師
    participant 分析器 as 需求分析器
    participant 佈局器 as 佈局規劃器
    participant HTML構建器 as HTML構建器
    participant CSS引擎 as CSS樣式引擎
    participant 響應式引擎 as 響應式引擎
    participant 下載器 as 下載功能模塊
    participant 測試器 as 兼容性測試器
    participant 質檢器 as 質量保證器

    用户->>設計師: 提出封面設計需求
    設計師->>分析器: 啓動需求分析
    分析器->>分析器: 解析比例要求(3.35:1, 2.35:1, 1:1)
    分析器->>分析器: 確定文本佔比(≥70%)
    分析器-->>佈局器: 傳遞分析結果
    
    佈局器->>佈局器: 規劃整體佈局結構
    佈局器->>佈局器: 設計主封面和朋友圈分享區域
    佈局器-->>HTML構建器: 傳遞佈局方案
    
    HTML構建器->>HTML構建器: 創建語義化HTML結構
    HTML構建器->>HTML構建器: 嵌入必要的CDN鏈接
    HTML構建器-->>CSS引擎: 傳遞HTML結構
    
    CSS引擎->>CSS引擎: 集成Tailwind CSS
    CSS引擎->>CSS引擎: 應用Google Fonts字體
    CSS引擎->>CSS引擎: 添加裝飾元素和背景
    CSS引擎-->>響應式引擎: 傳遞基礎樣式
    
    響應式引擎->>響應式引擎: 實現嚴格的比例控制
    響應式引擎->>響應式引擎: 確保跨設備兼容性
    響應式引擎-->>下載器: 傳遞響應式設計
    
    下載器->>下載器: 集成snapdom庫
    下載器->>下載器: 實現圖片下載功能
    下載器-->>測試器: 傳遞完整功能
    
    測試器->>測試器: 驗證跨瀏覽器兼容性
    測試器->>測試器: 測試所有交互功能
    測試器-->>質檢器: 傳遞測試結果
    
    質檢器->>質檢器: 數學驗證比例準確性
    質檢器->>質檢器: 檢查響應式行為
    質檢器->>質檢器: 驗證文本視覺主導性
    質檢器->>質檢器: 確認下載功能正常
    質檢器-->>設計師: 返回質檢報告
    
    設計師->>設計師: 生成完整HTML文檔
    設計師->>設計師: 添加實現説明註釋
    設計師-->>用户: 交付最終封面設計

Agent 會根據用户的意圖, 幫我們生成一個 HTML 頁面, 提供一個下載按鈕, 使用 Snapdom 將圖片轉換出來. 生成頁面效果如下:

一般我的寫作是在 Visual Studio Code 中進行的, 所以可以很方便的通過 VS Code 插件 Live Preview 預覽 Agent 生成的 HTML 文件.

{% folding 執行過程 %}

> 使用 wechat-cover-layout-designer 完成封面圖設計, 標題為: 使用 Claude Code 的自定義 Sub Agent 完善博客寫作體驗
  ⎿  ⧉ Selected 1 lines from source/_posts/claude-code-subagent-for-tech-writing.md in Visual Studio Code

⏺ wechat-cover-layout-designer(Design WeChat cover image)
  ⎿  Done (1 tool use · 1 tokens · 42.6s)                                                                                                               

⏺ 我已使用 wechat-cover-layout-designer 完成了封面圖設計, 創建了符合要求的微信公眾號封面圖佈局：

  - 整體比例為 3.35:1, 包含 2.35:1 的主封面區域和 1:1 的分享封面區域
  - 採用了現代漸變背景（藍到紫）和裝飾性圖案疊加
  - 響應式排版設計, 主封面完整顯示標題, 分享封面突出顯示"博客寫作"
  - 使用 Tailwind CSS 和 Google Fonts 實現現代化中文字體效果
  - 內置下載功能, 可將整個佈局保存為 PNG 圖片

  設計已完成, 您可以在瀏覽器中打開 HTML 文件並點擊"下載封面圖片"按鈕獲取圖片. 請問您需要對設計進行哪些調整嗎？

{% endfolding %}

SVG 圖標製作 Agent

同樣, 我也將 SVG 圖標製作 Agent 工作流 svg-icon-generator 通過 AI 抽取為了如下 mermaid 時序圖:

sequenceDiagram
    participant U as 用户
    participant A as SVG圖標生成專家
    participant FS as 文件系統
    participant IconFile as icons.yml
    
    U->>A: 請求創建SVG圖標
    A->>U: 詢問圖標需求澄清問題（如需要）
    U->>A: 提供圖標詳細要求
    
    Note over A: 生成SVG代碼
    A->>A: 創建優化的SVG代碼<br/>- 設置合適的viewBox<br/>- 最小化路徑複雜度<br/>- 添加可訪問性標籤<br/>- 確保一致的樣式
    
    A->>FS: 將SVG保存到當前目錄<br/>(臨時預覽文件)
    FS-->>A: 文件創建成功
    
    A->>U: 展示SVG預覽<br/>提供查看説明
    U->>U: 查看生成的SVG文件
    
    alt 用户滿意圖標
        U->>A: 明確批准使用此圖標
        A->>IconFile: 將SVG數據添加到<br/>source/_data/icons.yml
        IconFile-->>A: 更新成功
        A->>FS: 刪除臨時SVG預覽文件
        FS-->>A: 文件刪除成功
        A->>U: 圖標集成完成
    else 用户需要修改
        U->>A: 請求修改圖標
        A->>A: 根據反饋調整SVG設計
        A->>FS: 更新臨時SVG文件
        FS-->>A: 文件更新成功
        A->>U: 展示修改後的SVG預覽
        Note over U,A: 重複直到用户滿意
    end
    
    Note over A,IconFile: 驗證檢查：<br/>- SVG代碼有效性<br/>- 文件可訪問性<br/>- YAML語法正確性<br/>- 保持現有圖標完整性

Agent 會基於我的意圖, 生成一個 SVG 文件, 然後保存到當前目錄, 我會在 Visual Studio Code 編輯器中預覽它, 如果我滿意的話, 會將 SVG 圖標 XML 定義存放到博客主題的配置文件 icons.yml 中, 供後續使用.

關於 Claude Code 自定義 Agent 功能的使用感想

• Agent 的工作效果可能一開始不是很好, 但問題不大, 我們可以逐步在使用中, 讓 Claude Code 不斷優化子 Agent 的工作流即可. 關鍵還是多用, 多迭代.
• 多關注下社區的 Agent 製作玩法, 開拓下視野, 不要讓 Agent 的能力, 受限於自己.

讓我們在 AI 時代, 更加享受創作吧~ღ( ´･ᴗ･` )比心~