MCP server for the Frame-Relay design kit: components, tokens and live Figma selections.
MCPpedia last refreshed this data
io.github.Joseph-Brendan/frame-relay is an MCP server that MCP server for the Frame-Relay design kit: components, tokens and live Figma selections. Its tool list has not been published yet over stdio and http, requires no API key, and scores 85/100 on MCPpedia's security, maintenance and efficiency rubric.
Config is the same across clients - only the file and path differ.
{
"mcpServers": {
"io-github-joseph-brendan-frame-relay": {
"args": [
"-y",
"@frame-relay/cli"
],
"command": "npx"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
MCP server for the Frame-Relay design kit: components, tokens and live Figma selections.
Run this in your terminal to verify the server starts. Then let us know if it worked - your result helps other developers.
npx -y '@frame-relay/cli' 2>&1 | head -1 && echo "✓ Server started successfully"
After testing, let us know if it worked:
Five weighted categories - click any category to see the underlying evidence.
No known CVEs.
Checked @frame-relay/cli against OSV.dev.
Click any tool to inspect its schema.
Be the first to review
Have you used this server?
Share your experience - it helps other developers decide.
Sign in to write a review.
Others in design
AI-native design editor. Open-source Figma alternative.
Draw and visually collaborate with your agents on tldraw's canvas.
MeiGen-AI-Design-MCP — Turn Claude Code / OpenClaw into your local Lovart. Local ComfyUI, 1,400+ prompt library, multi-direction parallel generation.
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
MCP Security Weekly
Get CVE alerts and security updates for io.github.Joseph-Brendan/frame-relay and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
Turn your Figma components into a design kit your AI coding agent follows.
New to this? Follow the step-by-step setup guide for designers.
Status: public beta. Commands below install the beta tag of the CLI. Expect rough edges and
tell us what you find with the beta feedback form.
Frame-Relay is for designers who already work with AI coding tools like OpenCode or Antigravity, and for small teams that want their Figma system to stay the source of truth while AI writes the UI. You keep designing in Figma. Your agent gets exact components, tokens and rules instead of guessing from screenshots.
Live mode is the optional fifth step: pair Figma with your agent and let it read the layer you have selected. See Live mode. Export mode always works without it.
# 1. Create a React + TypeScript app (Vite shown here; any React app works)
npm create vite@latest my-app -- --template react-ts
cd my-app
# 2. Add Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite
# Then add the tailwindcss() plugin to vite.config.ts and
# `@import "tailwindcss";` to src/index.css.
# 3. In Figma: run the Frame-Relay plugin, open the Export tab, click Export Kit (.zip)
# 4. Set up Frame-Relay and sync the kit
npx @frame-relay/cli@beta init --yes
npx @frame-relay/cli@beta sync --from ~/Downloads/frame-relay-kit-my-file.zip
# 5. Check the setup
npx @frame-relay/cli@beta doctor
Open the folder in OpenCode (or your AI tool), then ask: "Build a settings page with the kit components." The agent calls the MCP server for the component list, props and tokens, and builds.
Getting the Figma plugin: Frame-Relay is coming to Figma Community. Until it is approved, open
Figma desktop, go to Plugins, Development, Import plugin from manifest, and pick
packages/plugin/manifest.json from this repo.
Full walkthrough: Getting started. Ideas first: Concepts.
These steps are written for a designer who has never used a terminal. A terminal is a window where you type short commands to your computer. Your AI coding tool has one built in.
Step 1. Install Node.js. Go to nodejs.org, download the LTS version, and install it like any other app. Why: Frame-Relay runs on Node.js. Without it, your computer can't run the commands below.
Step 2. Install an AI coding tool. Pick one: Cursor, Antigravity, OpenCode or Claude Code. Install it and sign in. Why: This is the AI that will build your app. Frame-Relay teaches it to use your designs.
Step 3. Add the Frame-Relay plugin to Figma. Open Figma, search for "Frame-Relay" in Community plugins, and click Install. Until the listing