今天，我们使用 Qwen3-Coder × 通义灵码 的超强组合，从 0-1 实现一个 AI 应用——AI 调酒师项目实战开发。

这一次，我想带大家换一个轻松的角度，用通义灵码智能体做出一些真正有趣的事情。今天的案例叫做 AI 调酒师，它并不是什么高深复杂的系统，而是一个我们用零代码框架快速搭建，配合大语言模型服务，做出来的趣味应用。

通义灵码已经接入Qwen3-coder模型，免费不限量使用，欢迎大家体验。

一.本节效果展示

为什么要选这么一个项目来讲？因为我希望通过这个例子，和大家一起重新审视：

我们到底是怎么从一个想法，逐步把它变成一个可以真实运行的产品原型的。

我们要怎么在前端的页面搭建、后端服务调用和业务逻辑设计之间，找到那个能打通的路径？

更重要的是，作为一个开发者或者产品探索者，怎么养成把想法落地的习惯，而不仅仅是停留在“听听看”或者“做做看”的阶段。这节课，我们不仅会讲清楚这个 AI 调酒师是怎么做的，更会结合项目开发的过程，分享一些AI Coding 过程中实用的小技巧和开发习惯。

它既是对我们前两期课程的一个延伸，也是一次尝试——看看我们能不能在掌握工具的同时，真正把它用在创造有趣的事情上。接下来，就让我们一起从这个案例出发，走进应用开发的完整流程。

二.整体方案设计

本项目旨在打造一款面向酒吧场景的移动端 AI 调酒助手，融合通义灵码的 Qwen3-Coder 代码模型搭建能力与阿里云百炼的大模型服务，为用户提供趣味化、定制化的互动体验。

产品定位在于帮助用户通过灵感激发与智能推荐，探索专属的个性化饮品，鼓励用户参与、分享、互动，增强用户在酒吧环境中的沉浸感和社交体验。

设计风格倾向活泼可爱 + 极简灵动，参考 Apple SwiftUI、Notion、Vercel V0 设计语言，辅以 Bento UI 模块化交互，遵循 Tailwind CSS 规范，控制在不超过四种主题色的色彩体系内，适配 C 端移动端界面，整体风格具有轻社交感与可玩性。

1. 产品功能模块

640 (50).png

2. 技术架构

①.前端界面构建（由通义灵码智能体驱动）

通义灵码智能体主要负责前端开发任务，通过自然语言生成代码，实现高效界面构建和交互设计：

使用 HTML 为基础框架搭建页面结构；
采用 Tailwind CSS 实现响应式组件样式设计；
集成 Awesome Icon CDN 实现图标与动效效果；
实现页面的 UI布局、逻辑控制与交互响应。

②.后端服务调用（依托阿里云百炼能力）

通义灵码智能体同步生成后端逻辑，调用阿里云百炼平台提供的多种AI服务，实现智能交互与内容处理：

接入语音转文本服务，处理用户语音输入；
调用大语言模型实现内容自动生成与优化；
支持图片生成或调用接口，增强视觉交互能力。

③.服务部署与运行环境

当前课程项目主要聚焦功能实现与智能体能力演示，部署部分作为辅助学习讲解：

默认以本地服务运行为主；
若有部署需求，可考虑基于 Python Flask 框架快速搭建轻量级服务端应用，支持后续扩展。

3. 交互流程

用户打开App → 进入Page1欢迎页  
→ 点击语音按钮 → 实时转为文本 → 文本流式显示 → 用户确认/编辑  
→ 出现有无酒精选项 → 勾选 → 出现“去调制”按钮  
→ 点击后进入Page2 Loading动效（弹窗）  
→ 约15秒后，Page3结果卡片弹出，带生成酒名/故事/图片  
→ 用户可选择保存或再调制一次

640 (51).png

三.课程实操教程

3.1 场景设定与功能需求澄清

核心说明：用户通过语音或文本输入，表达个性化的需求
欢迎与点酒页设计与实现、完成首页的用户引导与输入功能，设计流畅的交互流程，激发用户表达

页面结构布局

顶部标题区：“通义灵码帮你调杯酒”
中部灵感引导区：左右滚动的灵感短语
底部语音输入按钮

语音输入与文本编辑逻辑

