Minor Heat Summer Campaign

创意玩法构思 / 视觉交互设计 / AI 辅助落地 / 活动增长支持
2026.6

Creative Gameplay Ideation / Visual Interaction Design / AI-Assisted Implementation / Campaign Growth Support
Jun 2026
https://agentmore.chatglm.cn/shareFile/6a4c99cae575a90d967e7875

本项目为一款以二十四节气「小暑」为主题的纯前端互动 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.

视觉上采用“冷饮吧台”布局:左侧呈现今日客单,右侧为菜单式选料面板,中间实时生成 3D 饮品。杯体基于 Three.js 旋转体建模。

Visually, the page uses a cold-drink bar counter layout: the daily order is shown on the left, a menu-style ingredient panel sits on the right, and a real-time 3D drink is generated in the center. The cup is modeled with Three.js lathe geometry.

玩法上,项目以数据驱动的调饮系统为核心,构成可组合配方空间。每种液体包含风味向量与颜色信息,客单定义目标需求;系统据此评估并生成评分。

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.

*迭代重点
持续优化细节质感、色相明度、视觉氛围、页面布局和交互引导,让页面从粗略生成稿逐步变成更完整、更有设计感的成品。

迭代稿:杯体质感测试
迭代稿:西瓜角装饰测试
迭代稿:早期界面配色
迭代稿:今日菜单布局
迭代稿:装饰与吸管面板
迭代稿:出杯界面
迭代稿:结果卡片
迭代稿:分享海报