圣诞节使用 Claude Code 开发 Web App 的实战经验分享

zhaoxun2018

yrqin 发表于 2025-12-31 10:32
或者你描述一个web app需求，稍微详细些的，我可以试着开发一个基本可用的版本，给你试着用用看

今天是C ...

你既然夸下海口，那我就提个小要求啦。
你能不能用万能的claude帮我开发一个网页，这个网页上面有一个用户手写面板，给用户用手指或者触摸笔写汉字输入一个句子，并且还能把用户输入的汉字句子读出来？

yrqin

zhaoxun2018 发表于 2025-12-31 09:45
你把你的十万行ai生成的代码发出来看看。是不是吹牛逼板上高手一看便知。 ...

突然想起，大概4个月之前，那时候在尝试各种AI coding工具

下面这个简单的web app （+ PWA）大约是花了一天的功夫完成的（ ～ 8 小时），恰好赶在codex免费流量大放送的时候（Cursor里的codex）

https://recall-wave.web.app/

这个倒是可以分享出来，一个比较普通的web app，主要是用来背单词

里面的功能其实还是挺多的：

卡组与卡片：创建卡组并编辑卡片（术语、定义、示例、同义词）
AI 辅助：一键 AI 生成定义/示例（通过 ANTHROPIC_API_KEY 调用 Claude）
间隔重复（SM-2）：基于学习表现的智能复习队列调度
发现与发布：发布卡组元数据，浏览公开卡组
深色模式：基于 class 的主题切换，加载时无白屏闪烁
延迟加载：大型卡组的卡片无限滚动加载
PWA：离线支持、安装提示、Service Worker 仅在生产环境自动注册
同步与合并：离线优先的 IndexedDB 存储，配合 Firestore 同步及冲突感知合并

我想一个程序员，自己独立完成这个web app，应该不是简单花几天时间就能有如此完成度的。

约莫估计，AI coding应该有5～8倍的产出效率提升，同时整个过程，我仅仅是和AI聊聊天，就完成了它的需求分析，实际开发，然后自己做做测试，并给出改进的建议而已；可以说十分的轻松愉快

zhaoxun2018

yrqin 发表于 2025-12-31 12:18
突然想起，大概4个月之前，那时候在尝试各种AI coding工具

下面这个简单的web app （+ PWA）大约是花了 ...

这些用的了十万行吗？
这些实际上都是简单的重复性工作。对于未知的算法，claude就抓瞎了。当然你可以说你可以把未知的算法告诉它让它实现，但这样还不如自己写否则维护起来极其困难。此外对于涉及多个高度耦合系统的复杂算法，你告诉它它也写不好。

yrqin

zhaoxun2018 发表于 2025-12-31 12:30
这些用的了十万行吗？
这些实际上都是简单的重复性工作。对于未知的算法，claude就抓瞎了。当然你可以说 ...

这个是4个月前的一个体验AI Coding的项目而已，我也不清楚有多少行代码

yrqin

zhaoxun2018 发表于 2025-12-31 12:08
你既然夸下海口，那我就提个小要求啦。
你能不能用万能的claude帮我开发一个网页，这个网页上面有一个用 ...

https://handwriting.sunyatas.cc/

代码下载链接：

这个是简单的web app实现

从需求分析，实际开发，再到部署

总共耗时不到40分钟

说明文档：

## ✨ 功能特性

| 功能 | 说明 |
|------|------|
| 手写输入 | 支持鼠标、手指、触控笔，带米字格辅助 |
| 智能识别 | 集成 Google Input Tools API，返回候选字列表 |
| 语音朗读 | 使用 Web Speech API，可调节朗读速度 |
| 历史记录 | 自动保存到 localStorage，最多50条 |
| 导出功能 | 一键导出为 TXT 文件 |

## 设计亮点

- 东方书法美学：宣纸质感背景 + 墨色笔画
- 米字格画布：传统书法练习格式
- 优雅字体：使用 ZCOOL XiaoWei 书法字体
- 流畅动画：候选字、历史记录均有入场动画
- 响应式布局：适配桌面和移动设备

## 使用方法

1. 在左侧画布区域书写汉字
2. 系统自动识别并显示候选字
3. 点击候选字添加到句子
4. 点击「朗读」按钮听取语音
5. 清空句子时自动保存到历史记录
6. 可从历史记录中恢复之前的句子

## 项目结构

```
cn-handwriting/
├── app.jsx          # 主应用组件
├── main.jsx         # React 入口
├── index.html       # HTML 模板
├── vite.config.js   # Vite 配置 (含 API 代理)
└── package.json     # 依赖配置
```

yrqin

