mcp-probe-kit 1.13.0 → 1.15.1

package/README.md

@@ -7,9 +7,9 @@
 
 > 🚀 AI 开发增强工具集 - 让 AI 更懂你的开发流程
 
-一个强大的 MCP (Model Context Protocol) 服务器，提供 **43 个实用工具**（34 个基础工具 + 9 个智能编排），覆盖代码质量、开发效率、项目管理全流程。
+一个强大的 MCP (Model Context Protocol) 服务器，提供 **49 个实用工具**（37 个基础工具 + 9 个智能编排 + 3 个 UI/UX 新增），覆盖代码质量、开发效率、项目管理、UI/UX 设计全流程。
 
-**✨ v1.12.0 新增**: Interview 模式 - 先慢下来，通过访谈把需求想清楚，反而能更快！
+**✨ v1.14.0 新增**: UI/UX Pro Max - 完整 UI 开发工作流，从设计系统到最终代码，支持 React、Vue、Tailwind 等多种技术栈！
 
 **支持所有 MCP 客户端**：Cursor、Claude Desktop、Cline、Continue 等
 
@@ -19,7 +19,58 @@
 
 ## ✨ 功能特性
 
-### 🎯 访谈工具（2 个工具）🆕
+### 🎨 UI/UX Pro Max（6 个工具）🆕
+- **`ui_design_system`** - 设计系统生成器：基于 100 条行业规则的智能推荐，生成设计推荐和创作指导，AI 根据指导自由创作文档（输出 ASCII Box + JSON + 创作指导）
+- **`init_component_catalog`** - 组件目录生成器：基于设计系统生成组件目录，定义可用的 UI 组件及其属性（占位符语法）
+- **`render_ui`** - UI 渲染引擎：将 JSON 模板渲染为最终代码，自动应用设计规范（占位符替换）
+- **`start_ui`** - 统一 UI 开发编排：一键完成整个 UI 开发流程（支持 `auto` 智能模式，自动推导设计参数）
+- **`ui_search`** - UI/UX 智能搜索：BM25 算法搜索颜色、图标、图表、组件、设计模式等 24 类数据（支持 catalog/template 模式）
+- **`sync_ui_data`** - 数据同步工具：从 npm 包 `uipro-cli` 自动同步最新 UI/UX 数据（来源：[ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)）
+
+**完整工作流**：
+```bash
+# 🚀 方式一：智能模式（推荐）
+# 一句话描述需求，AI 自动推导设计风格、配色和技术栈
+start_ui "SaaS 后台管理系统" --mode=auto
+
+# 📦 方式二：手动模式
+# 1. 生成设计系统 (可省略 product_type，AI 会自动从描述推导)
+ui_design_system --stack="react" --description="企业级 CRM 客户管理系统"
+
+# 2. 生成页面（自动应用设计规范）
+start_ui "登录页面"
+start_ui "用户列表"
+
+# 结果：所有页面样式完全统一 ✨
+```
+
+### 🤖 智能模式 vs 手动模式
+
+`start_ui` 支持两种模式，满足不同场景需求：
+
+#### 1. 自动模式 (`--mode=auto`) - **推荐**
+AI 自动分析你的自然语言描述，推导最佳参数并生成执行计划。
+```bash
+start_ui "加密货币交易看板" --mode=auto
+```
+**特点**:
+- ✅ 自动推导产品类型 (Fintech)
+- ✅ 自动推导设计风格 (Dark Mode, High Contrast)
+- ✅ 自动推导技术栈
+- ✅ 直接生成可执行命令
+
+#### 2. 手动模式 (`--mode=manual`)
+生成详细的分步指南，由你手动控制每一步的执行。
+```bash
+start_ui "登录页面" --mode=manual
+```
+**特点**:
+- ✅ 返回 4 个标准步骤的执行指南
+- ✅ 适合需要精细控制参数的场景
+- ✅ 适合学习和理解工作流
+- ✅ 默认模式（如果不指定 --mode）
+
+### �🎯 访谈工具（2 个工具）
 - **`interview`** - 需求访谈模式：在开发前通过结构化提问澄清需求，避免理解偏差和返工
 - **`ask_user`** - 通用提问工具：AI 可随时向用户提问，澄清不确定的信息
 

