用通義靈碼漸進式開發 0->1 實現高考志愿規劃項目題文檔
作者：啞木
項目目標
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
浙公網安備 33010602011771號