用 Grok Bot 生成 X 长文封面网页工具

输入十条结构化需求 → AI 代理在云电脑写代码、自验收、修 bug → 导出纯前端静态网页

给谁

需要为 X 长文快速生成封面图的中文内容创作者

你会得到

一个可离线使用的纯前端网页工具，支持 6 种风格、3 种尺寸、一键导出 PNG，并附带 AI 生图提示词面板

你需要

Grok Bot

步骤

1. 一次性提交结构化需求

   在 Grok Bot 对话中，直接复制并发送以下完整需求提示词。该提示词包含技术栈约束、输入输出规格、风格数量、验收标准与开发日志要求。发送后等待 AI 开始生成代码。

   运行提示词 · 来源原文。Grok Bot 对话输入框，作为项目初始需求

   复制提示词

   帮我做一个开源的静态网页工具：「X 长文封面 & 配图生成器」，给写 X 长文的中文 AI 博主用。
   
   要求：
   1. 纯静态网站（HTML/CSS/原生 JS），没有后端，双击 index.html（file://）也能离线用
   2. 输入：标题、副标题（可选）、作者账号（默认 @你的账号）
   3. 提供 4–6 种好看、彼此差别明显、适合 AI/科技内容的封面风格，比如：渐变大字、极简杂志、终端代码、大字报、卡片拼贴
   4. 导出 PNG：X 长文封面 5:2（1500×600）、正文配图 16:9（1200×675）
   5. 中文字体渲染要好看，要验证中文能正常显示
   6. 加一个面板：根据当前风格和标题，生成可复制的中英文 AI 生图提示词，给想用 Midjourney / Nano Banana 画图的人
   7. 界面用中文，能切换英文
   8. README 中英双语，带截图，MIT 协议
   9. 用无头浏览器把每种风格都导出一张示例图，你自己逐张看有没有文字溢出、排版问题，有问题就修
   10. 全程记开发日志：每一步做了什么、遇到什么问题、怎么解决的
   最后两条最关键：让 AI 自己出图、自己看图、自己修。不加这两条，它很可能写完就说"完成了"，实际导出来的图根本没法用。

2. 理解 AI 的技术选择与自验收机制

   AI 代理在生成代码时会做出若干技术决策，作者认为值得注意的有：使用 Canvas 直接绘制 PNG（而非网页截图），避免引入额外依赖；不打包、不引框架，约 1,100 行原生代码；不内置中文字体文件，按 Noto/思源 → 苹方 → 微软雅黑顺序调用系统字体；手写中文排版逻辑（自动缩字号、标点避头尾、末行字数控制）。 关键机制是让 AI 自己验收：AI 用无头 Chrome 打开网页，每种风格导出示例图，再逐张打开图片检查。作者记录 AI 在此过程中发现并修复了 9 个非代码错误类的视觉问题，包括：中文词被拆行、方图/16:9 字号过小、长标题缩成两行小字、多种排版细节错位、截图与手机端适配问题、光标溢出边界等。这些问题均为"能跑但难看"，需通过看图发现。

3. 下载并使用生成器

   从 GitHub 仓库 https://github.com/Cuiszt/x-article-cover-generator 下载代码，双击 index.html 即可离线使用，无需联网。输入标题（用 *星号* 包裹高亮词，或直接回车换行），选择风格、配色、尺寸，点击「下载 PNG」。如需更高清晰度，勾选「2 倍高清导出」。如需 AI 生成背景图，复制下方提示词面板的中英文提示词到 Midjourney、Nano Banana 或 GPT Image 使用。

帮我做一个开源的静态网页工具：「X 长文封面 & 配图生成器」，给写 X 长文的中文 AI 博主用。

要求：
1. 纯静态网站（HTML/CSS/原生 JS），没有后端，双击 index.html（file://）也能离线用
2. 输入：标题、副标题（可选）、作者账号（默认 @你的账号）
3. 提供 4–6 种好看、彼此差别明显、适合 AI/科技内容的封面风格，比如：渐变大字、极简杂志、终端代码、大字报、卡片拼贴
4. 导出 PNG：X 长文封面 5:2（1500×600）、正文配图 16:9（1200×675）
5. 中文字体渲染要好看，要验证中文能正常显示
6. 加一个面板：根据当前风格和标题，生成可复制的中英文 AI 生图提示词，给想用 Midjourney / Nano Banana 画图的人
7. 界面用中文，能切换英文
8. README 中英双语，带截图，MIT 协议
9. 用无头浏览器把每种风格都导出一张示例图，你自己逐张看有没有文字溢出、排版问题，有问题就修
10. 全程记开发日志：每一步做了什么、遇到什么问题、怎么解决的
最后两条最关键：让 AI 自己出图、自己看图、自己修。不加这两条，它很可能写完就说"完成了"，实际导出来的图根本没法用。