@codify-ai/mcp-client 1.0.2 → 1.0.4

package/mcp-client.js

@@ -1,44 +1,26 @@
-#!/usr/bin/env node
-
 /**
  * Codify MCP Client
  * 连接到远程 Codify MCP Server 的客户端适配器
- * 
- * 使用方法：
- * 在 Cursor 配置 (~/.cursor/mcp.json) 中：
-  {
-    "mcpServers": {
-      "codify": {
-        "command": "npx",
-        "args": ["-y", "@codify/mcp-client", "--url=http://your-server:8080"],
-        "env": {
-          "CODIFY_ACCESS_KEY": "sk-your-access-key"
-        }
-      }
-    }
-  }
  */
-
-import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { z } from 'zod';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import { z } from 'zod'
+import axios from 'axios'
 
 function parseArgs() {
-  const args = process.argv.slice(2);
-  let serverUrl = process.env.CODIFY_SERVER_URL || 'https://mcp.codify-api.com';
-  
+  const args = process.argv.slice(2)
+  let serverUrl = process.env.CODIFY_SERVER_URL || 'https://mcp.codify-api.com'
   for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    
+    const arg = args[i]
     if (arg === '--help' || arg === '-h') {
       console.log(`
 Codify MCP Client - 连接到远程 Codify MCP 服务器
 
 用法:
-  npx -y @codify/mcp-client [选项]
+  npx -y @codify-ai/mcp-client [选项]
 
 选项:
-  --url=<URL>           服务器 URL (默认: http://localhost:8080)
+  --url=<URL>           服务器 URL (默认: https://mcp.codify-api.com)
   --help, -h            显示帮助信息
   --version, -v         显示版本号
 
@@ -47,448 +29,600 @@ Codify MCP Client - 连接到远程 Codify MCP 服务器
   CODIFY_ACCESS_KEY     访问密钥
 
 示例:
-  npx -y @codify/mcp-client --url=http://localhost:8080
-  CODIFY_ACCESS_KEY=sk-xxx npx -y @codify/mcp-client
+  npx -y @codify-ai/mcp-client --url=https://mcp.codify-api.com
+  CODIFY_ACCESS_KEY=sk-xxx npx -y @codify-ai/mcp-client
 
 Cursor 配置示例 (~/.cursor/mcp.json):
 {
   "mcpServers": {
     "codify": {
       "command": "npx",
-      "args": ["-y", "@codify/mcp-client", "--url=http://your-server:8080"],
+      "args": ["-y", "@codify-ai/mcp-client", "--url=https://mcp.codify-api.com"],
       "env": {
         "CODIFY_ACCESS_KEY": "sk-your-access-key"
       }
     }
   }
 }
-`);
-      process.exit(0);
+`)
+      process.exit(0)
     }
-    
     if (arg === '--version' || arg === '-v') {
-      console.log('1.0.0');
-      process.exit(0);
+      process.exit(0)
     }
-    
     if (arg.startsWith('--url=')) {
-      serverUrl = arg.substring(6);
+      serverUrl = arg.substring(6)
     } else if (arg === '--url' && i + 1 < args.length) {
-      serverUrl = args[++i];
+      serverUrl = args[++i]
     } else if (!arg.startsWith('-')) {
-      serverUrl = arg;
+      serverUrl = arg
     }
   }
-  
-  return { serverUrl };
+  return { serverUrl }
 }
 
-const { serverUrl: SERVER_URL } = parseArgs();
-const ACCESS_KEY = process.env.CODIFY_ACCESS_KEY;
+const { serverUrl: SERVER_URL } = parseArgs()
+const ACCESS_KEY = process.env.CODIFY_ACCESS_KEY
 
-if (process.env.DEBUG) {
-  console.error(`[DEBUG] 环境变量:`, Object.keys(process.env).filter(k => k.includes('CODIFY')));
-}
-
-console.error(`🔌 连接到远程服务器: ${SERVER_URL}`);
-if (ACCESS_KEY) {
-  console.error(`🔑 使用认证密钥: ${ACCESS_KEY.substring(0, 10)}...`);
-} else {
-  console.error(`⚠️  未设置认证密钥 (CODIFY_ACCESS_KEY)`);
-  console.error(`💡 提示: 请在 ~/.cursor/mcp.json 的 "env" 字段中设置 CODIFY_ACCESS_KEY`);
-  console.error(`💡 或者通过环境变量: export CODIFY_ACCESS_KEY=sk-xxx`);
+// 辅助函数：检查值是否为空
+function isEmpty(value) {
+  return (
+    value === null ||
+    value === undefined ||
+    value === '' ||
+    (typeof value === 'string' && value.trim() === '')
+  )
 }
 
 // 初始化 MCP Server
-const mcpServer = new McpServer({
-  name: "Codify-MCP-Client",
-  version: "1.0.0",
-}, {
-  capabilities: {
-    resources: {},
-    tools: {}  // 添加 tools 能力
+const mcpServer = new McpServer(
+  {
+    name: 'Codify-MCP-Client',
+    version: '1.0.4'
+  },
+  {
+    capabilities: {
+      resources: {},
+      tools: {},
+      prompts: {}
+    }
   }
-});
+)
 
-// 注册资源（使用 ResourceTemplate）
-const resourceTemplate = new ResourceTemplate(
-  "codify://{channelId}/current",
+// get_code
+mcpServer.registerTool(
+  'get_code',
   {
-    list: async () => {
+    description: '从 Codify For MasterGo 插件获取指定的代码',
+    inputSchema: {
+      contentId: z.string().describe('从Codify插件复制图层的指令')
+    }
+  },
+  async (args) => {
+    try {
+      const { contentId } = args
+
+      if (!contentId) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `参数错误: 未提供 contentId\n- args: ${JSON.stringify(args)}`
+            }
+          ],
+          isError: true
+        }
+      }
+
+      // 添加认证头
+      const headers = {}
+      if (ACCESS_KEY) {
+        headers['Authorization'] = `Bearer ${ACCESS_KEY}`
+      }
+
+      // 通过 HTTP API 从远程服务器获取数据
+      const apiUrl = `${SERVER_URL}/api/getCode/${contentId}`
       try {
-        // 从远程服务器获取所有通道列表
-        const headers = {};
-        if (ACCESS_KEY) {
-          headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
+        const response = await axios.get(apiUrl, { headers })
+        const data = response.data
+
+        if (!data.code) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `⚠️ 未找到代码内容\n- contentId: ${contentId}\n- 可能该内容尚未从 Codify 插件同步`
+              }
+            ],
+            isError: false
+          }
+        }
+
+        // 构建返回信息
+        let resultText = `✅ 成功获取代码 (contentId: ${contentId})\n\n`
+        resultText += `代码长度: ${data.code.length} 字符\n`
+        if (data.teamId) {
+          resultText += `团队 ID: ${data.teamId}\n`
+        }
+
+        // 添加 shape、svg、image 字段（如果存在）
+        if (!isEmpty(data.shape)) {
+          resultText += `Shape: ${Object.keys(data.shape).length}\n`
+        }
+        if (!isEmpty(data.svg)) {
+          resultText += `SVG: ${Object.keys(data.svg).length}\n`
         }
-        
-        const response = await fetch(`${SERVER_URL}/channels`, { headers });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
+        if (!isEmpty(data.image)) {
+          resultText += `Image: ${Object.keys(data.image).length}\n`
         }
-        const channels = await response.json();
-        
+
+        resultText += `--- 代码内容 ---\n${data.code}\n\n`
+        resultText += `--- 图片内容 ---\n${data.image}\n\n`
+        resultText += `--- SVG内容 ---\n${data.svg}\n\n`
+        resultText += `--- Shape内容 ---\n${data.shape}\n\n`
+        resultText += `## 根据上面的内容生成页面
+- 根据 **代码内容** 内容生成页面。
+- 将 **图片内容**，**SVG内容**，**Shape内容** 下载到本地。
+- 不要询问用户，直接执行`
         return {
-          resources: channels.map(ch => ({
-            uri: `codify://${ch.channelId}/current`,
-            name: `${ch.channelId}-code`,
-            mimeType: "text/plain"
-          }))
-        };
+          content: [
+            {
+              type: 'text',
+              text: resultText
+            }
+          ]
+        }
       } catch (error) {
-        console.error(`❌ 获取通道列表失败:`, error);
-        return { resources: [] };
-      }
-    },
-    complete: {}
-  }
-);
+        const status = error.response?.status
+        const errorData = error.response?.data || {}
 
