使用 Claude Code 的自定义 Sub Agent 完善博文写作体验

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 的工作流程.

我 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 文件.

执行过程

> 使用 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 文件并点击"下载封面图片"按钮获取图片. 请问您需要对设计进行哪些调整吗？

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代码
- 设置合适的viewBox
- 最小化路径复杂度
- 添加可访问性标签
- 确保一致的样式
    
    A->>FS: 将SVG保存到当前目录
(临时预览文件)
    FS-->>A: 文件创建成功
    
    A->>U: 展示SVG预览
提供查看说明
    U->>U: 查看生成的SVG文件
    
    alt 用户满意图标
        U->>A: 明确批准使用此图标
        A->>IconFile: 将SVG数据添加到
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: 验证检查：
- SVG代码有效性
- 文件可访问性
- YAML语法正确性
- 保持现有图标完整性

Agent 会基于我的意图, 生成一个 SVG 文件, 然后保存到当前目录, 我会在 Visual Studio Code 编辑器中预览它, 如果我满意的话, 会将 SVG 图标 XML 定义存放到博客主题的配置文件 icons.yml 中, 供后续使用.

agent-gen-svg-icon