mcpField
F
Flyonui Mcp

Flyonui Mcp

本地服务
github.com/themeselection开发工具3250 周前更新
代码仓库

关于 Flyonui Mcp

FlyonUI MCP Server 是一个面向 Tailwind 的 AI 构建工具，用于生成、参考和重构 UI 区块、组件与落地页。它面向希望在 IDE 中快速搭建界面的前端开发者，支持 React、Next.js、Vue 等常见框架。

主要功能

  1. 01生成基于 FlyonUI 区块的 UI 内容
  2. 02提供 /cui、/iui、/rui 三个命令
  3. 03可集成到 VS Code、Cursor、Windsurf 等 IDE
  4. 04支持 React、Next.js、Vue、Svelte 等框架

适用场景

  1. 01基于现有 FlyonUI 区块定制落地页的 Hero 区域
  2. 02根据描述生成新的功能展示区块
  3. 03修改已有区块的主题或布局

MCP 相关

该项目是 MCP 服务，在 IDE 中通过 /cui、/iui、/rui 命令为 MCP 客户端提供界面生成与编辑能力。

#mcp#ai-builder#flyonui#tailwind-ai

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "flyonui": {
      "command": "npx",
      "args": [
        "-y",
        "flyonui-mcp"
      ]
    }
  }
}
启动命令npx -y flyonui-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmflyonui-mcp

工具

6

收录的工具列表 · 更新于 3 周前

此工具无需参数。

详细介绍

FlyonUI MCP 服务

只需几分钟，即可构建现代化、可用于生产环境的 UI 模块、组件和落地页。可与您喜爱的 IDE 无缝集成，并支持 React、Next.js、Nuxt、Vue、Svelte 等最流行的框架。

🚀 什么是 FlyonUI MCP 服务？

FlyonUI MCP 服务是一个 Tailwind AI 构建工具，可帮助您使用 FlyonUI 模块创建、获取灵感并重构精美、可用于生产环境的模块、UI 组件和完整页面。它可直接与您喜爱的 IDE 轻松集成，打造快速高效的工作流。

立即免费试用 FlyonUI MCP 服务。

🛠️ 安装

我们让安装变得非常简单！

  1. 打开安装指南，并选择您的 IDE（VS Code、Cursor、Windsurf 等）。
  2. 按照分步说明在 IDE 中设置 MCP 服务。
  3. 开始免费使用 FlyonUI MCP 服务。

观看完整安装视频：FlyonUI MCP 安装。

📒 文档

FlyonUI MCP 服务设计直观易用。命令简单明了，可帮助您快速创建、获取灵感并完善 UI 模块。

有关如何使用 FlyonUI MCP 服务的详细文档，请参阅 FlyonUI MCP 文档。

🔧 用法

FlyonUI MCP 服务提供三个主要命令：

命令描述使用场景
/cui创建 UI基于现有 FlyonUI 模块进行自定义
/iui获取 UI 灵感生成新颖、有创意的 UI 模块
/rui优化 UI优化或编辑现有模块

在此查看 FlyonUI MCP 服务的完整使用文档：FlyonUI MCP 文档。

在此观看视频教程：FlyonUI MCP 用法。

示例

创建 UI（/cui）：

/cui Create a hero section for an eLearning Academy site.
/cui Create a feature section for my landing page like Features 8.

获取 UI 灵感（/iui）：

/iui Create a hero section for my AI SaaS - AI Video Generator.
/iui Create a feature section for my productivity app.

优化 UI（/rui）：

/rui Update the theme to Shadcn.
/rui Replace the “Get Started” button with Login and Register buttons.
/rui Change the Hero section layout from horizontal to vertical.

📚 文档与资源

社区 🤝

加入 FlyonUI 社区，讨论此库、提出问题并分享您的经验：

贡献 📝

修复错误或添加新功能。您可以提交拉取请求，让您的代码出现在下一个版本的 FlyonUI MCP 中。

提交拉取请求前，请参阅**贡献指南**。

💬 支持

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。