package/build/index.js

@@ -2,7 +2,7 @@
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
-import { detectShell, initSetting, initProject, gencommit, debug, genapi, codeReview, gentest, genpr, checkDeps, gendoc, genchangelog, refactor, perf, fix, gensql, resolveConflict, genui, explain, convert, cssOrder, genreadme, split, analyzeProject, initProjectContext, addFeature, securityScan, fixBug, estimate, genMock, design2code, startFeature, startBugfix, startReview, startRelease, startRefactor, startOnboard, startApi, startDoc, genSkill, startRalph, interview, askUser } from "./tools/index.js";
+import { detectShell, initSetting, initProject, gencommit, debug, genapi, codeReview, gentest, genpr, checkDeps, gendoc, genchangelog, refactor, perf, fix, gensql, resolveConflict, genui, explain, convert, cssOrder, genreadme, split, analyzeProject, initProjectContext, addFeature, securityScan, fixBug, estimate, genMock, design2code, startFeature, startBugfix, startReview, startRelease, startRefactor, startOnboard, startApi, startDoc, genSkill, startRalph, interview, askUser, uiDesignSystem, initComponentCatalog, uiSearch, syncUiData, renderUi, startUi } from "./tools/index.js";
 import { VERSION, NAME } from "./version.js";
 import { allToolSchemas } from "./schemas/index.js";
 import { getToolParamsGuide } from "./resources/index.js";
@@ -115,6 +115,19 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 return await interview(args);
             case "ask_user":
                 return await askUser(args);
+            // UI/UX Pro Max 工具
+            case "ui_design_system":
+                return await uiDesignSystem(args);
+            case "init_component_catalog":
+                return await initComponentCatalog(args);
+            case "ui_search":
+                return await uiSearch(args);
+            case "sync_ui_data":
+                return await syncUiData(args);
+            case "render_ui":
+                return await renderUi(args);
+            case "start_ui":
+                return await startUi(args);
             default:
                 throw new Error(`未知工具: ${name}`);
         }

package/build/schemas/index.d.ts

@@ -890,4 +890,112 @@ export declare const allToolSchemas: ({
         readonly required: readonly [];
         readonly additionalProperties: true;
     };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            product_type: {
+                type: string;
+                description: string;
+            };
+            description: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            target_audience: {
+                type: string;
+                description: string;
+            };
+            keywords: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {};
+        required: never[];
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            mode: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            query: {
+                type: string;
+                description: string;
+            };
+            category: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            limit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            min_score: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            force: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+            verbose: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            template: {
+                type: string;
+                description: string;
+            };
+            framework: {
+                type: string;
+                description: string;
+                default: string;
+            };
+        };
+        required: string[];
+    };
 })[];

package/build/schemas/index.js

@@ -9,6 +9,7 @@ import { docUtilToolSchemas } from "./doc-util-tools.js";
 import { projectToolSchemas } from "./project-tools.js";
 import { orchestrationToolSchemas } from "./orchestration-tools.js";
 import { interviewToolSchemas } from "./interview-tools.js";
