Auto‑Generate Complete UI Prototypes with Claude 3.7 and Cursor

Comparison Overview

The public repository

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

contains source code and tutorials that compare the front‑end coding and aesthetic capabilities of Claude 3.5 and Claude 3.7. The author observed a noticeable improvement in UI prototype generation with Claude 3.7.

Prompt Example

You are a full‑stack engineer with 20 years of UX experience. Your task is to help a middle‑school user create a “Fitness Pilates” iOS app. Follow these principles: Simulate realistic user scenarios for a Pilates‑type app. Plan features, pages, and interactions from a product‑manager perspective. Deliver full UI/UX designs from a designer’s viewpoint. Use Tailwind CSS for styling and Unsplash for images. Present all pages within a single HTML file.

Workflow Steps

Prepare the prompt (the example above can be used as a baseline and modified as needed).

In Cursor’s Ask mode (Chat mode for versions ≤ 0.46), query Claude 3.7 Sonnet with the prepared prompt.

Because the generated code can be lengthy, repeatedly send “continue” until the entire HTML is produced, then copy all fragments into one HTML file.

Result and Recommendations

The process yields a functional, aesthetically pleasing UI prototype contained in a single HTML file that incorporates Tailwind CSS and Unsplash images. The prototype can be further refined by adding more detailed constraints to the prompt, which helps Claude 3.7 handle more complex projects.

The approach dramatically speeds up UI creation for developers transitioning from back‑end to front‑end work, effectively bridging skill gaps.