CodeKitHub工具介绍
自定义聊天记录生成器是一个基于浏览器的模拟工具，让你制作不受限于某个真实平台品牌样式的聊天截图。你可以为"发送"气泡和"接收"气泡分别设置颜色选择器，而不是固定的品牌颜色，这样就能匹配虚构的App、假想的UI概念，或者只是根据表情包/演示文稿需要选择任意颜色。
当你需要为故事、线框图，或关于虚构App的玩笑制作聊天模拟图，又不想让某个真实通讯软件的可识别品牌元素分散注意力时，这个工具就很实用。
仅供娱乐和设计使用：这个工具是为玩笑、表情包、短剧、演示文稿幻灯片、UI/UX原型和社交媒体内容而设计的。绝不能用它来伪造欺诈证据、骚扰或诽谤他人，或冒充真实存在的人发过的消息——这样做在很多司法辖区可能属于违法行为，严重违背这个工具的初衷。
你输入的所有内容都不会离开你的设备——整个对话是用浏览器内置的HTML Canvas API在本地绘制的，PNG图片也是在本地生成和下载的。没有服务器上传，没有账号，也不会追踪你的消息内容。
为什么使用它？
- 在画漫画或条漫，需要展示两个角色在自己设定的虚构App里聊天的画面——不是微信也不是QQ——需要气泡颜色能配上故事世界观，而不是照搬真实品牌。
- 客户要求在提案PPT里放一张聊天UI的模拟图，但产品还没做出来——可以直接用计划中的品牌色制作截图，而不是展示某个真实通讯软件的界面。
- 在做一个梗图，笑点的关键是不能让人认出这是哪个App——用自定义颜色的通用聊天气泡，能让注意力都落在笑点本身，而不是平台上。
- 作为UX设计师，需要在写第一行真实前端代码之前，先向团队展示聊天功能套上产品实际配色后的效果。
- 想还原某部剧、游戏或虚构宇宙里特有的聊天视觉风格（比如科幻终端式的对话界面），这种配色和任何真实聊天App都对不上。
- 100% 本地渲染——对话内容永远不会传到服务器。
使用方法
- 设置联系人姓名、状态文字，并为周围界面选择深色或浅色主题。
- 用两个颜色选择器分别设置发送气泡颜色和接收气泡颜色。
- 上传一张照片作为头像，或者保留默认的纯色圆形加首字母。
- 添加消息行：输入文字、选择所属方（对方/我）和时间戳。
- 根据需要调整状态栏（时间、电量、信号）。
- 实时查看手机造型的预览效果更新，再点"下载PNG"保存图片。
示例
输入
联系人："Alex" · 发送气泡：紫色 · 接收气泡：浅灰色 · 消息1（对方）："今晚还去吗？" · 消息2（我）："去！8点见 😊"输出
一张375×812的PNG图片，展示一个聊天界面：左侧浅灰色气泡是第一条消息，右侧紫色气泡是回复——完全使用你选择的颜色。图片会在实时预览canvas上立即生成，点一下就能下载——无需等待，无需上传。
可以自定义的内容
- 联系人姓名、状态文字，以及周围界面的深色/浅色主题。
- 发送气泡和接收气泡的颜色，可分别独立设置。
- 头像：上传真实照片（自动裁剪成圆形）或选择默认颜色。
- 不限数量的消息行，每一条都有自己的文字内容、所属方（对方/我）和时间戳。
- 手机状态栏：时间、电量百分比和信号强度。
自定义聊天生成器 vs 平台专属聊天生成器
| 场景 | 更适合的工具 |
|---|---|
| 需要看起来像真实的微信/WhatsApp/iMessage截图 | 改用对应App专属的聊天生成器 |
| 为虚构或未发布的App制作模拟图 | 自定义聊天生成器——自选气泡颜色 |
| 做梗图，且不想让人认出是哪个App | 自定义聊天生成器——不带平台品牌样式 |
| 需要匹配已有品牌或设计系统的配色 | 自定义聊天生成器——完全自主的颜色选择 |
| 需要还原某个真实平台特有的UI细节（如已读回执、勾号样式） | 改用该平台专属的生成器，本工具不还原具体App的界面细节 |
负责任地使用
这个生成器的目的是让人们能够轻松制作明确属于虚构的聊天图片，用于幽默创作、讲故事和设计工作。它不是用来伪造证据、策划骚扰、或者误导别人以为一场虚假对话是真实发生过的。如果你打算分享用这个工具制作的图片，建议加上"虚构"或"模拟"这样的说明，让看到的人明白这不是真实对话。
常见问题
使用这个工具合法或符合道德吗？
工具本身用于娱乐、模拟、演示和设计工作是合法的。不合法或不道德的是用生成的图片去欺骗别人——比如把它当成真实对话去实施诈骗、骚扰或诽谤他人，或冒充某人真实发过的消息。请只把它用于明确是虚构或说明性质的用途。
工具会把我的消息或照片上传到哪里吗？
不会。你输入的每一条消息、姓名、照片和设置都只保存在浏览器内存中，并用JavaScript直接绘制到canvas元素上。PNG文件在你的设备上生成和下载——一切都不会发送到任何服务器。
我应该用这个工具，还是某个平台专属的聊天生成器？
如果你的模拟图需要看起来像某个特定的真实App——WhatsApp、Telegram、Messenger、Signal、微信或LINE——就用那个App专属的生成器，让颜色、勾号和顶部栏样式符合观众的预期。想为虚构App做聊天模拟图、做线框图，或者不想让任何单一真实品牌的样式出现在内容里、想自己选择精确的气泡颜色时，就用这个自定义聊天生成器。
可以上传真实照片作为头像吗？
可以。点击"上传照片"，就能用设备上的任意图片作为联系人头像——会自动裁剪成圆形。如果跳过这一步，头像会默认使用纯色圆形加联系人姓名首字母。照片只在你的浏览器本地使用，绝不会上传到任何地方。
导出的图片尺寸是多大？
预览和导出的PNG默认使用手机屏幕比例（375×812），在社交媒体分享或嵌入演示文稿中都显得很自然。
可以添加的消息数量有限制吗？
没有——可以添加任意多条消息行。不过对话太长会让导出的图片变得很长，预览时也需要滚动更多，如果目标是让人一眼看完的截图，通常6到10条消息效果最好。
每条消息的时间戳可以分别设置吗，还是会自动生成？
每条消息行的时间戳都需要你自己单独设置，工具不会自动生成或递增时间。这样你可以完全控制时间戳，让它看起来连贯真实，或者根据剧情需要故意设置得不连贯。
可以让某一方的气泡用渐变色或双色，而不是纯色吗？
内置的颜色选择器每一方只能设置一个纯色。如果需要渐变效果，可以先用最接近的纯色生成PNG，之后再用图片编辑器叠加渐变效果——工具本身只支持输出纯色气泡。
关闭页面后，我做的聊天设计会保存下来吗？
不会——由于没有任何内容上传或存储到服务器，设计只存在于当前会话的浏览器内存中，关闭或刷新页面就会清空。如果想保留，请在离开页面前先下载PNG；如果以后还想做类似设计，建议自己记一下用过的颜色值。
可以用这个工具来做真正开发用的聊天UI原型吗，而不只是一张模拟图？
这个工具生成的是静态图片，不支持导出CSS或组件代码。设计师通常会把PNG当作视觉参考交给开发人员，或者粘贴进Figma之类的设计文件里，实际的聊天界面还是要另外用代码实现。