大家好呀,我是程序员夏叶,深度AI编程使用者,专注于分享AI编程方面的使用技巧、经验以及前沿资讯,有兴趣的可以关注我,一起学习,共同进步。
先说结论, Trae 2.0新增的内置智能体solo builder不愧是前端专家,帮我重构的项目前端界面,我很满意,相比之前IDE模式写的前端,无论是从审美还是界面流畅度上比,都强多了,十分适合我这种没有写过前端的纯后端程序员,哈哈!

项目背景
这个项目其实起源于我想偷懒,一直以来我是用markdown写文章发公众号,然后会同步到其他平台,别的平台还好,主要就是小红书比较麻烦,需要转成图文形式,在此之前,我是在网站1转成图片,在网站2转成符合小红书风格的文案,然后发小红书时还要重新组织标题和标签之类的,比较费时间,还要切界面。
于是我想到可以使用Trae帮我做一个工具,直接一键生成图片、文案、标题、标签,这样我markdown文章同步小红书就超简单了,在SOLO模式发布之前,项目后端已经完成了,之前我还写过一篇文章介绍了Trae结合MCP写后端程序的最佳实践:
Trae最佳编程实践,写一个sftp MCP,把Trae每一次请求都压榨的干干净净
其实当时前端界面也写了一部分,但是界面风格以及细节调整,总是调整不到位,恰好#TRAE2.0SOLO出道,内置了一个智能体,叫做SOLO Builder
,它的功能是这样:

擅长写web 前端,还擅长使用vue框架,于是我突发奇想,既然它是一个前端专家,那不如直接用SOLO Builder
重构下前端,看看效果咋样,结果相当炸裂,反正重构出来的界面我很满意。

编程搭子--SOLO Builder
SOLO Builder
是Trae 2.0新增的一个内置智能体,只有在切换到SOLO模式时才可使用,默认只能使用Claude-4-Sonnet模型,SOLO模式刚出的时候它只擅长写前端,不过今天Trae刚刚更新了,SOLO Builder
也增加了后端生成能力。

毋庸置疑,SOLO Builder
肯定是针对前端比如vue框架或者react框架做了专门训练的,相比通用智能体Builder而言,前端能力肯定是更为突出的。
使用SOLO Builder
配合SOLO模式下Trae AI对终端和内置浏览器的掌控,可以做到不切换界面,就在Trae中完成写代码、启动开发服务器、浏览器预览和测试这一套前端开发标准流程,再加上SOLO Builder
出色的前端能力,对我这种不会也不想写前端代码的人而言,真的是一大福音了。

SOLO模式下还有一大亮点也是友好前端,那就是元素选择 功能,在此之前,前端哪里需要修改,我们需要很小心的跟AI描述,它还不一定能正确理解,现在有了元素选择功能,就能辅助AI迅速的定位到你想改的界面元素上,超方便。

如果你跟我一样,也是一个不想写web界面的后端程序员或者根本就不是程序员,十分建议你试一下SOLO Builder
。
项目功能介绍
MD2XHS(Markdown to 小红书)是一个专为小红书内容创作者设计的前端工具,能够将 Markdown 格式的文本转换为精美的小红书风格图片,同时调用AI一键归纳总结出符合小红书风格的标题和文案。该项目基于 Vue 3 + TypeScript 构建,提供了直观易用的界面和强大的功能。
核心功能特性
1. 多样化模板系统
项目提供 9 种精美的视觉模板:
- 经典渐变:蓝紫渐变背景,适合大多数内容
- 简约白底:简洁白色背景,突出内容本身
- 极简灰调:专业简洁的灰色调设计
- 经典边框:白底配红色边框,商务风格
- 霓虹科技:深色背景配霓虹边框,科技感十足
- 优雅黑金:黑色背景配金色装饰,奢华优雅
- 可爱粉色:粉色渐变背景,温馨可爱风格
- 日落橙黄:温暖的日落色调,充满活力
- 复古怀旧:复古色调配装饰边框,怀旧风格
2. 实时预览功能
- 即时渲染:编辑内容时实时显示预览效果
- 小红书标准尺寸:预览区域采用 375×667px 标准手机屏幕比例
- 模板切换:可在预览区域直接切换不同模板风格
- 响应式设计:支持不同设备尺寸的预览
3. 图片生成工具
- 标准尺寸:生成 750×1334px 的小红书标准图片尺寸
- PNG 格式:高质量 PNG 格式输出,保证图片清晰度
- 批量生成:支持生成多张图片并提供轮播预览
- 一键下载:支持单张下载或批量下载所有生成的图片
- 图片预览:内置图片轮播器,方便查看和选择
4. AI 智能文案生成
- 智能生成:基于输入内容生成小红书风格文案
- 结构化输出:生成的文案包含标题、内容和标签三个部分
- 一键复制:支持复制完整文案或单独复制标题、内容、标签
5. 用户系统
- 用户注册/登录:完整的用户认证系统
- 使用次数管理:显示 AI 功能剩余使用次数
- 个人资料:用户可管理个人信息
- 权限控制:AI 功能需要登录后使用,图片预览与下载功能免费开放
6. 用户体验优化
- 响应式设计:完美适配桌面端、平板和手机
- 三栏布局:编辑器、预览区、工具面板的科学布局
- 实时通知:操作成功/失败的即时反馈
- 加载状态:清晰的加载动画和进度提示
- 帮助系统:内置帮助文档和使用指南
7. 技术特性
- 快速响应:基于 Vite 构建,开发和生产环境都极速响应
- 类型安全:完整的 TypeScript 支持,减少运行时错误
- 状态管理:使用 Pinia 进行高效的状态管理
- 组件化:高度模块化的组件设计,易于维护和扩展
- 现代化 UI:使用 Tailwind CSS 和 Lucide Icons 构建现代化界面
使用场景
如果你跟我一样,也使用markdown写文章,但是需要同步小红书,那么可以体验一下。
工具体验方式
体验网址如下:
traefrontend243si-guanyz0117-2503-xia-yes-projects.vercel.app
当前图片预览与下载无需登录可直接使用,但是AI文案生成需要注册登录,新注册用户免费送10次文案生成次数,欢迎大家使用体验!
好了,感谢你能看到这里,既然已经看到最后了,麻烦来个三连支持一下吧,十分感谢!