mcp-probe-kit 2.3.0 → 2.5.0

package/build/tools/start_ui.js

@@ -7,23 +7,97 @@
  * 3. 搜索/生成 UI 模板
  * 4. 渲染最终代码
  */
-import { parseArgs, getString } from "../utils/parseArgs.js";
+import { parseArgs, getString, getNumber } from "../utils/parseArgs.js";
 import { getReasoningEngine } from "./ui-ux-tools.js";
 import { okStructured } from "../lib/response.js";
-import { UIReportSchema } from "../schemas/structured-output.js";
+import { renderOrchestrationHeader } from "../lib/orchestration-guidance.js";
+import { UIReportSchema, RequirementsLoopSchema } from "../schemas/structured-output.js";
 import { detectProjectType } from "../lib/project-detector.js";
-const PROMPT_TEMPLATE = `# 快速开始
+function inferProductType(description) {
+    const text = (description || '').toLowerCase();
+    if (/电商|e-?commerce|shop|商城|购物/.test(text))
+        return 'E-commerce';
+    if (/教育|course|learning|school|培训/.test(text))
+        return 'Educational App';
+    if (/医疗|health|med|clinic|hospital/.test(text))
+        return 'Healthcare App';
+    if (/政府|gov|public/.test(text))
+        return 'Government/Public Service';
+    if (/金融|fintech|bank|支付|crypto|区块链/.test(text))
+        return 'Fintech/Crypto';
+    if (/社交|social|community|forum|chat/.test(text))
+        return 'Social Media App';
+    if (/analytics|dashboard|报表|数据看板/.test(text))
+        return 'Analytics Dashboard';
+    if (/b2b|企业/.test(text))
+        return 'B2B Service';
+    if (/portfolio|作品集|个人网站/.test(text))
+        return 'Portfolio/Personal';
+    if (/agency|工作室|创意/.test(text))
+        return 'Creative Agency';
+    return 'SaaS (General)';
+}
+function normalizeTemplateName(value, fallback) {
+    const safe = (value || '')
+        .toLowerCase()
+        .replace(/页面|表单|组件/g, '')
+        .trim()
+        .replace(/[^\w\u4e00-\u9fa5-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    return safe || fallback;
+}
+function decideTemplateProfile(description) {
+    const text = description || '';
+    const lengthScore = text.length >= 200 ? 2 : text.length >= 120 ? 1 : 0;
+    const structureSignals = [
+        /(^|\n)\s*#{1,3}\s+\S+/m,
+        /(^|\n)\s*[-*]\s+\S+/m,
+        /(^|\n)\s*\d+\.\s+\S+/m,
+        /页面|组件|交互|状态|数据|权限|可访问性|响应式|视觉|风格/m,
+    ];
+    const signalScore = structureSignals.reduce((score, regex) => score + (regex.test(text) ? 1 : 0), 0);
+    if (lengthScore >= 1 && signalScore >= 2) {
+        return 'strict';
+    }
+    return 'guided';
+}
+function resolveTemplateProfile(rawProfile, description) {
+    const normalized = (rawProfile || '').trim().toLowerCase();
+    if (!normalized || normalized === 'auto') {
+        const resolved = decideTemplateProfile(description);
+        return {
+            requested: 'auto',
+            resolved,
+            reason: resolved === 'strict' ? '需求结构化且较完整' : '需求较简略，需要更多指导',
+        };
+    }
+    if (normalized === 'guided' || normalized === 'strict') {
+        return {
+            requested: normalized,
+            resolved: normalized,
+        };
+    }
+    const fallback = decideTemplateProfile(description);
+    return {
+        requested: 'auto',
+        resolved: fallback,
+        warning: `模板档位 \"${rawProfile}\" 不支持，已回退为 ${fallback}`,
+    };
+}
+const PROMPT_TEMPLATE_GUIDED = `# 快速开始
 
 **职责说明**: 本工具仅提供执行指导，不执行实际操作。请按顺序调用以下 MCP 工具。
 
 执行以下工具：
 
 1. 检查 \`docs/project-context.md\` 是否存在，不存在则调用 \`init_project_context\`
-2. 检查 \`docs/design-system.md\` 是否存在，不存在则调用 \`ui_design_system --product_type="SaaS" --stack="{framework}"\`
-3. 检查 \`docs/component-catalog.json\` 是否存在，不存在则调用 \`init_component_catalog\`
+2. 检查 \`docs/design-system.md\` 是否存在，不存在则调用 \`ui_design_system --product_type="{productType}" --stack="{framework}"\`
+3. 检查 \`docs/ui/component-catalog.json\` 是否存在，不存在则调用 \`init_component_catalog\`
 4. \`ui_search --mode=template --query="{description}"\`
-5. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
-6. 将生成的 UI 文档添加到 \`docs/project-context.md\` 索引中
+5. 选择模板并保存到 \`docs/ui/{templateName}.json\`
+6. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+7. 将生成的 UI 文档添加到 \`docs/project-context.md\` 索引中
 
 ---
 
@@ -50,7 +124,7 @@ const PROMPT_TEMPLATE = `# 快速开始
 **参数**:
 \`\`\`json
 {
-  "product_type": "{description}",
+  "product_type": "{productType}",
   "stack": "{framework}",
   "description": "{description}"
 }
@@ -63,12 +137,12 @@ const PROMPT_TEMPLATE = `# 快速开始
 
 ## 步骤 3: 生成组件目录（如不存在）📦
 
