HorizonX — Premium UI Library

Name: HorizonX — Premium UI Library
Author: Mdx2025

远程服务

horizonx.so开发工具05 天前更新

代码仓库访问官网

关于 HorizonX — Premium UI Library

HorizonX 将 AI 编码 Agent 接入可搜索的 UI 资源库，提供动画组件、着色器、模板和设计资源。Agent 可检查选项，并将文件导出为 HTML、Svelte 或 React 格式用于项目。

主要功能

01用自然语言搜索 UI 资源
02检查组件参数
03导出为 HTML、Svelte 或 React
04获取模板、套件和设计系统

适用场景

01为页面添加动画主视觉背景
02插入 React 图片滑块
03查找 SaaS 落地页模板

MCP 相关

插件包含 HorizonX MCP 服务，地址为 https://horizonx.so/api/mcp。MCP 客户端使用 HorizonX 账户登录后即可连接。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://horizonx.so/api/mcp

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http mdx2025-horizonx https://horizonx.so/api/mcp

Cursor.cursor/mcp.json{"mcpServers":{"mdx2025-horizonx":{"type":"http","url":"https://horizonx.so/api/mcp"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"mdx2025-horizonx":{"type":"http","url":"https://horizonx.so/api/mcp"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"mdx2025-horizonx":{"type":"http","url":"https://horizonx.so/api/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"mdx2025-horizonx":{"serverUrl":"https://horizonx.so/api/mcp"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

面向 AI 编码 Agent 的 HorizonX 插件

用通俗语言搜索 HorizonX，并将结果直接放入代码中：动画 UI 组件、设备模型、图像纹理和 WebGL 着色器，可导出为 HTML、Svelte 或 React；还包括落地页、UI 工具包、设计系统、3D 模型和开源图标库，可作为文件导出。

此插件包含两项内容：

HorizonX MCP 服务（https://horizonx.so/api/mcp）。Agent 首次使用时，你需要登录 HorizonX 账号；无需复制密钥。
horizonx 技能，用于教会 Agent 工作流：搜索、检查参数、导出为项目使用的框架，并将文件放在同类组件所在的位置。

需要有效的 HorizonX 会员资格。

安装

Claude Code

/plugin marketplace add Mdx2025/horizonx-agent-plugin
/plugin install horizonx@horizonx

然后运行 /mcp，选择 horizonx 并登录。

Codex

codex plugin marketplace add Mdx2025/horizonx-agent-plugin
codex plugin add horizonx@horizonx
codex mcp login horizonx

Cursor

Cursor 会将此插件识别为 Agent 插件。在它上架 Cursor Marketplace 之前，请将 plugins/horizonx 复制到 ~/.cursor/plugins/local/horizonx，重新加载窗口，并在 Cursor 提示时登录。若只想添加 MCP 服务，请使用 horizonx.so/mcp 上的 Add to Cursor 按钮。

Gemini CLI

gemini extensions install https://github.com/Mdx2025/horizonx-agent-plugin

Claude.ai 和 ChatGPT

HorizonX 已列入 Claude 连接器目录和 ChatGPT 应用中。打开对应页面，连接并使用 HorizonX 账号登录。

其他 MCP 客户端

horizonx.so/mcp 提供 VS Code、Windsurf、Gemini CLI、Claude.ai、ChatGPT 等的设置说明。

试试看

“使用 HorizonX 为此页面添加动态主视觉背景。”
“使用 HorizonX 查找前后对比图片滑块，并将其作为 React 组件添加。”
“使用 HorizonX 查找 SaaS 落地页模板。”
“按照 HorizonX 设计系统的风格，并遵循其 DESIGN.md，使用 HorizonX 构建此仪表板。”

目录结构

.claude-plugin/marketplace.json      Claude Code marketplace
.agents/plugins/marketplace.json     Codex marketplace
.cursor-plugin/marketplace.json      Cursor marketplace (points at plugins/horizonx)
gemini-extension.json                Gemini CLI extension (MCP server only)
server.json                          Official MCP Registry entry
plugins/horizonx/
  plugin.json, mcp.json              Agent Plugins manifest (Codex, Cursor, OpenAI listing and review cases)
  .claude-plugin/plugin.json, .mcp.json   Claude Code manifest
  skills/horizonx/SKILL.md           The skill
  README.md                          Tools and the data the plugin sends
  assets/icon.png

mcp.json 特意不包含 extensions["com.openai"].auth 块：Codex 0.163.0 会丢弃包含任何 extensions 键的插件 MCP 服务。Codex 会从服务发现 HorizonX 的 OAuth，因此不会丢失任何内容。