Generate Complete Multi‑File UI Prototypes with One Prompt Using Claude 3.7 and Cursor

Background

In late February Anthropic released the Claude 3.7 model, which shows strong performance on coding and front‑end tasks. The author tested the model by generating a multi‑page UI prototype for a fitness‑pilates iOS app using the Cursor AI editor.

Problems with the Initial Approach

All generated code was emitted into a single HTML file, making project organization difficult.

When using Cursor’s Agent mode the generation often stopped unexpectedly.

In Ask mode the user had to repeatedly click “continue” and manually concatenate HTML fragments.

Adding new features or fixing bugs required editing many parts of the monolithic file.

Optimized Solution

The prompt was redesigned so that a single query to Claude 3.7 (via Cursor’s Agent mode) produces a complete codebase consisting of multiple HTML files. This eliminates mid‑process interruptions and yields a ready‑to‑use UI prototype that is easier to maintain, especially for users without programming experience.

Core Prompt Template

你是一名精通 UI 设计和产品规划的全栈工程师，你的目标是完成一个"健身普拉提"iOS App 的开发。

你的核心任务是输出一套完整的APP原型图（HTML页面形式）来辅助后续的开发任务。

核心执行点：
- 明确功能与页面： 请你构思并确定"健身普拉提"App的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。
- 产品与UI/UX设计：
  - 以产品经理的视角规划APP的关键功能、页面流程和交互逻辑。
  - 以设计师的视角输出符合现代iOS App风格的、美观且用户友好的UI/UX。

技术规范：
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript（用于基础交互）。
- 图片素材请使用 Unsplash。
- 代码应简洁，注重可读性。

输出要求：
- 创建一个包含多个 HTML 页面的原型。
- 主页面命名为 index.html，它可以整合或跳转到其他页面。
- 非主页面 HTML 文件使用其对应的核心功能名称进行命名（英文，例如 courses.html, profile.html）。
- 每个页面均需采用 iOS App 的风格生成。
- index.html 中，每行展示两个主要功能模块的入口或页面预览。
- 所有输出（包括代码内注释和页面文本）永远用简体中文。
- 请以顶级 UX 的眼光和审美标准，创造令人满意的设计。

请直接开始设计并输出上述要求的 HTML 原型页面代码，从 index.html 开始，然后是其他你规划的核心功能页面。

Applicable Scenarios

Rapid Idea Validation : Quickly generate a visual draft when only a concept exists.

Efficient Prototype Production : The output includes a complete UI with basic interactive elements.

Client or Stakeholder Presentation : The generated HTML files can be served online or zipped for local browser viewing.

Results

The following screenshots show the fully generated multi‑page prototype with consistent iOS‑style UI, navigation links, and interactive components, all produced in a single AI‑driven query without manual stitching.