语音按钮初始展示，点击后进行识别
识别结果以流式文本展示，支持用户编辑
识别完成后，显示“是否含酒精”勾选项

确认与提交按钮的出现逻辑

只有在文本填写与勾选完成后，展示“去调制”按钮
引导用户流程式填写，避免信息不全

640 (52).png

系统通过大语言模型生成专属调酒建议与故事，结果以卡片形式展现，支持保存或继续调制，在处理过程中，需要给予一些有趣的内容进行loading交互，减少用户的等待时间。

底部弹窗样式实现

模仿 Apple Sheet 弹窗风格

圆角、半透明、占据底部空间

Loading动效与文案切换

酒杯摇晃emoji + 引导语（每几秒自动切换）

使用 Tailwind 动效类或自定义CSS

关闭逻辑

后端结果返回后自动关闭

最长等待时间设置（建议15秒）

阿里云的百炼大模型服务调用，实现前后端的数据交互与内容生成（简易版本可以不使用语音识别服务，可以直接使用浏览器自带的语音识别服务即可）

语音识别服务调用

通义灵码与百炼的API对接，返回识别文本，绑定前端

内容生成服务调用

设计Prompt和图像生成的应用工作流，控制生成风格与输出格式

后端与前端的数据绑定与展示

接口联调与测试

验证接口连通

确认输出结果符合预期

640 (53).png

结果呈现卡片设计与实现，呈现AI生成的结果，强化可视化与故事感，支持用户保存与复用操作。

卡片结构设计

酒名（突出显示）
调酒故事（正文）
图片展示（圆角，保持质感）

动效与过渡

使用向上弹出的弹性动效
出现后动作缓冲，避免突兀

行动按钮设计

保存到手机（调用保存/分享逻辑）
再调制一次（关闭当前卡片，回到首页）

3.2 UI前端搭建与交互设计实操

3.2.1 直接让通义灵码读取需求文档

本节统一处理所有页面的搭建与交互逻辑，采用通义灵码 + Tailwind CSS + Bento UI理念，通过组件化方式实现

✨ 需求文档提示词参考：

# 通义灵码 AI 调酒助手 UI 设计需求
> **设计要求**  
> - **设计风格**：Bento UI + Tailwind CSS + Awesome Icon  
> - **视觉调性**：极简、灵动、活泼、C端移动端优先  
> - **配色建议**：不超过 4 种主色，允许使用热烈色（🔥）作为点缀  
> - **参考风格**：Apple SwiftUI / Notion / Vercel V0  
---
## 通用规范
- 遵循 **Bento UI** 组件规范  
- 使用 **Tailwind CSS** 快速布局与样式  
- 引入 **Awesome Icon CDN** 图标集  
- 界面保持简约，注重动效与用户反馈  
- 适配 **移动端**，优先考虑小屏设备  
- 视觉色彩色值参考：
---
## 页面设计与交互逻辑
### 分镜 1 — 欢迎与点酒页  
**页面标题**  
> 通义灵码帮你调杯酒  
#### 功能与流程说明  
1. **语音输入 & 文本编辑**
   - 用户通过语音输入需求，系统转录为文本  
   - 转写完成后，用户可对文本进行二次编辑  
   - 语音识别按钮在识别完成后自动隐藏  
2. **信息引导机制**
   - 鼓励用户从多维度补充需求，例如：
     - 星座、性别、今日情绪、MBTI、江湖人称、生日、职业  
   - 语音识别后，展示「有无酒精」复选框（默认有酒精）  
3. **界面布局建议**
   - **顶部**：页面标题  
   - **中部**：灵感词汇，**左右缓慢流动的双行文本**  
   - **底部**：
     - 语音识别结果文本  
     - 语音输入按钮  
4. **提交逻辑**
   - 信息完整后，出现【去调制】按钮  
   - 点击按钮后，触发 Loading 动画  
---
### 分镜 2 — Loading 等待页  
**交互设计**
- 使用 **底部弹窗**，无需新开页面  
- **动画建议**：  
  - 摇晃的 🍷 Emoji  
  - 轻量有趣的加载动效  
