用 AI 工具链给网站做功能，踩了一些坑，也有一些感悟

最近用 AI 工具链给自己的海外投资网站 Little Midas 做了两个新功能：全球交易日历和实时汇率中心。

今天聊聊这个过程，踩了什么坑，以及对普通人用 AI 做开发的一些真实看法。

为什么要做这两个功能？

炒美股港股的朋友应该都有过这种困扰：

"今天美股开盘吗？"

感恩节、马丁路德金日、耶稣受难日……美股休市日比你想象的多。每次都要 Google 查，太麻烦。

"现在美元兑人民币多少？"

入金出金时总要到处查汇率，市面上的工具要么广告满天飞，要么数据不全，要么加载半天。

既然自己有个网站，不如自己做一个，随时打开就能看。

问题是——如果你不会写代码，以前这种功能要么外包（花几千块，沟通成本还高），如果会的话，你自己还得硬啃（可能折腾一周还做不出来）。

但现在有了 AI 工具，情况不一样了。

我的 AI 工具链

这次开发，我用了 3 个 AI 工具接力完成：

Gemini → Stitch → Claude Code
 策划      设计       开发

第一棒：Gemini 当产品经理

我先和 Gemini 聊需求，让它帮我理清楚：

  • 要覆盖哪些市场？（美股、港股、澳股）
  • 日历要显示什么信息？（交易状态、倒计时、经济事件）
  • 汇率要支持哪些币种？（USD/CNY/HKD/EUR/JPY…）

为什么用 Gemini？

因为它很适合做这种"把模糊想法变成结构化需求"的工作。我不需要自己写 PRD，只要和它对话，它就能帮我梳理出完整的功能点。

更重要的是，Gemini 会帮我生成给下一个 AI 工具的 Prompt。

举个例子，我说：

"我想做一个交易日历，显示美股港股澳股的开盘时间"

Gemini 会问我：

  • 是否需要显示盘前盘后交易时间？
  • 是否需要节假日提醒？
  • 倒计时要精确到秒吗？
  • 需要支持时区切换吗？

然后根据我的回答，生成一个详细的 Prompt 给 Stitch。

这个过程大约 30 分钟，但它帮我避免了"做到一半发现需求没想清楚，推倒重来"的情况。

第二棒：Stitch 画 UI

拿着 Gemini 生成的 Prompt，喂给 Stitch 生成界面设计。

Stitch 的优点：

  • 能快速生成可用的原型（比从零画 Figma 快多了）
  • 自动适配响应式布局
  • 生成的设计还算专业
  • 能导出 UI 代码（HTML/CSS/React）

槽点也很明显：

  • 生成速度慢：每次需要等 3-5 分钟是常态，有时候可能不止，不知道是我的原因还是 Stitch 的服务器的问题。
  • 细节控制困难：想调个间距、改个颜色，经常要重新生成。
  • 审美有时候很"AI"：渐变色用得太狠，有时候看起来很"淘宝风"。
  • 导出的代码不能直接用：是独立的组件，不适配现有项目。

所以我会把 Stitch 的设计稿给 Gemini Review：

"这个设计在移动端可读性不够，时间线太挤。另外配色对比度可以更强"

Gemini 帮我分析问题并生成调整后的 Prompt，然后我再喂给 Stitch。

这样反复 2-3 次，大约 30 分钟，得到差不多满意的设计稿，毕竟差不多就行了，后续交给专业的 CC 就完事儿了。

第三棒：Claude Code 写代码

这是工作量最大的环节。

虽然 Stitch 能导出代码，但导出的是：

  • 纯 UI 组件（没有数据逻辑）
  • 独立的文件（不适配我的项目结构）
  • 需要大量改造才能用

所以我的做法是：把设计稿给 Claude Code，让它基于我现有的项目重新实现。

真实的 Claude Code 开发过程

Claude Code 的工作方式很有意思，它不是简单地"生成代码"，而是：