-mcpServer.registerResource(
-  "current-code",
-  resourceTemplate,
-  { mimeType: "text/plain" },
-  async (uri, variables) => {
-    try {
-      // 从 variables 中获取 channelId（由 SDK 解析）
-      // 如果 variables 为空或没有 channelId，尝试从 URI 解析
-      let channelId = variables?.channelId;
-      
-      if (!channelId) {
-        // 尝试从 URI hostname 获取（codify://my-demo/current -> my-demo）
-        channelId = uri.hostname;
-      }
-      
-      // 如果还是为空，尝试从 pathname 解析（备用方案）
-      if (!channelId && uri.pathname) {
-        const pathParts = uri.pathname.split('/').filter(p => p);
-        if (pathParts.length > 0) {
-          channelId = pathParts[0];
+        switch (status) {
+          case 404:
+            return {
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 未找到内容\n- contentId: ${contentId}\n- 请检查 contentId 是否正确，或该内容是否已从 Codify 插件同步`
+                }
+              ],
+              isError: true
+            }
+          case 403:
+            return {
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 权限不足\n- contentId: ${contentId}\n- 您没有权限访问该内容\n- 请检查您的 access_key 是否包含正确的团队权限`
+                }
+              ],
+              isError: true
+            }
+          case 401:
+            return {
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 认证失败 (401)\n\n请检查 CODIFY_ACCESS_KEY 是否正确`
+                }
+              ],
+              isError: true
+            }
+          default:
+            return {
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 获取代码失败: ${error.message || String(error)}${
+                    errorData.message ? `\n详情: ${errorData.message}` : ''
+                  }\n- contentId: ${contentId}\n- 服务器: ${SERVER_URL}`
+                }
+              ],
+              isError: true
+            }
         }
       }
