AI导哈

AI编码工具连接服务

Waiframe MCP Server是一个将AI编码工具与Waiframe.ai线框设计连接的服务，提供结构化上下文以生成匹配线框的UI代码。

  • by waiframe
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 waiframe/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多种线框组件类型的规格

工具

工具 说明
list_projects 列出所有线框项目
get_project_overview 带有屏幕和流名称的项目详细信息
get_screen 屏幕的语义线框布局
get_flow 屏幕之间的导航流程
get_design_context 应用程序上下文（类型、受众、功能）
get_component_spec 组件规格和性能

资源

资源 描述
waiframe://component-catalog 60多个线框组件的完整目录
waiframe://design-patterns 20种精心策划的UI设计模式

运作原理

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。

环境变量

变量 必填 默认 描述
WAIFRAME_API_KEY 是 - 来自waiframe.ai的API密钥
WAIFRAME_BASE_URL 没有 https://waiframe.ai API基础URL（用于开发）

发展

# Install dependencies
npm install

# Build
npm run build

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

许可证

麻省理工学院

相关 MCP