借助 Cursor 做了第一个全栈项目，帮你将内容转为美观的图片

luckySnail01

于 2025-03-13 08:37:40 发布

阅读量1k

点赞数 5

文章标签：人工智能前端后端

本文链接：https://blog.csdn.net/weixin_48191864/article/details/146221444

版权

大家好！我是 luckySnail，今天想分享我和 Cursor 一起开发的我的第一个全栈应用，我叫它「SVG 秀」，听名字就知道跟 SVG 沾边，那它是干什么的呢？简单来说，它是使用当下最强的大模型快速将你的内容转为 SVG 图片的工具，并且支持在线编辑，保存，下载。体验地址：https://www.svgshow.cn/，我为每个人提供了 5 次免费体验机会，如果你也想要快速把内容转为生动的图片需求，那我建议你试一下，下面给大家看一下生成的图

svg-1741793264158

我仅仅是将内容上传上去，然后它就给我生成了这样的内容，真的很惊艳！下面看看我是如何结伴 Cursor 完成这个项目的吧！

前端开发

先看看技术栈：

next.js 15.2
Tailwindcss 4
zod
zustand
highlight.js
shadcn/ui
ahooks

基本上都是主流的技术，刚好尝试了一下 next.js 最新版本，开发体验巨大提升，主要体现在：

更详细的报错信息
更快的启动速度和页面跳转速度

开发过 next.js 都知道我在说什么！

前端其实没有特别复杂的部分都是基础的页面开发，值得一提的有两点：

在 svg 生成完成转为 UI 渲染过程中，直接切换有点生硬，这里借住 AI 实现了流畅的过渡动画
由于 SVG 在线编辑器开发比较耗时，这里使用了开源的工具，借住 AI 快速进行汉化，然后通过 iframe 间通信的方式，实现 SVG 在线编辑能力，而且我发现社区目前没有比较好的现成的 SVG 编辑器

虽然开发过程中，绝大多数的代码都是由 AI 生成，但是代码质量应该还是可以的，通过 rules 和微调保证了代码的质量，最后，我将代码开源啦！如果你觉得不错，辛苦帮忙点个 star 吧！这对我是非常大的鼓励！

开源地址：https://github.com/chaseFunny/svg-frontend

后端开发

作为一个前端开发者，后端肯定是要使用 node 来开发的，最近学完了 nest.js ，于是就刚好练手一下！我先在 github 上找到一个 star 比较多的 nest.js 模版：https://github.com/Saluki/nestjs-template

让我先介绍一下这个项目基本情况：

基于Nest.js 10 的 Fastify（ HTTP 服务器），内置健康检查 API
完全的 TypeScript 支持，严格的代码规范校验
集成 Prisma ORM 的 REST API
JWT（jsonwebtoken）认证
Swagger 文档集成
Joi 参数校验、jest 测试
Wiston 日志记录、Nodemon 的开发热重载
标准的开发目录结构
Docker 集成

得到一个基建非常好的项目后，我的完整开发过程如下：

选择使用 PostgreSQL 作为数据库，
借住 AI 帮忙进行数据库设计
完成数据库设计后，编写 schema.prisma 进行数据库初始化
用户模块开发，用户的增删改查
注册登录逻辑开发，这里包含注册需要的邮箱服务，我使用了 nodemailer
全局 JWT 认证守卫开发
SVG 模块开发，我这里应该不是最佳实现，属于跟着 AI 摸石头过河了！
- 主要的接口有：svg 创建，生成，获取，或者指定 id 信息
- svg 生成：这里我使用了 vercel 开源的 ai-sdk ：https://github.com/vercel/ai 来快速进行数据的获取和处理，其实我自己写了一套获取数据，解析数据的代码，但是最后发现不支持并发，才去开源社区找到了 ai-sdk，下次分享一定是分享 ai-sdk 的源码阅读，看看人家是如何在 node 中处理大量请求的
- svg 更新：因为我提供了在线更新 SVG 的能力，所以我是新增了一个表来存 svg 信息和更新记录