# 中文聊天原型图需要模板化生成器 - 候选 id：`chat-prototype-html-generator` - 类型：`tool-upgrade` ## Before / After | 环节 | Before | After | | --- | --- | --- | | 需求输入 | 用户贴一段中文话术或截图，agent 临时判断用 imagegen 还是手写 HTML。 | 用户输入结构化 JSON 或自然语言，skill 自动转成聊天原型 schema。 | | 样式复用 | 每次先在仓库里找最近同类 HTML，人工复制移动端尺寸、底色、卡片样式。 | `templates/mobile-chat.html` 和 `wecom-card.css` 固化移动端聊天、复制板、企微按钮、推荐问题等组件。 | | 中文稳定性 | 纯图片生成容易把长中文写错，手写页面又费时。 | HTML 原生渲染中文，Playwright 导出 PNG，文本内容可复制、可 diff、可回归。 | | 验收 | 肉眼看截图，容易漏掉按钮溢出或中文换行问题。 | 生成后自动检查 PNG 存在、视口尺寸、关键文本出现、长按钮不换行溢出；失败时回到 HTML/CSS 修复。 | ### 示例输入 ```json { "canvas": "mobile-chat-390x844", "title": "水果团购定邀", "messages": [ {"role": "agent", "text": "您好，当前水果团购需要完成定邀后才可以继续售卖。"}, {"role": "agent", "copy_panel": {"title": "可复制话术", "text": "请您先添加企微专员，提交门店与商品信息，我们会协助完成定邀流程。"}}, {"role": "agent", "actions": [{"label": "复制话术"}, {"label": "添加企微"}]} ], "suggested_questions": ["定邀需要多久？", "哪些类目需要定邀？"] } ``` ### 示例命令 ```bash python3 tools/chat_prototype_generator/generate.py \ --input tools/chat_prototype_generator/examples/fruit-groupbuy-invite.json \ --out out/prototypes/fruit-groupbuy-invite ``` ### 期望产物 - `out/prototypes/fruit-groupbuy-invite.html` - `out/prototypes/fruit-groupbuy-invite.png` - 控制台显示：`PASS viewport=390x844 text_ok=true overflow=false screenshot_ok=true`