With the help of AI design tools, the generation speed of prototypes has been greatly improved, but how to make the prototypes produced by AI more advanced? This article will share 4 practical tips to help product managers optimize AI-generated UI designs, making prototypes not only efficient but also professional and aesthetically pleasing.
atPrevious article on the Requirements-> Prototype workflow, I shared how to use AI prototyping tools to quickly transform the requirements in my mind into preliminary visible and interactive prototypes.
However, if you try it, you will find that:Without specifying the UI style, AI-generated prototypes often converge in style and are not elegant enough.
For example, the following website homepage example:
Therefore, this article will share 4 practical tips and corresponding case templates to make AI-generated prototypes more elegant and have an eye-catching “sense of luxury”.
Without further ado, let’s get right in!
Tip 1: Use industry slang
In the past, I didn’t think much of the “industry slang”, but in the process of collaborating with AI, I found a lotIndustry terminology is a highly condensed essence, and one word can often replace a layman’s description for half a day, and one word is worth a thousand words.
Taking design style as an example, there are:
- Brutalist
- Memphis Style
- Claymorphism
- Vintage Paper
- Flat Design
……
The following is an example of creating an Einstein profile website to show the effects of different design styles.
It is recommended to use Lovable, Gemini 2.5, Cursor (Claude 3.7 for the model), etc., and the effect of choosing other models may not be good.
To achieve these three challenges, product managers will only continue to appreciate
Good product managers are very scarce, and product managers who understand users, business, and data are still in demand when they go out of the Internet. On the contrary, if you only do simple communication, inefficient execution, and shallow thinking, I am afraid that you will not be able to go through the torrent of the next 3-5 years.
View details >
My prompts are unified:
Please use {specific style (e.g., brutalism)} to create a Chinese profile of Einstein
1. Brutalist
Preview link:https://reurl.cc/nmXMon
Creation tool: Lovable
2. Memphis Style (Memphis)
Preview link:https://aiben.cc/memphis.html
Creation tool: Gemini 2.5
3. Claymorphism
Preview link:https://reurl.cc/rEX2N4
Creation tool: Lovable
4. Vintage Pape
Preview link:https://aiben.cc/vintagepape.html
Creation tool: Gemini 2.5
5. Flat
Preview link:https://reurl.cc/9Dy9Vj
Creation tool: Lovable
6. Summary
There are actually a lot of styles, and the above are just some examples. How to get more [industry slang]?
Here is a prompt word from the views of the great teacher Li Jigang:
Large models are getting stronger and stronger, knowing more and more, the “AI knowledge x I know” in the first quadrant is getting bigger and bigger, and Prompt tends to be “simply said”.
What is simply “what”? Core keywords.
“Ghibli style”, “Bento Grid”, “Knolling”…
The first person to say these “Magic Words” in the future will be the first to open up a new parameter space.
How can we know “these words”?
Two ideas:
1. The cliché “read more, see more, learn more”
2. Dig in the field you are engaged in, after all, no one knows yourself better than you
Tip 2: Accumulate high-scoring prompts
The design style terms mentioned in Tip 1 are like selecting “brush model” and “canvas material” for AI.
What if you really can’t say exactly what style you want? Then you need high-quality prompts for reference!
The following three prototypes and corresponding prompts are the integration of personal ideas and community high-scoring UI prompt frameworks for reference.
1. Elegant and simple APP
Creation tool: Cursor+Claude 3.7
Role: You are a senior front-end development engineer design
Style:
1. The perfect balance of elegant minimalist aesthetics and functionality;
2. The fresh and soft gradient color scheme is integrated with the brand color system;
3. Just the right blank design;
4. Light and transparent immersive experience;
5. The information hierarchy is clearly presented through subtle shadow transitions and modular card layouts;
6. The user’s gaze can naturally focus on the core functions;
7. Carefully polished rounded corners;
8. Delicate micro-interaction;
9. Comfortable visual proportions;
10. Accent color: choose according to the APP type;
Technical Specifications:
1. Single page size is 375x812PX with stroke, simulating mobile phone borders
2. Icons: Refer to icons in the online vector icon library (no icons should have background color blocks, baseplates, or outlines)
3. Images: Introduced in the form of links to open-source image websites
4. Styles must be imported into the tailwindcss CDN to complete the process
5. Do not display the status bar and time, signal and other information
6. Don’t show non-mobile elements, such as scrollbars
7. All text can only be used in black or white
Task:
This is an {XX (enter what you want to create)} APP.
The simulation product manager outputs detailed functional design, information architecture design, and outputs a set of UI design schemes based on {design style} and {technical specifications}.
Generate a UI.html file to put on all pages.
Now please generate the first 2 pages.
2. Bento Style Cards (Bento Grid)
Online preview address:https://aiben.cc/bentogrid.html
Creation tool: Cursor+Claude 3.7, the output code can be saved as a .html file and opened in a browser.
Design a modern, minimalist, high-end product launch page with a Bento Grid-style layout that compactly presents all key information on a single screen.
Content highlights: {Xiaomi Su7 Ultra}
Design requirements:
1. Use a Bento Grid layout: Create a grid of cards of different sizes, each containing a specific category of information, and the overall layout should be compact but not crowded
2. Card design: All cards should have obvious rounded corners (20px border radius), subtle shadow effects, and a slight upward floating effect when hovering
3. Color scheme: Use the dark technology scheme with gradient color as an accent color
4. Typography level:
– Large Bold Numbers/Headings: Use gradient colors to emphasize key data points and main headings
– Medium Size Headings: Used for card titles, clearly indicating the content category
– Small text: Supporting descriptive text is presented in gray
5. Content organization:
– Top row: Key announcements, product features, performance metrics, or key selling points
– Middle row: product specifications, technical details, functional characteristics
– Bottom row: Usage guide and conclusion/call to action
6. Visual Elements:
– Use simple icons to indicate each feature
– Progress bars or charts show comparison data
– Grid and card layouts create visual rhythm
-Labels display classification information in small capsules
7. Responsive Design: Pages should adapt to different screen sizes and maintain good readability on mobile devices Design style reference:
– The overall design style is similar to the product specification page on Apple’s official website – Use a lot of white space and clean visual elements
– Emphasize numbers and key features to reduce lengthy text – Use gradient colors to highlight important data
-Proper spacing between cards creates clear visual separation
Output format: HTML code
3. Exquisite CRM system
Online preview address: https://reurl.cc/lzXKoE
Creation tool: Lovable
Design a modern and professional Chinese Customer Relationship Management (CRM) system designed to help businesses efficiently manage customer information, track sales opportunities, and enhance customer interactions. The system needs to have a clean user experience (UX), minimal interface distractions, elegant spacing, and advanced UI details.
Core design requirements:
1. Visual Style:
Use calm and professional tones with modern sans-serif fonts such as Inter, Siyuan Black, Pingfang, or modern fonts like Söhne. The interface elements mostly use rounded corners and subtle shadow effects to create a sense of luxury and comfort.
2. User Experience:
Prioritize clarity of information, hierarchy of operations, and a smooth and calm user experience, referring to the design philosophy of tools like Linear or Superhuman. The overall pursuit of a sense of luxury and unique layout with Apple design style.
3. Language:
The system interface language is Chinese Simplified.
4. Summary
The space is limited, and the list is endless, and the key lies in daily accumulation and practice.
- Take the initiative to collect excellent cases:(way to AGI community, there are many excellent cases on twitter)
- Use large models for “reverse engineering”:Upload excellent design screenshots and let the AI try to replicate or generate corresponding prompts.
I am currently working on a product manager AI knowledge base, and I will organize all kinds of good prompts I have accumulated in the future.
Tip 3: Choose the UI framework skillfully
If you’re designing a complete prototype that needs to have a consistent style across pages/modules, then I recommend using a UI framework.
The UI framework provides a clear set of design specifications and components, thereby ensuring uniformity and professionalism in the prototype style.
Therefore, you can declare the selected UI framework in the prompt to AI, such as:
Please use {UI framework (e.g., shadcn/ui)} to build a dashboard for the backend management system.
There are many excellent UI frameworks in the industry, and here are 3 of them that are easy to use.
1. shadcn/ui
Website:https://ui.shadcn.com/themes
Analogy: Designer custom-madeLook and feel: Known for its minimalist and modern design style, especially its default basic black and white color scheme, simple but not simple!
Applicable scenarios: Suitable for projects that require a highly customized interface and pursue a minimalist and modern design style, such as personal portfolios, start-up products, etc. My own personal website is built on this UI, and if you are interested, you can click to view it (www.aiben.cc）
2. Daisy UI
Website:https://daisyui.com/theme-generator
Analogy: Fashion FMCG-themed model
Perception:Offers a variety of preset themes in a variety of styles, covering a wide range of designs, from minimalist to vintage.You can try it in the theme generator on its official website, and after finding a topic you like, tell the AI the name of the topic, and the AI will follow this style to design.
Usage Scenarios: Suitable for projects that require rapid development and diverse topics, such as blogs, marketing pages, lightweight applications, etc
3. Ant Design
Website:https://ant.design/index-cn
Analogy: unified uniform of enterprises
Look and feel: Produced by Ant Group,Enterprise UI design language with a steady and professional style, emphasizing consistency and usability
Usage scenarios: Suitable for building enterprise-level applications, such as backend management systems, ERP systems, and other 2B/2G projects
4. Summary
“I want the product interface to be elegant and unique, fully reflecting my personal/brand tone”-> Consider shadcn UI
“We need to go live quickly with a version that looks good and then iterate”-> Consider daisyUI
“We are making a complex backend management system that needs a professional, stable and fully functional interface”-> Consider Ant Design
In addition to the above 3, there are many excellent UI frameworks/component libraries, if you are interested, you can explore it yourself~
Tip 4: Learn from open source templates and win at the starting line
If we want an interface that is almost 100% polished, it is efficient to use high-quality open source templates directly.
Where to find templates? I recommend the following 2:
1. HtmlRev
Website:https://htmlrev.com/
Advantages: Completely free, with a wide variety of templates (website homepage dashboard/application system/personal website, etc.), high quality, and ready to use out of the box.
Usage: Find what you like, download it and open it with Cursor, and you can start customizing and modifying!Specific modification techniques will be introduced in the subsequent Cursor sharing.
2. GitHub
Website:https://reurl.cc/1KzDqp
Advantages: The above URLs correspond to:The UI collection of mobile apps is of super high quality and very elegant！
Usage: The project provides UI images designed to enhance aesthetics and inspire. You can reproduce the image with tools such as Lovable/Cursor, or search for ready-made templates on GitHub, and consult AI for the search method :)
summary
OK, this article shares 4 practical tips to make your prototype more elegant:
- Tip 1: Use the slang of the design style industry, one word is worth a thousand words
- Tip 2: Accumulate high-scoring prompts and turn stones into gold
- Tip 3: Choose the UI framework cleverly and unify the style
- Tip 4: Learn from open source templates and win at the starting line
I hope these tips can help you better collaborate with AI and truly improve the quality and efficiency of your work!
Thank you for reading, and see you in the next issue!
