Featured image of post AI辅助写作新玩法:打造自己的文章审阅+封面生成工具

AI辅助写作新玩法:打造自己的文章审阅+封面生成工具

我是一个略有强迫症的人,每写完一篇文章,还需要花费不少时间反复检查错别字、调整语句或结构,有时为找个好看的封面图看花了眼。可是都AI时代了,这事不能再忍了,能不能有新解法?如果你也时常有一些文字要处理,不妨看看本文。

背景

我时而写一些技术文章,但一直感觉写作流程挺“原始”的。一般是打开 VS Code 等编辑器,用Markdown写完主要内容,然后自己读几遍修正部分内容,之后就会为如何给文章取个名字、配个图而纠结,这过程往往需要花费不少时间。 文章发布在博客可以随时修正,但若发布到公众号等平台,修改限制非常严格,而我又是对于错字或语句不通等有强迫症的人,每次发个文章心理包袱都很重。

在 ChatGPT 出来后,我有让 AI 帮我检查,但如果你用过,或许也会觉得那个交互方式并不友好,AI给的修改建议都是一股脑扔给你,你得在聊天窗口里上下翻找,对着原文一条条改。在封面图的选择上,过往我会根据主题去 Google 一些图片,一是可能有版权风险,二是不见得合适。现在 AI 生图方便,但生图模型也五花八门,我经常纠结选哪个,提示词也需要来回调整。

本来我觉得文章审阅与修改这种应该可以比较成熟了,可是却苦于一直没找到合适的好用实现 (若你有称手的工具,欢迎留言推荐)。我也不理解如今那些内容平台为什么不在这块提供一些便利。程序员怎么能有这种遗憾呢?于是,我决定利用周末时间自己动手,“丰衣足食”!🚀

我这是 AI+写作吗?其实我讨厌 AI 写作,有些文章看得满满的 AI 味真让人想取关。而我真是一句话交给它都不放心的,它没有我想要的“脾气”,但它打打辅助还是不错的。

需求梳理

如果你是个程序员,有用过 spec-workflow 的标注功能,或许会感觉那个交互还不错。或者像最近 Google 推出的 Antigravity(取的啥鬼名?)的 Plan 及评论,可以直接对着文档进行批注,这样更加直观。对于封面图,希望 AI 来帮我总结文章自己生成一些不同风格的提示词,然后调用不同的模型生成一些候选,让我来选择。于是在动手前,我先梳理了一下核心需求:

文章审阅

  • 智能审阅: 自动检查错别字、语句流畅度、技术准确性,让 AI 来给出一些建议。
  • 交互式批注: 直接在原文标注某一块建议如何修改,不要给我一堆文字让我自己找原文。
  • 可选择性应用: 有了建议后,让我能自己决定接受哪条、拒绝哪条,或者暂时搁置。
  • 差异对比: 修改后要能清晰看到改成了怎样,类似代码的双栏 Diff 那种是我想要的。
  • 多轮迭代: 支持基于修改后的版本继续审阅,不断迭代到自己满意为止。

封面图生成

  • 自动提示词生成: 基于文章内容智能生成生图提示词,避免自己手动写。
  • 风格多样性: 简约风、科技风、赛博朋克风等,AI 来帮我生成一些不同风格的提示词。
  • 多模型赛马: 在不考虑钱包厚度下,同时调用多种生图模型,将结果展示让我挑最满意的。

想起来还不错,还没实现出来,但写完需求都有点开心起来了,啊哈。可能每一步过往都让我难受过,不犹豫了,撸起袖子开干吧!

如果你对技术实现细节和那些经历不感兴趣,想看最后的效果可直接跳到效果展示部分,感谢阅读。

实现细节

我最近一阵子用过一些智能体(Agent)框架,本想着这是不是一个文章 Review 相关的智能体呢?但思前想后,我觉得确定性的 Workflow 可能更合适。具体到技术细节上,我希望支持更多的 LLM 模型,以及支持更多的生图模型。在展示方式上,Web 页面显然是最佳选择,希望有一个不错的交互 UI。这次我没有采用 spec 驱动的开发方式,而是探索式开发,说人话就是走一步看一步。我想看一下在几个目标相对清晰、耦合也很低的情况下,当前 AI 能否完美解决问题。我使用 claude code + Claude SDK 来实现。 在开发初期,为了直抵核心,我将工具设计为通过命令行执行,而结果展示则采用 Web 形式。

审阅页

经过简要沟通后,第一版本的东西出来了,然后只要执行一个命令:

1
2
# 审阅文章
npm run review -- <file>

便调用了后端的 LLM 帮我们审核文章并且弹出修改意见。 AI 的初版Review页 在没有任何风格要求和参考下,AI 的初步网页让我觉得还挺不错的吧:)

