1. 摘要
作为一个非技术专业出身的人，我用 TRAE SOLO 花了一天时间，完成了一个整合 30+ 平台热榜数据的聚合网站。没有写一行代码，全程通过对话驱动完成需求梳理、技术选型、框架搭建和全量开发。最终产出了一个真实可用、数据实时抓取的产品级应用。
2. 背景
每天早上打开手机，我习惯性地刷微博热搜、知乎热榜、B站热门、36氪……来来回回切换七八个 App，才能大致了解"今天发生了什么"。这个痛点不是只有我有——身边很多朋友都抱怨过"信息太分散，看个热点要切半天"。
直到接触到 TRAE SOLO，我发现它不只是"帮你写代码的 AI"，更像是一个能听懂你想法、帮你做技术决策、还能动手干活的"技术合伙人"。
再有就是最直接的，之前我发的一个贴子有宝子提问，能不能获取更多的内容，带着这个想法开始了这个项目
3. 实践过程
3.1 任务拆解：先把"做产品"这件事想清楚
这一次与以往不同，我假设自己完全都不懂任何技术，而且也没有明确的想法和概念，从模糊的想法到可以实践的代码，按照我理解的古法的开发流程，抓住几个产品经理、技术工程师进行蒸馏，提取三个skill：
user-journey-product-requirement-generator（用户旅程需求生成器）
product-spec-to-ui-skill（UI 规格生成器）
ui-spec-to-code-skill（Vibe Coding 启动文档生成器）
你的想法（"我想做一个热点聚合站"）
│
▼
┌─────────────────────────────────┐
│ Skill 1: 需求生成器 │ 7步对话 → 产品需求清单
│ "这个产品给谁用？解决什么问题？" │
└──────────────┬──────────────────┘
│ 需求清单
▼
┌─────────────────────────────────┐
│ Skill 2: UI规格生成器 │ 5步对话 → UI规格文档
│ "界面什么风格？页面怎么跳转？" │
└──────────────┬──────────────────┘
│ 需求清单 + UI规格
▼
┌─────────────────────────────────┐
│ Skill 3: Vibe Coding启动文档 │ 4步对话 → 可执行的编程指令
│ "做哪些功能？怎么发布？用什么工具？" │ （技术决策自动完成）
└──────────────┬──────────────────┘
│ 启动文档
▼
粘贴给 AI 编程工具 → 开始写代码
我做的第一件事不是急着让 SOLO 写代码，而是先梳理产品需求。因为我虽然不会技术，但我知道一个道理：需求没想清楚，写出来的东西一定不对。
我通过对话让 SOLO 帮我生成了一份完整的产品需求清单，包含 10 个核心需求：多平台聚合、分类筛选、实时刷新、响应式布局等等。接着又生成了一份UI 规格文档，把每个页面的布局、组件、交互状态、视觉风格都定义清楚。
这一步让我特别惊喜——SOLO 不是简单地把我的话转成文档，而是主动追问了很多我没考虑到的问题，比如"数据源怎么获取？"“刷新频率设多少？”"要不要支持暗黑模式？"这些问题如果我自己想，可能要查很久。
3.2 技术选型：让 SOLO 帮我做决策
需求定好了，接下来是技术选型。说实话，这一步我本来是最懵的——Next.js、React、Vue、Tailwind……这些名词我听过但完全分不清。
我让 SOLO 根据我的需求（多平台数据聚合、需要代理解决跨域、要部署到线上）来推荐技术栈。SOLO 给出了两套方案对比，我最终选择了 Next.js 14 + shadcn/ui + Tailwind CSS 的组合，原因是：
- Next.js 的 API Routes 可以做后端代理，解决跨域问题
- shadcn/ui 的组件风格正好符合我想要的简洁设计
- 部署到 Vercel 是免费的，零成本上线
选完技术栈后，SOLO 自动生成了一份Vibe Coding 启动文档，把整个项目的技术架构、目录结构、开发步骤都规划好了。拿着这份文档，后面的开发就有了清晰的路线图。
hotnews/
├── public/ # 静态资源（平台图标、Logo）
│ ├── logo.png
│ ├── weibo.svg
│ ├── zhihu.svg
│ └── ...（30+ 个平台图标）
│
├── src/
│ ├── app/ # Next.js App Router 页面
│ │ ├── api/[platform]/ # 动态 API 路由，每个平台一个接口
│ │ │ └── route.ts # 统一处理所有平台的数据请求
│ │ ├── page.tsx # 首页（主页面）
│ │ ├── layout.tsx # 根布局
│ │ └── globals.css # 全局样式
│ │
│ ├── components/ # React 组件
│ │ ├── ui/ # shadcn/ui 基础组件
│ │ │ ├── card.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ └── tabs.tsx
│ │ ├── HotCard.tsx # 平台热点卡片（核心展示组件）
│ │ ├── HotList.tsx # 热点列表（含拖拽排序）
│ │ ├── MainContainer.tsx # 主容器（侧边栏+内容区布局）
│ │ └── Sidebar.tsx # 左侧分类导航栏
│ │
│ ├── config/
│ │ └── platforms.ts # 平台配置（名称、分类、提示文字）
│ │
│ ├── lib/
│ │ ├── scrapers/
│ │ │ └── index.ts # 30+ 平台的数据抓取逻辑
│ │ ├── fetch.ts # 通用 fetch 工具（含超时、UA 伪装）
│ │ └── utils.ts # 工具函数
│ │
│ ├── store/
│ │ └── useStore.ts # Zustand 全局状态（分类、排序、侧边栏）
│ │
│ └── types/
│ └── index.ts # TypeScript 类型定义
│
├── package.json # 依赖配置
├── next.config.mjs # Next.js 配置（图片域名白名单）
├── tailwind.config.ts # Tailwind 配置
└── tsconfig.json # TypeScript 配置
用户浏览器
│
▼
┌─────────────────┐
│ HotCard 组件 │ ← 展示数据，支持刷新
│ (React Client) │
└────────┬────────┘
│ fetch(`/api/{platform}`)
▼
┌─────────────────┐
│ API Route │ ← Next.js Edge/Node Runtime
│ /api/[platform]│ 路由分发
└────────┬────────┘
│
┌────┴────┬────────┬────────┐
▼ ▼ ▼ ▼
┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
│ 微博API │ │知乎API │ │B站API │ │ ... │ ← 各平台官方/非官方接口
└───────┘ └───────┘ └───────┘ └───────┘
3.3 关键操作过程：从文档到产品
有了需求和启动文档，接下来的开发过程基本就是"按图施工"：
第一步：数据源调研
这一步很重要，我告诉 SOLO 我要接入尽可能多的平台热搜数据，不要模拟数据，不要硬编码。SOLO 主动去网上调研了多个开源项目（包括 GitHub 上的 DailyHotApi、next-daily-hot 等），最终整理出了 30+ 个平台的数据源，每个都有真实的 API 接口地址和解析方案。
第二步：项目开发
这里我主要是让SOLO先帮我开发个大概，因为不用排队
，然后核心还是用TRAE IDE去调整。为每个平台单独创建了 API 路由，处理各种不同的数据格式——有的返回 JSON，有的需要用 Cheerio 爬取 HTML 解析，有的（比如 36氪）需要发送 POST 请求，还有的（比如 Hacker News）需要两步请求才能拿到完整数据。这些技术细节我完全不需要操心，SOLO 全部搞定了。
根据之前定义的 UI 规格，搭建了完整的前端界面：左侧分类导航栏、平台筛选标签、热点卡片列表、加载骨架屏、错误提示等等。设计风格我特别强调了"不要花里胡哨"——不要 emoji 图标、不要蓝紫渐变、不要大圆角、不要毛玻璃效果，都严格执行了。
最后一步是跑起来看效果。启动开发服务器后，页面成功加载了来自微博、知乎、B站、抖音等多个平台的真实热搜数据。看到 50 多条实时热点整齐地排列在页面上那一刻，说实话，挺有成就感的。
3.4 踩坑与未解决的内容
高风险问题
1. 数据抓取依赖第三方平台，随时可能失效
问题描述：
- 所有数据都来自各平台的公开接口或网页，这些接口没有任何稳定性保障
- 平台随时可能：关闭接口、增加反爬虫、修改返回格式、要求登录/验证码
已观察到的问题：
- 小红书接口需要特殊的
shield请求头，这个头会过期，过期后接口返回 401 - 抖音、快手等平台的接口经常变动
- 部分平台（如微信读书）使用了复杂的加密算法，一旦算法更新就会失效
影响：
- 用户会看到"内容加载失败"或"访问受限"的错误提示
- 需要持续维护，逐个修复失效的爬虫
2. 没有错误监控和日志系统
问题描述：
- 目前只有
console.error输出错误，生产环境无法感知接口失效 - 没有接口成功率统计、响应时间监控
3. 没有限流和防刷机制
问题描述：
- API 接口没有任何限流保护
- 恶意用户可以快速刷新导致服务器 IP 被封，或消耗大量资源
中风险问题
4. 前端状态管理过于简单
问题描述：
- 所有平台数据都存储在各自 HotCard 组件的
useState中 - 没有全局的数据缓存，切换分类后重新筛选，但数据还在各组件里
- 没有统一的刷新机制，用户需要逐个卡片点击刷新
5. 图片加载问题
问题描述：
next.config.mjs中只配置了 4 个图片域名白名单- 很多平台返回的图片 URL 域名不在白名单中，导致图片无法显示
- 控制台会报大量图片加载错误
6. SEO 和 Meta 信息未配置
问题描述：
layout.tsx中的title还是 “Create Next App”- 没有 Open Graph、Twitter Card 等社交分享标签
- 搜索引擎难以正确索引页面
4. 成果
一句话总结：一个非技术人员，一天之内，从零做出了一个整合 30+ 平台热搜数据的实时聚合网站。
核心功能
| 功能 | 说明 |
|---|---|
 多平台聚合 |
