最佳实践2:用通义灵码以自然语言交互实现 AI 高考志愿填报系统

简介: 本项目旨在通过自然语言交互,结合通义千问AI模型,构建一个智能高考志愿填报系统。利用Vue3与Python,实现信息采集、AI推荐、专业详情展示及数据存储功能,支持响应式设计与Supabase数据库集成,助力考生精准择校选专业。(239字)

01项目目标

0-1 完全通过自然语言交互 实现一个 AI 高考志愿填报系统,结合通义千问 AI 模型提供专业推荐。该项目旨在帮助高考学生和家长根据个人情况智能推荐合适的专业和学校,减少志愿填报的盲目性。


核心诉求

  • 提供用户友好的信息填写表单,页面框架计划用 Vue3
  • 基于 AI 模型提供智能专业推荐,模型计划用百炼,后端调用通过 Python 实现
  • 展示专业详情(前景、薪资、需求等)
  • 支持响应式设计,适配移动端访问
  • 可选将用户数据存储到 Supabase 数据库

02前置准备


1、开通 mastergo 企业版,否则报错无法获取 dsl。


640 (7).png


2、灵码已经配置 mastergo 相关 mcpserver,并且添加有权限的个人访问令牌。

"@master/mastergo-magic-mcp": {
2      "command": "npx",
3      "args": [
4        "-y",
5        "@mastergo/magic-mcp",
6        "--token=个人token",
7        "--url=https://mastergo.com"
8      ]
9    }


个人 token

640 (8).png

3、灵码已经配置 supabase 相关的 mcpserver,并且添加有权限的个人访问令牌。

阿里云 supabase 的 MCP,配置参考

"supabase": {
2      "command": "npx",
3      "args": [
4        "-y",
5        "@aliyun-supabase/mcp-server-supabase@latest",
6        "--features=aliyun",
7        "--read-only"
8      ],
9      "env": {
10        "ALIYUN_ACCESS_TOKEN": "ACCESS_KEY_ID|ACCESS_KEY_SECRET"
11      }
12    },

03渐进式开发步骤

1、开通 mastergo 企业版,否则报错无法获取 dsl。

 第一步:MasterGo AI 设计稿生成

基于 mastergo 提供的 AI 生成页面能力,生成前端设计稿。

提示词:学生可以输入自己的姓名、性别、身份证号、所在省份、高考分数进行提交。 模型可以基于输入的信息生成个性化的高考志愿填报建议及职业生涯规划。

mastergo 会自动优化相关提示词,然后再让模型生成设计稿。

640 (9).png

640 (10).png

 第二步:通过灵码 mastergo mcp 工具进行前端设计稿还原


请根据以下设计原型,使用 Vue3 框架开发两个前端页面,并实现前后端分离架构:

1. 页面开发需求:

  • 报考信息提交页面
    mastergo 设计原型链接,功能要求:包含表单输入项(如姓名、身份证号、报考科目等),支持数据校验与提交功能。
  • 报考建议页面mastergo 设计原型链接,功能要求:展示个性化报考建议内容,支持从后端获取建议数据并渲染。

2. 前端实现要求:

  • 使用 Vue 3(推荐使用 Composition API + Vite 构建)
  • 页面组件化开发,结构清晰

3. 后端实现要求:

  • 使用 Python(推荐 FastAPI 或 Flask 框架)
  • 数据可暂存内存或使用简单文件存储(如 JSON),无需数据库

4. 其他要求:

  • 提供简要的运行说明(如启动前后端的命令)
  • 保证代码可读性与可维护性
  • 遵循标准开发实践(如 ESLint、Prettier 可选)

请生成完整的项目结构及核心代码文件,确保前后端可独立运行并完成基本交互。

提示词里强制要求前后端分离,灵码自动生成相关目录结构,并按照设计稿进行前端代码生成。

collegeApplication/
2├── frontend/                  # 前端项目
3│   ├── src/                   # 源代码目录
4│   │   ├── views/             # 页面组件
5│   │   ├── router/            # 路由配置
6│   │   ├── App.vue            # 根组件
7│   │   └── main.js            # 入口文件
8│   ├── package.json           # 前端依赖配置
9│   └── vite.config.js         # Vite配置文件
10├── backend/                   # 后端项目
11│   ├── controllers/           # 控制器层
12│   ├── services/              # 服务层
13│   ├── models/                # 数据模型
14│   ├── app.py                # 主应用文件
15│   └── requirements.txt      # 后端依赖配置
16└── README.md                 # 项目说明文档


生成页面一,信息填报页面:

640 (11).png


生成页面二,建议咨询页面:

640 (12).png

 第三步:用灵码 agent 模式进行后端模型对接代码编写

提示词:请使用 Python 编写一个后端服务,用于接收前端用户提交的报考信息,调用预训练模型进行推理处理,并将推理结果返回至前端“报考建议咨询页面”进行展示。

模型调用方式参考:

import os
from openai import OpenAI

