Teach you to use AI programming tools to generate beautiful front-end pages

introductory

for what reason? AI Programming Tools The fundamental problem with generating front-end pages that look good and yours that don't is that these tools have designed a whole set of cue words for generating front-end pages that constrain all kinds of front-end specifications. These cue words are long...

Not only is the prompt word long, but generating the front-end page requires the output of many, many tokens... That's why you'll find a lot of tokens in the claude Official generation of complete front-end page code is often interrupted.

There are two problems to be solved to make AI generate beautiful front-end pages: generating the prompt words needed for front-end pages, and generating the complete front-end page code.

fulfill

1. Generate the prompt words needed by the front-end page

Introducing the first method, which doesn't require super-long cue words, but rather learning to lead questions and constraints

First round of cue words

As a front-end designer help product managers to come up with UI design specifications. You have to understand the user requirements described by the product manager in detail and adjust the design solution for the user requirements.
Please follow the following requirements: 1. modern and high-class front-end design 2. follow the design specification, focus on UI details and user experience 3. introduce Tailwind CSS CDN instead of writing style 4. use unsplash random images for images 5. avoid scrollbars in the interface

Second round of cue words

The core group is pet owners, and users use the product with the goal of purchasing toys and videos for their pets. Users will use the product on all devices. The main functional modules of the product are: home page (showing different pet categories and product categories), shopping checkout page, pet shopping list page, and user center. There is no special brand color requirement. The interface is multilingual. Users typically visit once a week. No special accessibility requirements for the product.

Note: In claude official website dialog, the output code may not be complete, you have to simplify the requirements, first get a typical page sample code, and then try to improve the complete web page code.

The second method, using clear textual cues or pictures as examples

For example, add the following UI style tip to the first tip word:

Or go to a UI design site and pick a page style you like, for example:

This part does not show the effect of the generated front-end page, put in the next part of the demonstration.

2. Complete generation of front-end page code

Don't add a line directly to the chatgpt or Claude to try to generate the full front-end code, their output is not long enough and they are unable to build multi-layered project code. That's why we need to choose aAI Programming ToolsThe blot and the Cursor All good choices, but this time we'll try it with the potentially less effective Trea to gauge where the bottom line is.

1. First of all, there should be a complete project, do not need to care about whether it is beautiful or not, just need to be fully functional

Here I'll generate a random sample page

2. Let AI tools provide front-end optimization solutions

As a front-end designer help product managers to come up with UI design specifications. You have to understand the user requirements described by the product manager in detail and adjust the design solution for the user requirements.
Please follow the following requirements: 1. modern and high-class front-end design 2. follow the design specification, focus on UI details and user experience 3. introduce Tailwind CSS CDN instead of writing style 4. use unsplash random images for images 5. avoid scrollbars in the interface

Product Manager's Requirement:
Preference: Glassmorphism
Optimize page style: index.html

Don't generate code yet, just give me front-end style optimization suggestions

This round of conversation mainly references AI programming tool suggestions and does not require code changes, so switch to Chat mode conversation

The recommendations are as follows:

Based on the product manager's needs and an existing used car rental website, I'm here to offer some design optimization suggestions:

1. **Application of glass mimetic style**
- Change the search bar and vehicle cards to glass mimic effect, add background blurring and transparency
- Add subtle light effects and gradients to enhance the premium feel.
- Consider adding a glass glossy change in the hover state.

2. **Optimization of color scheme
- The current dark blue (#1e3a8a) is slightly heavy, suggest to use more modern gradient color instead.
- Consider using a violet-blue gradient, e.g. `from-indigo-500 to-purple-500`.
- The background can have a soft gradient and dynamic effects.

3. **Layout optimization
- Fix the search bar at the top for a hair glass effect
- Adopt grid layout for vehicle cards, but add irregular spacing to enhance visual interest.
- Consider using Masonry layout to make the card height adaptive.

4. **Interactive Experience Enhancement
- Add smooth hover animation to the card
- Add ripple effect when clicking
- Add micro-animation to search button

5. **Optimization of visual details
- Use unsplash high quality car images, consider fixed styles
- Add subtle background patterns or geometric shapes.
- Add appropriate shadow levels
- Fonts may consider more modern sans-serif fonts

6. **Responsive Design Suggestions
- Use Tailwind's responsive classes
- Keep the glass mimicry effect on mobile but reduce the blurriness
- Optimize touch area size

7. **Performance Optimization Suggestion**
- Use Tailwind's JIT mode
- Use lazy loading for images
- Consider using webp format images

8. **Accessibility considerations
- Ensure adequate color contrast
- Add appropriate ARIA tags
- Support keyboard navigation

3. Perform front-end style optimization

I give the following question
As a front-end designer help the product manager to come up with UI design specifications. You have to understand the user requirements described by the product manager in detail and adjust the design solution for the user requirements.
Please follow the following requirements: 1. Modern and premium front-end design 2. Comply with design specifications and focus on UI details and user experience 3. Introduce Tailwind CSS CDN instead of writing style styles 4. Use unsplash random images for images 5. Avoid scrollbars in the interface

Product Manager's Requirements:
Preference: Glassmorphism
Optimize page style: index.html

Front-end designers give the following advice:
{quoting advice given by AI programming tool}

Now start optimizing the front-end page

Effect:

There seems to be something missing...

1. style is not separated out (it is best to complete the first step in the tutorial style separation, and reduce the duplication of text and code, and then front-end style optimization, otherwise the amount of web page code will be too large to lead to the generation of an incomplete page, the quality of the front-end optimization will also be reduced)

2. In the prompt instruction "use unsplash random picture", this sentence did not take effect, resulting in missing pictures on the page to take up space. (Unsplash official call image rules have changed, the big model has not yet understood)

4. Overall tuning based on the above issues

First solve the problem of the amount of code on the page, for different characteristics of the project specific problem specific analysis

Fix the image placeholder issue, this time instead of calling unsplash we'll just use a background placeholder

The effect display (still seems ugly...)

Maybe this kind of website black and white minimalist style is better, upload the reference picture and re-generate the effect

5. Generate a style description file, other page design due to the design of the document

Experience Sharing

1. Use the AI programming tool based on Claude-3.7-Sonnet

2. Mr. into the back-end code, after the generation of front-end code

3. Retain the style note document

4. Do not optimize the UI directly in the complex project again, try to generate the UI scheme separately, the prompt word is as follows:

You are a full-stack engineer, proficient in both product planning and UI design.
I want to develop a "Meditation" iOS App, and need to output a complete set of app prototype diagrams, please follow the requirements below:
- Simulate the real scenarios and needs of real users using the meditation app;
- Simulate the real scenarios and needs of real users using the meditation app. Combine the user's needs with the product manager's perspective to plan the functions, pages and interactions of the app;
- Combined with the user requirements, take the product manager's perspective to plan the functions, pages and interactions of the APP; Combined with the product planning, take the designer's perspective to output the complete UI/UX;
- All the above pages are displayed in the same html file.

5. Use more UI reference diagrams, provide some examples to prevent the generation of pages too ugly