Claude 3.7 Sonnet 使用结论

推荐语

探索Anthropic最新AI助手Claude 3.7 Sonnet的实用能力。

核心内容：
1. Claude 3.7 Sonnet版本更新测试
2. 通过手绘UI图生成iOS和安卓代码的过程
3. 代码优化和维护性的提升建议

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

前言

2 月 24 日 Anthropic 发布了 Claude 3.7 sonnet，之前使用 claude 3.5 sonnet 的时候就很惊艳，所以迫不及待的想试一下 claude 3.7 sonnet 的效果。

正文

测试方法

提供一张手绘的 UI 图给 Claude 3.7 sonnet，让它生成对应的代码。这里分别让他生成 iOS 和安卓的代码。 iOS 选择了 SwiftUI，安卓选择了 kotlin + compose 。

手绘 UI 图

手绘图如上图，想要的效果就是左侧是消息列表，右侧是对话的详情页。

iOS 测试效果

第一轮会话

问：上传图片后，告诉 claude 根据这张 UI 图，用 SwiftUI 实现这个 UI 。

claude 实现了这个 UI，左侧是列表，右侧是对话。列表和对话完全没有关系，就是按照 UI 图写了界面。

第二轮会话

问：实现的不好，我希望是使用导航栏的形式。左侧是列表页，点击左侧的某一项，右边会打开详情页展示详细内容。

claude 确认了需求，基于导航栏的主从式布局，使用NavigationSplitView实现了UI，列表和详情页也有了对应关系。

第三轮会话

问：我希望 detailview里的数据都是从外面带过来的，比如 name1 、 name2和具体的聊天内容都是在打开页面时带进来。

claude 确认了需求你希望DetailView能够接收外部传入的数据。我们可以修改代码，让DetailView接收更多参数，包括消息数据。
实现了detailView 接收数据的能力，并且自定义了isFromCurrentUser属性来区分消息是否是我发送的，另外还增加了如果聊天选项没有消息，会显示“暂无消息”提示。

第四轮会话

问：所有的代码都在同一个文件里可维护性和可读性都不高，帮我分一下文件。
ps：之前 claude 回答的代码都是在同一个文件里，所以想分一下文件。
claude 分了 Models.swift 、 MockData.swift 、 MessageBubble.swift 、 ChatListView.swift 、DetailView.swift、MessageInputView.swift、ContentView.swift、ChatApp.swift。

第五轮会话

问：做的非常好，我还需要进一步完善 app 的功能。在输入框里输入内容点击发送后，输入的内容需要在界面上展示出来，这个消息属于当前用户的消息。
claude 增加了 ChatViewModel.swift 来管理聊天状态，另外实现了消息发送、内容超过一屏自动滚动等逻辑。
有一个接口使用了 mac 14 或 iOS17 已经废弃的接口，有一个 warning，其他实现都很完美。

第六轮会话

问：我想增加一个缓存到磁盘的能力，发送的数据可以缓存到磁盘。这样下次再打开 app 时可以看到上次发送的内容。请帮我实现一下。
claude 增加了ChatStorage.swift来管理缓存，支持读缓存和写缓存。另外修改 Models.swift 支持 Codable 协议，方便进行 Json 编码和解码。

iOS 总结

claude 3.7 sonnet 编程能力确实挺好的，代码基本没有编译问题或逻辑出错，另外还能非常好的理解用户的需求，甚至没有描述的细节点都能帮你实现，比如没有对话内容时会显示暂无消息的提示。只需要一张手绘UI图，和 7 个会话就可以实现一个本地的聊天 app。真的是效率提升工具，后续只要能描述好需求就能直接实现代码了，未来写代码真的是一个非常低门槛的行业了。

安卓测试效果

第一轮会话

问：我现在想在安卓上实现这一套逻辑和 UI，你帮我转成安卓的代码试试，可以使用最新的 kotlin 语言来实现
claude 使用最新的 kotlin 语言和 Jetpack Compose UI 框架来实现，首先输出了项目结构，另外补充了每个文件的内容。应该是输出的内容太多了，输出 ChatListView.kt 后就没有内容了。

