mcp-probe-kit 1.6.0 → 1.7.0

package/README.md

@@ -1,12 +1,17 @@
 # MCP Probe Kit
 
+[![npm version](https://img.shields.io/npm/v/mcp-probe-kit.svg)](https://www.npmjs.com/package/mcp-probe-kit)
+[![npm downloads](https://img.shields.io/npm/dm/mcp-probe-kit.svg)](https://www.npmjs.com/package/mcp-probe-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![GitHub stars](https://img.shields.io/github/stars/mybolide/mcp-probe-kit.svg)](https://github.com/mybolide/mcp-probe-kit/stargazers)
+
 > 🚀 AI 开发增强工具集 - 让 AI 更懂你的开发流程
 
-一个强大的 MCP (Model Context Protocol) 服务器，提供 **38 个实用工具**（30 个基础工具 + 8 个智能编排），覆盖代码质量、开发效率、项目管理全流程。
+一个强大的 MCP (Model Context Protocol) 服务器，提供 **39 个实用工具**（31 个基础工具 + 8 个智能编排），覆盖代码质量、开发效率、项目管理全流程。
 
 **支持所有 MCP 客户端**：Cursor、Claude Desktop、Cline、Continue 等
 
-**作者**: [小墨 (Kyle)](https://www.bytezonex.com/) | **项目**: [GitHub](https://github.com/mybolide/mcp-probe-kit)
+**作者**: [小墨 (Kyle)](https://www.bytezonex.com/) | **项目**: [GitHub](https://github.com/mybolide/mcp-probe-kit) | **npm**: [mcp-probe-kit](https://www.npmjs.com/package/mcp-probe-kit)
 
 ---
 
@@ -22,7 +27,7 @@
 - **`perf`** - 性能分析
 - **`fix`** - 自动修复代码问题
 
-### 🛠️ 开发效率（14 个工具）
+### 🛠️ 开发效率（15 个工具）
 - **`gencommit`** - Git 提交消息生成
 - **`genapi`** - API 文档生成
 - **`gendoc`** - 代码注释生成
@@ -31,6 +36,7 @@
 - **`gensql`** - SQL 查询生成器
 - **`genui`** - UI 组件生成器（React + Vue）
 - **`gen_mock`** - Mock 数据生成器 🆕
+- **`design2code`** - 设计稿转代码（图片/描述/HTML → Vue/React）🆕
 - **`explain`** - 代码解释器
 - **`convert`** - 代码转换器
 - **`css_order`** - CSS 属性顺序规范
@@ -677,6 +683,59 @@ feat: 🎸 添加用户登录功能
 
 ---
 
+#### `design2code` - 设计稿转代码 🆕
+1:1 还原设计稿或将 HTML 转换为 Vue/React 项目页面。
+
+**用法**：`design2code` 然后提供设计稿
+
+**输入方式**：
+- **图片 URL** - 设计稿图片链接（支持 jpg/png/gif/webp/svg）
+- **Base64 图片** - 直接粘贴 base64 编码的图片
+- **设计稿描述** - 用文字描述页面布局和功能
+- **HTML 代码** - 现有的 HTML 代码
+
+**参数**：
+- `input` - 设计稿图片/描述/HTML（必填）
+- `framework` - vue/react（默认 vue）
+- `style_solution` - tailwind/css-modules/styled-components（默认 tailwind）
+- `component_type` - page/component（默认 page）
+
+**功能特性**：
+- 🎨 **精确还原** - 1:1 还原布局、颜色、字体、间距
+- 📱 **响应式设计** - 自动生成移动端/平板/桌面端适配
+- 🧩 **组件化** - 智能拆分可复用组件
+- 💎 **TypeScript** - 完整的类型定义
+- ♿ **可访问性** - 语义化 HTML + ARIA 属性
+- ⚡ **性能优化** - 图片懒加载、代码分割
+
+**适用场景**：
+- 🎨 UI 设计稿转前端代码
+- 🔄 HTML 页面迁移到 Vue/React
+- 📄 落地页快速开发
+- 🎯 原型转生产代码
+
+**输出内容**：
+- 完整的组件代码（Vue 3 Composition API / React Hooks）
+- TypeScript 类型定义
+- Tailwind CSS 样式（或其他方案）
+- 使用示例和说明
+- 响应式断点设计
+- 性能优化建议
+
+**示例**：
+```
+# 图片转代码
+design2code https://example.com/design.png
+
+# 描述转代码
+design2code "创建一个登录页面，包含用户名、密码输入框和登录按钮"
+
+# HTML 转 Vue
+design2code <div class="container">...</div>
+```
+
+---
+
 ### 📦 项目管理工具
 
 #### `init_setting` - 配置初始化
@@ -1174,9 +1233,10 @@ mcp-probe-kit/
 │       ├── gendoc.ts            # 注释生成
 │       ├── genpr.ts             # PR 生成
 │       ├── genchangelog.ts      # Changelog 生成
-│       ├── gensql.ts            # SQL 生成器
+│       ├── gensql.ts             # SQL 生成器
 │       ├── genui.ts             # UI 组件生成器
 │       ├── gen_mock.ts          # Mock 数据生成 🆕
+│       ├── design2code.ts       # 设计稿转代码 🆕
 │       ├── explain.ts           # 代码解释器
 │       ├── convert.ts           # 代码转换器
 │       ├── css_order.ts         # CSS 顺序规范
@@ -1418,7 +1478,7 @@ MIT License
 ├── perf             性能分析
 └── fix              自动修复
 
-开发效率 (14)
+开发效率 (15)
 ├── gencommit        提交生成
 ├── genapi           文档生成
 ├── gendoc           注释生成
@@ -1427,6 +1487,7 @@ MIT License
 ├── gensql           SQL 生成器
 ├── genui            UI 组件生成器
 ├── gen_mock         Mock 数据生成 🆕
+├── design2code      设计稿转代码 🆕
 ├── explain          代码解释器
 ├── convert          代码转换器
 ├── css_order        CSS 顺序规范

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, startFeature, startBugfix, startReview, startRelease, startRefactor, startOnboard, startApi, startDoc } 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 } from "./tools/index.js";
 import { VERSION, NAME } from "./version.js";
 // 创建MCP服务器实例
 const server = new Server({
@@ -584,6 +584,32 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: ["schema"],
                 },
             },
+            {
+                name: "design2code",
+                description: "【设计稿转代码】1:1 还原设计稿或将 HTML 转换为 Vue/React 项目页面，支持图片、描述、HTML 三种输入方式",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        input: {
+                            type: "string",
+                            description: "设计稿图片（URL 或 base64）、设计稿描述或 HTML 代码",
+                        },
+                        framework: {
+                            type: "string",
+                            description: "目标框架：vue, react（默认 vue）",
+                        },
+                        style_solution: {
+                            type: "string",
+                            description: "样式方案：tailwind, css-modules, styled-components（默认 tailwind）",
+                        },
+                        component_type: {
+                            type: "string",
+                            description: "组件类型：page, component（默认 page）",
+                        },
+                    },
+                    required: ["input"],
+                },
+            },
             // ========== 智能编排工具 ==========
             {
                 name: "start_feature",
@@ -813,6 +839,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 return await estimate(args);
             case "gen_mock":
                 return await genMock(args);
+            case "design2code":
+                return await design2code(args);
             // 智能编排工具
             case "start_feature":
                 return await startFeature(args);
@@ -908,6 +936,7 @@ server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
                             fix_bug: "enabled",
                             estimate: "enabled",
                             gen_mock: "enabled",
+                            design2code: "enabled",
                             // 智能编排
                             start_feature: "enabled",
                             start_bugfix: "enabled",

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,400 @@
+/**
+ * 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}
+
+---
+
+*工具: 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/index.d.ts

@@ -28,6 +28,7 @@ export { securityScan } from "./security_scan.js";
 export { fixBug } from "./fix_bug.js";
 export { estimate } from "./estimate.js";
 export { genMock } from "./gen_mock.js";
+export { design2code } from "./design2code.js";
 export { startFeature } from "./start_feature.js";
 export { startBugfix } from "./start_bugfix.js";
 export { startReview } from "./start_review.js";

package/build/tools/index.js

@@ -28,6 +28,7 @@ export { securityScan } from "./security_scan.js";
 export { fixBug } from "./fix_bug.js";
 export { estimate } from "./estimate.js";
 export { genMock } from "./gen_mock.js";
+export { design2code } from "./design2code.js";
 // 智能编排工具
 export { startFeature } from "./start_feature.js";
 export { startBugfix } from "./start_bugfix.js";

package/docs/BEST_PRACTICES.md

@@ -85,6 +85,10 @@ interface User {
   email: string;
 }
 
+# 设计稿转代码
+design2code
+然后提供设计稿图片URL、描述或HTML代码
+
 # 代码解释
 explain @complex-algorithm.ts
 

package/docs/HOW_TO_TRIGGER.html

@@ -30,7 +30,7 @@ table tr:nth-child(even) { background-color: #f9f9f9; }
 <body>
 <h1>MCP 工具触发快速手册</h1>
 
-<h2>🔑 基础工具（30个）</h2>
+<h2>🔑 基础工具（31个）</h2>
 
 <h3>代码质量（8个）</h3>
 <p><strong>detect_shell</strong> <span class="keyword">套壳</span><span class="keyword">检测</span> | "detect_shell"</p>
@@ -42,7 +42,7 @@ table tr:nth-child(even) { background-color: #f9f9f9; }
 <p><strong>perf</strong> <span class="keyword">性能</span><span class="keyword">优化</span><span class="keyword">慢</span><span class="keyword">瓶颈</span> | "分析性能" "有没有性能瓶颈"</p>
 <p><strong>fix</strong> <span class="keyword">修复</span><span class="keyword">fix</span><span class="keyword">lint错误</span> | "修复lint错误" "自动修复格式"</p>
 
-<h3>开发效率（14个）</h3>
+<h3>开发效率（15个）</h3>
 <p><strong>gencommit</strong> <span class="keyword">commit</span><span class="keyword">提交</span> | "生成commit信息" "帮我写提交信息"</p>
 <p><strong>genapi</strong> <span class="keyword">API文档</span><span class="keyword">文档</span> | "生成API文档" "为这个方法添加文档"</p>
 <p><strong>gendoc</strong> <span class="keyword">注释</span><span class="keyword">JSDoc</span> | "添加注释" "生成JSDoc"</p>
@@ -51,6 +51,7 @@ table tr:nth-child(even) { background-color: #f9f9f9; }
 <p><strong>gensql</strong> <span class="keyword">SQL</span><span class="keyword">查询</span><span class="keyword">数据库</span> | "生成SQL查询" "写个查询语句"</p>
 <p><strong>genui</strong> <span class="keyword">组件</span><span class="keyword">UI</span><span class="keyword">界面</span> | "生成Button组件" "创建登录表单"</p>
 <p><strong>gen_mock</strong> <span class="keyword">Mock</span><span class="keyword">模拟数据</span> | "生成Mock数据" "创建测试数据"</p>
+<p><strong>design2code</strong> <span class="keyword">设计稿</span><span class="keyword">图片转代码</span><span class="keyword">HTML转Vue</span> | "把设计稿转成Vue" "图片转代码"</p>
 <p><strong>explain</strong> <span class="keyword">解释</span><span class="keyword">说明</span><span class="keyword">理解</span> | "解释这段代码" "这个方法是干什么的"</p>
 <p><strong>convert</strong> <span class="keyword">转换</span><span class="keyword">改成</span><span class="keyword">迁移</span> | "转成TypeScript" "Class改Hooks"</p>
 <p><strong>css_order</strong> <span class="keyword">CSS顺序</span><span class="keyword">CSS规范</span> | "css_order"</p>
@@ -122,6 +123,7 @@ table tr:nth-child(even) { background-color: #f9f9f9; }
 <tr><td>SQL生成</td><td>SQL、查询、数据库</td><td><code>gensql</code></td></tr>
 <tr><td>UI组件</td><td>组件、UI、界面</td><td><code>genui</code></td></tr>
 <tr><td>Mock数据</td><td>Mock、模拟数据</td><td><code>gen_mock</code></td></tr>
+<tr><td>设计稿转代码</td><td>设计稿、图片转代码、HTML转Vue</td><td><code>design2code</code></td></tr>
 <tr><td>代码转换</td><td>转换、改成、迁移</td><td><code>convert</code></td></tr>
 <tr><td>CSS规范</td><td>CSS顺序</td><td><code>css_order</code></td></tr>
 <tr><td>README</td><td>README、项目文档</td><td><code>genreadme</code></td></tr>

package/docs/HOW_TO_TRIGGER.md

@@ -346,6 +346,27 @@ AI 需要理解你的意图才能调用正确的工具。使用明确的关键
 
 ---
 
+### 1️⃣7️⃣ 设计稿转代码 → `design2code`
+
+**触发关键词**：设计稿、图片转代码、HTML转Vue、HTML转React、还原设计
+
+**✅ 推荐说法**
+```
+"把这个设计稿转成 Vue 代码"
+"design2code https://example.com/design.png"
+"将这个 HTML 转换为 React 组件"
+"还原这个设计稿"
+"图片转代码"
+```
+
+**❌ 不推荐说法**
+```
+"做个页面"（没说基于什么）
+"转一下"（没说转什么）
+```
+
+---
+
 ---
 
 ## 🚀 智能编排工具触发
@@ -356,7 +377,7 @@ AI 需要理解你的意图才能调用正确的工具。使用明确的关键
 
 #### 🎯 开发流程类
 
-##### 1️⃣7️⃣ 新功能开发 → `start_feature`
+####### 1️⃣7️⃣ 新功能开发 → `start_feature`
 
 **触发关键词**：新功能、开发功能、添加功能、实现功能、feature
 
@@ -822,6 +843,7 @@ AI: [自动调用 start_review 编排]
 | 提交代码 | commit、提交信息 | `gencommit` |
 | 代码转换 | 转换、改成、迁移 | `convert` |
 | Mock数据 | Mock、模拟数据 | `gen_mock` |
+| 设计稿转代码 | 设计稿、图片转代码、HTML转Vue | `design2code` |
 | Bug修复流程 | 修复Bug、完整修复 | `fix_bug` |
 | 工作量估算 | 估算、工作量、需要多久 | `estimate` |
 
@@ -908,6 +930,14 @@ AI: [自动调用 start_review 编排]
 "重构这个方法，提高可读性"
 ```
 
+### 设计稿转代码
+```
+"design2code https://example.com/design.png"
+"把这个设计稿转成 Vue 代码"
+"将这个 HTML 转换为 React 组件"
+"design2code" 然后提供设计稿描述
+```
+
 ### 开发新功能
 ```
 "start_feature user-profile '用户个人资料管理'"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcp-probe-kit",
-  "version": "1.6.0",
-  "description": "AI Development Enhancement Toolkit - MCP Server with 38 practical tools (30 basic + 8 orchestration) for code quality, development efficiency, and project management",
+  "version": "1.7.0",
+  "description": "AI Development Enhancement Toolkit - MCP Server with 39 practical tools (31 basic + 8 orchestration) for code quality, development efficiency, and project management",
   "type": "module",
   "main": "build/index.js",
   "bin": {