mcp-probe-kit 1.6.0 → 1.8.0

package/build/tools/code_review.js

@@ -113,6 +113,39 @@ ${code || "请提供需要审查的代码"}
 
 ---
 
+---
+
+## 📤 输出格式要求
+
+请严格按以下 JSON 格式输出审查结果：
+
+\`\`\`json
+{
+  "summary": "代码整体评价（一句话）",
+  "score": 85,
+  "issues": [
+    {
+      "severity": "critical|high|medium|low",
+      "category": "quality|security|performance|style",
+      "file": "文件路径（如有）",
+      "line": 10,
+      "code": "问题代码片段",
+      "message": "问题描述",
+      "suggestion": "修复建议",
+      "fix_example": "修复示例代码"
+    }
+  ],
+  "highlights": ["做得好的地方1", "做得好的地方2"]
+}
+\`\`\`
+
+## ⚠️ 边界约束
+
+- ❌ 仅分析，不自动修改源代码
+- ❌ 不执行代码或 shell 命令
+- ❌ 不做业务逻辑正确性判断（只关注代码质量）
+- ✅ 输出结构化问题清单和改进建议
+
 现在请开始代码审查，生成详细的审查报告。`;
         return {
             content: [

package/build/tools/convert.js

@@ -546,6 +546,15 @@ const user: User = {
 
 ---
 
+---
+
+## ⚠️ 边界约束
+
+- ❌ 仅输出转换后代码，不自动替换源文件
+- ❌ 不执行代码或命令
+- ✅ 保持功能等价，不改变业务逻辑
+- ✅ 输出完整可用的转换代码
+
 现在请根据需求进行代码转换，提供：
 1. 转换后的完整代码
 2. 关键变更说明

package/build/tools/debug.js

@@ -53,6 +53,47 @@ ${context || "请提供相关代码或场景描述"}
 - TimeoutError → 检查异步操作和网络请求
 - MemoryError → 检查内存泄漏和资源释放
 
+---
+
+## 📤 输出格式要求
+
+请严格按以下 JSON 格式输出分析结果：
+
+\`\`\`json
+{
+  "error_analysis": {
+    "type": "错误类型（SyntaxError/TypeError/LogicError等）",
+    "severity": "critical|high|medium|low",
+    "root_cause": "根本原因分析"
+  },
+  "possible_causes": [
+    {
+      "probability": "high|medium|low",
+      "description": "可能原因描述",
+      "evidence": "支持证据"
+    }
+  ],
+  "debug_strategy": [
+    {
+      "step": 1,
+      "action": "调试步骤描述",
+      "expected_result": "预期结果"
+    }
+  ],
+  "solutions": {
+    "quick_fix": "临时解决方案",
+    "root_fix": "根本解决方案",
+    "prevention": "预防措施"
+  }
+}
+\`\`\`
+
+## ⚠️ 边界约束
+
+- ❌ 仅分析和建议，不自动修改代码
+- ❌ 不执行代码或命令
+- ✅ 输出结构化调试策略和解决方案
+
 现在请按照上述步骤分析错误并提供具体的调试方案。`;
         return {
             content: [

package/build/tools/design2code.d.ts

@@ -0,0 +1,29 @@
+/**
+ * design2code - 设计稿转代码工具
+ *
+ * 功能：
+ * 1. 根据设计稿图片生成页面代码（支持图片 URL 或 base64）
+ * 2. 根据设计稿描述生成页面代码
+ * 3. 将 HTML 转换为 Vue/React 组件
+ * 4. 1:1 还原设计稿布局和样式
+ */
+export declare function design2code(args: any): Promise<{
+    content: ({
+        type: string;
+        text: string;
+        data?: undefined;
+        mimeType?: undefined;
+    } | {
+        type: string;
+        data: any;
+        mimeType: any;
+        text?: undefined;
+    })[];
+    isError?: undefined;
+} | {
+    content: {
+        type: string;
+        text: string;
+    }[];
+    isError: boolean;
+}>;

package/build/tools/design2code.js

@@ -0,0 +1,409 @@
+/**
+ * design2code - 设计稿转代码工具
+ *
+ * 功能：
+ * 1. 根据设计稿图片生成页面代码（支持图片 URL 或 base64）
+ * 2. 根据设计稿描述生成页面代码
+ * 3. 将 HTML 转换为 Vue/React 组件
+ * 4. 1:1 还原设计稿布局和样式
+ */
+const PROMPT_TEMPLATE = `# 🎨 设计稿转代码指南
+
+## 📋 任务信息
+
+{task_info}
+
+---
+
+## 🎯 转换目标
+
+**目标框架**: {framework}
+**样式方案**: {style_solution}
+**组件类型**: {component_type}
+
+---
+
+## 📐 设计还原要求
+
+### 1. 布局还原（Layout）
+- ✅ 使用 Flexbox/Grid 实现响应式布局
+- ✅ 严格按照设计稿的间距、对齐方式
+- ✅ 保持元素的相对位置和层级关系
+- ✅ 考虑不同屏幕尺寸的适配
+
+### 2. 样式还原（Styling）
+- ✅ 精确还原颜色值（使用设计稿中的色值）
+- ✅ 还原字体大小、行高、字重
+- ✅ 还原圆角、阴影、边框等细节
+- ✅ 还原动画和过渡效果
+
+### 3. 交互还原（Interaction）
+- ✅ 实现 hover、active、focus 等状态
+- ✅ 添加点击、滚动等交互效果
+- ✅ 实现表单验证和反馈
+- ✅ 添加加载状态和错误处理
+
+### 4. 响应式设计（Responsive）
+- ✅ 移动端适配（< 768px）
+- ✅ 平板适配（768px - 1024px）
+- ✅ 桌面端适配（> 1024px）
+- ✅ 使用媒体查询或响应式单位
+
+---
+
+## 🛠️ 技术实现
+
+### React 实现要点
+\`\`\`typescript
+// 1. 使用 TypeScript 定义 Props
+interface ComponentProps {
+  // 定义属性类型
+}
+
+// 2. 使用 Hooks 管理状态
+const [state, setState] = useState()
+
+// 3. 使用 CSS Modules 或 Tailwind CSS
+import styles from './Component.module.css'
+
+// 4. 组件拆分原则
+// - 单一职责
+// - 可复用性
+// - 性能优化（memo, useMemo, useCallback）
+\`\`\`
+
+### Vue 3 实现要点
+\`\`\`vue
+<script setup lang="ts">
+// 1. 使用 Composition API
+import { ref, computed, onMounted } from 'vue'
+
+// 2. 定义 Props 和 Emits
+interface Props {
+  // 定义属性类型
+}
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  // 定义事件类型
+}>()
+
+// 3. 响应式状态管理
+const state = ref()
+
+// 4. 生命周期钩子
+onMounted(() => {
+  // 初始化逻辑
+})
+</script>
+
+<template>
+  <!-- 模板内容 -->
+</template>
+
+<style scoped>
+/* 样式内容 */
+</style>
+\`\`\`
+
+---
+
+## 🎨 样式方案选择
+
+### Tailwind CSS（推荐）
+\`\`\`jsx
+<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
+  <h2 className="text-xl font-bold text-gray-900">标题</h2>
+  <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+    按钮
+  </button>
+</div>
+\`\`\`
+
+### CSS Modules
+\`\`\`css
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+\`\`\`
+
+### Styled Components
+\`\`\`typescript
+const Container = styled.div\`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+\`;
+\`\`\`
+
+---
+
+## 📦 组件结构
+
+### 页面级组件（Page Component）
+\`\`\`
+src/pages/
+  ├── HomePage/
+  │   ├── index.tsx          # 页面主文件
+  │   ├── components/        # 页面专用组件
+  │   │   ├── Header.tsx
+  │   │   ├── Hero.tsx
+  │   │   └── Footer.tsx
+  │   ├── hooks/            # 页面专用 Hooks
+  │   │   └── usePageData.ts
+  │   ├── types.ts          # 类型定义
+  │   └── styles.module.css # 样式文件
+\`\`\`
+
+### 通用组件（Common Component）
+\`\`\`
+src/components/
+  ├── Button/
+  │   ├── index.tsx
+  │   ├── Button.test.tsx
+  │   └── styles.module.css
+  ├── Input/
+  └── Card/
+\`\`\`
+
+---
+
+## ✅ 代码质量要求
+
+### 1. TypeScript 类型安全
+- ✅ 所有 Props 都有类型定义
+- ✅ 事件处理函数有类型注解
+- ✅ API 响应有类型定义
+
+### 2. 可访问性（A11y）
+- ✅ 使用语义化 HTML 标签
+- ✅ 添加 ARIA 属性
+- ✅ 键盘导航支持
+- ✅ 屏幕阅读器友好
+
+### 3. 性能优化
+- ✅ 图片懒加载
+- ✅ 代码分割
+- ✅ 避免不必要的重渲染
+- ✅ 使用虚拟滚动（长列表）
+
+### 4. 代码规范
+- ✅ 遵循 ESLint 规则
+- ✅ 统一的命名规范
+- ✅ 添加必要的注释
+- ✅ 组件拆分合理
+
+---
+
+## 📝 输出内容
+
+请生成以下内容：
+
+### 1. 组件代码
+- 完整的组件实现
+- TypeScript 类型定义
+- 样式文件
+
+### 2. 使用示例
+- 组件的使用方法
+- Props 说明
+- 常见场景示例
+
+### 3. 注意事项
+- 浏览器兼容性
+- 性能优化建议
+- 可能的改进方向
+
+---
+
+## 🎯 开始转换
+
+{conversion_guide}
+
+---
+
+## ⚠️ 边界约束
+
+- ❌ 仅输出组件代码，不自动创建文件
+- ❌ 不执行代码或命令
+- ✅ 默认输出与项目一致的框架与样式方案
+- ✅ 1:1 还原设计稿布局和样式
+
+---
+
+*工具: MCP Probe Kit - design2code*
+`;
+export async function design2code(args) {
+    try {
+        const input = args?.input;
+        const framework = args?.framework || "vue";
+        const styleSolution = args?.style_solution || "tailwind";
+        const componentType = args?.component_type || "page";
+        if (!input) {
+            throw new Error("缺少必填参数: input（设计稿图片 URL/base64、设计稿描述或 HTML 代码）");
+        }
+        // 判断输入类型
+        const isImageUrl = /^https?:\/\/.+\.(jpg|jpeg|png|gif|webp|svg)/i.test(input.trim());
+        const isBase64Image = /^data:image\/(png|jpeg|jpg|gif|webp|svg);base64,/.test(input.trim());
+        const isHTML = input.trim().startsWith("<");
+        let taskInfo = "";
+        let conversionGuide = "";
+        if (isImageUrl || isBase64Image) {
+            // 图片转换模式
+            const imageType = isImageUrl ? "图片 URL" : "Base64 图片";
+            taskInfo = `**输入类型**: 设计稿图片\n**图片来源**: ${imageType}\n${isImageUrl ? `**图片地址**: ${input}` : "**图片**: [Base64 编码图片]"}`;
+            conversionGuide = `### 设计稿图片分析步骤
+
+1. **视觉分析**
+   - 仔细观察设计稿的整体布局
+   - 识别页面的主要区域（导航栏、内容区、侧边栏、底部等）
+   - 分析颜色方案、字体、间距等设计规范
+   - 识别重复使用的设计模式和组件
+
+2. **元素识别**
+   - 标题、段落、按钮、输入框等基础元素
+   - 卡片、列表、表格等容器组件
+   - 图标、图片、背景等视觉元素
+   - 导航菜单、下拉框、弹窗等交互组件
+
+3. **布局还原**
+   - 使用 Flexbox/Grid 实现主体布局
+   - 精确测量元素间距和尺寸
+   - 实现响应式断点设计
+   - 保持视觉层次和对齐关系
+
+4. **样式还原**
+   - 提取颜色值（主色、辅助色、文字色、背景色）
+   - 还原字体大小、行高、字重
+   - 实现圆角、阴影、边框等细节
+   - 添加 hover、active 等交互状态
+
+5. **组件化开发**
+   - 将设计稿拆分为可复用组件
+   - 使用 ${framework === "vue" ? "Vue 3 Composition API" : "React Hooks"}
+   - 添加 TypeScript 类型定义
+   - 实现组件间的数据传递
+
+6. **交互实现**
+   - 添加点击、滚动等事件处理
+   - 实现表单验证和提交
+   - 添加加载状态和错误处理
+   - 实现动画和过渡效果
+
+7. **响应式适配**
+   - 移动端布局调整（< 768px）
+   - 平板端优化（768px - 1024px）
+   - 桌面端完整展示（> 1024px）
+   - 使用媒体查询或响应式单位
+
+**注意事项**：
+- 如果图片中有文字，请尽量识别并使用真实文本而非图片
+- 图标优先使用 SVG 或图标库（如 Heroicons、Lucide）
+- 图片资源使用占位符，并注明实际使用时需要替换
+- 保持代码的可维护性和可扩展性`;
+        }
+        else if (isHTML) {
+            // HTML 转换模式
+            taskInfo = `**输入类型**: HTML 代码转换\n**源代码**:\n\`\`\`html\n${input}\n\`\`\``;
+            conversionGuide = `### HTML 转换步骤
+
+1. **分析 HTML 结构**
+   - 识别语义化标签
+   - 提取 class 和 id
+   - 分析嵌套层级
+
+2. **转换为组件**
+   - 将 HTML 转换为 ${framework === "vue" ? "Vue 模板" : "JSX"}
+   - 提取可复用的子组件
+   - 添加 TypeScript 类型
+
+3. **样式迁移**
+   - 将内联样式转换为 ${styleSolution}
+   - 提取公共样式变量
+   - 优化样式结构
+
+4. **添加交互逻辑**
+   - 识别需要状态管理的部分
+   - 添加事件处理
+   - 实现表单验证
+
+5. **优化和完善**
+   - 添加响应式设计
+   - 优化性能
+   - 添加可访问性支持`;
+        }
+        else {
+            // 设计稿描述模式
+            taskInfo = `**输入类型**: 设计稿描述\n**设计需求**:\n${input}`;
+            conversionGuide = `### 设计稿实现步骤
+
+1. **理解设计需求**
+   - 分析页面布局结构
+   - 识别设计元素和组件
+   - 确定交互流程
+
+2. **规划组件结构**
+   - 划分页面区域（Header、Main、Footer）
+   - 识别可复用组件
+   - 设计组件层级关系
+
+3. **实现布局**
+   - 使用 Flexbox/Grid 布局
+   - 实现响应式设计
+   - 确保跨浏览器兼容
+
+4. **实现样式**
+   - 还原设计稿的视觉效果
+   - 使用 ${styleSolution} 编写样式
+   - 添加动画和过渡效果
+
+5. **实现交互**
+   - 添加状态管理
+   - 实现用户交互
+   - 添加数据获取逻辑
+
+6. **测试和优化**
+   - 测试不同屏幕尺寸
+   - 优化性能
+   - 确保可访问性`;
+        }
+        const guide = PROMPT_TEMPLATE
+            .replace(/{task_info}/g, taskInfo)
+            .replace(/{framework}/g, framework === "vue" ? "Vue 3 + TypeScript" : "React + TypeScript")
+            .replace(/{style_solution}/g, styleSolution === "tailwind" ? "Tailwind CSS" : styleSolution === "css-modules" ? "CSS Modules" : "Styled Components")
+            .replace(/{component_type}/g, componentType === "page" ? "页面组件" : "通用组件")
+            .replace(/{conversion_guide}/g, conversionGuide);
+        // 如果是图片输入，添加图片内容
+        if (isImageUrl || isBase64Image) {
+            return {
+                content: [
+                    { type: "text", text: guide },
+                    {
+                        type: "image",
+                        data: isBase64Image ? input.split(',')[1] : input,
+                        mimeType: isBase64Image ? input.match(/data:image\/([^;]+);/)?.[1] || "png" : "image/png"
+                    }
+                ],
+            };
+        }
+        return {
+            content: [{ type: "text", text: guide }],
+        };
+    }
+    catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        return {
+            content: [{ type: "text", text: `❌ 错误: ${errorMsg}` }],
+            isError: true,
+        };
+    }
+}

package/build/tools/estimate.js

@@ -171,15 +171,47 @@ const PROMPT_TEMPLATE = `# 工作量估算指南
 
 ---
 
-## ✅ 估算检查清单
-
-- [ ] 任务已分解为标准活动
-- [ ] 复杂度已评估
-- [ ] 三点估算已完成
-- [ ] 故事点已确定
-- [ ] 风险已识别
-- [ ] 置信度已评估
-- [ ] 大任务已建议拆分
+## 📤 输出格式要求
+
+请严格按以下 JSON 格式输出估算结果：
+
+\`\`\`json
+{
+  "summary": "任务估算总结（一句话）",
+  "estimate": {
+    "story_points": 5,
+    "hours": { "optimistic": 4, "expected": 8, "pessimistic": 16 },
+    "confidence": "high|medium|low"
+  },
+  "complexity": {
+    "code_volume": { "score": 3, "reason": "中等代码量" },
+    "technical_difficulty": { "score": 4, "reason": "涉及新技术" },
+    "dependency": { "score": 2, "reason": "依赖较少" },
+    "testing": { "score": 3, "reason": "需要集成测试" }
+  },
+  "breakdown": [
+    { "activity": "需求理解", "hours": 1 },
+    { "activity": "设计", "hours": 2 },
+    { "activity": "编码", "hours": 4 },
+    { "activity": "测试", "hours": 2 }
+  ],
+  "risks": [
+    {
+      "type": "technical|dependency|requirement",
+      "description": "风险描述",
+      "impact": "high|medium|low",
+      "mitigation": "缓解措施"
+    }
+  ],
+  "split_suggestion": ["子任务1", "子任务2"]
+}
+\`\`\`
+
+## ⚠️ 边界约束
+
+- ❌ 仅估算，不执行任何开发工作
+- ❌ 估算基于静态分析，实际可能有偏差
+- ✅ 输出结构化估算结果和风险分析
 
 ---
 

package/build/tools/explain.js

@@ -339,6 +339,14 @@ export const config = {
 
 ---
 
+---
+
+## ⚠️ 边界约束
+
+- ❌ 仅输出代码解释，不修改代码
+- ❌ 不执行代码或命令
+- ✅ 输出结构化的代码解释和原理分析
+
 现在请为提供的代码生成详细解释，包括：
 1. 整体功能概述
 2. 逐行代码说明

package/build/tools/fix_bug.js

@@ -247,6 +247,50 @@ describe('[功能描述]', () => {
 
 ---
 
+## 📤 输出格式要求
+
+请严格按以下 JSON 格式输出修复指南：
+
+\`\`\`json
+{
+  "bug_summary": "Bug 简述（一句话）",
+  "analysis": {
+    "error_type": "错误类型",
+    "direct_cause": "直接原因",
+    "root_cause": "根本原因",
+    "affected_scope": "影响范围"
+  },
+  "location": {
+    "file": "问题文件路径",
+    "line": 42,
+    "function": "问题函数名",
+    "code_snippet": "问题代码片段"
+  },
+  "fix_plan": {
+    "chosen_solution": "选择的修复方案",
+    "reason": "选择理由",
+    "steps": [
+      { "step": 1, "action": "修复步骤", "file": "文件", "change": "变更内容" }
+    ],
+    "code_before": "修改前代码",
+    "code_after": "修改后代码"
+  },
+  "verification": {
+    "test_cases": ["测试用例1", "测试用例2"],
+    "manual_checks": ["手动验证项1", "手动验证项2"]
+  }
+}
+\`\`\`
+
+## ⚠️ 边界约束
+
+- ❌ 仅提供修复指南，不保证自动修改代码
+- ❌ 不执行代码或命令
+- ✅ 输出结构化修复方案和验证步骤
+- 💡 如需自动修复，可配合 fix 工具应用 patch
+
+---
+
 *指南版本: 1.0.0*
 *工具: MCP Probe Kit - fix_bug*
 `;

package/build/tools/gen_skill.d.ts

@@ -0,0 +1,16 @@
+/**
+ * gen_skill - 生成 Agent Skills 文档
+ */
+export declare function genSkill(args: any): Promise<{
+    content: {
+        type: string;
+        text: string;
+    }[];
+    isError?: undefined;
+} | {
+    content: {
+        type: string;
+        text: string;
+    }[];
+    isError: boolean;
+}>;