当前位置：首页 > news >正文

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

news 2025/8/8 3:35:08

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 时序图, 如下：

sequenceDiagramparticipant 用户 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 CSSCSS引擎->>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 时序图:

sequenceDiagramparticipant U as 用户participant A as SVG图标生成专家participant FS as 文件系统participant IconFile as icons.ymlU->>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.ymlIconFile-->>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: 重复直到用户满意endNote over A,IconFile: 验证检查： - SVG代码有效性 - 文件可访问性 - YAML语法正确性 - 保持现有图标完整性

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

agent-gen-svg-icon