-**检查**: 查看 \`docs/component-catalog.json\` 是否存在
+**检查**: 查看 \`docs/ui/component-catalog.json\` 是否存在
 
 **如果不存在，调用工具**: \`init_component_catalog\`
 **参数**: 无
 
-**预期输出**: \`docs/component-catalog.json\`
+**预期输出**: \`docs/ui/component-catalog.json\`
 **失败处理**: 确保步骤 2 的设计系统文件已生成
 
 ---
@@ -85,11 +159,28 @@ const PROMPT_TEMPLATE = `# 快速开始
 \`\`\`
 
 **预期输出**: 匹配的模板列表（可能为空）
-**失败处理**: 如果没有找到模板，继续到步骤 5 使用默认模板
+**失败处理**: 如果没有找到模板，创建最小模板文件再进入渲染步骤
 
 ---
 
-## 步骤 5: 渲染最终代码 💻
+## 步骤 5: 保存模板文件 🧩
+
+**操作**: 从搜索结果选择模板或创建最小模板
+
+**保存路径**: \`docs/ui/{templateName}.json\`
+
+**最小模板示例**:
+\`\`\`json
+{
+  "name": "UiTemplate",
+  "description": "{description}",
+  "layout": "sectioned"
+}
+\`\`\`
+
+---
+
+## 步骤 6: 渲染最终代码 💻
 
 **工具**: \`render_ui\`
 **参数**:
@@ -101,11 +192,11 @@ const PROMPT_TEMPLATE = `# 快速开始
 \`\`\`
 
 **预期输出**: 完整的 {framework} 组件代码
-**失败处理**: 如果模板不存在，工具会使用默认模板生成代码
+**失败处理**: 如果模板不存在，请先完成步骤 5 保存模板文件
 
 ---
 
-## 步骤 6: 更新项目上下文索引 📝
+## 步骤 7: 更新项目上下文索引 📝
 
 **操作**: 将生成的 UI 文档添加到 \`docs/project-context.md\` 中
 
@@ -113,17 +204,17 @@ const PROMPT_TEMPLATE = `# 快速开始
 在 "## 📚 文档导航" 部分添加：
 
 \`\`\`markdown
-### [UI 设计系统](./design-system.md)
-项目的 UI 设计规范，包括颜色、字体、组件样式等
-
-### [UI 组件目录](./component-catalog.json)
-可用的 UI 组件及其属性定义
+### [UI 设计系统](./design-system.md)
+项目的 UI 设计规范，包括颜色、字体、组件样式等
+
+### [UI 组件目录](./ui/component-catalog.json)
+可用的 UI 组件及其属性定义
 \`\`\`
 
 在 "## 💡 开发时查看对应文档" 部分的 "添加新功能" 下添加：
 \`\`\`markdown
 - **UI 设计系统**: [design-system.md](./design-system.md) - 查看设计规范
-- **UI 组件目录**: [component-catalog.json](./component-catalog.json) - 查看可用组件
+- **UI 组件目录**: [ui/component-catalog.json](./ui/component-catalog.json) - 查看可用组件
 \`\`\`
 
 **预期结果**: \`docs/project-context.md\` 包含 UI 相关文档的链接
@@ -137,7 +228,7 @@ const PROMPT_TEMPLATE = `# 快速开始
 编辑 \`docs/design-system.json\` 修改颜色、字体等，然后重新运行。
 
 ### 自定义组件
-编辑 \`docs/component-catalog.json\` 添加新组件定义。
+编辑 \`docs/ui/component-catalog.json\` 添加新组件定义。
 
 ### 常见问题
 
@@ -147,6 +238,161 @@ A: 不需要。如果文件已存在，直接跳过步骤 1。
 **Q: 如何使用自定义模板？**
 A: 在 \`docs/ui/\` 目录创建 JSON 模板文件，然后在步骤 4 中指定模板路径。
 `;