1. 主动理解项目

我告诉它："基于这个设计稿，创建交易日历页面"

Claude Code 会：

  • 搜索项目文件：找到所有和 market、calendar 相关的文件
  • 读取现有代码：理解项目的组件库、工具函数、状态管理
  • 分析架构：知道该把新页面放在哪里、用哪些现有组件

从我的实际使用经验看，它会执行类似这样的操作：

Search(pattern: "**/*market*calendar*/**/*.{ts,tsx}")
Found 3 files

Read(pages/market-calendar/dashboard/[market].tsx)
Read 280 lines

Read(utils/markets/market-utils.ts)
Read 275 lines

Read(utils/markets/use-market.ts)
Read 134 lines

这一步很重要，因为它让 AI 理解你的项目，而不是闭门造车。

2. 生成代码

基于对项目的理解，Claude Code 会：

  • 复用现有组件（Card、Layout、Button）
  • 使用项目的样式系统（Tailwind 配置）
  • 遵循命名规范（文件名、变量名）
  • 对接数据源（API、数据格式）

这一步确实很快，代码能跑。

3. 测试和调试

但当我在不同设备上测试时，问题来了：

多设备测试：

  • 💻 MacBook：✅ 正常
  • 📱 iPhone 16 Pro：⚠️ 时间线文字重叠

功能逻辑测试：

这是我遇到的真实问题（就像截图中显示的）：

问题：倒计时显示不对

今天是 1 月 1 日（元旦，非交易日），但倒计时显示"距离开盘 X 小时"。这明显是错的，应该显示"距离下一交易日开盘 X 小时"。

我告诉 Claude Code 这个问题，它会：

  1. 搜索倒计时相关的代码
  2. 读取 market-utils.ts 的 getCountdownToNextEvent 函数
  3. 发现问题：没有考虑假期和周末
  4. 给出修复方案：应该计算到下一个交易日的开盘时间

类似的问题还有：

  • 切换市场时数据没刷新
  • 时区处理错误（香港市场显示美国时间）
  • 加载状态不明显（用户看到空白页）

每个问题都是：发现 → 描述 → Claude Code 主动定位 → 修复 → 再测试

4. 用户体验优化

功能能用了，但体验不够好。这些是我作为用户发现的问题：

  • 倒计时太单调：数字切换时没有过渡动画
  • 点击假期没反应：用户可能想看详情
  • 加载时是空白页：用户不知道在加载

每个问题我都告诉 Claude Code，它会主动：

  • 搜索相关代码文件
  • 理解当前实现
  • 给出优化方案

这些细节，AI 不会主动想到，需要你站在用户角度去发现。

完成交易日历后，汇率中心用同样的流程开发，因为 UI 风格可以延用，稍微快乐那么快一丢丢。

两个工具总计：约 8 小时。

最终成果

功能上线了，现在我想查开盘时间或汇率，打开自己网站就行：

📅 全球交易日历

  • 支持美股🇺🇸、港股🇭🇰、澳股🇦🇺三大市场
  • 实时交易状态 + 开盘倒计时（精确到秒）
  • 交易时段时间线（盘前、正常交易、盘后）
  • 经济事件追踪（FOMC、非农、CPI…）

👉 立即体验

💱 实时汇率中心

  • 覆盖 14 种主流货币对（USD/CNY/HKD/EUR/JPY/GBP…）
  • 实时汇率 + 涨跌幅显示
  • 内置汇率换算器（输入金额秒算结果）

👉 立即体验

自己做的东西，用起来就是顺手。没有广告，没有弹窗，想要什么功能自己加。

几点真实感受

1. AI 写应用的门槛比想象的稍微高一点吧

很多人以为"不会编程也能用 AI 做开发"，这话只对了一半。

你不需要会写代码，但你需要会验收代码：

  • 知道怎么测试功能（不同设备、不同场景）
  • 能准确描述 bug（"不好看"不如"iPhone SE 上倒计时换行了"）
  • 看得懂基本的报错信息（或者至少能截图描述清楚），当然可能直接复制报错信息也行

