mcp-probe-kit 2.1.1 → 2.2.0

package/build/tools/__tests__/start_ui.integration.test.js

@@ -16,12 +16,15 @@ describe('start_ui 集成测试', () => {
             const text = result.content[0].text || '';
             // 1. 应该包含快速开始部分
             expect(text).toMatch(/^#\s+快速开始/m);
-            // 2. 应该包含 4 个步骤
-            expect(text).toMatch(/步骤 1.*生成设计系统/);
-            expect(text).toMatch(/步骤 2.*生成组件目录/);
-            expect(text).toMatch(/步骤 3.*搜索.*模板/);
-            expect(text).toMatch(/步骤 4.*渲染.*代码/);
+            // 2. 应该包含 6 个步骤（新增了项目上下文和更新索引）
+            expect(text).toMatch(/步骤 1.*生成项目上下文/);
+            expect(text).toMatch(/步骤 2.*生成设计系统/);
+            expect(text).toMatch(/步骤 3.*生成组件目录/);
+            expect(text).toMatch(/步骤 4.*搜索.*模板/);
+            expect(text).toMatch(/步骤 5.*渲染.*代码/);
+            expect(text).toMatch(/步骤 6.*更新项目上下文/);
             // 3. 每个步骤应该包含工具名称
+            expect(text).toMatch(/init_project_context/);
             expect(text).toMatch(/ui_design_system/);
             expect(text).toMatch(/init_component_catalog/);
             expect(text).toMatch(/ui_search/);

package/build/tools/__tests__/start_ui.unit.test.js

@@ -35,9 +35,9 @@ describe('start_ui 单元测试', () => {
         });
     });
     describe('参数解析', () => {
-        test('默认 framework 为 react', async () => {
+        test('默认 framework 为 html（最通用）', async () => {
             const result = await startUi({ description: '测试' });
-            expect(result.content[0].text).toMatch(/react/i);
+            expect(result.content[0].text).toMatch(/html/i);
         });
         test('支持 vue framework', async () => {
             const result = await startUi({

package/build/tools/init_project_context.js

@@ -168,112 +168,112 @@ async function generateProjectContext(docsDir, projectRoot = process.cwd()) {
  */
 function generateGuideText(detection, projectInfo, docs, docsDir) {
     const timestamp = new Date().toISOString();
-    return `# 项目上下文文档生成指导
-
-## 📊 项目信息
-
-- **项目名称**: ${projectInfo.name}
-- **版本**: ${projectInfo.version}
-- **语言**: ${detection.language}
-- **框架**: ${detection.framework || '未检测到'}
-- **类型**: ${detection.category}
-- **置信度**: ${detection.confidence}%
-
-## 📋 需要生成的文档
-
-请按照以下结构生成 **${docs.length + 1}** 个文档：
-
-\`\`\`
-${docsDir}/
-├── project-context.md          # 索引文件（必须首先生成）
-└── project-context/            # 分类文档目录
-${docs.map(doc => `    ├── ${doc.file.padEnd(28)} # ${doc.title}`).join('\n')}
-\`\`\`
-
----
-
-## 🎯 生成步骤
-
-### 第一步：生成索引文件（最重要！）
-
-**文件**: \`${docsDir}/project-context.md\`
-
-这是项目上下文的**灵魂**，必须首先生成。它是所有文档的入口和导航中心。
-
-**模板**:
-
-\`\`\`markdown
-# ${projectInfo.name} - 项目上下文
-
-> 本文档是项目上下文的索引文件，提供项目概览和文档导航。
-
-## 📊 项目概览
-
-| 属性 | 值 |
-|------|-----|
-| 项目名称 | ${projectInfo.name} |
-| 版本 | ${projectInfo.version} |
-| 语言 | ${detection.language} |
-| 框架 | ${detection.framework || '无'} |
-| 类型 | ${detection.category} |
-| 描述 | ${projectInfo.description || '待补充'} |
-
-## 📚 文档导航
-
-${docs.map(doc => `### [${doc.title}](./project-context/${doc.file})
-${doc.purpose}
-`).join('\n')}
-
-## 🚀 快速开始
-
-1. 阅读 [技术栈](./project-context/tech-stack.md) 了解项目使用的技术
-2. 阅读 [架构设计](./project-context/architecture.md) 了解项目结构
-3. 根据需要查看具体的操作指南
-
-## 💡 开发时查看对应文档
-
-根据你要做的事情，查看对应的文档：
-
-${generateDevGuide(docs)}
-
----
-*生成时间: ${timestamp}*  
-*生成工具: MCP Probe Kit - init_project_context v2.1*
-\`\`\`
-
-**使用 fsWrite 创建此文件**
-
----
-
-### 第二步：生成分类文档
-
-${docs.map((doc, index) => generateDocTemplate(doc, index + 2, projectInfo, detection, docsDir)).join('\n\n---\n\n')}
-
----
-
-## ✅ 完成标准
-
-请确认：
-
-- [ ] 已使用 fsWrite 创建 **${docs.length + 1}** 个文件
-- [ ] 索引文件 \`project-context.md\` 已创建（最重要！）
-- [ ] 所有文档都包含**真实的文件路径**（不是 [xxx] 占位符）
-- [ ] 所有文档都包含**实际的代码示例**（从项目中复制）
-- [ ] 所有步骤都具体可操作
-- [ ] 所有示例都来自项目实际代码
-
----
-
-**重要提示**:
-1. **必须从项目中提取真实示例** - 不要编造代码
-2. **路径必须真实存在** - 检查文件是否存在
-3. **步骤必须具体** - 不要写"根据需要修改"这种模糊的话
-4. **代码必须完整** - 不要用 ... 省略
-
----
-
-*工具: MCP Probe Kit - init_project_context*  
-*版本: 2.1.0*
+    return `# 项目上下文文档生成指导
+
+## 📊 项目信息
+
+- **项目名称**: ${projectInfo.name}
+- **版本**: ${projectInfo.version}
+- **语言**: ${detection.language}
+- **框架**: ${detection.framework || '未检测到'}
+- **类型**: ${detection.category}
+- **置信度**: ${detection.confidence}%
+
+## 📋 需要生成的文档
+
+请按照以下结构生成 **${docs.length + 1}** 个文档：
+
+\`\`\`
+${docsDir}/
+├── project-context.md          # 索引文件（必须首先生成）
+└── project-context/            # 分类文档目录
+${docs.map(doc => `    ├── ${doc.file.padEnd(28)} # ${doc.title}`).join('\n')}
+\`\`\`
+
+---
+
+## 🎯 生成步骤
+
+### 第一步：生成索引文件（最重要！）
+
+**文件**: \`${docsDir}/project-context.md\`
+
+这是项目上下文的**灵魂**，必须首先生成。它是所有文档的入口和导航中心。
+
+**模板**:
+
+\`\`\`markdown
+# ${projectInfo.name} - 项目上下文
+
+> 本文档是项目上下文的索引文件，提供项目概览和文档导航。
+
+## 📊 项目概览
+
+| 属性 | 值 |
+|------|-----|
+| 项目名称 | ${projectInfo.name} |
+| 版本 | ${projectInfo.version} |
+| 语言 | ${detection.language} |
+| 框架 | ${detection.framework || '无'} |
+| 类型 | ${detection.category} |
+| 描述 | ${projectInfo.description || '待补充'} |
+
+## 📚 文档导航
+
+${docs.map(doc => `### [${doc.title}](./project-context/${doc.file})
+${doc.purpose}
+`).join('\n')}
+
+## 🚀 快速开始
+
+1. 阅读 [技术栈](./project-context/tech-stack.md) 了解项目使用的技术
+2. 阅读 [架构设计](./project-context/architecture.md) 了解项目结构
+3. 根据需要查看具体的操作指南
+
+## 💡 开发时查看对应文档
+
+根据你要做的事情，查看对应的文档：
+
+${generateDevGuide(docs)}
+
+---
+*生成时间: ${timestamp}*  
+*生成工具: MCP Probe Kit - init_project_context v2.1*
+\`\`\`
+
+**使用 fsWrite 创建此文件**
+
+---
+
+### 第二步：生成分类文档
+
+${docs.map((doc, index) => generateDocTemplate(doc, index + 2, projectInfo, detection, docsDir)).join('\n\n---\n\n')}
+
+---
+
+## ✅ 完成标准
+
+请确认：
+
+- [ ] 已使用 fsWrite 创建 **${docs.length + 1}** 个文件
+- [ ] 索引文件 \`project-context.md\` 已创建（最重要！）
+- [ ] 所有文档都包含**真实的文件路径**（不是 [xxx] 占位符）
+- [ ] 所有文档都包含**实际的代码示例**（从项目中复制）
+- [ ] 所有步骤都具体可操作
+- [ ] 所有示例都来自项目实际代码
+
+---
+
+**重要提示**:
+1. **必须从项目中提取真实示例** - 不要编造代码
+2. **路径必须真实存在** - 检查文件是否存在
+3. **步骤必须具体** - 不要写"根据需要修改"这种模糊的话
+4. **代码必须完整** - 不要用 ... 省略
+
+---
+
+*工具: MCP Probe Kit - init_project_context*  
+*版本: 2.1.0*
 `;
 }
 /**
@@ -283,286 +283,286 @@ function generateDocTemplate(doc, step, projectInfo, detection, docsDir) {
     const timestamp = new Date().toISOString();
     // 根据文档类型生成不同的模板
     const templates = {
-        'tech-stack.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
-
-**用途**: ${doc.purpose}
-
-**模板**:
-
-\`\`\`markdown
-# 技术栈
-
-> 本文档描述 ${projectInfo.name} 的技术栈信息。
-
-## 基本信息
-
-| 属性 | 值 |
-|------|-----|
-| 项目名称 | ${projectInfo.name} |
-| 版本 | ${projectInfo.version} |
-| 语言 | ${detection.language} |
-| 框架 | ${detection.framework || '无'} |
-
-## 技术栈详情
-
-### 核心技术
-
-| 类别 | 技术 | 版本 |
-|------|------|------|
-| 语言 | [从 package.json 或配置文件中提取] | [版本] |
-| 运行时 | [Node.js/Python/Java 等] | [版本] |
-| 框架 | [主要框架] | [版本] |
-
-### 开发工具
-
-| 类别 | 工具 | 用途 |
-|------|------|------|
-| 构建工具 | [如 TypeScript, Webpack] | [用途] |
-| 测试框架 | [如 Jest, Vitest] | [用途] |
-| 代码检查 | [如 ESLint, Prettier] | [用途] |
-
-### 主要依赖
-
-列出 5-10 个最重要的依赖包及其用途。
-
----
-*返回索引: [../project-context.md](../project-context.md)*
-\`\`\`
-
-**填写指导**:
-1. 读取 \`package.json\` 获取依赖信息
-2. 读取 \`tsconfig.json\` 或其他配置文件
-3. 列出最重要的 5-10 个依赖包
+        'tech-stack.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
+
+**用途**: ${doc.purpose}
+
+**模板**:
+
+\`\`\`markdown
+# 技术栈
+
+> 本文档描述 ${projectInfo.name} 的技术栈信息。
+
+## 基本信息
+
+| 属性 | 值 |
+|------|-----|
+| 项目名称 | ${projectInfo.name} |
+| 版本 | ${projectInfo.version} |
+| 语言 | ${detection.language} |
+| 框架 | ${detection.framework || '无'} |
+
+## 技术栈详情
+
+### 核心技术
+
+| 类别 | 技术 | 版本 |
+|------|------|------|
+| 语言 | [从 package.json 或配置文件中提取] | [版本] |
+| 运行时 | [Node.js/Python/Java 等] | [版本] |
+| 框架 | [主要框架] | [版本] |
+
+### 开发工具
+
+| 类别 | 工具 | 用途 |
+|------|------|------|
+| 构建工具 | [如 TypeScript, Webpack] | [用途] |
+| 测试框架 | [如 Jest, Vitest] | [用途] |
+| 代码检查 | [如 ESLint, Prettier] | [用途] |
+
+### 主要依赖
+
+列出 5-10 个最重要的依赖包及其用途。
+
+---
+*返回索引: [../project-context.md](../project-context.md)*
+\`\`\`
+
+**填写指导**:
+1. 读取 \`package.json\` 获取依赖信息
+2. 读取 \`tsconfig.json\` 或其他配置文件
+3. 列出最重要的 5-10 个依赖包
 4. 说明每个依赖的用途`,
-        'architecture.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
-
-**用途**: ${doc.purpose}
-
-**模板**:
-
-\`\`\`markdown
-# 架构设计
-
-> 本文档描述 ${projectInfo.name} 的架构和项目结构。
-
-## 项目结构
-
-\`\`\`
-[使用 listDirectory 工具生成目录树，深度 2-3 层]
-\`\`\`
-
-## 主要目录说明
-
-| 目录 | 用途 |
-|------|------|
-| [目录名] | [从实际项目中分析得出] |
-
-## 入口文件
-
-- **主入口**: \`[实际的入口文件路径，如 src/index.ts]\`
-- **配置文件**: \`[如 package.json, tsconfig.json]\`
-
-## 架构模式
-
-- **项目类型**: ${detection.category}
-- **设计模式**: [从代码中识别，如 MVC, 工具集合, 插件系统等]
-- **模块划分**: [说明主要模块及其职责]
-
-## 核心模块
-
-### [模块名称]
-- **位置**: \`[实际路径]\`
-- **职责**: [模块功能]
-- **主要文件**: [列出 2-3 个关键文件]
-
----
-*返回索引: [../project-context.md](../project-context.md)*
-\`\`\`
-
-**填写指导**:
-1. 使用 listDirectory 工具查看项目结构
-2. 读取主要目录下的文件
-3. 识别项目的组织方式
+        'architecture.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
+
+**用途**: ${doc.purpose}
+
+**模板**:
+
+\`\`\`markdown
+# 架构设计
+
+> 本文档描述 ${projectInfo.name} 的架构和项目结构。
+
+## 项目结构
+
+\`\`\`
+[使用 listDirectory 工具生成目录树，深度 2-3 层]
+\`\`\`
+
+## 主要目录说明
+
+| 目录 | 用途 |
+|------|------|
+| [目录名] | [从实际项目中分析得出] |
+
+## 入口文件
+
+- **主入口**: \`[实际的入口文件路径，如 src/index.ts]\`
+- **配置文件**: \`[如 package.json, tsconfig.json]\`
+
+## 架构模式
+
+- **项目类型**: ${detection.category}
+- **设计模式**: [从代码中识别，如 MVC, 工具集合, 插件系统等]
+- **模块划分**: [说明主要模块及其职责]
+
+## 核心模块
+
+### [模块名称]
+- **位置**: \`[实际路径]\`
+- **职责**: [模块功能]
+- **主要文件**: [列出 2-3 个关键文件]
+
+---
+*返回索引: [../project-context.md](../project-context.md)*
+\`\`\`
+
+**填写指导**:
+1. 使用 listDirectory 工具查看项目结构
+2. 读取主要目录下的文件
+3. 识别项目的组织方式
 4. 找出核心模块和关键文件`,
-        'how-to-add-api.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
-
-**用途**: ${doc.purpose}
-
-**模板**:
-
-\`\`\`markdown
-# 如何添加新接口
-
-> 本文档指导如何在 ${projectInfo.name} 中添加新的 API 接口。
-
-## 第一步：找到路由定义位置
-
-项目的路由定义在：\`[实际路径，如 src/routes/, src/api/]\`
-
-**现有示例**（从项目中找一个真实的路由文件）:
-\`\`\`[语言]
-[复制一个实际的路由定义代码]
-\`\`\`
-
-## 第二步：创建新路由
-
-1. 在 \`[路径]\` 目录下创建文件 \`[命名规范].ts\`
-2. 定义路由：
-
-\`\`\`[语言]
-[基于项目实际代码风格的示例]
-\`\`\`
-
-## 第三步：实现业务逻辑
-
-业务逻辑通常在：\`[实际路径，如 src/controllers/, src/services/]\`
-
-**现有示例**:
-\`\`\`[语言]
-[复制一个实际的 controller/service 代码]
-\`\`\`
-
-## 第四步：数据验证
-
-项目使用 [验证库名称] 进行数据验证。
-
-**示例**:
-\`\`\`[语言]
-[从项目中找一个验证示例]
-\`\`\`
-
-## 第五步：注册路由
-
-在 \`[实际文件路径]\` 中注册新路由：
-
-\`\`\`[语言]
-[实际的路由注册代码]
-\`\`\`
-
-## 第六步：测试
-
-运行测试命令：\`[实际命令，如 npm test]\`
-
----
-*返回索引: [../project-context.md](../project-context.md)*
-\`\`\`
-
-**填写指导**:
-1. 搜索 src/routes, src/api, src/controllers 等目录
-2. 找 2-3 个现有的 API 接口作为参考
-3. 复制实际的代码示例（不要编造）
+        'how-to-add-api.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
+
+**用途**: ${doc.purpose}
+
+**模板**:
+
+\`\`\`markdown
+# 如何添加新接口
+
+> 本文档指导如何在 ${projectInfo.name} 中添加新的 API 接口。
+
+## 第一步：找到路由定义位置
+
+项目的路由定义在：\`[实际路径，如 src/routes/, src/api/]\`
+
+**现有示例**（从项目中找一个真实的路由文件）:
+\`\`\`[语言]
+[复制一个实际的路由定义代码]
+\`\`\`
+
+## 第二步：创建新路由
+
+1. 在 \`[路径]\` 目录下创建文件 \`[命名规范].ts\`
+2. 定义路由：
+
+\`\`\`[语言]
+[基于项目实际代码风格的示例]
+\`\`\`
+
+## 第三步：实现业务逻辑
+
+业务逻辑通常在：\`[实际路径，如 src/controllers/, src/services/]\`
+
+**现有示例**:
+\`\`\`[语言]
+[复制一个实际的 controller/service 代码]
+\`\`\`
+
+## 第四步：数据验证
+
+项目使用 [验证库名称] 进行数据验证。
+
+**示例**:
+\`\`\`[语言]
+[从项目中找一个验证示例]
+\`\`\`
+
+## 第五步：注册路由
+
+在 \`[实际文件路径]\` 中注册新路由：
+
+\`\`\`[语言]
+[实际的路由注册代码]
+\`\`\`
+
+## 第六步：测试
+
+运行测试命令：\`[实际命令，如 npm test]\`
+
+---
+*返回索引: [../project-context.md](../project-context.md)*
+\`\`\`
+
+**填写指导**:
+1. 搜索 src/routes, src/api, src/controllers 等目录
+2. 找 2-3 个现有的 API 接口作为参考
+3. 复制实际的代码示例（不要编造）
 4. 说明项目特定的命名和组织方式`,
-        'how-to-new-page.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
-
-**用途**: ${doc.purpose}
-
-**模板**:
-
-\`\`\`markdown
-# 如何创建新页面
-
-> 本文档指导如何在 ${projectInfo.name} 中创建新的页面组件。
-
-## 第一步：找到页面目录
-
-项目的页面组件在：\`[实际路径，如 src/pages/, src/views/, app/]\`
-
-**现有示例**（从项目中找一个真实的页面）:
-\`\`\`[语言]
-[复制一个实际的页面组件代码]
-\`\`\`
-
-## 第二步：创建页面文件
-
-1. 在 \`[路径]\` 目录下创建 \`[命名规范].tsx\`
-2. 定义组件：
-
-\`\`\`[语言]
-[基于项目实际代码风格的示例]
-\`\`\`
-
-## 第三步：配置路由
-
-项目使用 [路由库名称]。
-
-**路由配置位置**: \`[实际文件路径]\`
-
-**示例**:
-\`\`\`[语言]
-[从项目中找路由配置示例]
-\`\`\`
-
-## 第四步：获取数据
-
-项目使用 [数据获取方式，如 useEffect, getServerSideProps, loader]。
-
-**示例**:
-\`\`\`[语言]
-[从项目中找数据获取示例]
-\`\`\`
-
-## 第五步：编写样式
-
-项目使用 [样式方案，如 CSS Modules, Tailwind, styled-components]。
-
-**示例**:
-\`\`\`[语言]
-[从项目中找样式示例]
-\`\`\`
-
----
-*返回索引: [../project-context.md](../project-context.md)*
-\`\`\`
-
-**填写指导**:
-1. 搜索 src/pages, src/views, app 等目录
-2. 找 1-2 个现有页面作为参考
-3. 复制实际的组件代码
+        'how-to-new-page.md': `**文件**: \`${docsDir}/project-context/${doc.file}\`
+
+**用途**: ${doc.purpose}
+
+**模板**:
+
+\`\`\`markdown
+# 如何创建新页面
+
+> 本文档指导如何在 ${projectInfo.name} 中创建新的页面组件。
+
+## 第一步：找到页面目录
+
+项目的页面组件在：\`[实际路径，如 src/pages/, src/views/, app/]\`
+
+**现有示例**（从项目中找一个真实的页面）:
+\`\`\`[语言]
+[复制一个实际的页面组件代码]
+\`\`\`
+
+## 第二步：创建页面文件
+
+1. 在 \`[路径]\` 目录下创建 \`[命名规范].tsx\`
+2. 定义组件：
+
+\`\`\`[语言]
+[基于项目实际代码风格的示例]
+\`\`\`
+
+## 第三步：配置路由
+
+项目使用 [路由库名称]。
+
+**路由配置位置**: \`[实际文件路径]\`
+
+**示例**:
+\`\`\`[语言]
+[从项目中找路由配置示例]
+\`\`\`
+
+## 第四步：获取数据
+
+项目使用 [数据获取方式，如 useEffect, getServerSideProps, loader]。
+
+**示例**:
+\`\`\`[语言]
+[从项目中找数据获取示例]
+\`\`\`
+
+## 第五步：编写样式
+
+项目使用 [样式方案，如 CSS Modules, Tailwind, styled-components]。
+
+**示例**:
+\`\`\`[语言]
+[从项目中找样式示例]
+\`\`\`
+
+---
+*返回索引: [../project-context.md](../project-context.md)*
+\`\`\`
+
+**填写指导**:
+1. 搜索 src/pages, src/views, app 等目录
+2. 找 1-2 个现有页面作为参考
+3. 复制实际的组件代码
 4. 说明路由配置方式`
     };
     // 如果没有特定模板，使用通用模板
-    const template = templates[doc.file] || `**文件**: \`${docsDir}/project-context/${doc.file}\`
-
-**用途**: ${doc.purpose}
-
-**模板**:
-
-\`\`\`markdown
-# ${doc.title}
-
-> 本文档描述 ${projectInfo.name} 的 ${doc.title.toLowerCase()}。
-
-## 概述
-
-[简要说明本文档的内容]
-
-## 详细步骤
-
-### 第一步：[步骤名称]
-
-[具体说明]
-
-**示例**:
-\`\`\`[语言]
-[从项目中提取的实际代码]
-\`\`\`
-
-### 第二步：[步骤名称]
-
-[具体说明]
-
----
-*返回索引: [../project-context.md](../project-context.md)*
-\`\`\`
-
-**填写指导**:
-1. 分析项目相关代码
-2. 提取真实示例
+    const template = templates[doc.file] || `**文件**: \`${docsDir}/project-context/${doc.file}\`
+
+**用途**: ${doc.purpose}
+
+**模板**:
+
+\`\`\`markdown
+# ${doc.title}
+
+> 本文档描述 ${projectInfo.name} 的 ${doc.title.toLowerCase()}。
+
+## 概述
+
+[简要说明本文档的内容]
+
+## 详细步骤
+
+### 第一步：[步骤名称]
+
+[具体说明]
+
+**示例**:
+\`\`\`[语言]
+[从项目中提取的实际代码]
+\`\`\`
+
+### 第二步：[步骤名称]
+
+[具体说明]
+
+---
+*返回索引: [../project-context.md](../project-context.md)*
+\`\`\`
+
+**填写指导**:
+1. 分析项目相关代码
+2. 提取真实示例
 3. 编写具体步骤`;
-    return `### 第${step}步：${doc.title}
-
-${template}
-
+    return `### 第${step}步：${doc.title}
+
+${template}
+
 **使用 fsWrite 创建此文件**`;
 }
 /**

package/build/tools/start_ui.js

@@ -11,20 +11,38 @@ import { parseArgs, getString } 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 { detectProjectType } from "../lib/project-detector.js";
 const PROMPT_TEMPLATE = `# 快速开始
 
 **职责说明**: 本工具仅提供执行指导，不执行实际操作。请按顺序调用以下 MCP 工具。
 
 执行以下工具：
 
-1. 检查 \`docs/design-system.md\` 是否存在，不存在则调用 \`ui_design_system --product_type="SaaS" --stack="{framework}"\`
-2. 检查 \`docs/component-catalog.json\` 是否存在，不存在则调用 \`init_component_catalog\`
-3. \`ui_search --mode=template --query="{description}"\`
-4. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+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\`
+4. \`ui_search --mode=template --query="{description}"\`
+5. \`render_ui --template="docs/ui/{templateName}.json" --framework="{framework}"\`
+6. 将生成的 UI 文档添加到 \`docs/project-context.md\` 索引中
 
 ---
 
-## 步骤 1: 生成设计系统（如不存在）✅
+## 步骤 1: 生成项目上下文（如不存在）📋
+
+**检查**: 查看 \`docs/project-context.md\` 是否存在
+
+**如果不存在，调用工具**: \`init_project_context\`
+**参数**: 无（使用默认配置）
+
+**预期输出**: 
+- \`docs/project-context.md\` - 项目上下文索引文件
+- \`docs/project-context/\` - 项目文档目录
+
+**失败处理**: 确保 docs 目录存在且有写入权限
+
+---
+
+## 步骤 2: 生成设计系统（如不存在）🎨
 
 **检查**: 查看 \`docs/design-system.md\` 是否存在
 
@@ -43,7 +61,7 @@ const PROMPT_TEMPLATE = `# 快速开始
 
 ---
 
-## 步骤 2: 生成组件目录（如不存在）🔄
+## 步骤 3: 生成组件目录（如不存在）📦
 
 **检查**: 查看 \`docs/component-catalog.json\` 是否存在
 
@@ -51,11 +69,11 @@ const PROMPT_TEMPLATE = `# 快速开始
 **参数**: 无
 
 **预期输出**: \`docs/component-catalog.json\`
-**失败处理**: 确保步骤 1 的设计系统文件已生成
+**失败处理**: 确保步骤 2 的设计系统文件已生成
 
 ---
 
-## 步骤 3: 搜索 UI 模板 🔍
+## 步骤 4: 搜索 UI 模板 🔍
 
 **工具**: \`ui_search\`
 **参数**:
@@ -67,11 +85,11 @@ const PROMPT_TEMPLATE = `# 快速开始
 \`\`\`
 
 **预期输出**: 匹配的模板列表（可能为空）
-**失败处理**: 如果没有找到模板，继续到步骤 4 使用默认模板
+**失败处理**: 如果没有找到模板，继续到步骤 5 使用默认模板
 
 ---
 
-## 步骤 4: 渲染最终代码 🎨
+## 步骤 5: 渲染最终代码 💻
 
 **工具**: \`render_ui\`
 **参数**:
@@ -87,6 +105,32 @@ const PROMPT_TEMPLATE = `# 快速开始
 
 ---
 
+## 步骤 6: 更新项目上下文索引 📝
+
+**操作**: 将生成的 UI 文档添加到 \`docs/project-context.md\` 中
+
+**添加内容**:
+在 "## 📚 文档导航" 部分添加：
+
+\`\`\`markdown
+### [UI 设计系统](./design-system.md)
+项目的 UI 设计规范，包括颜色、字体、组件样式等
+
+### [UI 组件目录](./component-catalog.json)
+可用的 UI 组件及其属性定义
+\`\`\`
+
+在 "## 💡 开发时查看对应文档" 部分的 "添加新功能" 下添加：
+\`\`\`markdown
+- **UI 设计系统**: [design-system.md](./design-system.md) - 查看设计规范
+- **UI 组件目录**: [component-catalog.json](./component-catalog.json) - 查看可用组件
+\`\`\`
+
+**预期结果**: \`docs/project-context.md\` 包含 UI 相关文档的链接
+**失败处理**: 如果文件不存在，跳过此步骤
+
+---
+
 ## 高级选项
 
 ### 自定义设计系统
@@ -103,16 +147,75 @@ A: 不需要。如果文件已存在，直接跳过步骤 1。
 **Q: 如何使用自定义模板？**
 A: 在 \`docs/ui/\` 目录创建 JSON 模板文件，然后在步骤 4 中指定模板路径。
 `;
+/**
+ * 从 project-context.md 读取框架信息
+ */
+function getFrameworkFromContext(projectRoot) {
+    try {
+        const fs = require('fs');
+        const path = require('path');
+        const contextPath = path.join(projectRoot, 'docs', 'project-context.md');
+        if (!fs.existsSync(contextPath)) {
+            return null;
+        }
+        const content = fs.readFileSync(contextPath, 'utf-8');
+        // 匹配表格中的框架信息：| 框架 | xxx |
+        const match = content.match(/\|\s*框架\s*\|\s*([^\|]+)\s*\|/);
+        if (match && match[1]) {
+            const framework = match[1].trim();
+            if (framework && framework !== '无' && framework !== '未检测到') {
+                return framework;
+            }
+        }
+        return null;
+    }
+    catch (error) {
+        return null;
+    }
+}
 /**
  * 统一 UI 开发编排工具
  */
 export async function startUi(args) {
     try {
+        const projectRoot = process.cwd();
+        // 优先从 project-context.md 读取框架信息
+        let detectedFramework = 'html'; // 默认值
+        const contextFramework = getFrameworkFromContext(projectRoot);
+        if (contextFramework) {
+            // 从 project-context.md 中读取到了框架信息
+            const fw = contextFramework.toLowerCase();
+            if (fw.includes('vue') || fw.includes('nuxt')) {
+                detectedFramework = 'vue';
+            }
+            else if (fw.includes('react') || fw.includes('next')) {
+                detectedFramework = 'react';
+            }
+            else if (fw.includes('html')) {
+                detectedFramework = 'html';
+            }
+        }
+        else {
+            // 如果没有 project-context.md，则实时检测
+            const detection = detectProjectType(projectRoot);
+            if (detection.framework) {
+                const fw = detection.framework.toLowerCase();
+                if (fw.includes('vue') || fw.includes('nuxt')) {
+                    detectedFramework = 'vue';
+                }
+                else if (fw.includes('react') || fw.includes('next')) {
+                    detectedFramework = 'react';
+                }
+                else if (fw.includes('html') || fw === 'none') {
+                    detectedFramework = 'html';
+                }
+            }
+        }
         // 智能参数解析
         const parsedArgs = parseArgs(args, {
             defaultValues: {
                 description: "",
-                framework: "react",
+                framework: detectedFramework, // 使用检测到的框架
                 template: "",
                 mode: "manual",
             },
@@ -125,7 +228,7 @@ export async function startUi(args) {
             },
         });
         const description = getString(parsedArgs.description);
-        const framework = getString(parsedArgs.framework) || "react";
+        const framework = getString(parsedArgs.framework) || detectedFramework;
         const mode = getString(parsedArgs.mode) || "manual";
         let templateName = getString(parsedArgs.template);
         // 验证 mode 参数
@@ -184,27 +287,35 @@ start_ui "用户列表" --mode=auto
 
 请按顺序执行以下命令：
 
-### 1. 生成设计系统 🎨
+### 1. 生成项目上下文 📋
+\`\`\`bash
+init_project_context
+\`\`\`
+
+### 2. 生成设计系统 🎨
 \`\`\`bash
 ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}" --keywords="${inferredKeywords}" --description="${description}"
 \`\`\`
 
-### 2. 生成组件目录 📦
+### 3. 生成组件目录 📦
 \`\`\`bash
 init_component_catalog
 \`\`\`
 
-### 3. 生成 UI 模板 📄
+### 4. 生成 UI 模板 📄
 \`\`\`bash
 # 搜索现有模板或生成新模板
 ui_search --mode=template --query="${templateName || description}"
 \`\`\`
 
-### 4. 渲染代码 💻
+### 5. 渲染代码 💻
 \`\`\`bash
 render_ui docs/ui/${templateName || 'template'}.json --framework="${inferredStack}"
 \`\`\`
 
+### 6. 更新项目上下文 📝
+将生成的 UI 文档链接添加到 \`docs/project-context.md\` 的文档导航部分。
+
 ---
 
 ## 💡 为什么选择这个方案？
@@ -216,6 +327,11 @@ ${recommendation.reasoning}
                 summary: `智能 UI 开发：${description}`,
                 status: 'pending',
                 steps: [
+                    {
+                        name: '生成项目上下文',
+                        status: 'pending',
+                        description: `调用 init_project_context 生成项目文档`,
+                    },
                     {
                         name: '生成设计系统',
                         status: 'pending',
@@ -236,13 +352,20 @@ ${recommendation.reasoning}
                         status: 'pending',
                         description: '调用 render_ui 生成组件代码',
                     },
+                    {
+                        name: '更新项目上下文',
+                        status: 'pending',
+                        description: '将 UI 文档添加到 project-context.md 索引',
+                    },
                 ],
                 artifacts: [],
                 nextSteps: [
+                    '调用 init_project_context',
                     `调用 ui_design_system --product_type="${inferredProductType}" --stack="${inferredStack}"`,
                     '调用 init_component_catalog',
                     `调用 ui_search --mode=template --query="${description}"`,
                     `调用 render_ui --framework="${inferredStack}"`,
+                    '更新 docs/project-context.md 添加 UI 文档链接',
                 ],
                 designSystem: {
                     colors: {},
@@ -326,6 +449,11 @@ start_ui "设置页面" --framework=react
             summary: `UI 开发工作流：${description}`,
             status: 'pending',
             steps: [
+                {
+                    name: '检查项目上下文',
+                    status: 'pending',
+                    description: '检查 docs/project-context.md 是否存在',
+                },
                 {
                     name: '检查设计系统',
                     status: 'pending',
@@ -346,13 +474,20 @@ start_ui "设置页面" --framework=react
                     status: 'pending',
                     description: '调用 render_ui 生成组件代码',
                 },
+                {
+                    name: '更新项目上下文',
+                    status: 'pending',
+                    description: '将 UI 文档添加到 project-context.md 索引',
+                },
             ],
             artifacts: [],
             nextSteps: [
+                '检查项目上下文，如不存在则调用 init_project_context',
                 '检查设计系统文件，如不存在则调用 ui_design_system',
                 '检查组件目录，如不存在则调用 init_component_catalog',
                 `调用 ui_search --mode=template --query="${description}"`,
                 `调用 render_ui --framework="${framework}"`,
+                '更新 docs/project-context.md 添加 UI 文档链接',
             ],
             designSystem: {
                 colors: {},

package/docs/CNAME

@@ -0,0 +1 @@
+mcp-probe-kit.bytezonex.com

package/docs/pages/all-tools.html

@@ -296,13 +296,19 @@
                 
                 <div class="nav-section">
                     <div class="nav-section-title">工具文档</div>
-                    <a href="./all-tools.html" class="nav-item active">
+                    <div class="nav-item nav-item-toggle active expanded" onclick="toggleSubmenu(this)">
                         <div class="nav-item-content">
                             <span class="icon">🛠️</span>
                             <span>所有工具</span>
                         </div>
-                        <span class="badge">39</span>
-                    </a>
+                        <div style="display: flex; align-items: center; gap: 8px;">
+                            <span class="badge">39</span>
+                            <span class="toggle-icon">▶</span>
+                        </div>
+                    </div>
+                    <div class="nav-submenu expanded" id="tools-submenu">
+                        <!-- 工具列表将通过 JavaScript 动态生成 -->
+                    </div>
                 </div>
                 
                 <div class="nav-section">
@@ -464,6 +470,49 @@
     <!-- 引入工具数据 -->
     <script src="../data/tools.js"></script>
     <script>
+        // 切换子菜单展开/收起
+        function toggleSubmenu(element) {
+            element.classList.toggle('expanded');
+            const submenu = document.getElementById('tools-submenu');
+            submenu.classList.toggle('expanded');
+        }
+        
+        // 生成侧边栏工具列表
+        function generateSidebarTools() {
+            const submenu = document.getElementById('tools-submenu');
+            let html = '';
+            
+            for (const [categoryKey, categoryInfo] of Object.entries(categories)) {
+                const tools = toolsData[categoryKey];
+                if (!tools || tools.length === 0) continue;
+                
+                tools.forEach(tool => {
+                    const toolId = tool.name.replace(/_/g, '-');
+                    html += `
+                        <a href="#${toolId}" class="nav-subitem" onclick="scrollToTool('${toolId}')">
+                            ${tool.name}
+                        </a>
+                    `;
+                });
+            }
+            
+            submenu.innerHTML = html;
+        }
+        
+        // 滚动到指定工具
+        function scrollToTool(toolId) {
+            const element = document.getElementById(toolId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                // 高亮显示
+                element.style.transition = 'background 0.3s';
+                element.style.background = 'rgba(37, 99, 235, 0.05)';
+                setTimeout(() => {
+                    element.style.background = '';
+                }, 2000);
+            }
+        }
+        
         // Topbar scroll effect
         const topbar = document.getElementById('topbar');
         window.addEventListener('scroll', () => {
@@ -584,7 +633,7 @@
             }
             
             return `
-                <div class="tool-card">
+                <div class="tool-card" id="${tool.name.replace(/_/g, '-')}">
                     <div class="tool-main">
                         <div class="tool-header">
                             <div class="tool-name">${tool.name}</div>
@@ -632,6 +681,9 @@
                 });
             }
             
+            // 生成侧边栏工具列表
+            generateSidebarTools();
+            
             // 渲染所有工具
             renderTools();
             

package/docs/styles/page.css

@@ -218,6 +218,55 @@ body {
     opacity: 1;
 }
 
+/* 子菜单样式 */
+.nav-item-toggle {
+    cursor: pointer;
+    user-select: none;
+}
+
+.nav-item-toggle .toggle-icon {
+    transition: transform 0.2s;
+    font-size: 12px;
+    color: var(--text-tertiary);
+}
+
+.nav-item-toggle.expanded .toggle-icon {
+    transform: rotate(90deg);
+}
+
+.nav-submenu {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.nav-submenu.expanded {
+    max-height: 2000px;
+}
+
+.nav-subitem {
+    display: block;
+    padding: 8px 20px 8px 48px;
+    margin: 2px 12px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s;
+    border-radius: 6px;
+    font-size: 13px;
+    position: relative;
+}
+
+.nav-subitem:hover {
+    background: var(--bg-hover);
+    color: var(--primary);
+}
+
+.nav-subitem.active {
+    background: rgba(37, 99, 235, 0.05);
+    color: var(--primary);
+    font-weight: 600;
+}
+
 .badge {
     background: var(--bg-hover);
     color: var(--text-secondary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-probe-kit",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "AI-Powered Development Toolkit - MCP Server with 39 practical tools covering code quality, development efficiency, project management, and UI/UX design. Features: Structured Output, Workflow Orchestration, UI/UX Pro Max, and Requirements Interview.",
   "type": "module",
   "main": "build/index.js",
@@ -63,15 +63,15 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.3"
+    "@modelcontextprotocol/sdk": "^1.25.3",
+    "csv-parse": "^6.1.0",
+    "tar": "^7.5.6"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/tar": "^6.1.13",
     "@vitest/ui": "^4.0.18",
-    "csv-parse": "^6.1.0",
     "fast-check": "^4.5.3",
-    "tar": "^7.5.6",
     "tsx": "^4.21.0",
     "typescript": "^5.3.0",
     "vitest": "^4.0.18"