+const PROMPT_TEMPLATE_STRICT = `# UI 开发编排（严格）
+
+**职责说明**: 本工具仅提供执行指导，不执行实际操作。请按顺序调用以下 MCP 工具。
+
+## ✅ 执行计划
+
+1. 检查 \`docs/project-context.md\`，缺失则调用 \`init_project_context\`
+2. 检查 \`docs/design-system.md\`，缺失则调用 \`ui_design_system --product_type="{productType}" --stack="{framework}"\`
+3. 检查 \`docs/ui/component-catalog.json\`，缺失则调用 \`init_component_catalog\`
+4. \`ui_search --mode=template --query="{description}"\`
+5. 选择模板并保存到 \`docs/ui/{templateName}.json\`
+6. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+7. 将生成的 UI 文档添加到 \`docs/project-context.md\` 索引中
+
+---
+
+## 步骤 1: 生成项目上下文（如不存在）
+
+**检查**: \`docs/project-context.md\`
+**缺失则调用**: \`init_project_context\`
+**预期输出**: \`docs/project-context.md\`
+
+---
+
+## 步骤 2: 生成设计系统（如不存在）
+
+**检查**: \`docs/design-system.md\`
+**缺失则调用**: \`ui_design_system\`
+\`\`\`json
+{
+  "product_type": "{productType}",
+  "stack": "{framework}",
+  "description": "{description}"
+}
+\`\`\`
+**预期输出**: \`docs/design-system.json\`、\`docs/design-system.md\`
+
+---
+
+## 步骤 3: 生成组件目录（如不存在）
+
+**检查**: \`docs/ui/component-catalog.json\`
+**缺失则调用**: \`init_component_catalog\`
+**预期输出**: \`docs/ui/component-catalog.json\`
+
+---
+
+## 步骤 4: 搜索模板
+
+**工具**: \`ui_search\`
+\`\`\`json
+{ "mode": "template", "query": "{description}" }
+\`\`\`
+
+---
+
+## 步骤 5: 保存模板文件
+
+**操作**: 从搜索结果选择模板或创建最小模板
+
+**保存路径**: \`docs/ui/{templateName}.json\`
+
+---
+
+## 步骤 6: 渲染代码
+
+**工具**: \`render_ui\`
+\`\`\`json
+{ "template": "docs/ui/{templateName}.json", "framework": "{framework}" }
+\`\`\`
+
+---
+
+## 步骤 7: 更新项目上下文索引
+
+将 UI 文档链接添加到 \`docs/project-context.md\`
+`;
+const LOOP_PROMPT_TEMPLATE_GUIDED = `# 🧭 UI 需求澄清与补全（Requirements Loop）
+
+本模式用于**生产级稳健补全**：在不改变用户意图的前提下补齐 UI 需求关键要素。
+
+## 🎯 目标
+UI 需求：{description}
+
+## ✅ 规则
+1. **不覆盖用户原始描述**
+2. **补全内容必须标注来源**（User / Derived / Assumption）
+3. **假设必须进入待确认列表**
+4. **每轮问题 ≤ {question_budget}，假设 ≤ {assumption_cap}**
+
+---
+
+## 🔁 执行步骤（每轮）
+
+### 1) 生成待确认问题
+使用 \`ask_user\` 提问，问题来源于 UI 需求补全清单（目标/交互/状态/设备/可访问性）。
+
+### 2) 更新结构化输出
+将回答补入 \`requirements\`，并标注来源。
+
+### 3) 自检与结束
+若 \`openQuestions\` 为空且无高风险假设，则结束 loop，进入 UI 执行计划。
+
+---
+
+## ✅ 结束后继续
+当满足结束条件时，按 delegated plan 执行：
+- 设计系统 → 组件目录 → 模板搜索 → 保存模板 → 渲染代码 → 更新上下文
+
+---
+
+*编排工具: MCP Probe Kit - start_ui (requirements loop)*
+`;
+const LOOP_PROMPT_TEMPLATE_STRICT = `# 🧭 UI 需求澄清与补全（Requirements Loop | 严格）
+
+本模式用于稳健补全 UI 需求关键要素，不改变用户意图。
+
+## 🎯 目标
+UI 需求：{description}
+
+## ✅ 规则
+1. 不覆盖用户原始描述
+2. 补全内容必须标注来源（User / Derived / Assumption）
+3. 假设必须进入待确认列表
+4. 每轮问题 ≤ {question_budget}，假设 ≤ {assumption_cap}
+
+---
+
+## 🔁 执行步骤（每轮）
+1) 使用 \`ask_user\` 提问补全关键信息
+2) 更新结构化输出并标注来源
+3) 若 \`openQuestions\` 为空且无高风险假设则结束
+
+---
+
+## ✅ 结束后继续
+当满足结束条件时，按 delegated plan 执行 UI 计划
+
+---
+
+*编排工具: MCP Probe Kit - start_ui (requirements loop)*
+`;
+function buildUiQuestions(questionBudget) {
+    const base = [
+        { question: "页面目标是什么？用户需要完成什么任务？", context: "页面目标", required: true },
+        { question: "核心功能与交互有哪些？", context: "核心交互", required: true },
+        { question: "需要哪些状态（加载/空态/错误）？", context: "关键状态", required: true },
+        { question: "数据来源与刷新频率是什么？", context: "数据来源", required: true },
+        { question: "权限/可见性规则有哪些？", context: "权限规则", required: false },
+        { question: "需要适配哪些设备/分辨率？", context: "响应式", required: false },
+        { question: "是否有特定风格/品牌约束？", context: "视觉约束", required: false },
+        { question: "可访问性要求有哪些？", context: "可访问性", required: false },
+    ];
+    return base.slice(0, Math.max(0, questionBudget));
+}
 /**
  * 从 project-context.md 读取框架信息
  */
