@codify-ai/mcp-client 1.0.1 → 1.0.3

package/mcp-client.js

@@ -1,44 +1,28 @@
-#!/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 || 'http://localhost:8080';
-  
+  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,418 +31,499 @@ 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);
+      console.log('1.0.1')
+      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 能力
-  }
-});
-
-// 注册资源（使用 ResourceTemplate）
-const resourceTemplate = new ResourceTemplate(
-  "codify://{channelId}/current",
+const mcpServer = new McpServer(
   {
-    list: async () => {
-      try {
-        // 从远程服务器获取所有通道列表
-        const headers = {};
-        if (ACCESS_KEY) {
-          headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
-        }
-        
-        const response = await fetch(`${SERVER_URL}/channels`, { headers });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const channels = await response.json();
-        
-        return {
-          resources: channels.map(ch => ({
-            uri: `codify://${ch.channelId}/current`,
-            name: `${ch.channelId}-code`,
-            mimeType: "text/plain"
-          }))
-        };
-      } catch (error) {
-        console.error(`❌ 获取通道列表失败:`, error);
-        return { resources: [] };
-      }
-    },
-    complete: {}
+    name: 'Codify-MCP-Client',
+    version: '1.0.1'
+  },
+  {
+    capabilities: {
+      resources: {},
+      tools: {},
+      prompts: {}
+    }
   }
-);
+)
 
-mcpServer.registerResource(
-  "current-code",
-  resourceTemplate,
-  { mimeType: "text/plain" },
-  async (uri, variables) => {
+// get_code
+mcpServer.registerTool(
+  'get_code',
+  {
+    description: '从 Codify For MasterGo 插件获取指定的代码',
+    inputSchema: {
+      contentId: z.string().describe('从Codify插件复制图层的指令')
+    }
+  },
+  async (args) => {
     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];
-        }
-      }
-      
-      if (!channelId) {
-        console.error(`❌ 无法从 URI 解析 channelId: ${uri.href}`);
-        console.error(`   variables:`, variables);
+      const { contentId } = args
+
+      if (!contentId) {
         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) + '...' : '未设置'}`);
+          content: [
+            {
+              type: 'text',
+              text: `参数错误: 未提供 contentId\n- args: ${JSON.stringify(args)}`
+            }
+          ],
+          isError: true
+        }
       }
-      
+
       // 添加认证头
-      const headers = {};
+      const headers = {}
       if (ACCESS_KEY) {
-        headers['Authorization'] = `Bearer ${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}`);
-      }
-      
-      let response;
+      const apiUrl = `${SERVER_URL}/api/getCode/${contentId}`
       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 (!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`
+        }
+        if (!isEmpty(data.image)) {
+          resultText += `Image: ${Object.keys(data.image).length}\n`
+        }
+     
+        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 {
-          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 404:
             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- contentId: ${contentId}\n- 请检查 contentId 是否正确，或该内容是否已从 Codify 插件同步`
+                }
+              ],
+              isError: true
+            }
+          case 403:
             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: `❌ 权限不足\n- contentId: ${contentId}\n- 您没有权限访问该内容\n- 请检查您的 access_key 是否包含正确的团队权限`
+                }
+              ],
+              isError: true
             }
-          } catch (retryError) {
-            console.error(`❌ 重试请求异常:`, retryError);
+          case 401:
             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: `❌ 认证失败 (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
+            }
         }
       }
-      
-      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",
-  z.object({
-    channelId: z.string().describe("频道 ID，例如: my-demo, test-channel")
-  }).describe("从 Codify 服务器获取指定频道的代码"),
-  async ({ channelId }) => {
+  'design',
+  {
+    description: '根据需求生成符合 Codify 规范的 HTML+CSS 代码',
+    inputSchema: {
+      requirement: z.string().describe('界面需求描述，例如："一个美观的登录页面"、"现代化的仪表盘界面"等。工具会根据 Codify 生成规则自动生成代码。')
+    }
+  },
+  async (args) => {
     try {
-      console.error(`[Tool] getCode 被调用: channelId=${channelId}`);
-      
-      // 添加认证头
-      const headers = {};
-      if (ACCESS_KEY) {
-        headers['Authorization'] = `Bearer ${ACCESS_KEY}`;
+      const { requirement } = args
+
+      if (!requirement) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: '参数错误: 未提供需求描述\n\n请提供界面需求，例如："一个美观的登录页面"、"现代化的仪表盘界面"等'
+            }
+          ],
+          isError: true
+        }
       }