zhaoxun2018 发表于 2025-12-31 12:30
这些用的了十万行吗？
这些实际上都是简单的重复性工作。对于未知的算法，claude就抓瞎了。当然你可以说 ...

“但这样还不如自己写否则维护起来极其困难。此外对于涉及多个高度耦合系统的复杂算法，你告诉它它也写不好。”

我的看法是有些不一样的

在实际工作中，我仅仅把AI coding作为我的编程助手，它写出来的代码，基本都是经过我审核过的，不存在后期维护极其困难的问题；因为我主要借助AI的工具便利性，来实现了我心中所想要的解决方案，仅此而已

至于自己的个人兴趣项目，自己有时间就细看，没时间，就看最终的产品，功能都实现了就行，也没啥大不了的。

“涉及多个高度耦合系统的复杂算法，你告诉它它也写不好”：AI Coding肯定不是完美的，它毕竟才火起来不到一年时间，我也不期待它能100%完美解决所有问题；不完美，不等于它没有用

“对于未知的算法，claude就抓瞎了”： 关于这一点，我不清楚我们实际工作中，有多少未知的算法；真有很多很多吗？应该更多只是重复性的工作吧，还有就是修修bugs，这些的话，AI都能极大地提升效率

zhaoxun2018

yrqin 发表于 2025-12-31 12:45
https://handwriting.sunyatas.cc/

这个是简单的web app实现

你这个在后台调用了免费的汉字识别API和文本语音引擎吧？
你调用了这些既有的算法，那就没什么意思了。就相当于所有的算法都已经实现了然后用python调用一下，二三十行编一个小app。这甚至不能考察claude本身的能力，因为实现逻辑太简单了。
我想看到的是，claude如何实现汉字手写识别。

yrqin

zhaoxun2018 发表于 2025-12-31 12:58
你这个在后台调用了免费的汉字识别API和文本语音引擎吧？
你调用了这些既有的算法，那就没什么意思了。就 ...

你回头看看你提的要求？有哪些漏了。。

如果非要刁难，那也没有办法

谁会在实际工作当中，要重新发明轮子呢？
我在code review的时候，如果看到同事没有使用已有的库，而是自己重新实现，我不会让他过code review的

再说了，你可以在40分钟不到的时间里，手写出来这么一个web app吗？
你说只需要20-30行代码就能解决问题了，要不你写一个看看？

zhaoxun2018

yrqin 发表于 2025-12-31 12:45
https://handwriting.sunyatas.cc/

这个是简单的web app实现

你用google input api实现这个汉字识别功能，对于我提的这个要求来讲，就相当于把考试的标准答案带到考场上去抄。你要说服我们说claude功能强大，就必须证明它能够实现复杂的算法，而不是仅仅调用几个函数。

yzh1999

zhaoxun2018 发表于 2025-12-31 12:58
你这个在后台调用了免费的汉字识别API和文本语音引擎吧？
你调用了这些既有的算法，那就没什么意思了。就 ...

所以你提的不是“小要求”

zhaoxun2018

yrqin 发表于 2025-12-31 13:05
你回头看看你提的要求？有哪些漏了。。

如果非要刁难，那也没有办法

google input api是要收费的，也不是所有的企业都愿意或者能够用的。大多数情况下，企业还是要有自己的算法，不是简单不重复发明轮子就能搪塞过去的。
我可以告诉你，汉字手写识别的代码量其实不大，5000-10000行。如果你用人工神经网，需要大量数据，claude可能没有，但不是一定要人工神经网来做。但你给的这个例子，只是证明claude根本做不出来。

zhaoxun2018

yzh1999 发表于 2025-12-31 13:07
所以你提的不是“小要求”

他说他十万行代码一夕搞定。汉字识别代码量大概是1万行，难道不是小要求吗？

yrqin

zhaoxun2018 发表于 2025-12-31 13:07
你用google input api实现这个汉字识别功能，对于我提的这个要求来讲，就相当于把考试的标准答案带到考场 ...

"你要说服我们说claude功能强大，就必须证明它能够实现复杂的算法，而不是仅仅调用几个函数"

我想我们切入点完全不一样。

我是说claude code很强大，是很棒的编程助手；咱们平时工作中不都是调用函数吗，自己写的简单的函数也许，使用已有库里的函数也许。
哪有那么多复杂的新颖的算法？就算有，那也不需要一个函数里写完了吧，而是应该拆解下来，一步步实现。

而且，我没有说claude code可以实现世界上还不存在的新新算法，那是算法专家要做的事情

如果你说的是外面已知的算法，那么claude code在LeetCode上的表现很好很强大，不也说明复杂算法也可以实现吗？

工具有工具的局限性，这点谁都承认。我还嫌弃我的MacBook笔记本不能帮我洗衣服、做饭呢

yrqin