client = OpenAI(
    api_key=os.getenv("DASHSCOPE_API_KEY"), # 如果您没有配置环境变量,请在此处用您的API Key进行替换
    base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
completion = client.chat.completions.create(
    model="qwen3-coder-plus",
    messages=[
        {'role': 'system', 'content': 'You are a helpful assistant.'},
        {'role': 'user', 'content': '请编写一个Python函数 find_prime_numbers,该函数接受一个整数 n 作为参数,并返回一个包含所有小于 n 的质数(素数)的列表。质数是指仅能被1和其自身整除的正整数,如2, 3, 5, 7等。不要输出非代码的内容。'}],
    )
print("="*20+"回复内容"+"="*20)
print(completion.choices[0].message.content)
print("="*20+"Token消耗"+"="*20)
print(completion.usage)

 第四步:对接 Supabase 数据库,将相关数据自动保存到数据库

提示词:将用户通过前端页面(如“报考信息提交页面”)填写的表单数据(例如:姓名、性别、年龄、学历、专业、报考类别等),通过后端服务安全地插入到 Supabase 的数据库中。

效果:

640 (13).png

640 (14).png


运行的过程中,模型可能会自动修改已经生成好的前端页面,最后可以再做一次优化。

提示词:根据[1],[2]两个设计稿优化两个前端页面的展示效果,要求布局和 mastergo 设计页面一致。

04总结

协作亮点:

  • 渐进式开发:从页面设计 → 前端实现(设计稿还原) → 后端实现(核心调用) → 功能优化(数据持久化),分阶段实现复杂需求。
  • 上下文记忆:通义灵码自动关联前序对话中的变量和功能,无需重复说明。
  • 版本管理:每轮对话生成代码快照,可随时回退或对比。
  • 实时验证:每轮对话后可立即运行测试。
  • 按需扩展:用户可选择优先实现最关心的功能。

通过这种分步引导的方式,即使没有编程经验的用户也能通过自然语言交互逐步构建完整项目。

协作关键点:

功能分步:每次只聚焦一个功能点明确反馈:当生成结果不理想时,可具体指出问题持续迭代:基于现有代码提出新需求样式优化:最后可要求优化 UI

欢迎大家下载体验

相关文章
|
11月前
|
SQL 人工智能 关系型数据库
AI Agent的未来之争:任务规划,该由人主导还是AI自主?——阿里云RDS AI助手的最佳实践
AI Agent的规划能力需权衡自主与人工。阿里云RDS AI助手实践表明:开放场景可由大模型自主规划,高频垂直场景则宜采用人工SOP驱动,结合案例库与混合架构,实现稳定、可解释的企业级应用,推动AI从“能聊”走向“能用”。
1651 41
AI Agent的未来之争:任务规划,该由人主导还是AI自主?——阿里云RDS AI助手的最佳实践
|
11月前
|
人工智能 自然语言处理 安全
AI助教系统:基于大模型与智能体架构的新一代教育技术引擎
AI助教系统融合大语言模型、教育知识图谱、多模态交互与智能体架构,实现精准学情诊断、个性化辅导与主动教学。支持图文语音输入,本地化部署保障隐私,重构“教、学、评、辅”全链路,推动因材施教落地,助力教育数字化转型。(238字)
1852 23
|
11月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
1077 11
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
拔俗当AI成为你的“心灵哨兵”:多模态心理风险预警系统如何工作?
AI多模态心理预警系统通过融合表情、语调、文字、绘画等多维度数据,结合深度学习与多模态分析,实时评估心理状态。它像“心灵哨兵”,7×24小时动态监测情绪变化,发现抑郁、焦虑等风险及时预警,兼顾隐私保护,助力早期干预,用科技守护心理健康。(238字)
462 1
|
11月前
|
人工智能 算法 数据安全/隐私保护
拔俗AI多模态心理风险预警系统:用科技守护心理健康的第一道防线
AI多模态心理风险预警系统通过语音、文本、表情与行为数据,智能识别抑郁、焦虑等心理风险,实现早期干预。融合多源信息,提升准确率,广泛应用于校园、企业,助力心理健康服务从“被动响应”转向“主动预防”,为心灵筑起智能防线。(238字)
993 0
|
11月前
|
存储 人工智能 搜索推荐
拔俗AI助教系统:基于大模型与智能体架构的新一代教育技术引擎
AI助教融合大语言模型、教育知识图谱、多模态感知与智能体技术,重构“教、学、评、辅”全链路。通过微调LLM、精准诊断错因、多模态交互与自主任务规划,实现个性化教学。轻量化部署与隐私保护设计保障落地安全,未来将向情感感知与教育深度协同演进。(238字)
1328 0
|
11月前
|
机器学习/深度学习 人工智能 搜索推荐
拔俗AI学伴智能体系统:基于大模型与智能体架构的下一代个性化学习引擎
AI学伴智能体系统融合大模型、多模态理解与自主决策,打造具备思考能力的个性化学习伙伴。通过动态推理、长期记忆、任务规划与教学逻辑优化,实现千人千面的自适应教育,助力因材施教落地,推动教育公平与效率双提升。(238字)
1300 0
|
11月前
|
数据采集 人工智能 运维
拔俗AI数据治理大模型系统:用“智能大脑”管好企业数据家底
AI大模型正重塑企业数据治理:通过语义理解打破数据孤岛,自动化规则生成提升效率,智能分类分级强化安全,并以AI智能体实现主动运维。这一体系将传统治理升级为高效、动态的智能基础设施,释放数据价值。
609 0
|
12月前
|
分布式计算 测试技术 Spark
科大讯飞开源星火化学大模型、文生音效模型
近期,科大讯飞在魔搭社区(ModelScope)和Gitcode上开源两款模型:讯飞星火化学大模型Spark Chemistry-X1-13B、讯飞文生音频模型AudioFly,助力前沿化学技术研究,以及声音生成技术和应用的探索。
949 2

热门文章

最新文章