From Zero to Pro: Generate Professional UI Prototypes in 3 Steps with Cursor+Claude3.7 (Templates Included)

Author: Eric Liang
Original Link: Original Article

---

As a full-stack engineer transitioning from backend to frontend development, I initially lacked UI prototyping skills. However, since the release of Claude 3.7, its frontend development capabilities and aesthetic sense have significantly improved compared to Claude 3.5, enabling direct generation of complete UI designs with Claude 3.7 and Cursor.

To understand the differences in frontend programming capabilities between Claude 3.7 Sonnet and Claude 3.5 Sonnet, refer to the GitHub repository and tutorial:

https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison

Using appropriate prompts, you can generate a complete set of UX prototype designs, as shown below:

The process is incredibly simple and can be completed in three steps. If you have Cursor, you can get started immediately:

1. Prepare the appropriate prompts (you can use the example prompts provided here and modify them as needed).
2. Use the Claude 3.7 Sonnet model in Ask mode (Chat mode in versions below 0.46) to make your query.
3. If the code context is too long, generate it in multiple segments and then combine them into a single HTML file.

Here are the detailed steps:

Step 1: Prepare the Prompts

You are a full-stack engineer with 20 years of UX design experience, specializing in UI design and product planning. Your task is to help a middle school student develop a "Pilates Fitness" iOS app.

Your goal is to produce a complete set of app prototypes to assist in subsequent development. Follow these principles:

• Simulate real-world scenarios and needs of users for a Pilates app.
• From a product manager's perspective, plan the app's features, pages, and interactions based on user needs.
• From a designer's perspective, deliver complete UI/UX designs.
• Use TailwindCSS for styling and Unsplash for images.
• All pages should be displayed within a single HTML file.

Step 2: Use Cursor + Claude 3.7 Sonnet in Ask Mode

If you use Edit mode initially, you may encounter interruptions due to the lengthy code context. Switch to Ask mode instead.

After switching to Ask mode, continue with your queries.

Step 3: Combine the Output

After interruptions, send several "continue" prompts to generate multiple HTML code segments. Copy and combine them into a single HTML file.

The entire process of generating UI prototypes is straightforward, and the aesthetic results are impressive.

Even without extensive functional descriptions in the prompts, Claude 3.7 can enrich the design independently. Adding more constraints to the prompts can better meet the requirements of complex projects.

For independent developers, this is a significant advantage, greatly improving efficiency while compensating for skill gaps across different domains.