+import { uiUxSchemas } from "./ui-ux-schemas.js";
 // 合并所有工具 schemas
 export const allToolSchemas = [
     ...basicToolSchemas,
@@ -19,4 +20,5 @@ export const allToolSchemas = [
     ...projectToolSchemas,
     ...orchestrationToolSchemas,
     ...interviewToolSchemas,
+    ...uiUxSchemas,
 ];

package/build/schemas/ui-ux-schemas.d.ts

@@ -0,0 +1,248 @@
+/**
+ * UI/UX Pro Max 工具的 Schema 定义
+ */
+export declare const uiDesignSystemSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            product_type: {
+                type: string;
+                description: string;
+            };
+            description: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            target_audience: {
+                type: string;
+                description: string;
+            };
+            keywords: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const initComponentCatalogSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {};
+        required: never[];
+    };
+};
+export declare const uiSearchSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            mode: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            query: {
+                type: string;
+                description: string;
+            };
+            category: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            limit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            min_score: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+    };
+};
+export declare const syncUiDataSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            force: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+            verbose: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+    };
+};
+export declare const renderUiSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            template: {
+                type: string;
+                description: string;
+            };
+            framework: {
+                type: string;
+                description: string;
+                default: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const startUiSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            description: {
+                type: string;
+                description: string;
+            };
+            framework: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            template: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const uiUxSchemas: ({
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            product_type: {
+                type: string;
+                description: string;
+            };
+            description: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            target_audience: {
+                type: string;
+                description: string;
+            };
+            keywords: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {};
+        required: never[];
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            mode: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            query: {
+                type: string;
+                description: string;
+            };
+            category: {
+                type: string;
+                description: string;
+            };
+            stack: {
+                type: string;
+                description: string;
+            };
+            limit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            min_score: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            force: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+            verbose: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: string;
+        properties: {
+            template: {
+                type: string;
+                description: string;
+            };
+            framework: {
+                type: string;
+                description: string;
+                default: string;
+            };
+        };
+        required: string[];
+    };
+})[];

package/build/schemas/ui-ux-schemas.js