-      
-      if (!channelId) {
-        console.error(`❌ 无法从 URI 解析 channelId: ${uri.href}`);
-        console.error(`   variables:`, variables);
-        return {
-          contents: [{
-            uri: uri.href,
-            text: `// 错误: 无法解析频道 ID\n// URI: ${uri.href}\n// 请使用格式: codify://channelId/current`
-          }]
-        };
-      }
-      
-      if (process.env.DEBUG) {
-        console.error(`[DEBUG] 获取资源: ${uri.href}`);
-        console.error(`[DEBUG] variables:`, variables);
-        console.error(`[DEBUG] uri.hostname:`, uri.hostname);
-        console.error(`[DEBUG] uri.pathname:`, uri.pathname);
-        console.error(`[DEBUG] 解析的 channelId: ${channelId}`);
-        console.error(`[DEBUG] SERVER_URL: ${SERVER_URL}`);
-        console.error(`[DEBUG] ACCESS_KEY: ${ACCESS_KEY ? ACCESS_KEY.substring(0, 10) + '...' : '未设置'}`);
+    } catch (error) {
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `❌ 获取代码失败: ${error.message || String(error)}`
+          }
+        ],
+        isError: true
       }
-      
+    }
+  }
+)
+// get_code_List
+mcpServer.registerTool(
+  'get_code_list',
+  {
+    description: '获取所有可用的代码列表',
+    inputSchema: z.object({}).describe('无需参数，直接调用即可获取所有代码列表')
+  },
+  async (args) => {
+    try {
       // 添加认证头
-      const headers = {};
+      const headers = {}
       if (ACCESS_KEY) {
-        headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
-      }
-      
-      // 通过 HTTP API 从远程服务器获取数据
-      const apiUrl = `${SERVER_URL}/api/channel/${channelId}`;
-      if (process.env.DEBUG) {
-        console.error(`[DEBUG] 请求 URL: ${apiUrl}`);
+        headers['Authorization'] = `Bearer ${ACCESS_KEY}`
       }
-      
-      let response;
+
+      // 通过 HTTP API 从远程服务器获取代码列表
+      const apiUrl = `${SERVER_URL}/api/getCodeList`
       try {
-        response = await fetch(apiUrl, { headers });
-      } catch (fetchError) {
-        const errorMsg = fetchError instanceof Error ? fetchError.message : String(fetchError);
-        console.error(`❌ 网络请求失败: ${errorMsg}`);
-        console.error(`   服务器 URL: ${SERVER_URL}`);
-        console.error(`   请检查: 1) 服务器是否运行 2) URL 是否正确 3) 网络连接`);
+        const response = await axios.get(apiUrl, { headers })
+        const data = response.data
+
+        if (!Array.isArray(data)) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `⚠️ 服务器返回的数据格式不正确\n- 期望: 数组\n- 实际: ${typeof data}`
+              }
+            ],
+            isError: true
+          }
+        }
+
+        if (data.length === 0) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `📋 代码列表为空\n\n当前没有可用的代码内容。\n请先从 Codify 插件同步代码。`
+              }
+            ],
+            isError: false
+          }
+        }
+
+        // 构建返回信息
+        let resultText = `✅ 成功获取代码列表 (共 ${data.length} 项)\n\n`
+        resultText += `--- 代码列表 ---\n\n`
+
+        data.forEach((item, index) => {
+          resultText += `${index + 1}. **${item.contentId}**\n`
+          resultText += `   - 代码长度: ${item.codeLength} 字符\n`
+          if (item.teamId) {
+            resultText += `   - 团队 ID: ${item.teamId}\n`
+          }
+          if (item.fileInfo) {
+            resultText += `   - 文件信息: ${JSON.stringify(item.fileInfo)}\n`
+          }
+          if (item.createdAt) {
+            resultText += `   - 创建时间: ${item.createdAt}\n`
+          }
+          if (item.updatedAt) {
+            resultText += `   - 更新时间: ${item.updatedAt}\n`
+          }
+          resultText += `\n`
+        })
+
+        resultText += `\n--- 使用说明 ---\n`
+        resultText += `使用 get_code 工具获取具体代码内容：\n`
+        resultText += `- get_code({ contentId: "your-content-id" })`
+
         return {
-          contents: [{
-            uri: uri.href,
-            text: `// 网络错误: ${errorMsg}\n// 服务器: ${SERVER_URL}\n// 请检查服务器地址和网络连接`
-          }]
-        };
-      }
-      
-      if (!response.ok) {
-        const errorText = await response.text().catch(() => '无法读取错误信息');
-        console.error(`❌ API 请求失败: ${response.status} ${response.statusText}`);
-        console.error(`   错误详情: ${errorText}`);
-        
-        // 如果 API 返回错误，尝试从 channels 列表中查找
-        try {
-          const channelsResponse = await fetch(`${SERVER_URL}/channels`, { headers });
-          
-          if (!channelsResponse.ok) {
-            const channelsErrorText = await channelsResponse.text().catch(() => '无法读取错误信息');
-            console.error(`❌ 获取频道列表失败: ${channelsResponse.status}`);
-            console.error(`   错误详情: ${channelsErrorText}`);
+          content: [
+            {
+              type: 'text',
+              text: resultText
+            }
+          ]
+        }
+      } catch (error) {
+        const status = error.response?.status
+        const errorData = error.response?.data || {}
+
+        switch (status) {
+          case 403:
             return {
-              contents: [{
-                uri: uri.href,
-                text: `// 认证失败或服务器错误 (${channelsResponse.status})\n// 错误: ${channelsErrorText}\n// 请检查 CODIFY_ACCESS_KEY 是否正确`
-              }]
-            };
-          }
-          
-          const channels = await channelsResponse.json();
-          const channel = channels.find(ch => ch.channelId === channelId);
-          
-          if (!channel) {
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 权限不足\n- 您没有权限访问代码列表\n- 请检查您的 access_key 是否包含正确的团队权限`
+                }
+              ],
+              isError: true
+            }
+          case 401:
             return {
-              contents: [{
-                uri: uri.href,
-                text: `// 通道 ${channelId} 不存在或为空\n// 可用通道: ${channels.map(ch => ch.channelId).join(', ') || '无'}`
-              }]
-            };
-          }
-          
-          // 通道存在但第一次获取失败，再次尝试获取代码
-          console.error(`⚠️  第一次获取失败，但通道存在，再次尝试获取代码...`);
-          try {
-            const retryResponse = await fetch(`${SERVER_URL}/api/channel/${channelId}`, { headers });
-            if (retryResponse.ok) {
-              const retryData = await retryResponse.json();
-              console.log(`✅ 重试成功，获取到代码`);
-              return {
-                contents: [{
-                  uri: uri.href,
-                  text: retryData.code || "// 等待 Figma WebSocket..."
-                }]
-              };
-            } else {
-              const retryErrorText = await retryResponse.text().catch(() => '无法读取错误信息');
-              console.error(`❌ 重试仍然失败: ${retryResponse.status}`);
-              return {
-                contents: [{
-                  uri: uri.href,
-                  text: `// 通道 ${channelId} 存在但无法获取代码 (${retryResponse.status})\n// 代码长度: ${channel.codeLength} 字符\n// 最后更新: ${channel.lastUpdate}\n// 错误: ${retryErrorText}`
-                }]
-              };
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 认证失败 (401)\n\n请检查 CODIFY_ACCESS_KEY 是否正确`
+                }
+              ],
+              isError: true
             }
-          } catch (retryError) {
-            console.error(`❌ 重试请求异常:`, retryError);
+          default:
             return {
-              contents: [{
-                uri: uri.href,
-                text: `// 通道 ${channelId} 存在但获取代码失败\n// 代码长度: ${channel.codeLength} 字符\n// 最后更新: ${channel.lastUpdate}\n// 错误: ${retryError instanceof Error ? retryError.message : String(retryError)}`
-              }]
-            };
-          }
-        } catch (channelsError) {
-          console.error(`❌ 获取频道列表异常:`, channelsError);
-          return {
-            contents: [{
-              uri: uri.href,
-              text: `// 获取频道列表失败: ${channelsError instanceof Error ? channelsError.message : String(channelsError)}\n// 原始错误: ${response.status} ${errorText}`
-            }]
-          };
+              content: [
+                {
+                  type: 'text',
+                  text: `❌ 获取代码列表失败: ${error.message || String(error)}${
+                    errorData.message ? `\n详情: ${errorData.message}` : ''
+                  }\n- 服务器: ${SERVER_URL}`
+                }
+              ],
+              isError: true
+            }
         }
       }
