我用 3 个 AI 工具,给投资网站做了两个实用功能

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

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

为什么要做这两个功能？

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

"今天美股开盘吗？"感恩节、马丁路德金日、耶稣受难日……资本主义的休市日还挺多的。每次都要手动查询，太麻烦。

"现在美元兑人民币多少？"入金出金时总要到处查汇率，市面上的工具要么广告满天飞，要么数据不全，要么加载半天。

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

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

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

我的 AI 工具链

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

第一棒：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。

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

第三棒：Claude Code 写代码

这是工作量最大的环节。

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

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

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

真实的 Claude Code 开发过程

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

1. 主动理解项目

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

Claude Code 会：

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

这一步很重要，因为 AI 会理解你的项目，结合你项目的上下文进行开发，而不是闭门造车。

2. 生成代码

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

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

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

3. 测试和调试

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

多设备测试：

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

功能逻辑测试：

这是我遇到的真实问题：

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

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

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

类似的问题还有：

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

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

4. 用户体验优化

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

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

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

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

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

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

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

最终成果

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

📅 全球交易日历

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

👉 全球交易日历^[2]

💱 实时汇率中心

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

👉 实时汇率中心^[3]

没有广告，没有弹窗，大家有兴趣可以体验下。

几点真实感受

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

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

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

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

如果这些都不会，AI 再强也帮不了你，因为你控制不了它。武功秘籍再强，本身体质不行，效果会大打折扣。不过效率低总比不开始好吧，朋友们快动起来。

2. Claude Code 模型选择和沟通

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

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

3. 工具链很重要

单个 AI 工具很难完成复杂任务，每种模型的能力各有所长。所以一般我会这么分配工作：

• • Gemini 擅长策划和 Prompt 生成，作为PM
• • Stitch 擅长 UI 设计（虽然有点慢，但能快速出原型）
• • Claude Code 擅长代码开发

各司其职，接力完成。

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

4. 测试反馈是大头

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

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

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

5. 但确实比以前快了

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

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

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

现在用 AI 工具链：

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

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

6. AI 是队友，不是替代

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

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

但最终：

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

AI 大部分负责执行，也可以 Review 其他 AI 的产出，而你负责验收。

后续计划

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

🤖 AI 财报分析器

输入股票代码，AI 自动：

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

📈 个股趋势预测

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

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

💼 投资组合优化

输入持仓列表，AI 分析：

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

如果你对这些功能感兴趣，欢迎留言告诉我优先级，后续根据大家兴趣，抽取用户进行 beta 版本的体验。

写在最后

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

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

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

• • 📅 全球交易日历^[2]
• • 💱 实时汇率中心^[3]

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

引用链接

[1] Little Midas: https://www.smallgolden.com