无穹玩法 | 3分钟用MCP自动设计一个科技官网页-CSDN博客

本文链接：https://blog.csdn.net/2401_87329534/article/details/147517825

无穹玩法专栏旨在探索AI应用的无限可能，借助无问芯穹大模型服务平台（GenStudio）提供的高性能推理加速API，推动创新加速。

下面是一个完全由AI生成的「科技企业官网」介绍网页，从代码到设计无需人工干预，生成过程只需要2-3分钟。

动图展示

在这个官网网页上，包含公司简介、产品展示、联系方式等。该官网通过Vscode+Cline+Magic UI MCP Server自动设计完成，搭配无问芯穹大模型服务平台（GenStudio）的高性能推理API来实现。下面将一步步展示具体实现过程。

安装Cline扩展并配置模型服务
Cline MCP Marketplace安装Magic UI
实战演示：一键自动生成科技企业团队页

无问芯穹大模型服务平台（GenStudio）提供高性能推理加速API，资源充足，确保 AI 应用的智能、稳定性。涵盖DeepSeek V3/R1、QWQ32B、Qwen2.5-VL等最新模型，支持文本、图像、视频等多种模态，以及Jina/bge等sota嵌入、重排模型等。在 cloud.infini-ai.com 完成注册后，可无门槛使用基础免费版（含API调用），其中QWQ-32B等模型支持 function call。

一、安装Cline扩展并配置模型服务

1、配置无问芯穹 GenStudio 的API服务

VSCode 安装 Cline 扩展后，可通过 OpenAI Compatible 设置无问芯穹的 GenStudio 提供的 OpenAI 兼容 API 服务

点击Cline图标打开设置面板
注意：Plan和Act功能的API配置是独立的，我们需要配置Act功能
选择"OpenAI Compatible"作为API Provider
填写以下关键信息：

Base URL: https://cloud.infini-ai.com/maas/v1

API Key: GenStudio API密钥

Model ID: deepseek-v3

二、安装Magic UI MCP Server

Magic UI MCP Server 是一个基于开放协议MCP的服务端，标准化地向大语言模型（LLM）提供Magic UI组件的上下文，使AI辅助的IDE能够直接访问和调用这些组件，实现高效、低错误率的代码生成和界面构建。

在安装Magic UI MCP Server前，需要先完成以下Node.js、Homebrew安装的前置环境配置。

1. 安装Node.js运行环境

打开终端，输入node -v检查是否已安装
如未安装，访问Node.js官网（https://nodejs.org/zh-cn/download）下载安装。MCP Server本质上是运行在电脑上的Nodejs程序，因此我们需要在电脑上安装Nodejs的运行环境。

2. 安装Homebrew(仅Mac用户需要)

通过以下脚本安装brew，该脚本来自国内开发者维护的 HomebrewCN，会自动选择最佳镜像源。

/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

3. 安装Magic UI MCP服务

在Cline中打开MCP Marketplace

搜索"Magic UI"并点击Install
安装过程中需要GitHub授权登录以及获取Magic UI MCP Server的密钥，并执行输入
等待安装完成(约5-6分钟)

三、实战演示：生成科技企业团队页

在Cline的Act对话框中输入：使用Magic MCP创建一个科技企业团队介绍页，页面采用简洁现代的设计风格，整体以深色为主色调，搭配蓝色和银色点缀，突出科技感和专业感。

Magic UI将开始自动生成HTML代码

约2-3分钟后，将获得完整的HTML文件路径

打开生成的文件，将看到网站的效果

（PS：免费基础版可能无法完成实践，暂时可加入社群联系我们申请提频体验。

GenStudio 即将推出升级服务，可大幅提升调用频率，敬请期待）

无问芯穹大模型服务现已支持在多个AI应用、开发平台中使用。可在网页或本地安装以下应用，接入无问芯穹的 API 后（可自定义添加这两款模型），即可体验 DeepSeek V3/R1、QWQ32B、Qwen2.5-VL等最新模型高性能推理加速版API。

AI应用：Cherry Studio、LobeChat、NextChat
代码应用：Cursor、Cline
AI应用开发平台：Dify
Agent项目：LangManus
AI 笔记：Obsidian AI
翻译插件：沉浸式翻译
浏览器插件：Sider、Page Assist

更多场景与应用案例接入教程可参考：https://docs.infini-ai.com/posts/#tag=integrations

欢迎更多AI应用合作伙伴加入我们，一起为开发者、企业提供更高效的智能应用。如果你还想无问芯穹大模型服务接入其他AI应用，也可以在评论区告诉我们。