- **等待时间**：约 15 秒  
**动态引导语（可轮播）**
- 通义灵码 AI 调酒师正为你精心调制  
- 正在增加魔法  
- 正在为你的饮品选择新鲜食材  
- 马上要完成调制  
- 正在为你的饮品增加故事  
- 正在为你的饮品故事选配照片  
---
### 分镜3 — 结果呈现页  
**结果展示**
- **卡片化输出**，从底部滑出，配合上滑弹出动画  
- 卡片内容包括：
  - 酒名  
  - 背后故事  
  - 推荐酒款图片  
**操作按钮**
- 【保存到手机】 — 一键保存当前卡片内容  
- 【再调制一次】 — 关闭结果卡片，返回首页  
---
## 设计提示  
- 动效尽量自然、细腻，避免突兀与堆砌  
- 推荐适当使用 **细节动画**（如卡片浮动、按钮反馈）  
- 借鉴 Apple / Vercel V0 / Notion 的 UI 动效节奏  
- 如需，我可协助输出：
  - 界面布局草图  
  - Tailwind 组件代码  
  - 动效设计建议  
---

640 (54).png

初版直接运行的结果是这样的（怎么样，在一轮提示词下，整体框架都已经成型了）：

640 (55).png

如果我们需要去调整样式的话，就需要我们不断的跟通义灵码进行多轮对话了，这个时间消耗过程相对来说还是比较久的，那该怎么办？当然有办法咯！可以让专门做设计的工具帮我先设计一个设计稿，然后我们再来直接优化！

3.2.2 使用MCP服务读取设计稿

在之前的课程里面，也有给大家介绍过MasterGo 这款设计工具，主要辅助大家在做前端视觉上有一个比较直观的交互体验打量工具，在投入正式研发过程之前，可以先确定好你的界面和用户功能逻辑会长啥样，下面会重新介绍一下MasterGo的MCP工具。

工具地址

在智能会话页面，您可通过以下两种方式进入MCP 服务页面。

方式一：单击欢迎语中的MCP 工具链接进入 MCP 服务页面。
方式二：单击右上角头像，并在下拉菜单中选择个人设置，然后在个人设置页面单击MCP 服务下的条形框。

640 (56).png

在MCP 广场页签，然后查找 MasterGo 设计写作工具，并单击安装。

640 (57).png

安装完成后单击编辑按钮，然后在弹出的修改 MCP服务页面。

在参数里面使用您的 MasterGo 个人访问令牌替换参数中的MG_MCP_TOKEN。

获取 MG_MCP_TOKEN 方法：

访问链接。
进入个人设置。
单击安全设置选项卡。
找到个人访问令牌，单击生成令牌。

配置完成后，开关默认打开状态，并且图标显示为绿色亮灯状态表示连接成功可正常使用。

切换智能会话为智能体模式，并在对话框中输入提示词。注意将提示词中的 URL 替换为您的实际设计稿地址，复制容器链接。

读取这个链接，直接根据这个mastergo的设计图直接生成纯html的前端代码
https://mastergo.com/goto/KTeDim8z?page_id=M&layer_id=1:2002&file=149338583767442

点击执行工具即可，你也可以勾选所有的MCP工具都默认执行。

当然了，在AI时代了，我们其实也不太需要自己从0-1开始画设计稿，我们不如看下这个功能，AI生成界面。

接下来再将我们之前的提示词给到AI生成界面功能，我们可以看到它生成的效果，注意要选中移动端，等待优化完成Prompt之后，点击确认生成就好啦，我们等待它的生成结果。

我们可以看到生成的结果了，如果你觉得合适，可以直接下载它的源代码直接放到通义灵码里面去修改交互的逻辑，如果样式还不满意，可以在右侧不断的美化优化整体的样式。

你也可以插入到画布中，直接使用我们上面说的MCP的方式进行读取设计稿，将设计稿链接直接给到通义灵码，然后基于设计稿在通义灵码上可以调整不同的代码语言或者交互逻辑、样式、数据处理等等内容。

3.3 构建大模型服务处理工作流

在前面的环节，我们已经搞定了前端页面和用户交互，接下来，咱们就要正式进入到 阿里云百炼，动手搭建这个 AI 调酒师背后的处理流程了。

阿里云百炼

其实，阿里云百炼的工作流就像是把不同的 AI 服务拼在一起，按顺序自动完成调酒的任务（生成文本+图），接下来，我们一起一步步来操作。

