从零打造高颜值社交卡片生成器：我们是怎样把“文字排版做图”卷到极致的？
 *▲ 图：WePost 桌面端三栏工作台实拍 —— 左侧内容表单、中间自适应画板舞台、右侧专业属性面板*
从零打造高颜值社交卡片生成器：我们是怎样把“文字排版做图”卷到极致的？
项目名称：WePost（一站式社交媒体卡片工作台）
在线体验：https://zaneven.github.io/WePost/
开源地址：https://github.com/zaneven/WePost
核心定位：把金句、早报、随笔、开发笔记等文字内容，一键排版为可导出的高清设计大片
▲ 图：WePost 桌面端三栏工作台实拍 —— 左侧内容表单、中间自适应画板舞台、右侧专业属性面板
序：天下苦于“文字做图”久矣
作为自媒体创作者、独立开发者，或者单纯喜欢在朋友圈和小红书分享观点的人，你一定经历过这样的抓狂时刻：
- 读到一句击中人心的金句，想发朋友圈，但纯文字容易被折叠成一行，找张风景图搭配又显得毫无灵魂；
- 写了一篇干货满满的行业早报或深度随笔，想发小红书，打开专业设计软件，光是拉画板、挑字体、对齐边距就折腾了半小时；
- 敲了一段精妙的代码片段，用系统截图工具截出来既没有语法高亮，底色发灰，在手机屏幕上看极其廉价；
- 好不容易排版导出，发到社交平台才发现文字被边缘悄悄裁切了一截……
市面上的在线设计工具功能越来越多、体积越来越重，到处都是诱导付费的 VIP 模板与限制下载的水印。而我们要的其实极其克制纯粹：
创作者只负责思考和敲下文字，剩下的版式呼吸感、色彩质感、画幅比例、中文字体与高清出图，能不能全部交给程序搞定？
带着这个执念，我们启动了 WePost。
这是一篇真实的产品诞生手记，记录了我们如何一步一步，把一个简单的文字排版工具，打磨成一套真正好用、高颜值且极具生产力的社交卡片工作台。
一、架构决策：告别 Canvas 硬画，让排版回归现代 Web
启动项目的第一天，面对的核心选择就是：用什么技术来画这张卡片？
很多传统工具习惯使用 Canvas 2D API 逐像素绘制。但在文本排版场景下，Canvas 简直是“深坑”：文字换行、行高与字间距微调、标点避头尾、嵌套引用、图文混排……每加一个样式都需要手动写复杂的坐标运算。
我们果断选择了现代 Web 组件化路线：以纯数据驱动 DOM，配合 Tailwind CSS 进行流式弹性布局，最后通过底层图像捕获技术实现无损高清导出。
▲ 图：暗黑毛玻璃模板成品 —— 细腻的高斯模糊、优雅的字阶层次与发光渐变边界
踩平“导出变形”的暗坑：统一尺寸单数据源
做过类似生成器的人都知道，最容易遇到的诡异 Bug 就是：在网页里预览看着好好的，一旦点击导出，图片不是字变小了，就是文字折行错位、比例变形。
这是因为“编辑器的自适应预览尺寸”和“最终导出的物理高清像素”脱节了。为了从根本上杜绝比例漂移，我们在底层建立了唯一尺寸数据源：
- 导出分辨率（无论是 2x 还是 3x Retina 级超清）与画板逻辑尺寸严格等比绑定；
- 画板舞台采用智能容器缩放（Scale Transform），无论你在 27 寸大屏还是 13 寸笔记本上操作，画板始终自适应居中，所见即所得。
二、颜值即正义：10 套设计模板与富文本攻坚
工具好不好用，第一眼全看模板审美。我们坚决摒弃了那些廉价的花哨贴纸，精心调校了 10 套覆盖主流社交场景的高质感视觉模板：
▲ 图：右侧属性面板实拍 —— 涵盖智能推荐、10 套模板视觉候选、画幅比例与中文字体库
1. 深度内容风格：极简杂志 vs 复古报刊
- 极简杂志：讲究字距呼吸感与经典衬线线条，专为长文、读书随笔与人物语录打造；
- 复古报刊：模拟泛黄报纸底纹与粗体头版排版，信息密度极高，早报与行业简讯的最佳拍档。
▲ 图：极简杂志模板 —— 留白克制，字体呼吸感极佳
▲ 图：复古报刊模板 —— 模拟经典报章版式，信息密度高且极具辨识度
2. 极客与态度风格：终端代码 vs 水墨留白 vs 酸性潮流
- 终端代码：还原 macOS 终端窗口三色指示灯与等宽字体，内置 Shiki 语法高亮引擎，代码着色如 VS Code 般精致；
- 水墨留白：融入东方水墨气韵与国风留白，诗词鉴赏与哲思格言自带禅意；
- 酸性潮流：高饱和撞色、新野兽派粗黑框线，态度鲜明、直击眼球。
▲ 图：终端代码模板 —— 窗口红黄绿圆点搭配 Shiki 多语言语法高亮
▲ 图：水墨留白模板 —— 诗词格言与东方意境的融合
▲ 图：酸性潮流模板 —— 极具视觉张力与态度表达
3. 告别系统默认字体：自托管开源商用中文字体库
在 Windows、Mac、iOS、Android 上，系统默认中文字体的笔锋与渲染差异极大，常常破坏排版意境。
为此，WePost 内置并自托管了精选的开源商用字体：
- 思源黑体（Noto Sans SC）：现代利落，普适百搭；
- 思源宋体（Noto Serif SC）：典雅温润，文学与深度报道感；
- 霞鹜文楷（LXGW WenKai）：如手写硬笔楷书般的治愈质感，日记便签的不二之选。
在右侧控制栏下拉即可实时预览切换，彻底摆脱不同设备“各长各样”的尴尬。
三、像 Figma 一样操作：工作台体验的全面进化
有了好引擎，编辑器本身必须足够丝滑。
▲ 图：左侧内容面板实拍 —— 灵感速选、AI智能提取按钮、正文富文本工具条
1. 桌面端三栏沉浸式布局
- 左栏（文案区）：按信息层级排布标题、副标题、标签、作者与正文，内置轻量 Markdown 快捷工具栏；
- 中栏（画板区）：自适应缩放舞台，支持等比缩放、视口居中与快速切换预览；
- 右栏（排版区）：类似 Figma 的专业属性抽屉，模板网格、比例切换（3:4、1:1、9:16）、字号、字重与水印控制一目了然。
2. 亮暗双主题：白昼专注与深夜沉浸
无论你是习惯在明媚白天快速修文，还是在深夜沉浸式码字，顶部导航栏一键平滑切换亮/暗模式：
▲ 图：亮色主题工作台实拍 —— 干净清爽，适合白天高对比度快速排版
3. 手机端也能顺手出图：移动端专属抽屉
灵感往往发生在通勤的地铁上或等咖啡的片刻。我们专门为移动端打造了底部抽屉式编辑器（MobileEditorSheet）：
▲ 图：手机端视口实拍 —— 顶部卡片实时预览，底部轻触即可唤起完整编辑抽屉
不用打开电脑，手机上点几下，高清卡片就能直接保存到相册。
4. 创作者的“安全感”：多步撤销与实时防溢出预警
- 无痛后悔药：支持键盘快捷键（
Cmd+Z/Cmd+Shift+Z）多步撤销与重做，内容实时持久化在浏览器的localStorage，就算不小心关掉网页，再次打开依然完好如初； - 防裁切预警：系统实时监测正文渲染高度。一旦文字超出当前画板的视觉承载极限，顶部立刻弹出“内容溢出预警”，杜绝导出后才发现尾段被截断的遗憾。
四、降维打击：长文智能拆多卡与首卡封面模式
在日常发布小红书图文或多图社交动态时，最大的痛点就是：一篇近千字的长文，塞进单张卡片字号太小看不清；手动复制粘贴切成好几张，又极其繁琐！
为此，我们开发了 WePost 最具生产力的一组王牌特性：
1. 自动容量切块与手动分卡
- 智能容量切分：系统根据所选画幅和字号大小，动态计算每张卡片的黄金阅读容量，以段落和列表为原子单位自动切块，绝不会在半句话中间生硬折断；
- 手动随心分卡：只需在正文中敲入
---（分割线），即可在任意位置指定切卡节点。
2. 首创「单页标题封面卡」模式
在自媒体的世界里，多图笔记的第一张封面图决定了 80% 的点击率。
在右侧勾选「单页标题模式」后：
- 第 1 张卡片：自动变身为极具视觉冲击力的超大标题引流封面卡（隐藏正文，凸显大字标题、副标题与标签）；
- 第 2~N 张卡片：正文顺延切块展示，并带有精致的页码角标（如
2 / 5）。
▲ 图：极简杂志 · 单页标题封面卡 —— 大字排版，吸睛利器
▲ 图：暗黑毛玻璃 · 单页标题封面卡 —— 科技与前沿质感
▲ 图：复古报刊 · 单页标题封面卡 —— 经典头版头条设计
3. 出图神器：一键长图拼合与 ZIP 打包下载
- 一键拼合超长图：多张卡片一键自动垂直无缝拼接为一张超清长图，并直接复制到剪贴板，博客与社群长图一秒搞定；
- ZIP 打包下载：多张切图按顺序命名一键打包为 ZIP 压缩包，解压后直接拖入小红书九宫格发布。
五、让 AI 成为排版助理：从“手工做图”跃迁为“自动化工作流”
工具的终极形态，是让创作者无需费心排版。
1. 粘贴长文，AI 智能提取并填入表单
在网上看到一篇好文章，或者随手记下的凌乱会议笔记，只需复制全文，点击编辑器上的 「AI 填写」 按钮： 后台大模型自动提炼出抓人的主标题、副标题、标签，智能归纳正文要点，甚至根据语义推荐最般配的模板风格和画幅比例，一键自动填入表单，且支持一键撤销回退。
2. 离线启发式风格推荐
即使在离线状态下，内置的轻量推荐器也会根据你输入的文本特征（是否有代码块、字数多寡、标点符号特征），自动推荐最契合的模板风格。
3. 开发者专属：Claude Skill 联动与无头渲染接口
如果你是重度开发者或 AI Agent 爱好者：
- 项目内置了 Claude Agent 技能（
wepost-card-gen）； - 配套了云端无头渲染接口（
POST /api/render）； - 导出面板贴心地提供了**「复制 API 参数」**按钮；
- 对你的 AI 助手说：“把这段技术笔记生成一张暗黑风格卡片”，一张高清图片链接便秒级返还。
六、纯静态、零登录与极致隐私
在商业化软件动辄要求手机号注册、收集用户隐私、限制导出画质甚至按次扣费的今天，WePost 选择了彻底拥抱开源与纯粹：
- 开箱即用：零注册登录门槛，打开网页就能用；
- 纯静态架构：所有文字排版、状态计算与图片渲染全部在你的本地浏览器完成；
- 隐私绝对安全：你的私人随笔、商业思考、未公开日记绝不上载任何未经授权的服务器；
- 永久开源：基于宽松友好的 MIT 开源协议。
结语：欢迎体验与一起探索
WePost 现已正式发布上线：
- 在线体验地址：https://zaneven.github.io/WePost/
- GitHub 开源仓库：https://github.com/zaneven/WePost
如果你在寻找一款让文字一键发光的社交配图工具，或者对前端图形排版与 Next.js 静态架构感兴趣，欢迎访问体验！如果你觉得 WePost 帮到了你，不妨在 GitHub 上为我们点亮一颗 Star。
有任何体验建议或新模板灵感，欢迎在 GitHub 提交 Issue 或 PR，期待与你一起打磨最优雅的文字创作工作台！