@@ -0,0 +1,147 @@
+/**
+ * UI/UX Pro Max 工具的 Schema 定义
+ */
+export const uiDesignSystemSchema = {
+    name: "ui_design_system",
+    description: "智能设计系统生成器 - 基于产品类型和需求，使用 AI 推理引擎生成完整的设计系统推荐。包括 UI 风格、配色方案、字体配对、落地页模式、效果建议、反模式警告和交付检查清单。输出 Markdown 文档、JSON 配置和完整设计规范文档集。",
+    inputSchema: {
+        type: "object",
+        properties: {
+            product_type: {
+                type: "string",
+                description: "产品类型（必填）：SaaS, E-commerce, Healthcare, Fintech, Government（政府）, Education（教育）, Portfolio, Agency 等。这是推理引擎的核心输入。",
+            },
+            description: {
+                type: "string",
+                description: "系统说明（推荐）：详细描述产品功能、特点、使用场景。例如：'政府类网站，需要权威、可信、易用的设计风格，面向公众提供政务服务'。这将帮助推理引擎生成更准确的设计方案。",
+            },
+            stack: {
+                type: "string",
+                description: "技术栈（推荐）：react, vue, nextjs, nuxtjs, tailwind, html, svelte, astro 等。用于生成特定技术栈的实现建议和配置代码。",
+            },
+            target_audience: {
+                type: "string",
+                description: "目标用户（可选）：如 'B2B企业', 'C端消费者', '政府公务员', '普通市民', '开发者' 等。帮助推理引擎选择合适的设计风格。",
+            },
+            keywords: {
+                type: "string",
+                description: "关键词（可选）：逗号分隔的关键词，如 'professional, modern, trustworthy, authoritative'（专业、现代、可信、权威）。用于辅助匹配设计风格。",
+            },
+        },
+        required: ["product_type"],
+    },
+};
+export const initComponentCatalogSchema = {
+    name: "init_component_catalog",
+    description: "初始化组件目录 - 基于设计系统规范（design-system.json）生成组件目录文件。定义可用的 UI 组件及其属性，组件定义包含占位符，渲染时自动替换为设计规范中的实际值，确保样式统一。",
+    inputSchema: {
+        type: "object",
+        properties: {},
+        required: [],
+    },
+};
+export const uiSearchSchema = {
+    name: "ui_search",
+    description: "搜索 UI/UX 数据库，包括颜色、图标、图表、组件、设计模式等。支持三种模式：search（搜索数据）、catalog（查看组件目录）、template（搜索 UI 模板）。使用 BM25 算法进行智能搜索，支持按类别和技术栈过滤。数据来源：uipro-cli npm 包（v2.2.0+）。",
+    inputSchema: {
+        type: "object",
+        properties: {
+            mode: {
+                type: "string",
+                description: "搜索模式：search（搜索 UI/UX 数据，默认）、catalog（查看组件目录）、template（搜索 UI 模板）",
+                default: "search",
+            },
+            query: {
+                type: "string",
+                description: "搜索关键词（支持中英文，如 'button'、'按钮'、'primary color'、'主色调'）。catalog 模式不需要此参数。",
+            },
+            category: {
+                type: "string",
+                description: "数据类别（仅 search 模式）：colors（颜色）、icons（图标）、charts（图表）、landing（落地页）、products（产品）、typography（字体）、styles（样式）、ux-guidelines（UX 指南）、web-interface（Web 界面）等",
+            },
+            stack: {
+                type: "string",
+                description: "技术栈过滤（仅 search 模式）：react、vue、nextjs、nuxtjs、svelte、astro、flutter、react-native、swiftui、jetpack-compose 等",
+            },
+            limit: {
+                type: "number",
+                description: "返回结果数量（默认 10，范围 1-50）",
+                default: 10,
+            },
+            min_score: {
+                type: "number",
+                description: "最小相关性得分（默认 0，范围 0-100）",
+                default: 0,
+            },
+        },
+    },
+};
+export const syncUiDataSchema = {
+    name: "sync_ui_data",
+    description: "同步 UI/UX 数据到本地缓存。从 npm 包 uipro-cli 下载最新数据，支持自动检查更新和强制同步。数据存储在 ~/.mcp-probe-kit/ui-ux-data/。",
+    inputSchema: {
+        type: "object",
+        properties: {
+            force: {
+                type: "boolean",
+                description: "是否强制同步（忽略版本检查，默认 false）",
+                default: false,
+            },
+            verbose: {
+                type: "boolean",
+                description: "是否显示详细日志（默认 false）",
+                default: false,
+            },
+        },
+    },
+};
+export const renderUiSchema = {
+    name: "render_ui",
+    description: "UI 渲染引擎 - 将 JSON 模板渲染为最终代码。自动读取设计规范（design-system.json）和组件目录（component-catalog.json），替换占位符，生成完整的 React/Vue/HTML 代码。确保所有组件样式统一。",
+    inputSchema: {
+        type: "object",
+        properties: {
+            template: {
+                type: "string",
+                description: "模板文件路径（JSON 格式，如 docs/ui/login-form.json）",
+            },
+            framework: {
+                type: "string",
+                description: "目标框架：react、vue、html（默认 react）",
+                default: "react",
+            },
+        },
+        required: ["template"],
+    },
+};
+export const startUiSchema = {
+    name: "start_ui",
+    description: "统一 UI 开发编排工具 - 一键完成整个 UI 开发流程。自动检查设计系统、生成组件目录、搜索/生成模板、渲染最终代码。适合快速原型开发，保证整个项目样式统一。",
+    inputSchema: {
+        type: "object",
+        properties: {
+            description: {
+                type: "string",
+                description: "UI 需求描述（如 '登录页面'、'用户列表'、'设置页面'）",
+            },
+            framework: {
+                type: "string",
+                description: "目标框架：react、vue、html（默认 react）",
+                default: "react",
+            },
+            template: {
+                type: "string",
+                description: "模板名称（可选，不提供则自动生成）",
+            },
+        },
+        required: ["description"],
+    },
+};
+export const uiUxSchemas = [
+    uiDesignSystemSchema,
+    initComponentCatalogSchema,
+    uiSearchSchema,
+    syncUiDataSchema,
+    renderUiSchema,
+    startUiSchema,
+];

package/build/tools/__tests__/start_ui.integration.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 集成测试：start_ui 工具
+ *
+ * 测试完整的工作流程和端到端场景
+ */
+export {};