微博、知乎、B站、抖音、GitHub 等 30+ 平台实时数据 |
 分类筛选 |
综合、AI/科技、财经、体育、游戏等 10 个分类 |
 实时刷新 |
每个平台支持手动刷新，数据实时抓取 |
 响应式布局 |
桌面端、平板、手机全适配 |
 暗黑模式 |
亮色/暗色主题自由切换 |
 拖拽排序 |
可自定义平台卡片显示顺序 |
5. 效果与总结
效果对比
| 维度 | 传统方式（手动开发） | 使用 SOLO |
|---|---|---|
| 开发周期 | 2-4 周（假设会写代码） | 1 天 |
| 技术门槛 | 需要掌握前端+后端+部署 | 零代码基础即可 |
| 数据源调研 | 需要逐个平台找接口、测试 | SOLO 自动调研并整理 30+ 源 |
| 文档产出 | 通常被忽略 | 自动生成需求文档、UI规格、技术文档 |
SOLO 在整个流程中的角色
回顾整个过程，SOLO 不只是"代码生成器"，它承担了多个角色：
- 产品经理 —— 帮我梳理需求、追问边界条件
- 技术顾问 —— 根据需求推荐合适的技术栈，解释每个选择的理由
- 全栈工程师 —— 从 API 到前端到部署，全部实现
- 调研助手 —— 主动搜索开源项目、验证 API 接口可用性
可复用方法论：对话式开发
这次经历让我总结出了一套非技术人员也能用的开发方法论：
需求对话 → 文档沉淀 → 技术选型 → 分步实施 → 验证迭代
核心思路是：先把"做什么"和"怎么做"通过对话想清楚，让 AI 生成文档作为"契约"，然后按文档分步执行。 这样即使你不懂技术，也能把控项目的方向和质量。
个人思考
以前我觉得"做产品"是技术人员的事，非技术人员只能提需求、等开发。但这次经历让我意识到，AI 正在重新定义"谁能做产品"这个边界。你不需要会写代码，你需要的是：想清楚要做什么、能清晰地表达出来、知道怎么跟 AI 协作。
这不只是效率的提升，更是一种可能性的打开。
6. 互动
你有没有过"想做个东西但不会写代码"的经历？现在有了 SOLO，你最想做什么？欢迎评论区聊聊~
觉得有帮助的话，点个赞支持一下非技术人的第一次"独立开发"~
也欢迎分享给身边想用 AI 做项目但不会写代码的朋友！