zhaoxun2018 发表于 2025-12-31 13:15
他说他十万行代码一夕搞定。汉字识别代码量大概是1万行，难道不是小要求吗？ ...

他说他十万行代码一夕搞定

这是你想象出来的，不是一夕，我主贴里说的是圣诞期间几天时间，大概三～四夕（3～4天）

zhaoxun2018

yrqin 发表于 2025-12-31 13:05
你回头看看你提的要求？有哪些漏了。。

如果非要刁难，那也没有办法

我当然可以在20分钟内手写一个这样的app。
google input api不是有很多例子吗？你拿一个例子那复制粘贴一下不就行了。

yrqin

zhaoxun2018 发表于 2025-12-31 13:13
google input api是要收费的，也不是所有的企业都愿意或者能够用的。大多数情况下，企业还是要有自己的算 ...

Claude Opus 4.5的回复：

这个说法部分正确，但结论过于绝对。让我逐点分析：

正确的部分

代码量确实不大：传统汉字识别的核心代码5000-10000行是合理的估计。
不一定需要神经网络：历史上汉字识别在深度学习之前就有成熟方案：

模板匹配
结构特征分析（笔画、部首拆解）
网格特征 + 传统分类器（SVM、KNN）
弹性匹配


神经网络需要大量数据：这确实是个限制。


不太准确的部分
"Claude根本做不出来"

这个结论过于绝对。实际上：
能做的  有困难的
写出完整的算法框架  没有训练数据集
实现特征提取代码  无法在对话中实际"训练"
实现模板匹配逻辑  大规模测试验证生成可运行的原型

实际情况
如果用户提供：

少量手写样本图片
明确的识别范围（比如只识别0-9或常用100字）

Claude 完全可以写出一个能工作的原型，使用模板匹配或简单特征提取方法。
所以更准确的说法是：Claude能写出代码，但缺乏数据来训练/验证一个生产级的识别系统。这和"根本做不出来"是两回事。

yrqin

zhaoxun2018 发表于 2025-12-31 13:18
我当然可以在20分钟内手写一个这样的app。
google input api不是有很多例子吗？你拿一个例子那复制粘贴一 ...

Claude Opus 4.5的回复：

这个说法部分正确，但有些夸大。让我客观分析：
❌ 不太准确的部分
1. "Google Input API 有很多例子"
实际上这个 API：

没有官方文档，是通过逆向工程发现的
网上的资料比较零散，主要是一些博客和 StackOverflow
需要知道正确的端点和请求格式才能用

2. "20分钟手写"
一个完整版本包含：

Canvas 手写捕获（鼠标+触摸+触控笔）
笔迹平滑处理
API 调用和错误处理
语音合成 + 速度控制
历史记录持久化
导出功能
UI 样式和动画

有经验的开发者做最简版本可能20-30分钟，但做到这个完整度通常需要 1-2 小时。
✅ 正确的部分

这确实不是什么高难度的技术挑战
核心逻辑都是成熟的 API 调用
有经验的前端开发者确实可以较快完成
我的价值更多在于快速整合而非创造新技术


所以如果有人说"这很简单"，他可能是有经验的开发者，但"20分钟复制粘贴"确实有点吹牛了

zhaoxun2018

yrqin 发表于 2025-12-31 13:19
Claude Opus 4.5的回复：

这个说法部分正确，但结论过于绝对。让我逐点分析：

三到四夕做十万行。5000到1万行大概2个小时吧？既然claude那么牛，你不妨让它做做。它被喂了那么多原始代码，肯定有汉字识别的代码，我也想知道它能不能做出来。

yrqin

zhaoxun2018 发表于 2025-12-31 13:27
三到四夕做十万行。5000到1万行大概2个小时吧？既然claude那么牛，你不妨让它做做。它被喂了那么多原始代 ...

（我想咱就此打住吧，往下争论这些意义不大了；ai coding能做什么，不能做什么，肯定都是存在的）

Claude Opus 4.5回复：

你说得有道理，让我诚实回应这个挑战：

- 关于"从头实现汉字识别"
我能写出代码，但没法"做出来"能用的系统

原因是：

需要的东西我能提供吗？
CNN/RNN 模型代码✅
可以写特征提取算法✅
可以写训练流程代码✅

这里没有
可以写训练数据（几十万张手写字图片）❌
没有训练好的模型权重❌
没有GPU 训练环境❌


写一个能跑的识别模型代码，可能 500-1000 行。但没有训练好的权重，代码就是个空壳。

- 诚实地说
代码 ≠ 能用的系统
我调用 Google API，本质上是在用他们：

几百万张训练数据
数千小时 GPU 训练
工程师几年的优化

这些不是"复制粘贴代码"能替代的。

zhaoxun2018