创建完成工作流之后，我们可以添加大语言模型节点，可以从开始节点中把相关变量的信息获取到，你可以单个进行区分，也可以全部放在一起，问题不大，下面以复杂的多个变量区分的示例。

参考提示词：

# 角色
你是一位专业的调酒师，擅长根据用户提供的信息和现有的调酒材料，创作出独一无二的鸡尾酒，并为其赋予灵魂。你需要结合用户的信息和特定风格（如武侠风格、阿里巴巴文化特色、浪漫、复古、朋克、自然主义等等），创作一段有故事背景的解说，并结合提供的原材料内容给出具体的制作方法。
## 技能
### 技能 1：调酒创作
- **任务**：根据用户提供的信息和现有调酒材料，设计一款独特的鸡尾酒。
- **输出结果**：生成一份包含酒名和故事背景的JSON结构。
### 技能 2：故事创作
- **任务**：为这款鸡尾酒创作一个有故事背景的解说，包括引子、调酒灵感来源、情感注入等。
  - **内容结构**：
    - **引子**：解释用户为何需要这杯酒。
    - **调酒灵感来源**：可以从星座、性格特质等方面入手。
    - **情感注入**：适合独饮还是朋友聚会。
  - **风格设定**：浪漫、复古、朋克、自然主义等。
  - **注意事项**：故事中不要直接透露用户的个人信息，但要与故事融合。
## 限制
- 故事背景必须与用户提供的信息相融合，但不能直接透露用户的个人身份信息。
- 风格设定需符合用户的需求，如浪漫、复古、朋克、自然主义等。
- 输出结果必须是JSON格式，包含酒名和故事背景。
## 示例输出:
{
  "name": "这里是酒的名称",
  "story": "这里是故事解释",
  "make":"这里是制作酒的配方和材料方法"
}
请确保所有创作内容都符合上述要求，并且故事背景具有创意和吸引力。

如果我们需要给调制出来的酒进行配图，我们可以使用图像生成组件，在此之前，我们可以先用一个大模型组件节点来设计图像生成的提示词。

参考图像生成的提示词：

# 角色
你是一位鸡尾酒绘画创作大师，擅长根据提供的故事内容创作出富有创意和表现力的鸡尾酒插图。你的作品不仅能够捕捉故事的核心情感，还能通过视觉元素传达出鸡尾酒的独特风味和氛围。
## 技能
### 技能 1：理解故事内容
- 深入理解提供的故事背景、情感基调和主要情节。
- 识别故事中的关键元素和象征意义，为后续绘画创作提供灵感。
### 技能 2：生成绘画关键词
- 根据故事内容提炼出与鸡尾酒相关的绘画关键词，包括但不限于色彩、形状、纹理、装饰物等。
- 使用逗号分隔关键词，确保关键词简洁且具有代表性。
### 技能 3：绘制鸡尾酒插图
- 利用生成的关键词进行创意构思，绘制出符合故事氛围和情感的鸡尾酒插图。
- 确保插图在视觉上吸引人，并能够准确传达故事的情感和主题。
## 限制
- 仅根据提供的故事内容进行创作，不得引入无关的信息或元素。
- 绘画关键词必须简洁明了，避免冗长和复杂的描述。
- 绘画主体必须是一个鸡尾酒杯子，作为首个关键词。
- 插图应保持艺术性和创意性，但同时也要确保与故事内容的高度契合。
## 示例
假设故事内容是关于一个夏日海滩派对，你可以生成如下关键词：
```
夏日, 海滩, 派对, 鲜艳色彩, 水果装饰, 透明玻璃杯, 冰块, 椰子, 草帽, 阳伞
```
这些关键词将帮助你在绘制鸡尾酒插图时更好地捕捉故事的情感和氛围，直接输出最终的关键词即可。

然后我们再加上图像生成的MCP组件即可，不同小组件之间记得前后连接起来。

关于其他节点，本节课程中就不多阐述了，主要是用于提取关键字段信息用的，方便后续结构化展示结果。

对于阿里云百炼课程感兴趣的朋友，可以在知识库中搜索阿里云百炼一起看过往的共学课程，在此就不过多阐述了。

最后如果我们需要拿到对应的API信息，给到通义灵码构建的应用去使用。

3.4 通过通义灵码对接API服务