接着,我希望批注和原文有个对应关系并且可快速跳转,同时AI 给文章的整体总结、表扬和建议咱们也给它整上,再来一个评分,使用起来可能更带劲了。于是有了这样的效果: AI 的对Review页的补充 我把批注分了不同类型并且编号上,以及不同的处理方式。像我拒绝时,我就有充分的理由:如 AI 老是想让我将一些口语的文字改得非常书面,这时就正告它老子死都不改,这就是本人风格,下次勿提,嘎嘎。

这过程中顺手让Claude SDK支持了调用其它LLM。我不清楚为什么,无论是 Google 的 ADK 还是 Anthropic 的 Agent SDK 都默认仅支持自家模型。可我平时用的是 LiteLLM 代理各种模型,国内国外都有(御三家、doubao、DeepSeek等)。难道要为了这个 SDK 放弃其它模型?显然我是不答应的,绝对不(只)是因为钱包,我暗地里想象对于中文文章,是否可能也许咱国内模型是不是更懂自己一些?(我没有证实)。要使用三方 OpenAI 兼容 API 的话,需要自己扩展。一点不慌,我们将OpenAI的API文档给它,几分钟就搞定了。放代码都嫌占空间,此处省略291行代码:) 不过可能放一下 Prompt 还是有必要的:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
你是一位专业的技术文章文章审阅专家。请仔细审阅用户提交的技术文章,并提供全面的反馈。

你需要关注以下几个方面:

1. **语句流畅度**:检查文章是否通顺易读,是否有表达不清或语句冗长的地方。
2. **错别字和语法**:找出所有的错别字、语法错误和标点符号问题。
3. **技术准确性**:验证技术描述是否准确,代码示例是否正确,概念解释是否清晰。因为模型知识的滞后性,对于可能是更新的信息,不要瞎给建议。
4. **阅读体验**:提供改善文章结构、增加示例、优化排版等方面的建议。

请以 JSON 格式输出你的审阅结果,格式如下:

