我是如何使用 Trae IDE 完成《流碧卡片》项目的完整记录

项目背景与起点

体验地址：card.zbztb.cn/

这是我使用 Trae IDE + Gemini-3-pro-Preview 在 6 小时内完成的实战项目------流碧卡片（Liubi Card）。作为一个社交媒体卡片生成工具，它支持 40+ 种视觉模板，所有图片生成都在浏览器本地完成。

我的开发目标：

快速验证 AI 辅助开发的可行性
实现一个完整可用的产品原型
探索 Trae IDE 的最佳实践
积累可复用的开发经验

最终成果：

✅ 6 小时完成从 0 到上线
✅ 40+ 精美模板系统
✅ 完整的国际化支持
✅ 深色模式适配
✅ 批量导出功能

目前项目已经部署上线，查看下效果吧。

我的实际开发历程

对话一：开发一个纯Web端的卡片生成与分享平台

在国际版Trae对话框下，输入想要实现的内容，然后利用自带的提示词优化功能，得到以下信息：

markdown 复制代码

开发一个纯Web端的卡片生成与分享平台，具体需求如下：

1. 核心功能实现：

- 开发用户输入界面，包含文本输入区域和实时预览功能

- 实现卡片生成引擎，将用户输入的文字内容自动排版成美观的卡片布局

- 集成HTML转图片功能，支持将生成的卡片转换为图片格式

2. 图片处理功能：

- 实现点击复制功能，将卡片以图片形式复制到系统剪贴板

- 提供图片下载功能，支持PNG/JPEG格式选择

- 确保生成的图片分辨率适配小红书和抖音的分享要求

3. 社交平台适配：

- 优化卡片尺寸和比例，符合小红书和抖音的内容规范

- 添加平台分享按钮，支持一键分享到主流社交平台

- 在图片中自动嵌入品牌水印（可选配置）

4. 模板管理系统：

- 开发多样化的卡片模板库，包括不同风格、配色和布局

- 实现模板预览和选择功能

- 允许用户自定义模板参数（颜色、字体、间距等）

5. 技术方案建议：

- 前端框架：React/Vue.js

- 图片生成：html2canvas或dom-to-image

- UI组件库：Material-UI或Ant Design

- 状态管理：Redux或Vuex

- 构建工具：Webpack或Vite

6. 质量要求：

- 响应式设计，适配移动端和桌面端

- 生成图片清晰度高，无模糊失真

- 操作流程流畅，用户体验良好

- 性能优化，确保快速生成和转换

7. 开发里程碑：

- 第一阶段：完成基础卡片生成功能

- 第二阶段：实现图片导出和分享功能

- 第三阶段：开发模板管理系统

- 第四阶段：进行多平台测试和优化

开始执行计划，Trae比较智能，给出了具体的计划和执行步骤，就开始帮我创建项目了。

其实这个执行流程结束后，我的网站已经完成了 80%功能了，不得不感叹 gemini-3-pro-preview的强大，昨晚使用的时候，最多也是2、3个人开始排队，大家想要体验的就抓紧了。

对话二：修复bug

在第一轮对话下，项目运行出出现了小许问题，我这边直接把错误提示粘贴回Trae，让它自己修复。

对话三：为游戏/应用设计并实现一系列高品质的酷炫动态皮肤主题

接着考虑到卡片需要酷炫的皮肤，我就开始让Trae帮我在已有的功能下添加功能。

markdown 复制代码

游戏/应用设计并实现一系列高品质的酷炫动态皮肤主题，具体要求如下：

1. 主题清单必须包含但不仅限于：

- 雪山主题：动态飘雪效果+冰川反光

- 火山主题：熔岩流动+粒子喷发特效

- 海浪主题：3D流体模拟+浪花飞溅

- 星空主题：银河旋转+流星划过动画

2. 技术规格：

- 每个主题需提供4K分辨率素材

- 支持实时动态光照效果

- 包含环境音效配套方案

- 适配移动端/PC端多平台渲染

3. 视觉要求：

- 使用HDR色彩空间

- 粒子特效不少于3种动态元素

- 主视觉焦点区域需有引导性动线设计

- 所有动画循环时长控制在8-15秒区间

4. 扩展建议：

- 极光主题（动态光幕）

- 量子隧道（赛博朋克风格）

- 细胞分裂（生物科技感）

- 数据风暴（数字粒子流）

请确保所有皮肤主题在保持视觉冲击力的同时，系统资源占用不超过基础皮肤的120%。每个主题需提供预览缩略图、特效说明文档和技术参数表。