@@ -218,6 +464,11 @@ export async function startUi(args) {
                 framework: detectedFramework, // 使用检测到的框架
                 template: "",
                 mode: "manual",
+                template_profile: "auto",
+                requirements_mode: "steady",
+                loop_max_rounds: 2,
+                loop_question_budget: 5,
+                loop_assumption_cap: 3,
             },
             primaryField: "description",
             fieldAliases: {
@@ -225,12 +476,44 @@ export async function startUi(args) {
                 framework: ["stack", "lib", "框架"],
                 template: ["name", "模板名"],
                 mode: ["模式"],
+                template_profile: ["profile", "template_profile", "模板档位", "模板模式"],
+                requirements_mode: ["requirements_mode", "loop", "需求模式"],
+                loop_max_rounds: ["max_rounds", "rounds", "最大轮次"],
+                loop_question_budget: ["question_budget", "问题数量", "问题预算"],
+                loop_assumption_cap: ["assumption_cap", "假设上限"],
             },
         });
         const description = getString(parsedArgs.description);
+        const productType = inferProductType(description);
         const framework = getString(parsedArgs.framework) || detectedFramework;
         const mode = getString(parsedArgs.mode) || "manual";
+        const rawProfile = getString(parsedArgs.template_profile);
+        const requirementsMode = getString(parsedArgs.requirements_mode) || "steady";
+        const maxRounds = getNumber(parsedArgs.loop_max_rounds, 2);
+        const questionBudget = getNumber(parsedArgs.loop_question_budget, 5);
+        const assumptionCap = getNumber(parsedArgs.loop_assumption_cap, 3);
         let templateName = getString(parsedArgs.template);