如果这些都不会，AI 再强也帮不了你，因为你控制不了它。武功秘籍再强，本身体质不行，效果会大打折扣，但是，这并不是你不开始的理由，因为未来必有 AI 相伴。

2. Claude Code 的"主动理解"很关键

一般我选择使用 Opus4.5 模型进行代码开发，虽然 AI 会：

  • • 主动搜索项目文件（不需要你告诉它文件在哪）
  • • 理解现有架构（知道该复用哪些组件）
  • • 定位问题根源（不是盲目改代码，而是找到问题所在）
  • 要想省 Token以及提高开发效率，尽可能的清晰化需求或者问题，如果知道问题在哪里，最好把文件位置以及代码位置喂给它，这样的 CC 的开发体验会好很多。
  • 并且，切记这是"对话式协作"开发模式，而不是"一次性生成"，放好心态。

3. 工具链很重要

单个 AI 工具很难完成复杂任务。我的体会是：

  • Gemini 擅长策划和 Prompt 生成
  • Stitch 擅长 UI 设计（虽然慢，但能快速出原型）
  • Claude Code 擅长基于现有项目的开发

各司其职，接力完成。

就像做饭，你需要切菜刀、炒菜锅、盛饭碗，不能指望一个工具搞定所有事情。

4. 测试反馈才是大头

"AI 10 分钟做个网站"是营销话术。

生成代码可能真的只要 10 分钟，但测试、发现问题、描述问题、等 AI 修复、再测试……这个循环会吃掉你 60-70% 的时间。

如果你没有时间和耐心做测试，那做出来的东西就是半成品。

5. 但确实比以前快了

话虽如此，8 小时做两个功能，已经比以前快太多了。

放在以前，这两个功能我可能要：

  • 外包：花几千块，沟通成本高，改需求麻烦
  • 自己写：可能折腾一周，还不一定做得好

现在用 AI 工具链：

  • ✅ 省了钱（工具都免费或低成本）
  • ✅ 功能随时改（不用等外包团队排期）
  • ✅ 学到了东西（理解了开发流程）

对于想折腾但不是专职程序员的人来说，这就是 AI 工具的价值。

6. AI 是队友，不是替代

最大的感悟是：AI 不是"替代你"，而是"让你有了队友"。

以前一个人干不了的事（设计 + 开发 + 测试），现在可以借助 AI 工具完成。

但最终：

  • 方向还是你定的（做什么功能、给谁用）
  • 质量还是你把关的（用户体验好不好、有没有 bug）
  • 决策还是你做的（要不要这个功能、怎么改）

AI 负责执行，你负责判断。

后续计划

这两个工具只是开始。接下来我打算用 AI 做：

🤖 AI 财报分析器

输入股票代码，AI 自动：

  • 抓取最新财报
  • 提取核心数据（营收、利润、现金流）
  • 生成同比环比分析
  • 标注风险点（债务率、营收集中度）

📈 个股趋势预测

基于技术指标 + 新闻情绪分析，提供：

  • 支撑位/阻力位建议
  • 买卖信号提示
  • 风险评级

💼 投资组合优化

输入持仓列表，AI 分析：

  • 行业分散度
  • 股票相关性
  • 调仓建议

如果你对这些功能感兴趣，欢迎留言告诉我优先级。

写在最后

AI 开发工具正在快速进化。今天的槽点（Stitch 生成慢、Claude Code 代码的生成以及自己的 Prompt 能力都有很大的提升空间），大家一起加油吧！

但有一点不会变：工具再强，也需要人来把控方向、验证结果、解决最后一公里的问题。

如果你也在折腾海外投资，或者对 AI 开发感兴趣，欢迎试试我的工具：

如果你有什么建议或者意见，欢迎大家直接在评论区写出，感谢！