项目结构如下：
app/
├── src/
│ ├── main/
│ │ ├── java/com/example/chatapp/
│ │ │ ├── MainActivity.kt
│ │ │ ├── ui/
│ │ │ │ ├── theme/
│ │ │ │ │ └── Theme.kt
│ │ │ │ ├── ChatListView.kt
│ │ │ │ ├── DetailView.kt
│ │ │ │ ├── MessageBubble.kt
│ │ │ │ └── MessageInputView.kt
│ │ │ ├── data/
│ │ │ │ ├── models/
│ │ │ │ │ ├── ChatItem.kt
│ │ │ │ │ └── Message.kt
│ │ │ │ ├── MockData.kt
│ │ │ │ └── ChatStorage.kt
│ │ │ └── viewmodel/
│ │ │ └── ChatViewModel.kt

第二轮会话

问：请继续补充完整，detailview 、 messagebubble 、 messageInputView 都需要补充完整
claude 补充到 Theme.kt文件后又没了。估计是还是文件太长了导致。

第三轮会话

问：继续
claude 补充了 Theme.kt 、 build.gradle、AndroidManifest.xml、完整的项目结构。

app/
├── src/
│ ├── main/
│ │ ├── java/com/example/chatapp/
│ │ │ ├── MainActivity.kt // 应用入口点
│ │ │ ├── ui/
│ │ │ │ ├── theme/
│ │ │ │ │ └── Theme.kt // 应用主题
│ │ │ │ ├── ChatApp.kt // 主应用布局
│ │ │ │ ├── ChatListView.kt // 聊天列表视图
│ │ │ │ ├── DetailView.kt // 聊天详情视图
│ │ │ │ ├── MessageBubble.kt // 消息气泡组件
│ │ │ │ └── MessageInputView.kt // 消息输入组件
│ │ │ ├── data/
│ │ │ │ ├── models/
│ │ │ │ │ ├── ChatItem.kt // 聊天项数据模型
│ │ │ │ │ └── Message.kt // 消息数据模型
│ │ │ │ ├── MockData.kt // 模拟数据
│ │ │ │ └── ChatStorage.kt // 数据持久化
│ │ │ └── viewmodel/
│ │ │ └── ChatViewModel.kt // 视图模型
│ │ ├── res/ // 资源文件
│ │ └── AndroidManifest.xml // 应用清单
│ └── build.gradle // 模块级构建配置
└── build.gradle // 项目级构建配置

安卓总结

可能是因为输出的内容太多，输出的内容中断了两次。另外输出的build.gradle内容格式和我用 android studio 生成的格式不同，import 部分出错，导致使用了这些包的代码编译出错。自己解决这些编译问题花了不少时间。
claude 生成的是

implementation 'androidx.core:core-ktx:1.12.0'

android studio 自动生成的是

implementation(libs.androidx.core.ktx)

结论

claude 3.7 sonnet 确实很好用，理解能力、编码能力都有很大的提升，代码基本没有出现编译错误和逻辑错误的情况。只要我们能描述好需要做什么，它基本都能帮我们做好。
即使 claude 3.7 sonnet 已经非常强大，在使用时还是要注意一下几点：
1 、明确需求。清晰描述功能目标，最好使用 AI 最容易理解的语言来描述。
2 、代码安全。生成的代码可能存在安全漏洞，一定要自己检查好，还要确保代码不会暴露敏感信息。另外不要把自己公司的代码传给 AI，会造成公司代码泄露。
3 、测试和验证。不要完全相信 AI，一定要对 AI 生成的代码进行检查和测试。尤其是要测试边界条件和异常下的表现。
4 、性能优化。 AI 生成的代码可能只是实现了功能，对于性能可能无法保证，复杂的地方需要检查运行性能。
5 、代码风格。最好在代码生成之前就明确号代码的编写风格。