+        templateName = normalizeTemplateName(templateName || description || 'ui-template', 'ui-template');
+        const profileDecision = resolveTemplateProfile(rawProfile, description || "");
+        const templateMeta = {
+            profile: profileDecision.resolved,
+            requested: profileDecision.requested,
+        };
+        if (profileDecision.reason) {
+            templateMeta.reason = profileDecision.reason;
+        }
+        if (profileDecision.warning) {
+            templateMeta.warning = profileDecision.warning;
+        }
+        const headerNotes = [
+            `模板档位: ${profileDecision.resolved}${profileDecision.requested === 'auto' ? '（自动）' : ''}`,
+        ];
+        if (profileDecision.reason) {
+            headerNotes.push(`选择理由: ${profileDecision.reason}`);
+        }
+        if (profileDecision.warning) {
+            headerNotes.push(profileDecision.warning);
+        }
         // 验证 mode 参数
         const validModes = ["auto", "manual"];
         if (mode && !validModes.includes(mode)) {
@@ -253,14 +536,174 @@ start_ui "用户列表" --mode=auto
                 isError: true,
             };
         }
+        // requirements loop 模式
+        if (requirementsMode === "loop") {
+            if (!description) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `❌ 缺少必要参数
+
+**用法**:
+\`\`\`
+start_ui <描述> --requirements_mode=loop
+\`\`\``,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+            const openQuestions = buildUiQuestions(questionBudget).map((q, index) => ({
+                id: `Q-${index + 1}`,
+                ...q,
+            }));
+            const requirements = [
+                {
+                    id: "UI-1",
+                    title: description,
+                    description: description,
+                    source: "User",
+                    acceptance: [
+                        "WHEN 页面加载 THEN 系统 SHALL 展示加载状态",
+                        "IF 无数据 THEN 系统 SHALL 展示空态且提示原因",
+                    ],
+                },
+            ];
+            const assumptions = [];
+            const missingFields = openQuestions.map((q) => q.context || q.question);
+            const stopReady = openQuestions.length === 0 && assumptions.length === 0;
+            const plan = {
+                mode: 'delegated',
+                steps: [
+                    {
+                        id: 'loop-1',
+                        tool: 'ask_user',
+                        args: { questions: openQuestions.map(({ question, context, required }) => ({ question, context, required })) },
+                        outputs: [],
+                    },
+                    ...(maxRounds > 1
+                        ? [
+                            {
+                                id: 'loop-2',
+                                tool: 'ask_user',
+                                when: '仍存在 openQuestions 或 assumptions',
+                                args: { questions: '[根据上一轮补全结果生成问题]' },
+                                outputs: [],
+                            },
+                        ]
+                        : []),
+                    {
+                        id: 'context',
+                        tool: 'init_project_context',
+                        when: '缺少 docs/project-context.md',
+                        args: {},
+                        outputs: ['docs/project-context.md'],
+                    },
+                    {
+                        id: 'design-system',
+                        tool: 'ui_design_system',
+                        when: '缺少 docs/design-system.json 或 docs/design-system.md',
+                        args: {
+                            product_type: productType,
+                            stack: framework,
+                            description,
+                        },
+                        outputs: ['docs/design-system.json', 'docs/design-system.md'],
+                    },
+                    {
+                        id: 'catalog',
+                        tool: 'init_component_catalog',
+                        when: '缺少 docs/ui/component-catalog.json',
+                        args: {},
+                        outputs: ['docs/ui/component-catalog.json'],
+                    },
+                    {
+                        id: 'template',
+                        tool: 'ui_search',
+                        args: { mode: 'template', query: description },
+                        outputs: [],
+                    },
+                    {
+                        id: 'save-template',
+                        tool: 'manual',
+                        action: 'save_ui_template',
+                        outputs: [`docs/ui/${templateName}.json`],
+                    },
+                    {
+                        id: 'render',
+                        tool: 'render_ui',
+                        args: {
+                            template: `docs/ui/${templateName}.json`,
+                            framework,
+                        },
+                        outputs: [],
+                    },
+                    {
+                        id: 'update-context',
+                        tool: 'manual',
+                        action: 'update_project_context',
+                        outputs: ['docs/project-context.md'],
+                    },
+                ],
+            };
+            const header = renderOrchestrationHeader({
+                tool: 'start_ui',
+                goal: `UI 需求：${description}`,
+                tasks: [
+                    '按 Requirements Loop 规则提问并更新结构化输出',
+                    '满足结束条件后按 delegated plan 执行 UI 计划',
+                ],
+                notes: headerNotes,
+            });
+            const loopTemplate = profileDecision.resolved === 'strict'
+                ? LOOP_PROMPT_TEMPLATE_STRICT
+                : LOOP_PROMPT_TEMPLATE_GUIDED;
+            const guide = header + loopTemplate
+                .replace(/{description}/g, description)
+                .replace(/{question_budget}/g, String(questionBudget))
+                .replace(/{assumption_cap}/g, String(assumptionCap));
+            const loopReport = {
+                mode: 'loop',
+                round: 1,
+                maxRounds,
+                questionBudget,
+                assumptionCap,
+                requirements,
+                openQuestions,
+                assumptions,
+                delta: {
+                    added: ['UI-1'],
+                    modified: [],
+                    removed: [],
+                },
+                validation: {
+                    passed: stopReady,
+                    missingFields,
+                    warnings: [],
+                },
+                stopConditions: {
+                    ready: stopReady,
+                    reasons: stopReady ? ['所有关键问题已确认'] : ['存在待确认问题'],
+                },
+                metadata: {
+                    plan,
+                    template: templateMeta,
+                },
+            };
+            return okStructured(guide, loopReport, {
+                schema: RequirementsLoopSchema,
+                note: 'AI 应按轮次澄清 UI 需求并更新结构化输出，满足结束条件后再执行 UI 计划',
+            });
+        }
         // 自动模式实现
         if (mode === "auto") {
             // 1. 获取推理引擎
             const engine = await getReasoningEngine();
             // 2. 构造设计请求
             const request = {
-                productType: description, // 初始尝试用描述作为类型
-                description: description,
+                productType,
+                description,
                 stack: framework,
             };
             // 3. 生成推荐
@@ -270,7 +713,8 @@ start_ui "用户列表" --mode=auto
             const inferredKeywords = recommendation.style.keywords.join(", ");
             const inferredStack = framework; // 保持用户指定的技术栈，或默认为 react
             // 5. 生成智能执行计划
-            const smartPlan = `# 🚀 智能 UI 开发计划
+            const searchQuery = description || templateName;
+            const smartPlanGuided = `# 🚀 智能 UI 开发计划
 
 基于您的描述 "**${description}**"，AI 引擎已为您规划了最佳开发路径。
 
@@ -302,19 +746,25 @@ ui_design_system --product_type="${inferredProductType}" --stack="${inferredStac
 init_component_catalog
 \`\`\`
 
-### 4. 生成 UI 模板 📄
-\`\`\`bash
-# 搜索现有模板或生成新模板
-ui_search --mode=template --query="${templateName || description}"
-\`\`\`
-
-### 5. 渲染代码 💻
-\`\`\`bash
-render_ui docs/ui/${templateName || 'template'}.json --framework="${inferredStack}"
-\`\`\`
-
-### 6. 更新项目上下文 📝
-将生成的 UI 文档链接添加到 \`docs/project-context.md\` 的文档导航部分。
+### 4. 生成 UI 模板 📄
+\`\`\`bash
+# 搜索现有模板或生成新模板
+ui_search --mode=template --query="${searchQuery}"
+\`\`\`
+
+### 5. 保存模板文件 🧩
+\`\`\`bash
+# 将选中的模板保存到本地
+# 目标路径：docs/ui/${templateName}.json
+\`\`\`
+
+### 6. 渲染代码 💻
+\`\`\`bash
+render_ui docs/ui/${templateName}.json --framework="${inferredStack}"
+\`\`\`
+
+### 7. 更新项目上下文 📝
+将生成的 UI 文档链接添加到 \`docs/project-context.md\` 的文档导航部分。
 
 ---
 
@@ -322,6 +772,95 @@ render_ui docs/ui/${templateName || 'template'}.json --framework="${inferredStac
 
 ${recommendation.reasoning}
 `;
+            const smartPlanStrict = `# 🚀 智能 UI 开发计划（严格）
+
+## 🧠 智能分析结果
+
+- **产品类型**: ${inferredProductType}
+- **推荐风格**: ${recommendation.style.primary}
+- **关键特性**: ${inferredKeywords}
+- **技术栈**: ${inferredStack}
+
+---
+
+## 📋 执行步骤
+
+1) init_project_context
+2) ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}" --keywords="${inferredKeywords}" --description="${description}"
+3) init_component_catalog
+4) ui_search --mode=template --query="${searchQuery}"
+5) 保存模板到 docs/ui/${templateName}.json
+6) render_ui docs/ui/${templateName}.json --framework="${inferredStack}"
+7) 更新 project-context.md 索引
+`;
+            const plan = {
+                mode: 'delegated',
+                steps: [
+                    {
+                        id: 'context',
+                        tool: 'init_project_context',
+                        when: '缺少 docs/project-context.md',
+                        args: {},
+                        outputs: ['docs/project-context.md'],
+                    },
+                    {
+                        id: 'design-system',
+                        tool: 'ui_design_system',
+                        when: '缺少 docs/design-system.json 或 docs/design-system.md',
+                        args: {
+                            product_type: inferredProductType,
+                            stack: inferredStack,
+                            keywords: inferredKeywords,
+                            description,
+                        },
+                        outputs: ['docs/design-system.json', 'docs/design-system.md'],
+                    },
+                    {
+                        id: 'catalog',
+                        tool: 'init_component_catalog',
+                        when: '缺少 docs/ui/component-catalog.json',
+                        args: {},
+                        outputs: ['docs/ui/component-catalog.json'],
+                    },
+                    {
+                        id: 'template',
+                        tool: 'ui_search',
+                        args: { mode: 'template', query: searchQuery },
+                        outputs: [],
+                    },
+                    {
+                        id: 'save-template',
+                        tool: 'manual',
+                        action: 'save_ui_template',
+                        outputs: [`docs/ui/${templateName}.json`],
+                    },
+                    {
+                        id: 'render',
+                        tool: 'render_ui',
+                        args: {
+                            template: `docs/ui/${templateName}.json`,
+                            framework: inferredStack,
+                        },
+                        outputs: [],
+                    },
+                    {
+                        id: 'update-context',
+                        tool: 'manual',
+                        action: 'update_project_context',
+                        outputs: ['docs/project-context.md'],
+                    },
+                ],
+            };
+            const header = renderOrchestrationHeader({
+                tool: 'start_ui',
+                goal: `UI 需求：${description}`,
+                tasks: [
+                    '按 delegated plan 顺序调用工具',
+                    '生成设计系统、模板并渲染 UI 代码',
+                ],
+                notes: headerNotes,
+            });
+            const smartPlan = header + (profileDecision.resolved === 'strict' ? smartPlanStrict : smartPlanGuided);
             // Create structured UI report for auto mode
             const uiReport = {
                 summary: `智能 UI 开发：${description}`,
@@ -347,6 +886,11 @@ ${recommendation.reasoning}
                         status: 'pending',
                         description: '调用 ui_search 搜索匹配的模板',
                     },
+                    {
+                        name: '保存模板文件',
+                        status: 'pending',
+                        description: `将模板保存为 docs/ui/${templateName}.json`,
+                    },
                     {
                         name: '渲染最终代码',
                         status: 'pending',
@@ -364,6 +908,7 @@ ${recommendation.reasoning}
                     `调用 ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}"`,
                     '调用 init_component_catalog',
                     `调用 ui_search --mode=template --query="${description}"`,
+                    `保存模板到 docs/ui/${templateName}.json`,
                     `调用 render_ui --framework="${inferredStack}"`,
                     '更新 docs/project-context.md 添加 UI 文档链接',
                 ],
@@ -381,24 +926,16 @@ ${recommendation.reasoning}
                     '所有组件使用设计系统中定义的字体',
                     '所有组件使用设计系统中定义的间距',
                 ],
