---
name: article-writer
description: 把一段工作/项目写成可直接发布的中文技术文章（公众号 / 论坛 / 博客风格），并渲染成带配图的独立 HTML 页面。当用户要"写篇文章/文案/公众号/博客/复盘/项目介绍"或"把这个做成带图的网页"时使用。产出：markdown 正文 + 配图 + 单文件 HTML。
---

# Article Writer — 技术文章写作 + 配图 + 出 HTML

把"做过的工作"变成一篇能直接发的文章。三个产出：正文 markdown、配图、单文件 HTML。

## 原则

- **先摸清事实再动笔**。做过什么、实测数据（数字！）、踩过的坑、架构决策——全部从真实工件里取（代码库、日志、测试输出、截图），不要编造。
- **数字说话**。能写"球飞出 2.9 米"就别写"踢得很远"。实测的延迟、频率、位移、置信度都是好料。
- **结构**：钩子开头（热点/现象）→ 是什么 → 怎么搭的（架构）→ 会干什么（技能表/实测）→ 为什么这么设计（踩坑与权衡）→ 工程较真（细节坑）→ 怎么上手（链接）→ 收尾一句人话。
- **调性**：技术内容 + 一点人味。可以玩梗但别油。标题要有点击欲但不标题党到失真。

## 图片（4 类来源，按优先级）

1. **系统真实截图/渲染帧**——最有说服力。仿真渲染、跑通的页面截图、终端输出。
2. **架构图用 HTML/CSS 画**（别贴模糊截图），比图片清晰、可改。
3. **示意图/封面**——需要时用 imagegen 生成（注明是示意图）。
4. 数据图表——有数据就画。

**配图纪律**：每张图必须有"图注"（一句话说清这张图证明什么）；别堆图；关键结论处才配图。

## 渲染成 HTML（单文件、自包含）

产出一个可直接双击打开的 `.html`。要点：

- 单文件，图片用相对路径 `img/xx.png`（或 base64 内联要小图）。
- 中文字体栈：`-apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif`。
- 排版：最大宽度 ~720px 居中、行高 1.8+、暖底或白底、主色一个（比如项目主题色）。
- 结构件：主视觉 hero（大图+渐变压字标题）、章节序号+竖线、技能表格、要点 callout、图注、页脚版权。
- 响应式（手机能看）。
- 可以借鉴目标平台的设计语言：比如某项目官网是"墨色底+主题橙+等宽字体 OSD"，文章就延续它。

## 工作流程

1. 读真实工件（仓库、日志、测试输出），列事实清单（功能 + 实测数据 + 坑）。
2. 定调性和目标平台（公众号？论坛？博客？）。
3. 写 markdown 正文，图位先留 `（图：xxx）` 占位。
4. 逐张产出配图，落到 `img/`。
5. 渲染 HTML，浏览器打开验证图片全加载、排版不破。
6. 交付：`article.md` + `article.html` + `img/`。

## 避坑

- 数字必须能在工件里找到出处，别为了好看编数据。
- 写完自己读一遍：有没有"AI 腔"（堆砌形容词、空泛的"赋能/抓手/闭环"），有就删。
- 图片别盗网图；能用真实产物的就别用示意图。