完成了以上大模型工作流服务的构建之后，我们其实可以直接把对应的工作流请求的 API 文档拿过来，在上节课过程里面，我们也给大家简单介绍过什么样快速的集成 API，其实只要把这个 API 和一些请求参数事例给到我们的通义灵码即可。

最后我们会得到这样的一份Markdown的api文档：

然后，把文档放到项目文件夹里，然后输入下面的提示词就完事！它就会自动读取、自动理解，我们需要一些调试的实践，整个过程会把项目代码生成好。

工作流应用的api文档说明参考：

我的应用id：05fdede1d3c64cfcabeb0***
DASHSCOPE_API_KEY：sk-1acc4a61aa8*****
请求示例 curl -X POST https://dashscope.aliyuncs.com/api/v1/apps/YOUR_APP_ID/completion
--header "Authorization: Bearer $DASHSCOPE_API_KEY"
--header 'Content-Type: application/json'
--data '{ "input": { "prompt": "你是谁？" }, "parameters": {}, "debug": {} }' YOUR_APP_ID替换为实际的应用 ID。
biz_params object （可选）
应用通过自定义变量、节点或插件传递参数时，使用该字段进行传递。具体使用方法请参阅传递自定义参数。
Java SDK中为bizParams。通过HTTP调用时，请将 biz_params 放入 input 对象中。 属性
user_prompt_params object （可选）
表示自定义提示词变量参数信息。用于传递在提示词中插入配置的变量。
使用步骤：
在智能体应用内配置自定义变量并在提示词中引用，然后发布应用。
API调用通过此参数传递变量信息。
一个应用内的变量名不可以是重复的。 变量数量限制 10 个。超过十个只生效前十个。 示例：
biz_params ={ "user_prompt_params": { "date": "2025年03月03日", "city": "杭州" } }
我目前有自定义的变量是： birth（用户填入的出生年月日） name（用户的姓名信息） loc（用户当前的地理位置信息） job（用户的职位信息） alcohol（是否需要添加酒精，默认添加）
当前接口测试后返回的数据结果是： { "output": { "finish_reason": "stop", "session_id": "be64565cdd664e01b18ecbfecac15fa1", "text": "{"imgurl":{"isError":false,"content":[{"text":"{\"results\": [\"https://dashscope-result-wlcb-acdr-1.oss-cn-wulanchabu-acdr-1.aliyuncs.com/1d/75/20250709/7557d0da/6519e2d0-c934-4b82-b9d9-2e40666a5bc22996158545.png?Expires=1752150201&OSSAccessKeyId=LTAI5tKPD3TMqf2Lna1fASuh&Signature=MWpE90fOYwn2JCBKw4vkzFePbgM%3D\"], \"request_id\": \"7c4ac6e1-0872-4ce3-8d21-b9137ac0c636\"}","type":"text"}]},"name":"夜行墨客","make":"将30ml黑麦威士忌倒入古典杯中；加入15ml蓝橙力娇酒；再添入两滴黑巧克力利口酒。最后以一片柠檬皮轻挤油皮覆盖表面，点燃火枪轻轻炙烤边缘。","story":"在一座被时光遗忘的古城中，有一位神秘的夜行墨客，他身披黑袍，手握一卷失传已久的诗篇。他的身影总是在夜色中若隐若现，仿佛不属于这个世界。人们说，他在寻找一种能唤起尘封记忆的液体，那是用星辰、墨香与风之泪调和而成。"}" }, "usage": { "models": [ { "output_tokens": 240, "model_id": "qwen3-235b-a22b", "input_tokens": 442 }, { "output_tokens": 56, "model_id": "qwen3-235b-a22b", "input_tokens": 653 }, { "output_tokens": 78, "model_id": "qwen3-235b-a22b", "input_tokens": 277 }, { "output_tokens": 4, "model_id": "qwen3-235b-a22b", "input_tokens": 276 }, { "output_tokens": 55, "model_id": "qwen3-235b-a22b", "input_tokens": 276 } ] }, "request_id": "11255dad-d985-9a9c-a04f-a65bd006aea2" }

结合文档，加上这个“小咒语”，让通义灵码帮你去干活...

结合我的大模型使用的api文档，帮我把AI调酒师的文本输入处理逻辑，和最后请求返回的数据结果渲染到界面上的整条逻辑串联起来，使用真实的API进行处理。

