【Code with SOLO】一个人用 SOLO 从 0 到 1 完成一款 AI 穿搭推荐 App 的全栈产品设计


1. 摘要

我是一名前端技术背景的创业者,一个人用 TRAE SOLO 从零开始完成了一款 AI 智能穿搭推荐产品的完整产品设计。整个过程中,SOLO 帮我完成了 UI 交互原型设计、产品需求文档(PRD)、全栈技术开发文档、AI 独立开发实操指南等一系列专业产出物,覆盖了从产品构思到技术落地的全流程。原本需要产品经理 + UI 设计师 + 技术架构师三人协作数周的工作,我一个人在 SOLO 的辅助下高效完成。

2. 背景

我是一个不懂编程的普通创业者,想做一个 AI 穿搭推荐的 App(微信小程序 + iOS/Android),帮助用户每天根据天气和衣柜搭配衣服。但我面临几个核心问题:

  • 没有技术团队:一个人,只会写前端代码
  • 没有设计能力:做不了 UI 设计图
  • 预算有限:月投入只有 200~500 元
  • 不懂产品文档:不知道怎么写 PRD 和技术文档

我的目标很明确:用 AI 完成所有专业工作,自己只负责提需求和做决策。

3. 实践过程

第一步:产品构思与需求梳理

我先用自然语言向 SOLO 描述了我的产品想法——一个基于天气和 AI 的智能穿搭推荐工具。SOLO 帮我梳理了产品功能模块、用户流程、核心交互逻辑,并输出了结构化的产品需求文档。

关键 Prompt 示例:

「我想做一个叫"今天穿什么"的微信小程序,核心功能是根据用户所在城市的天气,结合用户衣柜里的衣服,用 AI 推荐今天的穿搭方案。帮我做一份完整的产品设计」

第二步:UI 交互原型设计

这一步让我最惊喜。我没有用任何设计工具,直接让 SOLO 用 HTML + CSS 生成了一个高保真的交互原型,包含完整的页面跳转、动画效果、组件交互。

SOLO 生成的 UI 原型包含:

  • 首页(天气卡片 + 今日穿搭推荐)
  • 衣柜管理页(衣物分类、筛选、添加)
  • AI 对话页(与 AI 自由交流穿搭建议)
  • 个人中心(用户档案、穿搭历史、会员)
  • 侧边导航器(快速页面切换)
  • 底部 TabBar(首页/衣柜/添加/消息/我的)

整个原型是一个 5400+ 行的单文件 HTML,可以直接在浏览器打开体验,支持点击交互、页面切换、动画效果。
部分截图:

过程中踩的坑和修复:

  • 导航栏消失 → 让 SOLO 检查代码,发现 CSS 层级冲突,修复了
  • 底部 TabBar 不显示 → 发现是重复 CSS 定义覆盖了正确样式,删除了 131 行冗余代码
  • 侧边导航器样式错乱 → CSS 被误删,让 SOLO 重新添加了 15 条 CSS 规则
  • JS 事件绑定失败 → ID 命名不一致,SOLO 帮我逐个排查修复

:light_bulb: 经验:遇到 UI 问题不要自己猜,直接截图 + 描述问题给 SOLO,它能快速定位和修复。

第三步:产品需求文档(PRD)

SOLO 帮我生成了一份完整的 PRD 文档(.docx 格式),包含:

  • 产品概述与目标用户分析
  • 功能架构图
  • 详细功能说明(每个页面的交互逻辑)
  • 数据字典
  • 竞品分析

第四步:全栈技术开发文档

这是最复杂的一步。我需要一份让开发人员(或 AI)能直接照着做的技术文档。SOLO 帮我生成了一份覆盖全栈的技术开发文档,包含 11 个章节:

章节 内容
系统架构 五层架构设计(C端/管理后台/后端/数据/AI服务)
C 端技术架构 UniApp + Vue3,自研 UI 组件库,目录结构
管理后台 运营后台 + 商家后台(Vue3 + Element Plus)
后端技术架构 Node.js (Koa2) + MongoDB + Redis
数据库设计 12 个核心集合的完整字段设计
API 接口设计 C 端 / 商家后台 / 运营后台共 40+ 接口
消息推送 UniPush 2.0 全平台推送方案
第三方服务 AI 大模型、天气 API、云存储、支付
部署方案 单服务器 Docker Compose 部署(月费 200~500 元)
安全策略 10 项安全措施
迭代规划 V1.0 ~ V3.0 版本路线图

过程中 SOLO 帮我做了多次迭代优化:

  • 把部署方案从多服务器优化为单服务器(省钱)
  • 把第三方 UI 组件库改为自研(更好的控制力)
  • 去掉 TypeScript 改用纯 JavaScript(降低门槛)
  • 新增消息推送完整方案(App + 小程序全平台覆盖)

第五步:AI 独立开发实操指南

考虑到我自己不懂技术,我让 SOLO 额外生成了一份「AI 独立开发实操指南」,专门教非技术人员如何用 SOLO 完成实际开发。包含:

  • 环境搭建(需要注册的 6 个账号、安装的 5 个工具)
  • 后端开发 5 步流程(每步都有给 SOLO 的具体话术)
  • C 端开发 9 个页面的开发顺序
  • 服务器部署 7 步操作
  • 测试上线清单
  • 8 周完整时间线

4. 成果展示

产出物清单

产出物 格式 说明
UI 交互原型 HTML 5400+ 行,可直接浏览器打开体验
产品设计文档 .docx 完整 PRD,含功能架构和数据字典
全栈技术开发文档 .docx 11 章,覆盖前后端全技术栈
AI 独立开发实操指南 .docx 非技术人员用 AI 开发的完整教程

UI 原型截图

(此处插入 UI 原型的关键页面截图:首页、衣柜页、AI 对话页、个人中心)

技术文档截图

(此处插入技术开发文档的目录页和关键章节截图)

5. 效果与总结

提效数据

工作项 传统方式 用 SOLO 提效
UI 原型设计 UI 设计师 1~2 周 半天 10x+
产品需求文档 产品经理 1 周 2 小时 20x+
技术开发文档 技术架构师 1~2 周 1 天 10x+
开发实操指南 需要请教技术人员 2 小时 从无到有

核心收获

  1. SOLO 不只是写代码:它能完成产品设计、UI 设计、技术架构等全流程工作,对非技术人员来说是真正的「全能助手」
  2. 关键在需求描述:越具体的需求描述,SOLO 的产出质量越高。学会拆解任务、分步执行很重要
  3. 迭代比完美更重要:先让 SOLO 出初稿,再逐步优化,比一次性要求完美结果高效得多
  4. 一个人也能做大项目:有了 AI 辅助,非技术背景不再是创业的障碍

可复用的方法论

「描述需求 → 确认产出 → 提出修改 → 迭代优化」 这个四步循环适用于任何 SOLO 协作场景。不要试图一次到位,让 AI 先出 80 分的成果,你再用 20% 的精力打磨到 95 分。


本项目使用 TRAE SOLO 完成,从产品构思到技术方案全流程均由 AI 辅助生成。

那个app做的真好看 :+1:

让AI设计了好几套不同风格的UI图,最后也是觉得这套好看

1 个赞