Build an X Article Cover Generator with Grok Bot

Submit a ten-item structured prompt → AI agent codes and self-verifies on a cloud computer → export a pure frontend static site

Who

Chinese content creators who need quick cover images for long-form X posts

You get

An offline-capable pure-frontend web tool supporting 6 styles, 3 aspect ratios, one-click PNG export, plus an AI image-generation prompt panel

You need

Grok Bot

Steps

1. Submit the structured demand prompt

   Paste the following complete demand prompt into the Grok Bot conversation. It includes tech-stack constraints, input/output specs, style count, acceptance criteria, and a development-log requirement. Send it and wait for the AI to start generating code.

   Execution prompt · Source text。Grok Bot chat input, as the initial project requirement

   Copy prompt

   帮我做一个开源的静态网页工具：「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. Understand the AI's technical choices and self-verification

   The AI agent made several technical decisions worth noting: it used Canvas to draw PNGs directly instead of screenshotting the webpage, avoiding extra dependencies; it used no frameworks or bundlers, producing about 1,100 lines of vanilla HTML/CSS/JS; it did not embed font files, instead calling system fonts in fallback order (Noto/Source Han → PingFang → Microsoft YaHei); and it implemented custom Chinese typography logic (auto font scaling, punctuation hang avoidance, last-line length control). The critical mechanism is self-verification: the AI opened the page in headless Chrome, exported sample images for each style, and inspected them one by one. The author recorded that the AI found and fixed 9 non-code visual issues this way, including: Chinese words split across lines, square/16:9 images with text too small, long titles shrunk to two tiny lines, various layout misalignments, screenshot and mobile-adaptation problems, and a cursor drawn outside the boundary. These were all "runs but looks bad" issues discoverable only by looking at the output.

3. Download and use the generator

   Download the code from https://github.com/Cuiszt/x-article-cover-generator and double-click index.html to use it offline with no server needed. Enter a title (wrap highlight words in *asterisks*, or press Enter for manual line breaks), pick a style, color scheme, and size, then click "Download PNG." For sharper output, check "2× HD export." For AI-generated backgrounds, copy the Chinese/English prompts from the prompt panel into Midjourney, Nano Banana, or 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 自己出图、自己看图、自己修。不加这两条，它很可能写完就说"完成了"，实际导出来的图根本没法用。