平时发小红书，排版一直是个麻烦事。笔记在本地写成 Markdown，要变成 3:4 的卡片图，过去只能开着各种在线工具来回贴：贴一段字调一次字号，导出带水印，免费版还限次数，最别扭的是内容全都要传到别人的服务器上，写点私人的东西心里总归不踏实。这次 TRAE 升级合并之后，干脆造一个小工具自己用：纯本地、单文件、双击就能开，把 Markdown 直接转成小红书风格的卡片图，一键导出 PNG。顺手把从想法到成品的完整过程记下来，正好测一测合并后的 Agent 模式和 IDE 模式到底怎么配合。
一句话造个本地小红书卡片图转换工具
任务背景很简单：输入一段 Markdown，右边实时渲染成小红书比例的卡片，主题色能换，点一个按钮导出清晰的 PNG。比例定 3:4 是贴合小红书信息流的展示，主题色先做两套，奶白一套奶黄一套，够换着用就行。要求全部逻辑跑在浏览器里，不联网也能用，所以不引 CDN 字体、不引外部图标库，图标全用内联 SVG，Markdown 解析器也得内联进文件。需求不大，但解析、渲染、样式、导出样样都要碰，正好能看出两种模式的分工。
打开 Agent 模式，把需求一口气说完，末尾交代了两条硬约束：单文件 HTML、不许引任何外部资源。Agent 拆任务比想象中细：解析层负责把 Markdown 转成结构化的内容块，渲染层按内容块画卡片，导出层单独管画布和下载，三层各管各的，以后想加功能知道往哪落。选型也给了理由，解析器内联是为了离线可用，导出自己画 canvas 而不是上截图库，是为了少背一个几百 KB 的依赖。末尾还主动列了一份自查清单，切换主题后预览和导出的颜色要一致、卡片宽度要落在 750 上下、小字号要看得清，条条都要核对。这一步看着费不了几分钟，后面少返工全靠这份清单打底。
中途只打断过一次：方案里一口气排了五套配色主题，被当场按住，先做两套够用就行，功能跑通再谈好看。砍掉之后剩下的环节基本没插手，几分钟后拿到一个七百来行的单文件 HTML。浏览器里打开，左边贴 Markdown，右边卡片实时刷新，圆角、阴影、日期栏一应俱全，第一版居然就能直接用。细节上有点小毛病，正文行高挤了，列表缩进也不太齐，跟 Agent 说了一声，又是一轮自动改完，没再插手。
到此为止都还是 Agent 模式的主场。转折出在导出上：预览里清清楚楚的字，导出来的 PNG 整体发虚，像蒙了层雾。标题那几行还算凑合，正文的小字先糊，放大到两倍看，笔画边缘全是灰的，放到手机上看更明显。排查时先怀疑是字体渲染的问题，又怀疑是不是哪一步做了缩放，兜了一圈才沉下心翻导出那段代码。这类问题放在以前要另开一个工具慢慢查，现在同一个窗口切到 IDE 模式就行，上下文原封不动地带过去，Agent 刚才干过什么、动过哪些文件，全在眼前，不用再跟新的对话把来龙去脉重新解释一遍。
使用ide查明代码原因后对比
IDE 里直接翻导出那段代码，很快找到问题：canvas 的宽高用的是卡片的 CSS 尺寸，而屏幕像素比是 2，等于拿一半的分辨率在画图，不糊才怪。修法也直白，建画布前把尺寸乘上 devicePixelRatio，绘制时再 scale 回去，页面显示不变，导出的图却是实打实的两倍分辨率。改动就几行，改完重新导出，文字边缘立刻扎实了。顺手把主题色变量改成从 CSS 自定义属性里取，原先预览和导出各写一套颜色，容易改漏，收拢到一处以后加主题不用再改两遍。
最后导出效果图
三步把动态表情包人物换掉
卡片工具收尾之后还有富余，又用 Agent 模式试了个更生活化的活：表情包。手上有一张梦龙发的噜噜的跳舞动图，想把表情包里面的噜噜换成牛牛！直接把 GIF 喂给视频生成是不认的，Agent 自己把流程捋成三步：
-
先把 GIF 转成 MP4，记下分辨率、帧数和时长；
-
再拿上传的人像图当外观参考、转出来的视频当动作参考，生成替换后的视频；
- 最后转回 GIF，参数跟原始动图对齐，顺带留一份高清 MP4。
三步全在一段对话里串起来，中间没有需要人工接手的地方，最后拿到的动图，动作衔接得挺自然，不细看看不出换过人。
这个活烧的是积分，跑完也摸出几条省积分的路数。头一条是大头：需求一次说到位。头一回没写清要不要水印，出来不满意又重跑了两轮，积分哗哗地掉；后来把动作、时长一次性交代完，一遍过反而最省。
任务完成后原表情包导出的效果：
写在最后
回过头看这两个活完整的流程，分工其实很自然：定目标、拆任务、批量生成这些往前推的事交给 Agent 模式；验收、定位、精修这些往回收的事落在 IDE 模式。两个活还正好各占一头，卡片工具要改代码、要收口，两种模式接力最顺；表情包是纯流程活，Agent 模式一个就能从头干到尾。以前两个软件各管一摊，最难受的是中间那段人肉搬运：那边改完出了报错，要把报错复制过来，再从头解释一遍项目是什么、刚才动了什么；现在报错就发生在同一个窗口里，贴回对话接着查就行。上下文不用搬家，这段搬运彻底消失，是这次升级里感受最实在的一点。
时间也确实省了：从把需求说完到初版能用，不到二十分钟；翻出像素比问题、修完再打磨样式，二十来分钟。搁以前，光是把解析、渲染、导出这些轮子自己搭一遍，一个晚上就搭进去了，还不算调样式来回预览的功夫。当然也不是全无毛病。Agent 有两次把改动撒得太开，明明只说改导出，配置里的注释也被顺手重写了，看着不碍事，diff 里夹着这种东西终究膈应；自查清单列得挺漂亮，但导出清不清晰这种主观项根本查不出来，还是得靠人眼。要是后续能支持圈定可改动的文件范围、把自查清单里必须人工看一眼的节点单独标出来，再给导出加个按实际像素预览的功能，会更省心。
这个上下文跟着走的机制值得单独夸一下：Agent 模式里聊到一半，同一个窗口切成 IDE 模式，整段对话原样跟过来，刚才干过什么、动过哪些文件都摆在眼前，不用新开一个对话从头把来龙去脉讲一遍，确实是这次升级里最讨人喜欢的改动。
整体下来，一个够用的小工具、一张称心的表情包，中间横着一个导出模糊的真问题，全程没换过窗口。对日常要发图、又在意数据不出本机的人来说，这套组合拳已经能顶不少事了。