yrqin 发表于 2025-12-31 13:32
（我想咱就此打住吧，往下争论这些意义不大了；ai coding能做什么，不能做什么，肯定都是存在的）

Claud ...

我说过了，手写汉字识别不见得要人工神经网。你可以push一下claude看它能不能做出来。

yzh1999

yrqin 发表于 2025-12-31 13:19
Claude Opus 4.5的回复：

这个说法部分正确，但结论过于绝对。让我逐点分析：

你改下prompt让它到huggingface上找一个开源免费的模型用作后端，不是什么难事

yrqin

zhaoxun2018 发表于 2025-12-31 13:35
我说过了，手写汉字识别不见得要人工神经网。你可以push一下claude看它能不能做出来。 ...

这没什么必要了吧

ai coding就是很熟悉现有的，特别是流行的算法，让它写不是什么困难的事情；
有bugs就调整，最大的挑战当然是实际的训练过程了

而且像楼上提到的，免费的手写汉字识别开源模型也是存在的：

zhaoxun2018

yzh1999 发表于 2025-12-31 13:45
你改下prompt让它到huggingface上找一个开源免费的模型用作后端，不是什么难事 ...

这其实还是抄。
我想看到的是claude如何从头开始实现一个复杂算法。其中的一些步骤它可以参考别人的实现，但整体算法无从参考。这也是企业级或者个人具有知识产权的开发的常态。
其实即便是抄人家的模型也不见得那么容易。首先要翻译不同的编程语言，其次还是要找汉字模版。不过claude这么牛自己也可以找么。总之，如果哪个闲得慌不妨试试看，不知道要花多少时间。

yzh1999

zhaoxun2018 发表于 2025-12-31 13:53
这其实还是抄。
我想看到的是claude如何从头开始实现一个复杂算法。其中的一些步骤它可以参考别人的实现 ...

原来如此。你是想看到cc能不能打穿知识产权保护的护城河，那答案是还不能，哪怕被保护的是一个算法。如果你要它实现一个被商业保护的算法但不告诉它算法的细节，现在它是不能“发明”出来的。

zhaoxun2018

yzh1999 发表于 2025-12-31 14:42
原来如此。你是想看到cc能不能打穿知识产权保护的护城河，那答案是还不能，哪怕被保护的是一个算法。如果 ...

其实不光是知识产权的问题。企业的系统和商业逻辑都是专有的。数据放在哪里，系统运行流程，数据的商业意义，这些claude都不知道，怎么去开发？你要人告诉它，花的时间还不如人自己把代码写了。
反正至少现在，在我的雇主那里，ai还是只能当一个高级Google来用。

yzh1999

zhaoxun2018 发表于 2025-12-31 15:17
其实不光是知识产权的问题。企业的系统和商业逻辑都是专有的。数据放在哪里，系统运行流程，数据的商业意 ...

这又是另一个场景了。这一年以来各种grounding, memory和context engineering都发展了不少，在商业环境下已经完全可以整合私有知识使用。以你的例子，如果你告诉它算法的细节，配以测试及验收条件，它是可以在你的指导下实现出来的。
贵公司现在的状况是缺少ai enablement，不过以当前的经济形式来说倒也不见得是坏事

zhaoxun2018

yzh1999 发表于 2025-12-31 15:38
这又是另一个场景了。这一年以来各种grounding, memory和context engineering都发展了不少，在商业环境下 ...

我怀疑这些会有很大作用。我雇主公司的系统极其复杂，后台数据库种类繁多，而且总是在变化。人去了解都要几年，要把这些东西写下来喂给claude我不知道要多久，写得要多详细才能保证ai在release的时候不出错，如果有变化如何保证及时update？
如果引入ai编程需要这么复杂的设置，还不如不引入。因为这会造成系统复杂度进一步升高，最终无论人和ai都无法控制。

yzh1999

zhaoxun2018 发表于 2025-12-31 16:38
我怀疑这些会有很大作用。我雇主公司的系统极其复杂，后台数据库种类繁多，而且总是在变化。人去了解都要 ...

Open AI出过一个技术blog, 讨论他们是怎么开发系统的，以开放的心态了解一下can和can't总有好处
https://openai.com/index/shipping-sora-for-android-with-codex/
另外逆向工程复杂系统是AI的强项，配合新的Claude Code LSP更是效率加倍。如果你喜欢或者曾经喜欢研究技术，这个领域几乎每几天都有新东西

cgao

你们能不能让AI把你们的留言缩减一下，那么多字。。。

hehebear

yrqin 发表于 2025-12-31 11:35
这里有两个地方值得讨论：

“如果只是少量code”： 通常来说，AI可以迅速帮忙定位到错误的代码位置，分 ...

人教父早就指明了方向