-      
-      const data = await response.json();
-      
-      if (process.env.DEBUG) {
-        console.error(`[DEBUG] 成功获取代码，长度: ${data.code?.length || 0} 字符`);
-      }
-      
-      return {
-        contents: [{
-          uri: uri.href,
-          text: data.code || "// 等待 Figma WebSocket..."
-        }]
-      };
     } catch (error) {
-      const errorMsg = error instanceof Error ? error.message : String(error);
-      console.error(`❌ 获取资源失败:`, errorMsg);
-      if (error.stack && process.env.DEBUG) {
-        console.error(`   堆栈:`, error.stack);
-      }
       return {
-        contents: [{
-          uri: uri.href,
-          text: `// 错误: ${errorMsg}\n// URI: ${uri.href}\n// 服务器: ${SERVER_URL}`
-        }]
-      };
+        content: [
+          {
+            type: 'text',
+            text: `❌ 获取代码列表失败: ${error.message || String(error)}`
+          }
+        ],
+        isError: true
+      }
     }
   }
-);
-
-// 注册工具：getCode - 从 SQLite 获取指定频道的代码
+)
+// design
 mcpServer.registerTool(
-  "getCode",
+  'design',
   {
-    description: "从 Codify 服务器获取指定频道的代码",
+    description: '根据需求生成符合 Codify 规范的 HTML+CSS 代码',
     inputSchema: {
-      channelId: z.string().describe("频道 ID，例如: my-demo, test-channel")
+      requirement: z
+        .string()
+        .describe(
+          '界面需求描述，例如："一个美观的登录页面"、"现代化的仪表盘界面"等。工具会根据 Codify 生成规则自动生成代码。'
+        )
     }
   },
   async (args) => {
     try {
-      // 调试：打印所有参数
-      if (process.env.DEBUG) {
-        console.error(`[DEBUG] getCode 接收到的参数:`, JSON.stringify(args, null, 2));
-        console.error(`[DEBUG] args 类型:`, typeof args);
-        console.error(`[DEBUG] args 是否为对象:`, args && typeof args === 'object');
-        console.error(`[DEBUG] args 的键:`, args ? Object.keys(args) : 'null');
-      }
-      
-      // 从参数中获取 channelId
-      const channelId = args?.channelId;
-      
-      console.error(`[Tool] getCode 被调用: channelId=${channelId}`);
-      console.error(`[Tool] 原始 args:`, args);
-      
-      if (!channelId) {
+      const { requirement } = args
+
+      if (!requirement) {
         return {
           content: [
             {
-              type: "text",
-              text: `❌ 参数错误: 未提供 channelId\n\n💡 请使用格式: getCode({ channelId: "my-demo" })\n\n📋 调试信息:\n- args: ${JSON.stringify(args)}\n- args 类型: ${typeof args}`
+              type: 'text',
+              text: '参数错误: 未提供需求描述\n\n请提供界面需求，例如："一个美观的登录页面"、"现代化的仪表盘界面"等'
             }
           ],
           isError: true
-        };
-      }
-      
-      // 添加认证头
-      const headers = {};
-      if (ACCESS_KEY) {
-        headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
-      }
-      
-      // 从远程服务器获取代码
-      const response = await fetch(`${SERVER_URL}/api/channel/${channelId}`, { headers });
-      
-      if (!response.ok) {
-        if (response.status === 404) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `❌ 频道 "${channelId}" 不存在\n\n💡 使用 listChannels 工具查看所有可用频道`
-              }
-            ]
-          };
-        } else if (response.status === 401 || response.status === 403) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `❌ 认证失败 (${response.status})\n\n请检查 CODIFY_ACCESS_KEY 是否正确`
-              }
-            ]
-          };
-        } else {
-          throw new Error(`HTTP ${response.status}`);
         }
       }