-      
-      // 从远程服务器获取代码
-      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 fs = await import('fs')
+      const path = await import('path')
+      const { fileURLToPath } = await import('url')
+      const { dirname } = await import('path')
+
+      const __filename = fileURLToPath(import.meta.url)
+      const __dirname = dirname(__filename)
+      const rulesPath = path.join(__dirname, '..', '生成规则.md')
+
+      // 完整的生成规则（作为备用）
+      const fullGenerationRules = `# 📐 HTML + CSS 视觉生成协议
+
+## 🎯 任务目标
+
+你是一位拥有顶级审美的 UI/UX 设计师，同时也是精通 HTML/CSS 的前端开发专家。你的目标是生成在视觉上媲美 Dribbble 或 Behance 热门作品的 HTML/CSS 代码。
+
+**您的主要责任**：生成高保真、美观、结构健壮的 HTML 代码用于**逻辑建模**，而不是用于真实网页的交互或行为。
+
+**你的专业能力**：代码生成的界面必须看起来像是一个经过精心打磨的商业级产品，而非粗糙的原型。
+
+**输出限制**：仅返回包含在 \`<section>\` 根容器内的代码，全部使用 **内联 CSS**。
+
+**语言**：默认使用 **中文** 界面，除非用户提出其它语言的界面需求。
+
+## 🛑 关键约束 (违反视为任务失败)
+
+- **Flex 属性全显式声明**：
+  - 所有 flex 容器（包含 section）必须手动写全三要素：\`flex-direction\`, \`justify-content\`, \`align-items\`。
+  - **禁止省略默认值**：即便对齐方式是 \`flex-start\`，也必须显式写出。
+
+- **禁止属性/单位黑名单**：
+  - 禁止使用：\`<style>\` 标签、\`margin\` 属性、\`grid\` 布局、\`calc()\` 函数。
+  - 禁止\`space-around\` / \`space-evenly\` (使用 \`space-between\` + padding 代替)。
+  - 禁止单位：严禁使用 \`%\`, \`vw\`, \`vh\`, \`em\`, \`rem\`。**所有数值必须为 px 整数**。
+  - 禁止为 \`<span>\` 添加\`flex\`布局属性，或\`background\`,\`padding\`,\`border\`等样式。
+  - 禁止在\`flex\`布局中添加宽高尺寸，除非有需要固定尺寸的元素。
+  - ❌ **严禁使用** "margin" 属性。
+
+- **元素间的间距**：
+  - 必须由父容器的 \`gap\` 属性承担。
+
+## 📜 HTML 结构与原子化规范
+
+- **文档流布局**：
+  - 所有在文档流中的布局都必须使用flex布局，不允许使用其他布局方式
+  - \`<section>\` 根元素必须明确声明 \`width: px\` 尺寸。
+
+- **层级树协议**：
+  - 严格遵守：\`section\` (根) > \`article\` (模块) > \`div\` (容器) > \`p/span/i/svg\` (内容)。
+  - 所有标签必须包含 \`data-name="..."\` 描述图层用途（如 \`data-name="submit-button"\`）。
+
+- **文本原子化**：
+  - 文本内容必须且仅能包裹在 \`<span>\` (行内文本) 或 \`<p>\` (长文本/换行) 中。
+  - **严禁**在 \`<p>\` 内嵌套 \`<span>\` 或其他标签。
+  - 所有\`<p>\`和\`<span>\` 标签必须显式设置：\`font-size\`, \`line-height\` (1.2-1.5倍), \`font-weight\`, \`color\` (#Hex)。
+  - **关键**：如果你需要为\`<span>\`增加\`background\`,\`padding\`,\`border\`等样式，请立即改为\`<div>\`标签。
+
+- **图标**：
+  - 使用 FontAwesome \`<i>\` 标签 (class="fas fa-...").
+
+## 🏗️ 布局与拉伸
+
+- **拉伸行为必须由子元素主动声明**：父容器仅负责容器边界、对齐方式和成员间距。仅允许使用 \`flex: 1\` 或 \`align-self: stretch\` 来拉伸元素。
+- **防挤压声明**：所有固定宽高的元素（如图标、头像、按钮容器）必须显式添加 \`flex: none\`。
+
+## 📐 视觉与间距规范
+
+- **边距控制**：仅允许使用 \`padding\` 控制内边距。
+- **间距控制**：仅允许使用 \`gap\` 控制子元素间距。
+- **视觉修饰**：边框使用 \`border: 1px solid #XXXXXX\`，圆角使用 \`border-radius: Xpx\`。
+
+## 🎨 设计系统严格规范
+
+在生成任何代码时，必须严格强制执行以下视觉规则：
+
+1. **视觉层级 (Visual Hierarchy):**
+   - 拒绝扁平的单一字重。标题必须使用加粗 (font-weight: 600/700)，正文使用常规 (400)。
+   - 使用有层次的文字颜色：主要标题使用深色 (如 #1e293b)，次级文本/描述必须使用浅灰色 (如 #64748b)，不仅是为了美观，也是为了信息降噪。
+
+2. **现代盒模型与空间感 (Modern Box Model):**
+   - **大留白：** 拒绝拥挤。卡片和容器内部必须有宽裕的 padding (至少 24px 或 32px)。
+   - **大圆角：** 容器和卡片应使用明显的圆角 (border-radius: 16px 或 24px) 以呈现亲和力，避免尖锐的直角。
+   - **微边框：** 避免使用粗黑边框。使用极其微妙的边框来界定边界 (例如: \`border: 1px solid rgba(0,0,0,0.06)\`)。
+
+3. **光影与深度 (Elevation & Depth):**
+   - **绝对禁止**使用默认的、生硬的黑色阴影 (如 \`box-shadow: 2px 2px 5px black\`)。
+   - 必须使用 **"弥散光影" (Soft/Diffused Shadows)**：使用多层、高模糊半径、低透明度的阴影来创造悬浮感。
+   - _参考值：_ \`box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);\`
+
+4. **高级配色 (Refined Palette):**
+   - 不要使用纯黑 (#000000) 或纯灰。背景色应带有极微弱的色调倾向 (如 Slate, Zinc, 或极淡的蓝灰色 #f8fafc)。
+   - 主色调 (Primary Color) 应选择高饱和度且现代的颜色 (如 皇家蓝 #4f46e5 或 活力紫 #8b5cf6)。
+
+## 🛠️ 输出前专项审计清单
+
+**请在输出代码前，按顺序完成以下审查，确保逻辑无误：**
+
+- [ ] **显式声明检查**：每一个 \`flex\` 节点是否都写全了 \`flex-direction\`, \`justify-content\`, \`align-items\`？
+- [ ] **拉伸逻辑检查**：拉伸行为是否由子元素主动声明；代码中是否彻底消灭了 \`width: 100%\` 和 \`%\` 符号，
+- [ ] **尺寸检查**：所有尺寸都使用了 \`[具体px值]\` 格式
+- [ ] **文本检查**：所有 \`<span>\` 和 \`<p>\` 是否都配置了 \`line-height\`？
+- [ ] **margin检查**：是否移除了所有 \`margin\` 属性？
+- [ ] **容器补全**：如果发现没有父容器可以承载 padding，请务必新建一个 \`data-name="padding-wrapper"\` 的 div 来包裹目标元素。
+- [ ] **代码检查**：请确保页面布局正确。`
+
+      let generationRules = ''
+      try {
+        generationRules = fs.readFileSync(rulesPath, 'utf-8')
+        // 如果读取成功但内容为空，使用完整规则
+        if (!generationRules || generationRules.trim().length === 0) {
+          generationRules = fullGenerationRules
         }
+      } catch (error) {
+        console.error('读取生成规则失败，使用内置完整规则:', error)
+        // 读取失败时使用完整的生成规则
+        generationRules = fullGenerationRules
       }
-      
-      const data = await response.json();
-      
+
+      // 返回提示，让 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",
-  z.object({}).describe("列出 Codify 服务器上所有可用的频道"),
-  async () => {
+  'send_to_codify',
+  {
+    description: '将代码发送到 Codify 插件转换为设计稿',
+    inputSchema: {
+      code: z.string().describe('要发送的代码内容')
+    }
+  },
+  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)
 }