本项目为一款以二十四节气「小暑」为主题的纯前端互动 H5,面向 GLM 模型前端能力展示场景进行设计。作品以夏日冷饮调制为核心交互,将节气氛围、随机客单、饮品搭配与结果生成结合,构建一个轻量但完整的互动体验。
在该项目中,用户会随机收到一张夏日客单,并根据客人的口味偏好与需求,依次选择杯型、冰块、饮品基底、果汁糖浆、烈酒、装饰和吸管,完成一杯专属冷饮的调制。出杯后,系统会从风味、颜色、摆盘和配方均衡度等维度生成评分、星级、饮品标题、顾客评价与分享海报,使交互结果形成可视化反馈。
This project is a pure front-end interactive H5 experience themed around Xiaoshu, one of the traditional Chinese solar terms. Designed as a demonstration of GLM’s front-end generation and interactive design capabilities, it uses summer drink-making as the core interaction and connects seasonal atmosphere, randomized customer orders, recipe selection, scoring logic, and result presentation into a complete lightweight experience.
In the project, users receive a randomly generated summer order and create a customized cold drink according to the customer’s taste preferences. The interaction guides users through a series of choices, including cup type, ice level, drink base, fruit juice or syrup, spirits, garnish, and straw. After the drink is served, the system evaluates the result from multiple dimensions, including flavor, color, presentation, and recipe balance, then generates a score, star rating, drink title, customer review, and shareable poster.
玩法上,项目以数据驱动的调饮系统为核心,构成可组合配方空间。每种液体包含风味向量与颜色信息,客单定义目标需求;系统据此评估并生成评分。
In gameplay, the project centers on a data-driven drink-making system that creates a combinable recipe space. Each liquid contains flavor vectors and color data, while each order defines the target requirements. Based on these inputs, the system evaluates the result and generates a score.


结果页承担体验的情绪收口:系统根据成品颜色生成海报调色板,并结合得分生成饮品标题、顾客口吻评价、祝福短句、星级评分和配方清单。用户可继续下一单,也可返回微调当前配方,形成“试错、优化、出片”的小游戏循环。
The result page closes the experience emotionally: the system generates a poster palette based on the drink’s final color, then creates a drink title, first-person customer review, blessing line, star rating, and recipe list according to the score. Users can move on to the next order or return to fine-tune the current recipe, forming a small game loop of testing, improving, and sharing.
*迭代重点
持续优化细节质感、色相明度、视觉氛围、页面布局和交互引导,让页面从粗略生成稿逐步变成更完整、更有设计感的成品。