+                metadata: {
+                    plan,
+                    template: templateMeta,
+                },
             };
             return okStructured(smartPlan, uiReport, {
                 schema: UIReportSchema,
                 note: 'AI 应该按照智能计划执行步骤，并在每个步骤完成后更新 structuredContent',
             });
         }
-        // 如果没有提供模板名，从描述中生成
-        if (!templateName && description) {
-            // 简单的命名转换：登录页面 → login-page
-            // 移除特殊字符，只保留字母、数字、中文和连字符
-            templateName = description
-                .toLowerCase()
-                .replace(/页面|表单|组件/g, '')
-                .trim()
-                .replace(/[^\w\u4e00-\u9fa5-]/g, '-')
-                .replace(/-+/g, '-')
-                .replace(/^-|-$/g, '');
-        }
         if (!description) {
             return {
                 content: [
@@ -440,10 +977,80 @@ start_ui "设置页面" --framework=react
         const safeReplace = (template, placeholder, value) => {
             return template.split(placeholder).join(value);
         };
-        let guide = PROMPT_TEMPLATE;
+        const header = renderOrchestrationHeader({
+            tool: 'start_ui',
+            goal: `UI 需求：${description}`,
+            tasks: [
+                '按 delegated plan 顺序调用工具',
+                '生成设计系统、模板并渲染 UI 代码',
+            ],
+            notes: headerNotes,
+        });
+        const baseTemplate = profileDecision.resolved === 'strict'
+            ? PROMPT_TEMPLATE_STRICT
+            : PROMPT_TEMPLATE_GUIDED;
+        let guide = header + baseTemplate;
         guide = safeReplace(guide, '{description}', escapeJson(description));
+        guide = safeReplace(guide, '{productType}', productType);
         guide = safeReplace(guide, '{framework}', framework);
-        guide = safeReplace(guide, '{templateName}', templateName || 'ui-template');
+        guide = safeReplace(guide, '{templateName}', templateName);
+        const plan = {
+            mode: 'delegated',
+            steps: [
+                {
+                    id: 'context',
+                    tool: 'init_project_context',
+                    when: '缺少 docs/project-context.md',
+                    args: {},
+                    outputs: ['docs/project-context.md'],
+                },
+                {
+                    id: 'design-system',
+                    tool: 'ui_design_system',
+                    when: '缺少 docs/design-system.json 或 docs/design-system.md',
+                    args: {
+                        product_type: productType,
+                        stack: framework,
+                        description,
+                    },
+                    outputs: ['docs/design-system.json', 'docs/design-system.md'],
+                },
+                {
+                    id: 'catalog',
+                    tool: 'init_component_catalog',
+                    when: '缺少 docs/ui/component-catalog.json',
+                    args: {},
+                    outputs: ['docs/ui/component-catalog.json'],
+                },
+                {
+                    id: 'template',
+                    tool: 'ui_search',
+                    args: { mode: 'template', query: description },
+                    outputs: [],
+                },
+                {
+                    id: 'save-template',
+                    tool: 'manual',
+                    action: 'save_ui_template',
+                    outputs: [`docs/ui/${templateName}.json`],
+                },
+                {
+                    id: 'render',
+                    tool: 'render_ui',
+                    args: {
+                        template: `docs/ui/${templateName}.json`,
+                        framework,
+                    },
+                    outputs: [],
+                },
+                {
+                    id: 'update-context',
+                    tool: 'manual',
+                    action: 'update_project_context',
+                    outputs: ['docs/project-context.md'],
+                },
+            ],
+        };
         // Create structured UI report for manual mode
         const uiReport = {
             summary: `UI 开发工作流：${description}`,
@@ -462,13 +1069,18 @@ start_ui "设置页面" --framework=react
                 {
                     name: '检查组件目录',
                     status: 'pending',
-                    description: '检查 docs/component-catalog.json 是否存在',
+                    description: '检查 docs/ui/component-catalog.json 是否存在',
                 },
                 {
                     name: '搜索 UI 模板',
                     status: 'pending',
                     description: '调用 ui_search 搜索匹配的模板',
                 },
+                {
+                    name: '保存模板文件',
+                    status: 'pending',
+                    description: `将模板保存为 docs/ui/${templateName}.json`,
+                },
                 {
                     name: '渲染最终代码',
                     status: 'pending',
@@ -486,6 +1098,7 @@ start_ui "设置页面" --framework=react
                 '检查设计系统文件，如不存在则调用 ui_design_system',
                 '检查组件目录，如不存在则调用 init_component_catalog',
                 `调用 ui_search --mode=template --query="${description}"`,
+                `保存模板到 docs/ui/${templateName}.json`,
                 `调用 render_ui --framework="${framework}"`,
                 '更新 docs/project-context.md 添加 UI 文档链接',
             ],
@@ -503,6 +1116,10 @@ start_ui "设置页面" --framework=react
                 '所有组件使用设计系统中定义的字体',
                 '所有组件使用设计系统中定义的间距',
             ],
+            metadata: {
+                plan,
+                template: templateMeta,
+            },
         };
         return okStructured(guide, uiReport, {
             schema: UIReportSchema,