DEV Community

wangcheng
wangcheng

Posted on

Cursor's High Fidelity UI Prototype Image

I want to develop a (Chinese App with XXX functions, etc.), now I need to output high-fidelity prototype drawings, please help me complete the prototype design of all interfaces in the following ways, and ensure that these prototype interfaces can be directly used for development

  1. User experience analysis: First analyze the user needs and main functions of this App, and determine the core interaction logic.
  2. Product interface planning: As a product manager, define key interfaces to ensure reasonable product function modules and information architecture. 3, high-fidelity UI design: As a UI designer, design close to the real iOS design specifications of the interface, the use of modern UI elements, concise style, so that it has a good visual experience.
  3. HTML prototype implementation: Use HTML+Tailwind CSS (or Bootstrap) to generate all prototype interfaces, and use FontAwesome (or other open source UI components) to make the interface more beautiful and close to the real App design. Split the code file to keep the structure clear: 5, each interface should be stored as a separate HTML file, such as home.html, profile.html, settings.html, etc.
  4. index.html is used as the main entry. Instead of directly writing the HTML code of all interfaces, these HTML fragments are embedded using the iframe mode, and all pages are displayed directly in the index page instead of jumping links.
  5. Photorealistic enhancement:
  6. The interface size should mimic the iPhone 15 Pro, and the interface should be rounded to make it more like the real phone interface.
  7. Use real UI images, not placeholder images (available from Unsplash, Pexels, Apple's official UI resources).
  8. Add a top status Bar (mimicking iOS status bar) and include an App navigation bar (similar to iOS bottom Tab Bar). Please follow the above requirements to generate the complete HTML code and ensure that it can be used for the development of the actual iOS App.

(Cue word template from "Kitten Fill light" creator - best practice for peanuts, this sentence does not need to be entered into cursor)

Top comments (0)