Cursor + Claude 4 Automatically Generates APP Design Drafts, Eliminating the Need for Designers and Product Managers
Explore how to leverage Cursor and Claude 4 AI tools to automatically generate APP design drafts, achieving full-process automation from product design to UI design, improving development efficiency, and reducing reliance on human resources.
Cursor + Claude 4 Automatically Generates APP Design Drafts, Eliminating the Need for Designers and Product Managers
Author: giscafer
Original Link: Original Link
👤 Author: giscafer
🌐 Source: WeChat Official Account
If you are already a full-stack developer or have started learning full-stack development, AGI (Artificial General Intelligence) can help you transition into the role of a true full-cycle engineer. If you are currently a single-end developer (frontend or backend), AGI can also assist you in becoming an entry-level full-stack developer or an independent developer.
Full-Cycle Engineer: User + Product + Designer + Frontend Developer + Backend Developer + Test Engineer + DevOps + Operations.
A full-cycle engineer can also be considered an independent developer, capable of creating and launching products independently for monetization.
Prompt for Automatically Designing APP Prototypes:
## Role
You are a senior product manager, interaction designer, and UI designer.
## Task
The ultimate goal of this task is to generate a set of UI design drafts for a cross-platform LeekHub Stock APP. First, create a `task.md` file in the current project directory to list all pending tasks. Edit the `task.md` file to update the completion status of each task with ✅ as they are completed, proceeding in order until all tasks are marked as completed.
### Core Features
- Supports minimization
- Displays stock price fluctuations when hovering over the minimized window
## Pending Tasks
### Task 1: Product Feature Design
- Initial Information: I am your product design assistant. Please tell me what kind of product you want to develop.
- Analyze the user's input and ask for clarification on unclear details.
- Combine the answers from the clarification to form a detailed **[Product Design Document.md]** file.
### Task 2: Interaction Design
Based on the final features from {Task 1}, determine all the pages included in the product and output their information in the following example format.
**Example Format:**
``
<Page Name>
Purpose: <Primary function of the page>
Core Features: <List the main features of the page>
``
After outputting all page information, update the **[Product Design Document.md]**.
### Task 3: UI Design
- Based on the **[Product Design Document.md]**, and adhering to the {UI Design Style} and {UI Design Specifications} below, create an independent HTML file for each design draft.
After generating HTML files for all pages, pause the task and prompt the user to input the "Continue" command.
### Task 4: Prompt the User to Input the "Continue" Command
### Task 5: Create a UI.html File
- The overall background color of the UI.html page is `#f6f6f6`.
- Use iframe technology to arrange all pages in a grid within UI.html. Each iframe should have a fixed width of 400px and height of 850px, ensuring the complete display of each design draft without cropping or obstruction.
- The iframe background color is `#f6f6f6`.
### Task 6: Self-Check Code
Inspect each page's HTML file:
- Check: Force hide all scrollbars.
- Check: Design draft dimensions must be 375x812PX.
- Check: The status bar and title bar background colors must match (both can be transparent).
- Check: Icon and other style reference methods.
- Check: The bottom tab bar must be white with 100% opacity.
### Task 7: Inspect the UI.html File
Review all code in the UI.html file and remove any decorative elements outside the iframes. Each design draft already includes mock-up style code internally, so the iframes in UI.html should not contain mock-up styles. If present, remove them.
## UI Design Style
- Elegant minimalist aesthetics balanced with functionality.
- Soft gradient color schemes harmonized with brand colors.
- Appropriate use of whitespace.
- Light and immersive user experience.
- Clear information hierarchy through subtle shadow transitions and modular card layouts.
- Natural focus on core functionalities.
- Carefully crafted rounded corners.
- Subtle micro-interactions.
- Comfortable visual proportions.
- Standardized spacing.
## UI Design Specifications
1. Single design draft dimensions: 375x812PX, with mock-up phone styling.
2. Icons: Use icons from online vector icon libraries.
3. Images: Use links from Unsplash open-source image websites.
4. Styles must be implemented using `<link>` tags to import Tailwind CSS CDN.
5. Status bar displays simulated information like time and signal.
6. The status bar and title bar background colors must match (both can be transparent).
7. The bottom tab bar must be white with 100% opacity.
8. Use fixed heights to prevent container distortion.
## Notes
1. Mock-up colors must be black only.
2. Force hide all scrollbars in all HTML files.
Create a new README.md file, paste the above prompt description into it, and make adjustments as needed. Then feed it to Cursor Chat, selecting the Claude 4 Agent mode.
The Agent will ask for your ideas, and you can adjust the requirements accordingly. For demonstration purposes, we'll take a shortcut here:
Finally, static HTML code files are generated, which can be opened in a browser to view the results.
As shown above, each page is an independent file, and we need to open them separately to view the results. If there are many pages, this can be tedious. Therefore, we can ask the AI to generate a summary page to preview all page effects at once.
Task 5: Create a UI.html File
- The overall background color of the UI.html page is #f6f6f6.
- Use iframe technology to arrange all pages in a grid within UI.html. Each iframe should have a fixed width of 400px and height of 850px, ensuring the complete display of each design draft without cropping or obstruction.
- The iframe background color is #f6f6f6.
This way, opening UI.html provides a preview of all page effects.
At this point, the UI design drafts are complete. If any page is unsatisfactory, ask the AI Agent to make adjustments. After adjustments, proceed to the next step: generating frontend and backend code with AI, testing locally, and finally launching the product.
In the future, AGI will significantly improve efficiency and replace many jobs. Our task is to keep up with these changes, familiarize ourselves with the tools, and adapt our workflows.
The hardest part is failing to take action and refusing to learn about new developments...