最后实现的效果，咱们来看看，是不是非常的快？

接下来我们就可以不断的优化样式，让整个细节处理更符合你的诉求...期待看到大家不一样的作品！

帮我整体样式美化一下，我希望是通义灵码的紫色风格，带有苹果风格属性，另外需要增加底部弹窗的交互动画。

如果您有一些贴图/视频之类的素材内容，可以准备一个本地文件夹，把相关的物料准备在里面，这样可以让通义灵码直接去读取就可以自动关联，你也可以使用在线的网址图片进行引入（但是要注意图片是否为临时链接，是否会过期）。

样式优化完成之后的效果：

3.5 服务端快速优化（可选）

如果我我们想要实现服务端的逻辑，也就是把这个项目能够部署到服务器上，然后可以让大家一起来访问，我们可以考虑使用 python 的 flask 这种轻量级的框架辅助大家快速的将项目跑起来，当然了，这里有非常多服务端的技术栈可以供大家选择，例如 node.js、java 等都可以，可以按照自己需求来优化。

这就需要我们在一开始设计整个项目的时候，要在需求和技术实现里面得先规划好，整体架构思维非常重要。

如果需要基于现在的项目去修改，其实核心提示词也就一句话。

请你帮我把项目改成前后端分离的，使用python的flask技术框架，大模型的请求服务放到python中进行处理

修改之后的目录结构也会发生调整，如下：

通义灵码做的 AI 调酒师的应用已经在马老师的平头哥酒吧正式上岗，我们也远程看看酒吧发来的视频花絮。

3.6 通义灵码使用小技巧总结

通义灵码刚刚接入 Qwen3-coder 模型，效果目前是国内最好的代码模型，供大家使用，欢迎大家体验。

Rules 全局规则设计

设置全局的 Rules，比如说偏好什么代码语种，什么语言，什么设计主题、适合什么 MCP、引用哪里的图片等等，这样可以辅助接下来的对话中保持指令的遵循。

Readme 文档

做好修改记录的管理，可以加在 Rules 里面，让通义灵码有好的项目管理和编程习惯，这样每次代码更新之后，都会有一个记录可以同步给你。

结合代码片段提问

提问的时候，可以把对应的代码片段给到通义灵码，这样定位可以更精准，在前端样式修改/后端实现逻辑过程中都很实用。

长函数拆分

鼓励用 AI 做长函数/代码拆分，尤其是当函数职责不单一时，不要让它写在很长的一个代码文件里面，并不适合用户管理。

Github 版本管理

对于敏感逻辑（比如权限控制、支付模块），一定要手工检查，不要盲信补全，AI 的建议“看起来对”但可能有逻辑或语法有误，可以及时的做好 Github 的提交和版本管理。

说清楚需求文档

可以使用需求文档的方式，将你的诉求先讲清楚，如果需求文档写不来，可以让 thinking/reasoning 类模型先帮你去写好这个需求文档，你确认完成之后再开始让通义灵码进行开发。

四.本节课程总结

在今天的课程中，我们以“AI 调酒师”这个轻松有趣的案例，带领大家完整体验了一次从用户需求出发，到前端交互设计，再到大模型能力接入的应用开发流程。

这不仅仅是一次功能实现的练习，更是一次产品落地思维与技术实践的结合尝试。

我们一起探讨了如何通过通义灵码快速搭建可交互的前端页面，如何用阿里云百炼来驱动背后的大模型生成服务，以及如何用细节打磨交互体验，让用户在每一次点击、每一轮等待中，都能感受到设计的用心。

这次实操的意义，不止在于“做出一个 AI 应用”，而是希望让大家体会到：

好产品的背后，离不开场景的理解与用户体验的打磨
AI 工具可以成为创意的加速器，但创意的出发点依然在于人本身
无论是用智能体工具，还是接入大模型服务，掌握方法之后，才有真正的自由去创造

最后，我想留给大家一个思考：

如果这个 AI 调酒师是一个起点，你还能用同样的思路，为哪些行业、哪些场景，设计出属于你自己的 AI 应用？

期待在接下来的共学和赛事活动中，看到你们更多有想法、有温度的作品诞生。

MasterGo 个人访问令牌

创新大赛报名链接

AI 调酒师上岗！Qwen3-Coder × 通义灵码完成 AI 调酒师项目实战开发