链载Ai

标题: 用通义灵码渐进式开发 0- [打印本页]

作者: 链载Ai 时间: 昨天 19:17
标题: 用通义灵码渐进式开发 0-

项目目标

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

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 17px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;visibility: visible;" class="list-paddingleft-1">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

核心诉求

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

提供用户友好的信息填写表单，页面框架计划用 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 会自动优化相关提示词，然后再让模型生成设计稿。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

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

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">
请根据以下设计原型，使用Vue3框架开发两个前端页面，并实现前后端分离架构：

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

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#项目说明文档

生成页面一，信息填报页面：

生成页面二，建议咨询页面：

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

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

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;line-height: 1.75em;visibility: visible;">

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

模型调用方式参考：

importosfromopenaiimportOpenAI
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

欢迎光临链载Ai (https://www.lianzai.com/)