The coding ability of Claude 3.7 is indeed a huge improvement compared to Claude 3.5 and other models, unlocking some new possibilities. For example, you can now use two steps and extremely simple prompts to let Cursor complete the development of an interactive first version of an app: The first step is to let Cursor generate all the app interface prototypes. The second step is to let Cursor complete all interface development in agent mode based on the prototype. This two-step app generation strategy is actually inseparable from the capabilities of Claude 3.7. The core uses two points: 1. Claude 3.7's ability to generate prototypes is amazing. 2. Cursor agent mode + Claude 3.7's ability to complete tasks in multiple steps based on prototypes is amazing. Below are the specific steps and prompts. 👇
1/ Step 1: Create a new project file and generate an HTML prototype. You can refer to the prompts and modify them accordingly. I want to develop an AI-powered automated accounting app and need to output prototype images. Please help me design all the prototype images for the app using the following methods. 1. Consider the features users need from the AI accounting app. 2. As a product manager, plan these interfaces. 3. As a designer, consider the design of these prototype interfaces. 4. Use HTML to generate all the prototype interfaces on a single screen. You can use open-source icon libraries like FontAwesome to make the prototype look more polished and realistic. I want these interfaces to be ready for development. There are three key points: 1. Select the Claude 3.7 Sonnet model (thinking is not recommended). 2. Select Composer Normal mode, or Editor mode in version 0.46. Do not select Agent. Do not select Agent! 3. Because the HTML code file generated all at once can be very long, it may be truncated or fail to generate. Click on the failed code file. The cursor will prompt you to create the file and then copy the generated code to the newly created file. Then, use @ to request the cursor to complete the file.
2/ Step 2: Let Cursor create an app based on the prototype image. Create a new project in Xcode, and then open the root directory of the project in Cursor (if you have never developed an iOS project and don’t know how to do this step, you can watch my previous iOS app development video first). Send the app prototype image obtained above in the root directory of the iOS app development project opened by Cursor, and then ask: Please complete the design of this app based on the prototype image I provided. There are still three key points in this step: 1. Select the Claude 3.7 Sonnet model, you can try thinking or non-thinking. 2. Select agent mode, you must select agent! 3. In this process, just accept the generated code files continuously. After the creation is completed, if a bug occurs during Xcode debugging, you can copy the Xcode error prompt back to the cursor. It is recommended to use the thinking model to fix the bug scenario. During my test this time, there was a cursor generation error and an Xcode error in the two steps respectively. Everything else went smoothly, and the results obtained far exceeded my expectations.
Full text link:
I made another teachinyoutube.com/watch?v=P8uT6M…is ability more completely.