Waiframe MCP Server

外框MCP服务器

将AI编码工具连接到您的 网站 Waiframe.ai 使用 模型上下文协议.

构建与线框相匹配的UI代码——你的AI编码工具可以获得有关屏幕、组件、导航流和设计模式的结构化上下文。

快速开始

1.获取API密钥

首选 waiframe.ai/app/设置？tab=api密钥 并创建API密钥。

2.配置您的AI工具

克劳德代码 --添加到MCP设置中：

{
  "mcpServers": {
    "waiframe": {
      "command": "npx",
      "args": ["-y", "@waiframe/mcp-server"],
      "env": {
        "WAIFRAME_API_KEY": "wf_sk_your_key_here"
      }
    }
  }
}

光标 --将相同的配置添加到MCP设置文件中。

3.使用它

一旦连接，您的AI工具可以：

• 列出您的项目 --查看所有线框项目
• 阅读屏幕 --获取语义格式的组件布局（无UUID或像素位置）
• 遵循流程 --了解屏幕之间的导航
• 获取设计上下文 --应用类型、受众、功能、品牌风格
• 查找组件 --60多种线框组件类型的规格

工具

资源

运作原理

AI Coding Tool ←stdio→ @waiframe/mcp-server ←HTTPS→ waiframe.ai API

MCP服务器在您的计算机上本地运行。它使用API键连接到Waiframe API，并将线框数据转换为有利于AI的格式：

• 条带 UUID、像素位置和大小
• 保持 组件类型、特性、标签和文本
• 解决 与屏幕名称的导航连接
• 种类 元素从上到下用于读取顺序

示例

线框中的按钮变为：

- button-primary {label: "Sign In"} → Dashboard

而不是带有UUID和坐标的原始JSON。

环境变量

发展

# Install dependencies
npm install

# Build
npm run build

# Run locally
WAIFRAME_API_KEY=wf_sk_... node dist/index.js

许可证

麻省理工学院