1. 从一句自然语言到可运行页面中间到底缺了什么AI UI 生成系统听起来很酷输入“帮我做一个商品管理页”几秒后一个带搜索、表格、分页的 Vue3 页面就出现在浏览器里。但真正动手搭过的人都知道从自然语言到可渲染组件之间横着一条很深的沟。这条沟不是模型不够聪明而是提示词工程与组件设计之间缺少一套稳定的“翻译层”。我试过把用户输入直接丢给大模型让它返回 Vue 单文件组件代码。结果很惨有时返回的是 React 语法有时组件名对不上有时 props 结构完全跑偏前端根本没法解析。问题出在两点第一模型不知道你项目里到底有哪些组件、每个组件接受什么参数第二模型输出的格式每次都不一样前端没法写一个通用的渲染器。所以 AI UI 生成系统的核心不是“让 AI 写代码”而是“让 AI 输出一份前端能稳定消费的结构化配置”。这份配置要满足三个条件组件类型来自一个固定白名单、props 符合组件契约、整体结构能被校验器验证。做到这三点前端才能用一个动态渲染器把配置变成真实页面。而当你需要多模型切换时——比如用 Qwen 做意图理解、用 DeepSeek 做组件映射、用 Claude 做复杂布局规划——Key 管理立刻变成新的麻烦。每个模型一套 Key、一套 Base URL、一套调用格式代码里到处是 if-else。TaoToken 的统一 Key 就是来解决这个问题的一个 Key、一个入口背后按模型名路由到不同模型前端和后端代码不用为每个模型写适配层。这篇文章面向正在搭 AI UI 生成链路、需要多模型切换的开发者。我会给出 TaoToken 统一 Key 的 settings.json 配置骨架、提示词模板与组件映射表并完整演示一次从提示词到 Vue3 组件的可复现验证流程。你可以直接复制配置跑通整条链路。2. TaoToken 前置统一 Key 与 settings.json 配置骨架TaoToken 的定位是模型调用的统一入口。你不需要为每个模型单独申请 Key、单独记 Base URL只需要一个 TaoToken Key然后在请求里指定模型名即可。对于 AI UI 生成这种“意图理解用便宜模型、组件映射用强模型、布局规划用长上下文模型”的场景统一 Key 能省掉大量适配代码。先拿到 Key。访问 https://taotoken.net/api-keys 创建 API Key然后在控制台 https://taotoken.net/console 可以看到用量和模型列表。API 入口是 https://taotoken.net/api注意这个地址不带任何查询参数直接作为 Base URL 使用。接下来是 settings.json 配置骨架。这个文件放在项目根目录后端启动时读取前端不直接接触 Key。结构如下{ taotoken: { baseUrl: https://taotoken.net/api, apiKey: sk-your-taotoken-key, defaultModel: qwen-plus, timeout: 30000, retry: { maxRetries: 3, delayMs: 1000 } }, models: { intent: { model: qwen-turbo, temperature: 0.3, maxTokens: 800 }, componentMapping: { model: deepseek-chat, temperature: 0.2, maxTokens: 2000 }, layoutPlanning: { model: claude-3-5-sonnet, temperature: 0.4, maxTokens: 3000 } }, ui: { componentWhitelist: [ SearchBar, Table, Pagination, Form, Card, StatCard, Chart, Button, Input, Select ], maxComponentsPerPage: 12, defaultPageSize: 10 } }这里有几个设计点值得说明。models 字段把不同任务映射到不同模型intent 用轻量模型做意图识别componentMapping 用中等模型做组件选择layoutPlanning 用强模型做复杂布局。这样既控制成本又保证关键环节质量。componentWhitelist 是组件白名单提示词里会把它注入给模型模型只能从这个列表里选组件类型从源头杜绝“模型编造组件名”的问题。后端读取配置的代码// backend/config/loadConfig.js import fs from fs; import path from path; const configPath path.resolve(process.cwd(), settings.json); const raw fs.readFileSync(configPath, utf-8); const config JSON.parse(raw); export function getModelConfig(taskType) { const task config.models[taskType]; if (!task) { throw new Error(Unknown task type: ${taskType}); } return { baseUrl: config.taotoken.baseUrl, apiKey: config.taotoken.apiKey, model: task.model, temperature: task.temperature, maxTokens: task.maxTokens, timeout: config.taotoken.timeout }; } export function getUIWhitelist() { return config.ui.componentWhitelist; } export default config;注意 apiKey 不要硬编码在代码里生产环境用环境变量覆盖。settings.json 里可以写占位符启动时用 process.env.TAOTOKEN_API_KEY 替换。3. 可复制配置提示词模板与组件映射表配置骨架有了接下来是提示词模板。AI UI 生成链路里提示词不是一段固定文本而是由多个片段拼装而成系统角色、组件白名单、MCP 协议规范、输出格式约束、用户请求。我把它拆成三个模板分别对应意图识别、组件映射、布局规划。先看意图识别模板。它的任务是把用户自然语言转成一个结构化的意图对象不涉及具体组件。// backend/prompts/intentPrompt.js export function buildIntentPrompt(userInput, whitelist) { return { role: system, content: 你是 AI UI 生成系统的意图识别模块。 你的任务分析用户请求输出一个 JSON 意图对象。 可用组件白名单 ${whitelist.join(, )} 输出格式严格 JSON不要任何解释文字 { pageType: CRUD | Dashboard | Form | Detail, entities: [实体名1, 实体名2], operations: [search, create, edit, delete], fields: [ { name: 字段名, label: 显示标签, dataType: string | number | date | enum } ] } 约束 1. pageType 必须是四个枚举值之一 2. entities 至少一个 3. fields 至少三个且与 entities 相关 4. 不要输出组件名组件选择由后续模块负责 .trim() }; }这个模板的关键是“不要输出组件名”。很多系统失败的原因就是让一个模型同时做意图理解和组件选择结果模型在意图阶段就开始猜组件导致后续映射混乱。拆成两步每步职责单一稳定性大幅提升。第二个模板是组件映射。它接收意图对象输出组件配置数组。// backend/prompts/componentPrompt.js export function buildComponentPrompt(intent, whitelist, mcpSpec) { return { role: system, content: 你是 AI UI 生成系统的组件映射模块。 你的任务根据意图对象从组件白名单中选择组件并配置 props。 组件白名单 ${whitelist.join(, )} MCP 协议规范组件 props 契约 ${JSON.stringify(mcpSpec, null, 2)} 输入意图对象 ${JSON.stringify(intent, null, 2)} 输出格式严格 JSON { components: [ { type: 组件类型, props: { }, data: { } } ] } 约束 1. type 必须来自白名单 2. props 必须符合 MCP 协议中该组件的 props 定义 3. 组件顺序即页面从上到下的渲染顺序 4. 不要输出任何解释文字 .trim() }; }第三个模板是布局规划用于复杂页面。它接收组件数组输出布局结构。// backend/prompts/layoutPrompt.js export function buildLayoutPrompt(components) { return { role: system, content: 你是 AI UI 生成系统的布局规划模块。 根据组件列表规划页面布局。 组件列表 ${JSON.stringify(components, null, 2)} 输出格式 { layout: default | sidebar | topbar | grid, regions: [ { name: header, components: [0, 1] }, { name: main, components: [2, 3] } ] } 约束 1. layout 必须是四个枚举值之一 2. regions 中的数字是组件在数组中的索引 3. 每个组件必须被分配到恰好一个 region .trim() }; }三个模板拼起来就是完整的生成链路。接下来是组件映射表它定义了每个组件类型对应的 Vue3 组件文件和 props 契约。这张表是前端动态渲染的依据。组件类型Vue3 文件路径核心 props事件SearchBarcomponents/molecular/SearchBar.vuefields, loadingsearch, resetTablecomponents/molecular/Table.vuedata, columns, loading, actionsselection-change, actionPaginationcomponents/atomic/Pagination.vuetotal, pageSize, currentPagesize-change, current-changeFormcomponents/molecular/Form.vuemodel, rules, fieldssubmit, validateCardcomponents/atomic/Card.vuetitle, shadowclickStatCardcomponents/molecular/StatCard.vuetitle, value, trendclickChartcomponents/molecular/Chart.vuetype, data, optionsclickButtoncomponents/atomic/Button.vuetype, size, disabled, loadingclickInputcomponents/atomic/Input.vuemodelValue, type, placeholderinput, changeSelectcomponents/atomic/Select.vuemodelValue, options, multiplechange这张表要同时注入到提示词和前端渲染器。提示词里注入是为了让模型知道每个组件接受什么 props前端渲染器里注入是为了把配置映射到真实组件。两边用同一份数据源避免不一致。前端渲染器的核心逻辑// frontend/src/renderer/componentMap.js import { defineAsyncComponent } from vue; export const componentMap { SearchBar: defineAsyncComponent(() import(../components/molecular/SearchBar.vue)), Table: defineAsyncComponent(() import(../components/molecular/Table.vue)), Pagination: defineAsyncComponent(() import(../components/atomic/Pagination.vue)), Form: defineAsyncComponent(() import(../components/molecular/Form.vue)), Card: defineAsyncComponent(() import(../components/atomic/Card.vue)), StatCard: defineAsyncComponent(() import(../components/molecular/StatCard.vue)), Chart: defineAsyncComponent(() import(../components/molecular/Chart.vue)), Button: defineAsyncComponent(() import(../components/atomic/Button.vue)), Input: defineAsyncComponent(() import(../components/atomic/Input.vue)), Select: defineAsyncComponent(() import(../components/atomic/Select.vue)) }; export function resolveComponent(type) { const comp componentMap[type]; if (!comp) { console.warn(Unknown component type: ${type}); return null; } return comp; }到这里配置层就完整了settings.json 管模型和 Key三个提示词模板管生成链路组件映射表管前后端契约。接下来跑一次完整验证。4. 验证请求从提示词到 Vue3 组件的可复现流程验证流程分五步构造请求、调用 TaoToken、解析响应、校验 MCP 协议、前端渲染。每一步都有明确的输入输出方便你复现。第一步构造请求。用一段真实的用户输入“帮我生成一个商品管理页面包含商品名称、价格、库存、分类的搜索以及商品列表表格支持编辑和删除。”// backend/services/generatePage.js import axios from axios; import { getModelConfig, getUIWhitelist } from ../config/loadConfig.js; import { buildIntentPrompt } from ../prompts/intentPrompt.js; import { buildComponentPrompt } from ../prompts/componentPrompt.js; import { buildLayoutPrompt } from ../prompts/layoutPrompt.js; import mcpSpec from ../mcp/mcpSpec.js; const whitelist getUIWhitelist(); async function callTaoToken(taskType, messages) { const cfg getModelConfig(taskType); const response await axios.post( ${cfg.baseUrl}/v1/chat/completions, { model: cfg.model, messages, temperature: cfg.temperature, max_tokens: cfg.maxTokens }, { headers: { Authorization: Bearer ${cfg.apiKey}, Content-Type: application/json }, timeout: cfg.timeout } ); return response.data.choices[0].message.content; } export async function generatePage(userInput) { // 第一步意图识别 const intentPrompt buildIntentPrompt(userInput, whitelist); const intentRaw await callTaoToken(intent, [ intentPrompt, { role: user, content: userInput } ]); const intent JSON.parse(intentRaw); // 第二步组件映射 const componentPrompt buildComponentPrompt(intent, whitelist, mcpSpec); const componentRaw await callTaoToken(componentMapping, [ componentPrompt, { role: user, content: JSON.stringify(intent) } ]); const componentResult JSON.parse(componentRaw); // 第三步布局规划 const layoutPrompt buildLayoutPrompt(componentResult.components); const layoutRaw await callTaoToken(layoutPlanning, [ layoutPrompt, { role: user, content: JSON.stringify(componentResult.components) } ]); const layout JSON.parse(layoutRaw); return { page: { title: intent.entities[0] 管理, type: intent.pageType, layout: layout.layout, regions: layout.regions, components: componentResult.components } }; }第二步调用 TaoToken。上面代码里 callTaoToken 函数就是统一入口它从 settings.json 读取对应任务的模型配置拼成标准 OpenAI 兼容格式的请求发到 https://taotoken.net/api/v1/chat/completions。注意 Base URL 是 https://taotoken.net/api路径补 /v1/chat/completions。不同模型背后由 TaoToken 路由你的代码不用改。第三步解析响应。意图识别的返回大概是这样{ pageType: CRUD, entities: [商品], operations: [search, edit, delete], fields: [ { name: name, label: 商品名称, dataType: string }, { name: price, label: 价格, dataType: number }, { name: stock, label: 库存, dataType: number }, { name: category, label: 分类, dataType: enum } ] }组件映射的返回{ components: [ { type: SearchBar, props: { fields: [ { prop: name, label: 商品名称, type: input }, { prop: category, label: 分类, type: select } ] } }, { type: Table, props: { columns: [ { prop: name, label: 商品名称, minWidth: 150 }, { prop: price, label: 价格, width: 120 }, { prop: stock, label: 库存, width: 100 }, { prop: category, label: 分类, width: 120 } ], actions: [ { key: edit, label: 编辑, type: primary }, { key: delete, label: 删除, type: danger } ] } }, { type: Pagination, props: { total: 0, pageSize: 10, currentPage: 1 } } ] }第四步校验 MCP 协议。校验器检查每个组件的 type 是否在白名单、props 是否符合契约。// backend/mcp/validator.js import mcpSpec from ./mcpSpec.js; import { getUIWhitelist } from ../config/loadConfig.js; const whitelist getUIWhitelist(); export function validatePage(pageConfig) { const errors []; if (!pageConfig.title) errors.push(缺少页面标题); if (!pageConfig.type) errors.push(缺少页面类型); if (!Array.isArray(pageConfig.components)) { errors.push(components 必须是数组); return { valid: false, errors }; } pageConfig.components.forEach((comp, index) { if (!whitelist.includes(comp.type)) { errors.push(组件 ${index} 类型 ${comp.type} 不在白名单); return; } const spec mcpSpec.components[comp.type]; if (!spec) { errors.push(组件 ${index} 类型 ${comp.type} 缺少 MCP 定义); return; } for (const [key, def] of Object.entries(spec.props)) { const value comp.props?.[key]; if (value undefined) continue; if (def.enum !def.enum.includes(value)) { errors.push(组件 ${index} 的 ${key} 值 ${value} 不在枚举范围); } } }); return { valid: errors.length 0, errors }; }第五步前端渲染。动态渲染器接收 pageConfig按 regions 布局把每个组件配置映射到真实 Vue3 组件。!-- frontend/src/views/DynamicPage.vue -- template div classdynamic-page h1{{ pageConfig.title }}/h1 div v-forregion in pageConfig.regions :keyregion.name :classregion-${region.name} component v-foridx in region.components :keyidx :isresolveComponent(pageConfig.components[idx].type) v-bindpageConfig.components[idx].props searchhandleSearch actionhandleAction / /div /div /template script setup import { ref, onMounted } from vue; import { resolveComponent } from ../renderer/componentMap.js; const pageConfig ref({ title: , regions: [], components: [] }); async function loadPage() { const res await fetch(/api/page/generate, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ userInput: 帮我生成一个商品管理页面包含商品名称、价格、库存、分类的搜索以及商品列表表格支持编辑和删除。 }) }); const result await res.json(); if (result.success) { pageConfig.value result.data.page; } } function handleSearch(params) { console.log(搜索参数:, params); } function handleAction({ key, row }) { console.log(操作:, key, row); } onMounted(loadPage); /script跑通后你会看到页面标题“商品管理”顶部一个搜索栏带商品名称输入框和分类下拉中间一个表格带四列和编辑/删除按钮底部一个分页器。整条链路从自然语言到可交互 Vue3 页面全程没有手写组件代码。5. 本篇常见错排查链路跑通不代表每次都顺利。下面是我在实际项目里踩过的坑按出现频率排序。第一个坑模型返回的 JSON 带 markdown 代码块标记。很多模型习惯把 JSON 包在 json 里直接 JSON.parse 会报错。解决办法是在解析前做一次清洗function cleanJsonResponse(raw) { let text raw.trim(); if (text.startsWith()) { text text.replace(/^(?:json)?\n?/, ).replace(/\n?$/, ); } return text.trim(); }第二个坑组件 props 里的函数被序列化丢失。比如 Table 的 columns 里如果有 formatter 函数JSON 序列化后变成字符串前端渲染时调用会报错。解决办法是在 MCP 协议里约定formatter 用字符串表达式描述前端渲染时用 new Function 还原或者干脆不在配置里传函数改由组件内部根据字段类型自动格式化。第三个坑意图识别和组件映射的模型不一致导致字段名对不上。比如意图阶段输出 name组件阶段输出 productName。解决办法是在提示词里强制字段名透传组件映射模板里明确写“props 中的字段名必须与意图对象 fields 中的 name 完全一致”。第四个坑TaoToken 请求超时。复杂页面生成时布局规划模型可能超过 30 秒。解决办法是在 settings.json 里给 layoutPlanning 单独设更长的 timeout并在后端加重试async function callWithRetry(fn, maxRetries 3, delayMs 1000) { let lastError; for (let i 0; i maxRetries; i) { try { return await fn(); } catch (err) { lastError err; if (i maxRetries - 1) { await new Promise(r setTimeout(r, delayMs * (i 1))); } } } throw lastError; }第五个坑白名单更新后提示词没同步。组件白名单在 settings.json 里但提示词模板是启动时构建的。如果你在运行中改了白名单提示词不会自动更新。解决办法是把白名单读取放在每次请求时而不是模块加载时。第六个坑前端动态渲染时组件未注册。resolveComponent 返回 null 时Vue 会渲染一个空节点页面看起来“少了一块”但不报错。解决办法是在 resolveComponent 里加 console.warn并在开发环境把未知组件渲染成一个红色占位块方便定位。6. 多模型切换与长期编码的接入建议这套链路跑通后你会发现多模型切换是常态意图识别用便宜模型、组件映射用中等模型、布局规划用强模型未来还可能接入新的模型做特定任务。TaoToken 的统一 Key 让切换成本降到最低——改 settings.json 里的 model 字段即可代码不用动。如果你要长期维护这套系统建议把 API Key 管理独立出来。访问 https://taotoken.net/api-keys 创建和管理 Key在控制台 https://taotoken.net/console 查看各模型的调用量和费用。接入文档在 https://taotoken.net/doc里面有完整的请求格式和错误码说明。对于需要频繁调试提示词的场景可以用模型对话页面 https://taotoken.net/model-chat 直接测试提示词效果确认输出格式稳定后再写进代码。对于长期编码和 Agent 场景Coding Plan https://taotoken.net/coding-plan 提供了更稳定的调用配额适合把 AI UI 生成链路接入 CI 或自动化流程。整条链路的核心思路可以复用到其他 AI 生成场景把“生成”拆成“意图识别 → 结构映射 → 布局规划”三步每步用独立提示词模板每步输出都经过校验器验证前后端用同一份组件映射表做契约。这样无论底层换什么模型上层代码都稳如磐石。 揭秘 AI UI 生成系统背后的黑科技：用 TaoToken 统一 Key 打通提示词工程与 Vue3 组件设计（附完整代码）
1. 从一句自然语言到可运行页面中间到底缺了什么AI UI 生成系统听起来很酷输入“帮我做一个商品管理页”几秒后一个带搜索、表格、分页的 Vue3 页面就出现在浏览器里。但真正动手搭过的人都知道从自然语言到可渲染组件之间横着一条很深的沟。这条沟不是模型不够聪明而是提示词工程与组件设计之间缺少一套稳定的“翻译层”。我试过把用户输入直接丢给大模型让它返回 Vue 单文件组件代码。结果很惨有时返回的是 React 语法有时组件名对不上有时 props 结构完全跑偏前端根本没法解析。问题出在两点第一模型不知道你项目里到底有哪些组件、每个组件接受什么参数第二模型输出的格式每次都不一样前端没法写一个通用的渲染器。所以 AI UI 生成系统的核心不是“让 AI 写代码”而是“让 AI 输出一份前端能稳定消费的结构化配置”。这份配置要满足三个条件组件类型来自一个固定白名单、props 符合组件契约、整体结构能被校验器验证。做到这三点前端才能用一个动态渲染器把配置变成真实页面。而当你需要多模型切换时——比如用 Qwen 做意图理解、用 DeepSeek 做组件映射、用 Claude 做复杂布局规划——Key 管理立刻变成新的麻烦。每个模型一套 Key、一套 Base URL、一套调用格式代码里到处是 if-else。TaoToken 的统一 Key 就是来解决这个问题的一个 Key、一个入口背后按模型名路由到不同模型前端和后端代码不用为每个模型写适配层。这篇文章面向正在搭 AI UI 生成链路、需要多模型切换的开发者。我会给出 TaoToken 统一 Key 的 settings.json 配置骨架、提示词模板与组件映射表并完整演示一次从提示词到 Vue3 组件的可复现验证流程。你可以直接复制配置跑通整条链路。2. TaoToken 前置统一 Key 与 settings.json 配置骨架TaoToken 的定位是模型调用的统一入口。你不需要为每个模型单独申请 Key、单独记 Base URL只需要一个 TaoToken Key然后在请求里指定模型名即可。对于 AI UI 生成这种“意图理解用便宜模型、组件映射用强模型、布局规划用长上下文模型”的场景统一 Key 能省掉大量适配代码。先拿到 Key。访问 https://taotoken.net/api-keys 创建 API Key然后在控制台 https://taotoken.net/console 可以看到用量和模型列表。API 入口是 https://taotoken.net/api注意这个地址不带任何查询参数直接作为 Base URL 使用。接下来是 settings.json 配置骨架。这个文件放在项目根目录后端启动时读取前端不直接接触 Key。结构如下{ taotoken: { baseUrl: https://taotoken.net/api, apiKey: sk-your-taotoken-key, defaultModel: qwen-plus, timeout: 30000, retry: { maxRetries: 3, delayMs: 1000 } }, models: { intent: { model: qwen-turbo, temperature: 0.3, maxTokens: 800 }, componentMapping: { model: deepseek-chat, temperature: 0.2, maxTokens: 2000 }, layoutPlanning: { model: claude-3-5-sonnet, temperature: 0.4, maxTokens: 3000 } }, ui: { componentWhitelist: [ SearchBar, Table, Pagination, Form, Card, StatCard, Chart, Button, Input, Select ], maxComponentsPerPage: 12, defaultPageSize: 10 } }这里有几个设计点值得说明。models 字段把不同任务映射到不同模型intent 用轻量模型做意图识别componentMapping 用中等模型做组件选择layoutPlanning 用强模型做复杂布局。这样既控制成本又保证关键环节质量。componentWhitelist 是组件白名单提示词里会把它注入给模型模型只能从这个列表里选组件类型从源头杜绝“模型编造组件名”的问题。后端读取配置的代码// backend/config/loadConfig.js import fs from fs; import path from path; const configPath path.resolve(process.cwd(), settings.json); const raw fs.readFileSync(configPath, utf-8); const config JSON.parse(raw); export function getModelConfig(taskType) { const task config.models[taskType]; if (!task) { throw new Error(Unknown task type: ${taskType}); } return { baseUrl: config.taotoken.baseUrl, apiKey: config.taotoken.apiKey, model: task.model, temperature: task.temperature, maxTokens: task.maxTokens, timeout: config.taotoken.timeout }; } export function getUIWhitelist() { return config.ui.componentWhitelist; } export default config;注意 apiKey 不要硬编码在代码里生产环境用环境变量覆盖。settings.json 里可以写占位符启动时用 process.env.TAOTOKEN_API_KEY 替换。3. 可复制配置提示词模板与组件映射表配置骨架有了接下来是提示词模板。AI UI 生成链路里提示词不是一段固定文本而是由多个片段拼装而成系统角色、组件白名单、MCP 协议规范、输出格式约束、用户请求。我把它拆成三个模板分别对应意图识别、组件映射、布局规划。先看意图识别模板。它的任务是把用户自然语言转成一个结构化的意图对象不涉及具体组件。// backend/prompts/intentPrompt.js export function buildIntentPrompt(userInput, whitelist) { return { role: system, content: 你是 AI UI 生成系统的意图识别模块。 你的任务分析用户请求输出一个 JSON 意图对象。 可用组件白名单 ${whitelist.join(, )} 输出格式严格 JSON不要任何解释文字 { pageType: CRUD | Dashboard | Form | Detail, entities: [实体名1, 实体名2], operations: [search, create, edit, delete], fields: [ { name: 字段名, label: 显示标签, dataType: string | number | date | enum } ] } 约束 1. pageType 必须是四个枚举值之一 2. entities 至少一个 3. fields 至少三个且与 entities 相关 4. 不要输出组件名组件选择由后续模块负责 .trim() }; }这个模板的关键是“不要输出组件名”。很多系统失败的原因就是让一个模型同时做意图理解和组件选择结果模型在意图阶段就开始猜组件导致后续映射混乱。拆成两步每步职责单一稳定性大幅提升。第二个模板是组件映射。它接收意图对象输出组件配置数组。// backend/prompts/componentPrompt.js export function buildComponentPrompt(intent, whitelist, mcpSpec) { return { role: system, content: 你是 AI UI 生成系统的组件映射模块。 你的任务根据意图对象从组件白名单中选择组件并配置 props。 组件白名单 ${whitelist.join(, )} MCP 协议规范组件 props 契约 ${JSON.stringify(mcpSpec, null, 2)} 输入意图对象 ${JSON.stringify(intent, null, 2)} 输出格式严格 JSON { components: [ { type: 组件类型, props: { }, data: { } } ] } 约束 1. type 必须来自白名单 2. props 必须符合 MCP 协议中该组件的 props 定义 3. 组件顺序即页面从上到下的渲染顺序 4. 不要输出任何解释文字 .trim() }; }第三个模板是布局规划用于复杂页面。它接收组件数组输出布局结构。// backend/prompts/layoutPrompt.js export function buildLayoutPrompt(components) { return { role: system, content: 你是 AI UI 生成系统的布局规划模块。 根据组件列表规划页面布局。 组件列表 ${JSON.stringify(components, null, 2)} 输出格式 { layout: default | sidebar | topbar | grid, regions: [ { name: header, components: [0, 1] }, { name: main, components: [2, 3] } ] } 约束 1. layout 必须是四个枚举值之一 2. regions 中的数字是组件在数组中的索引 3. 每个组件必须被分配到恰好一个 region .trim() }; }三个模板拼起来就是完整的生成链路。接下来是组件映射表它定义了每个组件类型对应的 Vue3 组件文件和 props 契约。这张表是前端动态渲染的依据。组件类型Vue3 文件路径核心 props事件SearchBarcomponents/molecular/SearchBar.vuefields, loadingsearch, resetTablecomponents/molecular/Table.vuedata, columns, loading, actionsselection-change, actionPaginationcomponents/atomic/Pagination.vuetotal, pageSize, currentPagesize-change, current-changeFormcomponents/molecular/Form.vuemodel, rules, fieldssubmit, validateCardcomponents/atomic/Card.vuetitle, shadowclickStatCardcomponents/molecular/StatCard.vuetitle, value, trendclickChartcomponents/molecular/Chart.vuetype, data, optionsclickButtoncomponents/atomic/Button.vuetype, size, disabled, loadingclickInputcomponents/atomic/Input.vuemodelValue, type, placeholderinput, changeSelectcomponents/atomic/Select.vuemodelValue, options, multiplechange这张表要同时注入到提示词和前端渲染器。提示词里注入是为了让模型知道每个组件接受什么 props前端渲染器里注入是为了把配置映射到真实组件。两边用同一份数据源避免不一致。前端渲染器的核心逻辑// frontend/src/renderer/componentMap.js import { defineAsyncComponent } from vue; export const componentMap { SearchBar: defineAsyncComponent(() import(../components/molecular/SearchBar.vue)), Table: defineAsyncComponent(() import(../components/molecular/Table.vue)), Pagination: defineAsyncComponent(() import(../components/atomic/Pagination.vue)), Form: defineAsyncComponent(() import(../components/molecular/Form.vue)), Card: defineAsyncComponent(() import(../components/atomic/Card.vue)), StatCard: defineAsyncComponent(() import(../components/molecular/StatCard.vue)), Chart: defineAsyncComponent(() import(../components/molecular/Chart.vue)), Button: defineAsyncComponent(() import(../components/atomic/Button.vue)), Input: defineAsyncComponent(() import(../components/atomic/Input.vue)), Select: defineAsyncComponent(() import(../components/atomic/Select.vue)) }; export function resolveComponent(type) { const comp componentMap[type]; if (!comp) { console.warn(Unknown component type: ${type}); return null; } return comp; }到这里配置层就完整了settings.json 管模型和 Key三个提示词模板管生成链路组件映射表管前后端契约。接下来跑一次完整验证。4. 验证请求从提示词到 Vue3 组件的可复现流程验证流程分五步构造请求、调用 TaoToken、解析响应、校验 MCP 协议、前端渲染。每一步都有明确的输入输出方便你复现。第一步构造请求。用一段真实的用户输入“帮我生成一个商品管理页面包含商品名称、价格、库存、分类的搜索以及商品列表表格支持编辑和删除。”// backend/services/generatePage.js import axios from axios; import { getModelConfig, getUIWhitelist } from ../config/loadConfig.js; import { buildIntentPrompt } from ../prompts/intentPrompt.js; import { buildComponentPrompt } from ../prompts/componentPrompt.js; import { buildLayoutPrompt } from ../prompts/layoutPrompt.js; import mcpSpec from ../mcp/mcpSpec.js; const whitelist getUIWhitelist(); async function callTaoToken(taskType, messages) { const cfg getModelConfig(taskType); const response await axios.post( ${cfg.baseUrl}/v1/chat/completions, { model: cfg.model, messages, temperature: cfg.temperature, max_tokens: cfg.maxTokens }, { headers: { Authorization: Bearer ${cfg.apiKey}, Content-Type: application/json }, timeout: cfg.timeout } ); return response.data.choices[0].message.content; } export async function generatePage(userInput) { // 第一步意图识别 const intentPrompt buildIntentPrompt(userInput, whitelist); const intentRaw await callTaoToken(intent, [ intentPrompt, { role: user, content: userInput } ]); const intent JSON.parse(intentRaw); // 第二步组件映射 const componentPrompt buildComponentPrompt(intent, whitelist, mcpSpec); const componentRaw await callTaoToken(componentMapping, [ componentPrompt, { role: user, content: JSON.stringify(intent) } ]); const componentResult JSON.parse(componentRaw); // 第三步布局规划 const layoutPrompt buildLayoutPrompt(componentResult.components); const layoutRaw await callTaoToken(layoutPlanning, [ layoutPrompt, { role: user, content: JSON.stringify(componentResult.components) } ]); const layout JSON.parse(layoutRaw); return { page: { title: intent.entities[0] 管理, type: intent.pageType, layout: layout.layout, regions: layout.regions, components: componentResult.components } }; }第二步调用 TaoToken。上面代码里 callTaoToken 函数就是统一入口它从 settings.json 读取对应任务的模型配置拼成标准 OpenAI 兼容格式的请求发到 https://taotoken.net/api/v1/chat/completions。注意 Base URL 是 https://taotoken.net/api路径补 /v1/chat/completions。不同模型背后由 TaoToken 路由你的代码不用改。第三步解析响应。意图识别的返回大概是这样{ pageType: CRUD, entities: [商品], operations: [search, edit, delete], fields: [ { name: name, label: 商品名称, dataType: string }, { name: price, label: 价格, dataType: number }, { name: stock, label: 库存, dataType: number }, { name: category, label: 分类, dataType: enum } ] }组件映射的返回{ components: [ { type: SearchBar, props: { fields: [ { prop: name, label: 商品名称, type: input }, { prop: category, label: 分类, type: select } ] } }, { type: Table, props: { columns: [ { prop: name, label: 商品名称, minWidth: 150 }, { prop: price, label: 价格, width: 120 }, { prop: stock, label: 库存, width: 100 }, { prop: category, label: 分类, width: 120 } ], actions: [ { key: edit, label: 编辑, type: primary }, { key: delete, label: 删除, type: danger } ] } }, { type: Pagination, props: { total: 0, pageSize: 10, currentPage: 1 } } ] }第四步校验 MCP 协议。校验器检查每个组件的 type 是否在白名单、props 是否符合契约。// backend/mcp/validator.js import mcpSpec from ./mcpSpec.js; import { getUIWhitelist } from ../config/loadConfig.js; const whitelist getUIWhitelist(); export function validatePage(pageConfig) { const errors []; if (!pageConfig.title) errors.push(缺少页面标题); if (!pageConfig.type) errors.push(缺少页面类型); if (!Array.isArray(pageConfig.components)) { errors.push(components 必须是数组); return { valid: false, errors }; } pageConfig.components.forEach((comp, index) { if (!whitelist.includes(comp.type)) { errors.push(组件 ${index} 类型 ${comp.type} 不在白名单); return; } const spec mcpSpec.components[comp.type]; if (!spec) { errors.push(组件 ${index} 类型 ${comp.type} 缺少 MCP 定义); return; } for (const [key, def] of Object.entries(spec.props)) { const value comp.props?.[key]; if (value undefined) continue; if (def.enum !def.enum.includes(value)) { errors.push(组件 ${index} 的 ${key} 值 ${value} 不在枚举范围); } } }); return { valid: errors.length 0, errors }; }第五步前端渲染。动态渲染器接收 pageConfig按 regions 布局把每个组件配置映射到真实 Vue3 组件。!-- frontend/src/views/DynamicPage.vue -- template div classdynamic-page h1{{ pageConfig.title }}/h1 div v-forregion in pageConfig.regions :keyregion.name :classregion-${region.name} component v-foridx in region.components :keyidx :isresolveComponent(pageConfig.components[idx].type) v-bindpageConfig.components[idx].props searchhandleSearch actionhandleAction / /div /div /template script setup import { ref, onMounted } from vue; import { resolveComponent } from ../renderer/componentMap.js; const pageConfig ref({ title: , regions: [], components: [] }); async function loadPage() { const res await fetch(/api/page/generate, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ userInput: 帮我生成一个商品管理页面包含商品名称、价格、库存、分类的搜索以及商品列表表格支持编辑和删除。 }) }); const result await res.json(); if (result.success) { pageConfig.value result.data.page; } } function handleSearch(params) { console.log(搜索参数:, params); } function handleAction({ key, row }) { console.log(操作:, key, row); } onMounted(loadPage); /script跑通后你会看到页面标题“商品管理”顶部一个搜索栏带商品名称输入框和分类下拉中间一个表格带四列和编辑/删除按钮底部一个分页器。整条链路从自然语言到可交互 Vue3 页面全程没有手写组件代码。5. 本篇常见错排查链路跑通不代表每次都顺利。下面是我在实际项目里踩过的坑按出现频率排序。第一个坑模型返回的 JSON 带 markdown 代码块标记。很多模型习惯把 JSON 包在 json 里直接 JSON.parse 会报错。解决办法是在解析前做一次清洗function cleanJsonResponse(raw) { let text raw.trim(); if (text.startsWith()) { text text.replace(/^(?:json)?\n?/, ).replace(/\n?$/, ); } return text.trim(); }第二个坑组件 props 里的函数被序列化丢失。比如 Table 的 columns 里如果有 formatter 函数JSON 序列化后变成字符串前端渲染时调用会报错。解决办法是在 MCP 协议里约定formatter 用字符串表达式描述前端渲染时用 new Function 还原或者干脆不在配置里传函数改由组件内部根据字段类型自动格式化。第三个坑意图识别和组件映射的模型不一致导致字段名对不上。比如意图阶段输出 name组件阶段输出 productName。解决办法是在提示词里强制字段名透传组件映射模板里明确写“props 中的字段名必须与意图对象 fields 中的 name 完全一致”。第四个坑TaoToken 请求超时。复杂页面生成时布局规划模型可能超过 30 秒。解决办法是在 settings.json 里给 layoutPlanning 单独设更长的 timeout并在后端加重试async function callWithRetry(fn, maxRetries 3, delayMs 1000) { let lastError; for (let i 0; i maxRetries; i) { try { return await fn(); } catch (err) { lastError err; if (i maxRetries - 1) { await new Promise(r setTimeout(r, delayMs * (i 1))); } } } throw lastError; }第五个坑白名单更新后提示词没同步。组件白名单在 settings.json 里但提示词模板是启动时构建的。如果你在运行中改了白名单提示词不会自动更新。解决办法是把白名单读取放在每次请求时而不是模块加载时。第六个坑前端动态渲染时组件未注册。resolveComponent 返回 null 时Vue 会渲染一个空节点页面看起来“少了一块”但不报错。解决办法是在 resolveComponent 里加 console.warn并在开发环境把未知组件渲染成一个红色占位块方便定位。6. 多模型切换与长期编码的接入建议这套链路跑通后你会发现多模型切换是常态意图识别用便宜模型、组件映射用中等模型、布局规划用强模型未来还可能接入新的模型做特定任务。TaoToken 的统一 Key 让切换成本降到最低——改 settings.json 里的 model 字段即可代码不用动。如果你要长期维护这套系统建议把 API Key 管理独立出来。访问 https://taotoken.net/api-keys 创建和管理 Key在控制台 https://taotoken.net/console 查看各模型的调用量和费用。接入文档在 https://taotoken.net/doc里面有完整的请求格式和错误码说明。对于需要频繁调试提示词的场景可以用模型对话页面 https://taotoken.net/model-chat 直接测试提示词效果确认输出格式稳定后再写进代码。对于长期编码和 Agent 场景Coding Plan https://taotoken.net/coding-plan 提供了更稳定的调用配额适合把 AI UI 生成链路接入 CI 或自动化流程。整条链路的核心思路可以复用到其他 AI 生成场景把“生成”拆成“意图识别 → 结构映射 → 布局规划”三步每步用独立提示词模板每步输出都经过校验器验证前后端用同一份组件映射表做契约。这样无论底层换什么模型上层代码都稳如磐石。