最佳实践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

欢迎大家下载体验

相关文章
|
26天前
|
SQL 人工智能 关系型数据库
AI Agent的未来之争:任务规划,该由人主导还是AI自主?——阿里云RDS AI助手的最佳实践
AI Agent的规划能力需权衡自主与人工。阿里云RDS AI助手实践表明:开放场景可由大模型自主规划,高频垂直场景则宜采用人工SOP驱动,结合案例库与混合架构,实现稳定、可解释的企业级应用,推动AI从“能聊”走向“能用”。
750 38
AI Agent的未来之争:任务规划,该由人主导还是AI自主?——阿里云RDS AI助手的最佳实践
|
1月前
|
人工智能 监控 安全
提效40%?揭秘AI驱动的支付方式“一键接入”系统
本项目构建AI驱动的研发提效系统,通过Qwen Coder与MCP工具链协同,实现跨境支付渠道接入的自动化闭环。采用多智能体协作模式,结合结构化Prompt、任务拆解、流程管控与安全约束,显著提升研发效率与交付质量,探索大模型在复杂业务场景下的高采纳率编码实践。
321 26
提效40%?揭秘AI驱动的支付方式“一键接入”系统
|
28天前
|
存储 人工智能 搜索推荐
LangGraph 记忆系统实战:反馈循环 + 动态 Prompt 让 AI 持续学习
本文介绍基于LangGraph构建的双层记忆系统,通过短期与长期记忆协同,实现AI代理的持续学习。短期记忆管理会话内上下文,长期记忆跨会话存储用户偏好与决策,结合人机协作反馈循环,动态更新提示词,使代理具备个性化响应与行为进化能力。
281 10
LangGraph 记忆系统实战:反馈循环 + 动态 Prompt 让 AI 持续学习
|
26天前
|
机器学习/深度学习 人工智能 JSON
PHP从0到1实现 AI 智能体系统并且训练知识库资料
本文详解如何用PHP从0到1构建AI智能体,涵盖提示词设计、记忆管理、知识库集成与反馈优化四大核心训练维度,结合实战案例与系统架构,助你打造懂业务、会进化的专属AI助手。
162 6
|
1月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
218 11
|
1月前
|
人工智能 JSON 安全
Claude Code插件系统:重塑AI辅助编程的工作流
Anthropic为Claude Code推出插件系统与市场,支持斜杠命令、子代理、MCP服务器等功能模块,实现工作流自动化与团队协作标准化。开发者可封装常用工具或知识为插件,一键共享复用,构建个性化AI编程环境,推动AI助手从工具迈向生态化平台。
306 1
|
5月前
|
人工智能 IDE 定位技术
通义灵码 AI IDE 上线,第一时间测评体验
通义灵码 AI IDE 重磅上线,开启智能编程新纪元!无需插件,开箱即用,依托通义千问大模型,实现高效、智能的编程体验。支持 MCP 工具链,可快速调用多种服务(如12306余票查询、高德地图标注等),大幅提升开发效率。结合 Qwen3 强大的 Agent 能力,开发者可通过自然语言快速构建功能,如智能选票系统、地图可视化页面等。行间代码预测、AI 规则定制、记忆能力等功能,让 AI 更懂你的编码习惯。Lingma IDE 不仅是工具,更是开发者身边的智能助手,助力 AI 编程落地实践。立即下载体验,感受未来编程的魅力!
751 17
|
3月前
|
人工智能 IDE 开发工具
通义灵码 AI IDE使用体验(3)项目优化及bug修复
本文介绍了使用通义灵码 AI IDE进行项目重构与优化的全过程,涵盖页面调整、UI更新、功能修复等内容,并展示了多次优化后的成果与仍存在的问题。
332 0
|
人工智能 自然语言处理 IDE
通义灵码 AI IDE使用体验(1)项目初创
通义灵码 AI IDE上线,作为AI IDE的重度使用者怎能错过?本文详细体验了从安装到项目开发的全过程,界面友好,操作简便,支持智能问答、文件编辑、智能体三种模式。通过智能体方式快速开发项目,自动规划功能、管理环境,虽在复杂项目中仍有提升空间,但整体体验流畅,适合开发者尝试。
779 0
|
3月前
|
人工智能 IDE 开发工具
通义灵码 AI IDE使用体验(2)项目重构
本文介绍了如何使用灵码IDE将一个简单的CS架构项目重构为BS架构,涉及项目依赖修改、功能迁移、自动开发Web页面等内容,验证了灵码在复杂开发任务中的能力。尽管界面美观度不足,但核心功能已实现。
402 66

热门文章

最新文章