✨Our 1st birthday gift to you: $100 off with code ONEYEAR

Optimized ChatGPT Prompt for Web App Development

Web application development

ChatGPT

Intermediate

85/100

Original Prompt

Original Version

**Prompt for AI Development of Web Application for Conner88:**

**Objective:** Create a web application interface for Conner88 that allows users to submit their registration evidence and claim rewards.

**Specifications:**

1. **Homepage Layout:**
- Place the Conner88 logo prominently centered at the top of the page.
- Add a prominent confirmation button at the bottom center of the page.
- Include input fields for users to upload two images:
- Image 1: Slip of money transfer to the website.
- Image 2: Chat screenshot with the admin providing the username.
- Provide input fields for User and Password that were registered through the Conner88 admin via Line OA.

2. **Image Upload Functionality:**
- Upon image upload, animate the confirmation button to indicate it's clickable.
- Display a progress bar showing the percentage of the image upload (0% to 100%).
- Once the upload reaches 100%, trigger a popup notification stating "Data submitted successfully."

3. **Reward Claim Page:**
- Create a new page for users to claim their rewards.
- Include input fields for the user's full name.
- Display logos of major banks in Thailand for user selection.
- Add a field to enter the bank account number.
- Provide a confirmation button at the bottom of the form.
- Include a note stating: "*Note: The system will process the refund within 30 minutes."

**Final Output Requirement:**
Ensure the design is user-friendly, visually appealing, and responsive across various devices. Validate all user inputs and provide error messages where applicable.

Improved Prompt

Enhanced Version

**CONTEXT:** You are a web application developer tasked with creating a user-friendly interface for Conner88, designed for users to submit registration evidence and claim rewards.

**GOAL:** Your objective is to design and implement a web application that enables users to upload images and provide necessary information to claim rewards effectively.

**CRITERIA/REQUIREMENTS:**
- **Homepage Layout:**
- Center the Conner88 logo at the top of the page.
- Include a confirmation button at the bottom center.
- Add upload fields for two images: (1) Money transfer slip, (2) Chat screenshot with admin.
- Incorporate input fields for username and password as provided by the Conner88 admin.

- **Image Upload Functionality:**
- Animate the confirmation button upon image upload.
- Show a progress bar from 0% to 100% during uploads.
- Trigger a popup notification stating "Data submitted successfully" after upload completion.

- **Reward Claim Page:**
- Design a dedicated page for claiming rewards.
- Include fields for user’s full name and bank account number.
- Display logos of major banks in Thailand for user selection.
- Add a confirmation button at the bottom of the form.
- Include a note: "*Note: The system processes refunds within 30 minutes."

**RESPONSE FORMAT:**
Deliver a visually appealing and responsive design mockup that validates all user inputs, including relevant error messages where applicable.

**ADDITIONAL INFO:**
Focus on creating a seamless user experience that emphasizes clarity and responsiveness across devices.

Alternative Improvements

Alternative 1

**CONTEXT:** You are a UX/UI developer specializing in web applications for Conner88.

**GOAL:** Design a user-centric web application interface that facilitates registration evidence submissions and reward claims.

**CRITERIA/REQUIREMENTS:**
- **Homepage Layout:**
  - Prominently display the Conner88 logo at the top center.
  - Feature a central confirmation button at the bottom.
  - Include fields for uploading two images: money transfer slip and chat screenshot.
  - Provide username and password fields as given by Conner88 admin.

- **Image Upload Functionality:**
  - Animate the confirmation button during the upload process.
  - Implement a progress bar showing upload percentage.
  - Show a pop-up confirmation upon successful upload.

- **Reward Claim Page:**
  - Create a form for users to claim rewards.
  - Request full name and bank account number.
  - Include bank logos and a confirmation button.
  - Add a processing time note for refunds.

**RESPONSE FORMAT:** Deliver a detailed design proposal that ensures user-friendliness and error validation.

Alternative 2

**CONTEXT:** You are a full-stack developer creating a web application for Conner88.

**GOAL:** Build a functional web app that streamlines the process for users to submit their registration evidence and claim rewards efficiently.

**CRITERIA/REQUIREMENTS:**
- **Homepage Layout:**
  - Display the Conner88 logo at the top and center of the page.
  - Position a confirmation button prominently.
  - Set up fields for image uploads (transfer slip and chat screenshot). 
  - Include user credentials as specified by Conner88 admin.

- **Image Upload Functionality:**
  - Animate the confirmation button with image uploads.
  - Show a progress indicator for uploads (0% to 100%).
  - Provide a success pop-up message once the upload completes.

- **Reward Claim Page:**
  - Create a distinct page for reward claims.
  - Collect user's full name and bank details.
  - Display major Thai bank logos for selection.
  - Add a final confirmation button.
  - Include an important note on refund processing.

**RESPONSE FORMAT:** Submit a design draft that is aesthetically pleasing and responsive while validating inputs and providing feedback where needed.

Alternative 3

**CONTEXT:** You are a web interface designer focusing on usability for Conner88's application.

**GOAL:** Craft an intuitive web interface that encourages users to successfully submit their registration evidence and claim rewards.

**CRITERIA/REQUIREMENTS:**
- **Homepage Layout:**
  - Center the Conner88 logo prominently.
  - Feature a clear confirmation button at the bottom.
  - Provide two image upload fields: one for the transfer slip and another for the chat screenshot.
  - Include login details as provided by admin.

- **Image Upload Functionality:**
  - Include animation for the confirmation button post-image upload.
  - Implement a visual progress bar during uploads.
  - Confirm successful data submission with a popup.

- **Reward Claim Page:**
  - Navigate users to a dedicated reward claim page.
  - Fields for full name and bank number must be present.
  - Show major Thai banks’ logos.
  - Include a confirmation button, and an important note regarding refund timing.

**RESPONSE FORMAT:** Present a comprehensive mockup that addresses clear navigational paths and input validation.

About this Improvement

Summary

Enhanced structure and specificity for better results

Details

Revised the prompt to include clear context, a precise goal, specific criteria, and an actionable response format. Ensured that it adheres to best practices for prompt formulation, making it user-friendly and focused on the required output, while also maintaining the original intent.