\`\`\`json
{
  "overallScore": 8,
  "fluency": {
    "score": 8,
    "issues": [
      {"location": "第2段", "original": "原文", "issue": "问题描述", "suggestion": "建议"}
    ],
    "suggestions": ["整体流畅度建议1", "建议2"]
  },
  "typos": {
    "count": 2,
    "items": [
      {"wrong": "错字", "correct": "正确", "context": "上下文"}
    ]
  },
  "technicalAccuracy": {
    "score": 9,
    "issues": [
      {"location": "代码块1", "issue": "问题", "severity": "medium", "suggestion": "建议"}
    ],
    "suggestions": ["技术建议1"]
  },
  "readabilityTips": [
    {"type": "structure", "suggestion": "建议内容", "priority": "high"},
    {"type": "example", "suggestion": "添加示例", "priority": "medium"}
  ],
  "summary": "总体评价,包括文章的优点和需要改进的地方",
  "uiSuggestions": [
    {
      "id": "s1",
      "type": "clarity",
      "severity": "medium",
      "highlight": { "start": 120, "end": 168 },
      "excerpt": "被高亮的原文片段",
      "issue": "问题描述",
      "suggestion": "修改建议",
      "status": "pending",
      "remark": "可选,预留给用户的备注"
    }
  ]
}
\`\`\`

注意:
- 每个方面的评分范围是 1-10
- severity 可选值: low, medium, high
- type 可选值: structure, example, visual, clarity, engagement
- priority 可选值: low, medium, high
- 如果某个方面没有问题,对应的 issues/items 数组可以为空
- summary 应该是一段完整的文字评价
- uiSuggestions 使用高亮范围锁定原文,start/end 必须指向原始 Markdown 字符串的位置,避免越界;若无法定位,请省略该条。

让我们执行这个审阅,你可能像我一样惊讶的发现,哪怕自己已经在完稿后读过几轮了,但交给 AI审阅后,还能发现各种类型的错误。就像错别字或者笔误这种低级的也时不时成为漏网之鱼。恭喜你,看了这篇文章或许你以后不用太烦恼了,前提是你也用起来:D

问题到此还没结束,我发现每次在应用审批意见到唤出差异页面(下文会讲),用时都比较久,如下: Diff页-应用审批意见慢 我上一篇文章在做实验,DeepSeek 要 3 分钟才完成,即便使用gemini-3-pro也需要 1 分钟,这对我的耐心是个考验。幸好我们上面将 LLM 访问对接到 LiteLLM了,我看了一下这个token量就意识到优化方向了,因为让模型输出修改后的全量文本时,这块受限于Token 速率,自然会消耗很多时间,通过将 LLM 的输出从全量文本生成优化为仅输出增量修改建议(Diff 模式),处理速度提升了一个数量级。

Diff页

审阅完成后,基于我们的建议,会再次调用 AI 来优化我们的文章,这里感觉有必要呈现一个改前和改后的Diff 页,可以直观对比修改前后的差异。

1
2
# 查看diff
npm run diff -- ./readwise.md ./readwise.revised.md

支持使用下划线: Diff页-下划线 或高亮显示: Diff页-高亮

在 Diff 页面中我们如果满意了就可以收工,如果还有不满或想 AI 再查一次(你是个谨慎的人),可以点击继续审阅,将以最新的结果为基础,继续下一轮迭代。

封面图

最近一段时间Google Banana Nano 好像火爆了,以前 GPT-image-1出现也惊艳了一大波人,国内的豆包/智谱/通义千问/万相等也不是不能用,我之前有一篇文章试图做一个一站式的绘图平台 Paintbot-Hub,里面也集成了不少模型。我希望看到国内模型在这个场景下的一些表现,所以这次封面生成,大家来个赛马,多模型一起上,让我来挑最满意的。

生成提示词这块,基于我们的技术文章背景,我大概是这么写的:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
你是一位专业的技术文章封面图设计专家。你的任务是根据文章文章的标题和内容,生成用于 AI 图像生成的高质量提示词,并同时输出「英文版提示词」和「中文提示词」。

你的工作内容:
1. 分析文章标题和正文,提取核心主题与关键技术概念。
2. 根据主题构思合适的“视觉隐喻”(如数据流、节点网络、信息流动、几何结构、算法纹理等)。
3. 设计适合技术文章封面的创意构图,包括元素、色彩、光影、风格。
4. 最终输出两套提示词:**英文提示词**(专业英文) 和 **中文提示词**(自然流畅中文)。

提示词要求:
- 提供两个版本:英文 / 中文
- 控制在 50–150 词(英文)或 80–200 字(中文)
- 描述清晰的视觉场景、构图方式、色彩风格、氛围
- 封面图适合横幅比例(约 900x383)
- 尽量保持科技感、现代化、专业性
- 不出现真实人物、品牌 Logo、具体公司的 UI 图形
- 尽量使用抽象、几何、科技感视觉元素

视觉风格可选(但不必强制):
- tech-minimal:简约科技风
- gradient-abstract:渐变抽象风
- illustration:插画扁平风
- photo-realistic:写实科技风
- flat-design:极简扁平风
- cyberpunk:霓虹赛博风
- nature-blend:自然 + 科技融合

输出格式(严格按照以下结构输出):

1. 《主题理解》:简述你对文章视觉主题的理解(中英文)
2. 《英文提示词》:用于图像生成模型的详细英文提示词
3. 《中文提示词》:用于中文模型的详细中文提示词
4. 《风格修饰语》:可选的风格关键词(中英文)
5. 《负面提示词(可选)》:避免出现的元素,如 no humans, no logo, no text clutter

你必须严格按上述结构输出,使生成的提示词稳定、可控、适用于主流文生图模型。

我怕有些模型对于语言比较挑剔,所以中英文版本都生成了,咱赛马也要讲究公平公正对吧。接着是对一些图片模型的API 支持,看起来主要是两种:

https://img.gameapp.club/images/generations 端点:

  • azure/gpt-image-1
  • gemini/imagen-4.0-generate-001
  • gemini/imagen-4.0-fast-generate-001
  • gemini/imagen-4.0-ultra-generate-001

/chat/completions + modalities 端点:

  • gemini/gemini-3-pro-image-preview
  • openrouter/openai/gpt-5-image

此外,一些厂商的模型(如通义万相、千问等)提供了独特的异步接口或与主流不同的API规范,需要单独适配。但只要其API文档清晰,实现集成也并非难事。

提示词生成:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
kevin@ser5-dev:/data/article-reviewer$ npm run image:prompt -- 20251208-3/wubi.md --style tech-minimal --count 2

> blog-agents@1.0.0 image:prompt
> tsx src/cli.ts image prompt 20251208-3/wubi.md --style tech-minimal --count 2


📄 处理文章: AI 辅助编程实战:从零训练验证码识别模型,打造五笔查询 Workflow

💡 开始生成图片提示词...

🤖 正在调用 LLM 分析文章...

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💡 生成的提示词
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[1] 《主题理解》:
   - 英文:The article details a practical AI-assisted programming project: training a captcha recognition model from scratch to build a Wubi input method query workflow. The core visual themes are "AI-assisted programming," "captcha recognition model training," and "workflow automation." The challenge involves overcoming a captcha barrier to access data, symbolizing problem-solving and the intersection of AI (OCR/Deep Learning) with traditional coding logic.
   - 中文:文章详述了一个AI辅助编程实战项目:从零训练验证码识别模型,以打造一个五笔查询工作流。核心视觉主题是“AI辅助编程”、“验证码识别模型训练”和“工作流自动化”。其挑战在于突破验证码障碍以获取数据,象征着问题解决以及AI(OCR/深度学习)与传统编码逻辑的交汇。

[2] 《英文提示词》:
   A tech-minimalist banner illustration for a programming blog. The scene is divided into two conceptual halves. On the left, a clean, abstract representation of a captcha image with distorted digits is being decoded by a subtle, flowing stream of blue data particles and geometric neural network nodes, symbolizing AI recognition. On the right, a sleek, minimalist flowchart or pipeline emerges, composed of glowing lines and nodes, transforming into elegant Chinese character radicals (like 扌, 氵, 口) and finally into a clean, modern keyboard interface. The background is a deep charcoal grey with a subtle gradient. The overall atmosphere is calm, focused, and intellectually stimulating, using a limited palette of cool blues, clean whites, and accents of soft cyan for the data flow. Ultra-wide banner composition, sharp focus, clean lines.


✅ 提示词已保存到: 20251208-3/wubi-prompts.txt

📌 下一步:使用以下命令生成图片:
   npx tsx src/cli.ts image gen 20251208-3/wubi.md --prompt-file 20251208-3/wubi-prompts.txt

接着是图片生成:

1
2
3
4
# 生成图片(多模型赛马)
npm run image:gen -- ./my-article.md \
  --prompt-file ./my-article-prompts.txt \
  --models xx

AI 给了设计了一个大概这样的界面用于呈现生成结果: 封面图片生成结果预览

这种"赛马"的感觉还挺有意思,就像抽卡游戏,每次都有点惊喜:D。 不过到这里虽然基本功能实现了,但优化永无止境。

最终效果

如上所见,我们的界面还挺简陋原始的,更别说统一性了,而且还需要结合命令行使用。这绝对不是我能停下来的标准,我想做一点改进:

  • 完全基于Web页面,而不是命令行,降低使用者的门槛。
  • 重新设计各个界面的UI,增加统一性。
  • 增加一些交互优化,如点击图片可以放大查看,提示词可以自定义等。

我想起来之前体验过 Stitch,一个挺有意思的AI辅助设计工具。于是将一些页面通过描述重新生成UI, 之后将其导出为代码(包括 HTML 以及图片等,我记得之前好像还可以导出到 Figma),我们就很容易将其集成到项目中。

最终我们的效果:

首页

审阅页

批注页

Diff页

封面图片生成

现在我们使用时,启动后打开网页,后续所有操作都可在网页中完成了。上面的封面图就是对于本文让模型生成的,从十几张里面挑选还是有几张不错的,不用纠结犹豫了。

注:使用国产生图软件,有时会报错,比如 DashScope HTTP 400: {“request_id”:“0f57adce-a309-4e62-a693-40cfbadf841c”,“code”:“DataInspectionFailed”,“message”:“Input data may contain inappropriate content. For details, see: https://help.aliyun.com/zh/model-studio/error-code#inappropriate-content"},这是因为模型对内容敏感,可能你只是想生成一个技术相关的封面图,但模型认为你内容有敏感信息,所以报错。你可以尝试调整提示词,或者换一个模型试试。

其它技巧

因为工程主要是基于 Claude Code开发,而且是基于Remote-SSH远程开发,对于有 UI 交互的场景,经常要贴图告诉AI问题所在。以往要把图片保存本地再上传(或拖动),再于命令行引用,这和本地开发相比或者相较于 Cursor 等非常不方便。我找到了一个插件Claudeboard插件,可以直接通过快捷键将剪切板的内容直接贴到远端的cc中,这样方便多了。

其次,因为涉及到网页的开发调试,如果你需要来回搬运错误或手工测试,显然我们不想充当这样的角色。你可以通过Playwright来实现自动化验证。只要安装playwright相关的 MCP即可。

还有,上面我们需要对接各种 API 要查看文档,你即使安装了context7,对于某些文档可能还是要搜索网页,这种情况下firecrawl这个 MCP 对于网页的抓取还是会更准确一些。

后记

到这里这次折腾基本就结束了,感谢你的阅读。

本文提到的工具已经开源在GitHub:article-reviewer,咱不玩虚的,你要是喜欢欢迎试用一下。之所以我要从命令行改为完全 Web 驱动,也是希望若你有兴趣可以方便拿去使用。希望对你有帮助,请记得给个 Star 以示鼓励吧!

后续我的文章和封面就靠各路 AI 模型和这个工具了。所以我可能还会持续迭代添加一些功能,如果你有好的想法也欢迎提 PR 或 Issues。

对于我在折腾文章而言,还有几个未了事:各平台自动化发布以及一些主题样式的配置。或许未来会再考虑,本文就先把文章给准备妥当吧!

我是个爱折腾技术的工程师,也乐于分享。欢迎点赞、关注、分享,更欢迎一起探讨技术问题,共同学习,共同进步。为了获得更及时的文章推送,欢迎关注我的公众号:爱折腾的风

扫码关注公众号