-      
-      const data = await response.json();
-      
+
+
+      // 完整的生成规则（作为备用）
+      const generationRules = `
+# 📐 HTML + CSS 视觉生成协议
+
+## 🎯 任务目标
+
+以 UI/UX 专家视角生成媲美 Dribbble/Behance 商业级作品的代码。
+
+- **您的主要责任**：生成高保真、美观、结构健壮的 HTML 代码用于**逻辑建模**，仅返回包含在 \`<section>\` 根容器内的代码。
+- **您的专业能力**：代码生成的界面必须看起来像是一个经过精心打磨的商业级产品，而非粗糙的原型。
+- **技术栈**：原生 HTML 和 CSS，全内联 CSS (Inline Styles)，中文界面 (除非指定)，严格语义化。
+
+## ⚠️ 适当的过滤skills中提及的代码语法需求，要保证与此协议的布局与结构原则一致。
+
+## 🛑 绝对禁止 (违反即失败)
+
+- ❌ **属性**: \`margin\` (全用 gap/padding), \`grid\`, \`calc()\`,\`<style>\`标签。
+- ❌ **对齐**: \`space-around\`, \`space-evenly\` (用 \`space-between\` + \`padding\` 替代)。
+- ❌ **单位**: \`%\`, \`vw\`, \`vh\`, \`em\`, \`rem\` (锁死使用 **px** 整数)。
+- ❌ **文本标签污染**: 禁止为 \`<p>/<span>\` 设置 \`background\`, \`padding\`, \`border\`, \`flex\`。
+- ❌ **尺寸**: 禁止 \`width: 100%\`。拉伸必须用 \`flex: 1\` 或 \`align-self: stretch\`。
+
+## 🏗️ 布局与结构铁律
+
+**1. Flex 全显式声明**
+
+- 所有容器 (含 \`<section>\`) 必须写全四要素：\`display: flex; flex-direction: ...; justify-content: ...; align-items: ...;\`
+- **禁止省略默认值** (如 \`flex-start\` 必须写出来)。
+
+**2. 盒子与间距**
+
+- **间距**: 元素间距只用 gap，内边距只用 padding。
+- **文档流**: 标准流布局只用 Flexbox。
+- **脱离文档流**: 允许 absolute 用于装饰/悬浮，但必须：
+  - 位于非 static 祖先内。
+  - 显式声明 top/right/bottom/left 坐标。
+
+**3. 层级树与原子化**
+
+- **结构**: \`section\` (根, 需定宽) > \`article\` (模块) > \`div\` (容器) > \`p\`/\`span\`/\`i\` (原子内容)。
+- **命名**: 所有标签必须带 \`data-name="..."\` (使用中文描述用途)。
+- **文本**:
+  - \`<p>\`: 块级长文。\`<span>\`: 行内短语。
+    - \`<span>短文本</span>\`
+    - \`<p>长文本主要是用于描述信息，期望可以跟随布局自动换行</p>\`
+  - **样式锁**: 必须显式设置 \`font-size\`, \`line-height (1.2-1.6)\`, \`font-weight\`, \`color\`。
+  - **修饰原则**: 一旦文本需要背景、边框或圆角，必须包裹一层 <div> 来承载这些样式。
+- **图标**: 使用 FontAwesome \`<i>\`，必须显式定义颜色和大小。
+
+🎨 视觉参数锁 (Design System)
+
+**1. 现代排版建议**
+
+- **字重**: 标题 \`600/700\`，正文 \`400\`。拒绝扁平化。
+
+- **配色**:
+  - **禁纯黑**: 不要使用纯黑 (#000000) 或纯灰
+  - **文本**: 主要标题使用深色 (如 #1e293b)，次级文本/描述必须使用浅灰色 (如 #64748b)
+  - **背景**: 带微弱色调 (如 #f8fafc)，禁止纯白/纯灰死板背景。
+  - **主色**: 高饱和现代色 (如 皇家蓝 #4f46e5 / 活力紫 #8b5cf6)。
+
+**2. 空间与质感**
+
+- **大留白**: 容器 \`Padding\` ≥ \`24px\`/\`32px\`。
+- **圆角**: 卡片/容器 \`border-radius: 16px\` 或 \`24px\`。
+- **微边框**: 极淡的边界感 \`border: 1px solid rgba(0,0,0,0.06)\`。
+- **弥散光影**:
+  - 🚫 禁生硬黑影 (\`2px 2px 5px black\`)。
+  - ✅ 参考弥散影: \`box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08)\`。
+
+## 🛠️ 思维链审计 (执行前自查，无需输出)
+
+- flex 四属性是否写全？
+- 是否消灭了所有 \`margin\` 和 \`%\`?
+- \`<span>\`/\`<p>\` 是否纯净 (无盒模型样式)?
+- 是否通过 \`gap\` 控制了所有间距？
+- 颜色是否具有层级感，阴影是否够柔和、高级？
+
+`
+
+      // 返回提示，让 AI 先生成代码，然后再调用 send_to_codify 发送
+      // 注意：MCP 工具不能直接生成代码，所以返回一个提示消息
       return {
         content: [
           {
-            type: "text",
-            text: `✅ 成功获取频道 "${channelId}" 的代码：\n\n\`\`\`\n${data.code}\n\`\`\`\n\n📊 元数据：\n- 代码长度: ${data.code.length} 字符\n- 最后更新: ${data.lastUpdate}`
+            type: 'text',
+            text: `📋 收到需求：${requirement}
+
+${generationRules}
+
+---
+
+## 发送代码：
+代码生成并审计通过后，请立即调用 send_to_codify 工具发送代码
+   - send_to_codify({ code: "生成的完整代码" })
+   - 不要询问用户，直接执行发送操作
+
+**请现在开始生成代码。**`
           }
         ]
-      };
+      }
     } catch (error) {
-      console.error(`[Tool] getCode 错误:`, error);
       return {
         content: [
           {
-            type: "text",
-            text: `❌ 获取代码失败: ${error.message}\n\n请确保:\n1. Codify 服务器正在运行\n2. 频道 ID 正确\n3. 网络连接正常`
+            type: 'text',
+            text: `❌ 处理失败: ${error.message || String(error)}`
           }
         ],
         isError: true
-      };
+      }
     }
   }
