Conclusion of using Claude 3.7 Sonnet

Preface

On February 24, Anthropic released the Claude 3.7 sonnet. I was amazed by the Claude 3.5 sonnet I used before, so I couldn't wait to try the effect of the Claude 3.7 sonnet.

text

Test Method

Provide a hand-drawn UI diagram to Claude 3.7 sonnet and let it generate the corresponding code. Here, let it generate the code for iOS and Android respectively. SwiftUI is selected for iOS, and Kotlin + Compose is selected for Android.

Hand-drawn UI diagram

The hand-drawn picture is as shown above. The desired effect is that the left side is the message list and the right side is the conversation details page.

iOS test results

First round of conversation

Q: After uploading the picture, tell Claude to use SwiftUI to implement this UI based on this UI diagram.

Claude implemented this UI, with a list on the left and a conversation on the right. The list and the conversation have nothing to do with each other, he just wrote the interface according to the UI diagram.

Second round of conversation

Q: The implementation is not good. I hope to use the navigation bar. The left side is the list page. Click an item on the left side and the detail page will open on the right to show the detailed content.

Claude confirmed the requirements and implemented the UI using NavigationSplitView based on the master-slave layout of the navigation bar. The list and detail pages also had a corresponding relationship.

Third round of conversation

Question: I hope that the data in detailview are all brought in from outside, for example, name1, name2 and specific chat content are all brought in when the page is opened.

Claude confirmed the requirement that you want DetailView to receive external data. We can modify the code to allow DetailView to receive more parameters, including message data. The ability of detailView to receive data is implemented, and the isFromCurrentUser property is customized to distinguish whether the message is sent by me. In addition, if there is no message in the chat option, a "No message yet" prompt will be displayed.

Fourth round of conversation

Q: All the codes are in the same file, which is not maintainable and readable. Please help me to divide the files. ps: The codes in Claude’s answer are all in the same file, so I want to divide the files. Claude divided Models.swift, MockData.swift, MessageBubble.swift, ChatListView.swift, DetailView.swift, MessageInputView.swift, ContentView.swift, and ChatApp.swift.

Fifth round of conversation

Q: Very well done, I need to further improve the app's functions. After entering content in the input box and clicking send, the input content needs to be displayed on the interface. This message belongs to the current user. Claude added ChatViewModel.swift to manage the chat status, and also implemented logic such as message sending and automatic scrolling when the content exceeds one screen. There is an interface that uses an interface that has been abandoned by mac 14 or iOS17, and there is a warning. The other implementations are perfect.

Sixth round of conversation

Q: I want to add a cache to disk capability so that the sent data can be cached to disk. This way, the next time I open the app, I can see the content I sent last time. Please help me implement it. Claude added ChatStorage.swift to manage the cache, supporting read and write cache. In addition, Models.swift was modified to support the Codable protocol to facilitate Json encoding and decoding.

iOS Summary

claude 3.7 sonnet The programming ability is really good. There are basically no compilation problems or logical errors in the code. In addition, he can understand the user's needs very well, and can even help you implement the details that are not described, such as displaying a prompt that there is no message when there is no conversation content. You only need a hand-drawn UI picture and 7 conversations to implement a local chat app. It is really an efficiency-enhancing tool. In the future, as long as you can describe the requirements well, you can directly implement the code. In the future, writing code will really be an industry with a very low threshold.

Android test results

First round of conversation

Q: I want to implement this set of logic and UI on Android. Can you help me convert it into Android code? Can I use the latest Kotlin language to implement it? Claude used the latest Kotlin language and Jetpack Compose UI framework to implement it. First, the project structure was exported, and the content of each file was supplemented. It should be that there was too much content exported. After exporting ChatListView.kt, there was no content.

The project structure is as follows: 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

Second round of conversation

Q: Please continue to complete, detailview, messagebubble, messageInputView all need to be completed . After claude was added to the Theme.kt file, it disappeared again. I guess it’s because the file is too long.

Third round of conversation

Q: Claude continued to add Theme.kt, build.gradle, AndroidManifest.xml, and the complete project structure.

app/ ├── src/ │ ├── main/ │ │ ├── java/com/example/chatapp/ │ │ │ ├── MainActivity.kt // Application entry point│ │ │ ├── ui/ │ │ │ │ ├── theme/ │ │ │ │ │ └── Theme.kt // Application theme│ │ │ │ ├── ChatApp.kt // Main application layout│ │ │ │ ├── ChatListView.kt // Chat list view│ │ │ │ ├── DetailView.kt // Chat detail view│ │ │ │ ├── MessageBubble.kt // Message bubble component│ │ │ │ └── MessageInputView.kt // Message input component│ │ │ ├── data/ │ │ │ │ ├── models/ │ │ │ │ │ ├── ChatItem.kt // Chat item data model│ │ │ │ │ └── Message.kt // Message data model│ │ │ │ ├── MockData.kt // Mock data│ │ │ │ └── ChatStorage.kt // Data persistence│ │ │ └── viewmodel/ │ │ │ └── ChatViewModel.kt // View model│ │ ├── res/ // Resource file│ │ └── AndroidManifest.xml // Application manifest│ └── build.gradle // Module-level build configuration└── build.gradle // Project-level build configuration

Android Summary

It may be because there are too many output contents, and the output contents are interrupted twice. In addition, the output build.gradle content format is different from the format generated by Android Studio. The import part is wrong, which leads to compilation errors of the code using these packages. It took a lot of time to solve these compilation problems by myself. Claude generated

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

Android studio automatically generates

implementation(libs.androidx.core.ktx)

in conclusion

Claude 3.7 sonnet is really easy to use. It greatly improves the understanding and coding ability. There are basically no compilation errors and logical errors in the code. As long as we can describe what needs to be done, it can basically help us do it. Even though Claude 3.7 sonnet is already very powerful, you still need to pay attention to the following points when using it: 1. Clarify the requirements. Clearly describe the functional goals, preferably in the language that AI can understand most easily. 2. Code security. The generated code may have security vulnerabilities. Be sure to check it yourself and ensure that the code does not expose sensitive information. In addition, do not pass your company's code to AI, which will cause the company's code to be leaked. 3. Testing and verification. Do not trust AI completely. Be sure to check and test the code generated by AI. In particular, test the performance under boundary conditions and exceptions. 4. Performance optimization. The code generated by AI may only implement the function, and the performance may not be guaranteed. Complex places need to check the running performance. 5. Code style. It is best to clarify the writing style of the code before the code is generated.