作者：哑木
项目目标
0-1 完全通过自然语言交互 实现一个 AI 高考志愿填报系统，结合通义千问 AI 模型提供专业推荐。该项目旨在帮助高考学生和家长根据个人情况智能推荐合适的专业和学校，减少志愿填报的盲目性。
核心诉求
- 提供用户友好的信息填写表单，页面框架计划用 Vue3
- 基于 AI 模型提供智能专业推荐，模型计划用百炼，后端调用通过 Python 实现
- 展示专业详情（前景、薪资、需求等）
- 支持响应式设计，适配移动端访问
- 可选将用户数据存储到 Supabase 数据库
前置准备
1、开通 mastergo 企业版，否则报错无法获取 dsl。
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
3、灵码已经配置 supabase 相关的 mcpserver，并且添加有权限的个人访问令牌。
阿里云 supabase 的 MCP，配置参考
https://help.aliyun.com/zh/analyticdb/analyticdb-for-postgresql/user-guide/supabase-mcp-use-guide：
"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 },渐进式开发步骤
1、开通 mastergo 企业版，否则报错无法获取 dsl。
第一步：MasterGo AI 设计稿生成
基于 mastergo 提供的 AI 生成页面能力，生成前端设计稿。
提示词：学生可以输入自己的姓名、性别、身份证号、所在省份、高考分数进行提交。 模型可以基于输入的信息生成个性化的高考志愿填报建议及职业生涯规划。
mastergo 会自动优化相关提示词，然后再让模型生成设计稿。
第二步：通过灵码 mastergo mcp 工具进行前端设计稿还原
请根据以下设计原型，使用 Vue3 框架开发两个前端页面，并实现前后端分离架构：
1. 页面开发需求：
-
报考信息提交页面
mastergo 设计原型链接：
https://mastergo.com/file/167266857969601?fileOpenFrom=project\&page_id=M\&layer_id=1%3A0
功能要求：包含表单输入项（如姓名、身份证号、报考科目等），支持数据校验与提交功能。
-
报考建议页面
mastergo 设计原型链接：
https://mastergo.com/file/167266857969601?fileOpenFrom=project\&page_id=M\&layer_id=14%3A004
功能要求：展示个性化报考建议内容，支持从后端获取建议数据并渲染。
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 # 项目说明文档生成页面一，信息填报页面：
生成页面二，建议咨询页面：
第三步：用灵码 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 的数据库中。
效果：
运行的过程中，模型可能会自动修改已经生成好的前端页面，最后可以再做一次优化。
提示词：根据
https://mastergo.com/file/167266857969601?fileOpenFrom=project\&page_id=M\&layer_id=1%3A0，
https://mastergo.com/file/167266857969601?fileOpenFrom=project\&page_id=M\&layer_id=14%3A004
两个设计稿优化两个前端页面的展示效果，要求布局和 mastergo 设计页面一致。
总结
协作亮点：
- 渐进式开发：从页面设计 → 前端实现（设计稿还原） → 后端实现（核心调用） → 功能优化（数据持久化），分阶段实现复杂需求。
- 上下文记忆：通义灵码自动关联前序对话中的变量和功能，无需重复说明。
- 版本管理：每轮对话生成代码快照，可随时回退或对比。
- 实时验证：每轮对话后可立即运行测试。
- 按需扩展：用户可选择优先实现最关心的功能。
通过这种分步引导的方式，即使没有编程经验的用户也能通过自然语言交互逐步构建完整项目。
协作关键点：
功能分步：每次只聚焦一个功能点明确反馈：当生成结果不理想时，可具体指出问题持续迭代：基于现有代码提出新需求样式优化：最后可要求优化 UI