Trying to restore the liquid glass effect released by Apple last night Incidentally, compiled some prompts to help you generate web pages in this style using AI Below are the usage effects and prompts for several models 👇

## Master Zang's Apple liquid glass style web page prompts, copy and pay attention to the space in the link Based on the key information of Apple's WWDC2025 conference below, help me use the Bento Grid style visual design similar to Apple's conference PPT to generate a Chinese dynamic web page display, and quote the background image online. The background image is: https://i. ibb. co/xtN61cRf/Comfy-UI-Output-4-1.png ## The specific requirements for the web page are: 1. Use Bento Grid style visual design, the text color is white, the highlight text color is Apple's iconic gradient, and the card has a glass texture. The card does not need a dark background 2. Emphasize oversized fonts or numbers to highlight the core points. There are oversized visual elements in the picture to emphasize the key points, which contrast with the proportion of small elements 3. The web page needs to be responsive and compatible with larger display widths, such as 1920px and above 4. Mix Chinese and English, large Chinese fonts and bold, and small English characters as embellishments 5. Simple line graphics as data visualization or illustration elements 6. Use highlight colors to create a sense of technology, but do not fade different highlight colors 7. Data can refer to online chart components, Apache ECharts 5 (cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js) The style needs to be consistent with the theme 8. Use HTML5, TailwindCSS 3.0+ (introduced through CDN) and necessary JavaScript 9. Fonts refer to Google Font fonts 10. Icons refer to Font Awesome (use.fontawesome.com/releases/v... avoid using emoji as the main icon 11. Do not omit content points ## Card styles strictly refer to the following implementation method: CSS style: /* Container */.liquidGlass-wrapper { position: relative; display: flex; overflow: hidden; padding: 0.6rem; border-radius: 2rem; cursor: pointer; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}/* Hover effect */.liquidGlass-wrapper:hover { padding: 0.8rem; border-radius: 2.5rem;}/* Distortion layer */.liquidGlass-effect { position: absolute; z-index: 0; inset: 0; backdrop-filter: blur(3px); filter: url(# glass-distortion); }/* Tint layer */.liquidGlass-tint { position: absolute; z-index: 1; inset: 0; background: rgba(255, 255, 255, 0.25);}/* Gloss layer */.liquidGlass-shine { position: absolute; z-index: 2; inset: 0; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);}/* Content layer */.liquidGlass-text { position: relative; z-index: 3; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);} .liquidGlass-wrapper:hover .liquidGlass-text { transform: scale(0.95);}/* sub-item style */.menu-item { padding: 0.4rem 0.6rem; border-radius: 0.8rem; transition: all 0.1s ease-in;} .menu-item:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px);}

⚠️ Notes on using the prompt words: If you don't want a one-image flow, you can delete the part of the prompt words that says "try to show all content on one page". This style must have a background image. If not, the recognition will be greatly affected. It is recommended to add a dark background image. It is recommended to use Gemini 2.5 Pro first. DeepSeek R1 0528 can be used, but it cannot handle the distortion of the image at the back.