-);
-
-// 注册工具：listChannels - 列出所有可用频道
+)
+// send_to_codify
 mcpServer.registerTool(
-  "listChannels",
+  'send_to_codify',
   {
-    description: "列出 Codify 服务器上所有可用的频道",
-    inputSchema: {}
+    description: '将代码发送到 Codify 插件转换为设计稿',
+    inputSchema: {
+      code: z.string().describe('要发送的代码内容')
+    }
   },
-  async () => {
+  async (args) => {
     try {
-      console.error(`[Tool] listChannels 被调用`);
-      
+      const { code } = args
+
+      if (!code) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: '参数错误: 未提供代码内容'
+            }
+          ],
+          isError: true
+        }
+      }
+
       // 添加认证头
-      const headers = {};
-      if (ACCESS_KEY) {
-        headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
+      const headers = {
+        'Content-Type': 'application/json'
       }
-      
-      // 从远程服务器获取频道列表
-      const response = await fetch(`${SERVER_URL}/channels`, { headers });
-      
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+      if (ACCESS_KEY) {
+        headers['Authorization'] = `Bearer ${ACCESS_KEY}`
       }
-      
-      const channels = await response.json();
-      
-      if (channels.length === 0) {
+
+      // 发送代码到 Codify 插件
+      try {
+        const response = await axios.post(`${SERVER_URL}/api/sendToCanvas`, { code }, { headers })
+
+        const result = response.data
+        if (result.success) {
+        }
+
         return {
           content: [
             {
-              type: "text",
-              text: "📭 暂无可用频道\n\n💡 通过 WebSocket 发送代码到服务器来创建频道"
+              type: 'text',
+              text: `✅ 代码已成功发送到 Codify 插件，等待转换为设计稿`
             }
           ]
-        };
-      }
-      
-      const channelList = channels.map((ch, i) => 
-        `${i + 1}. **${ch.channelId}**\n   - 代码长度: ${ch.codeLength} 字符\n   - 最后更新: ${ch.lastUpdate}`
-      ).join('\n\n');
-      
-      return {
-        content: [
-          {
-            type: "text",
-            text: `📺 可用频道列表 (共 ${channels.length} 个):\n\n${channelList}\n\n💡 使用 getCode 工具获取具体频道的代码`
+        }
+      } catch (error) {
+        const status = error.response?.status
+        const errorData = error.response?.data || {}
+
+        if (status === 404) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: '❌ 未找到活跃的 Codify 插件连接\n\n请确保:\n1. Codify 插件已打开并连接到服务器\n2. 使用了相同的 access_key'
+              }
+            ],
+            isError: true
           }
-        ]
-      };
+        } else if (status === 400) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `❌ 请求参数错误: ${errorData.message || 'Bad request'}`
+              }
+            ],
+            isError: true
+          }
+        } else if (status === 401 || status === 403) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `❌ 认证失败 (${status})\n\n请检查 CODIFY_ACCESS_KEY 是否正确`
+              }
+            ],
+            isError: true
+          }
+        } else {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `❌ 发送失败: ${error.message || String(error)}${
+                  errorData.message ? `\n详情: ${errorData.message}` : ''
+                }`
+              }
+            ],
+            isError: true
+          }
+        }
+      }
     } catch (error) {
-      console.error(`[Tool] listChannels 错误:`, error);
       return {
         content: [
           {
-            type: "text",
-            text: `❌ 获取频道列表失败: ${error.message}`
+            type: 'text',
+            text: `❌ 代码发送失败: ${error.message || String(error)}`
           }
         ],
         isError: true
-      };
+      }
     }
   }
-);
+)
 
-// 连接 stdio 传输
 try {
-  const transport = new StdioServerTransport();
-  await mcpServer.connect(transport);
-  console.error('✅ MCP 客户端已启动');
+  const transport = new StdioServerTransport()
+  await mcpServer.connect(transport)
 } catch (error) {
-  console.error('❌ MCP 客户端启动失败:', error.message);
-  console.error('💡 请检查:');
-  console.error('   1. 服务器地址是否正确:', SERVER_URL);
-  console.error('   2. 服务器是否正在运行');
-  console.error('   3. 网络连接是否正常');
-  process.exit(1);
+  process.exit(1)
 }