Web Image Generator MCP Server

一个用于生成Web设计占位图片的MCP Server，通过AI文生图模型生成适合网站设计的图片。

功能特点

• 🖼️ AI图片生成: 使用ModelScope的FLUX模型生成高质量图片
• 🎨 多种风格预设: 提供hero、banner、card、background等多种网站设计场景的风格预设
• 🔧 易于使用: 直接返回图片URL，支持HTML、CSS、Markdown格式

可用工具

generate_web_image

生成用于Web设计的AI图片。

参数:

• prompt (必需): 图片描述，使用英文描述想要生成的图片
• style (可选): 风格预设，可选值:
  • hero: 用于网站主区域和大横幅
  • banner: 用于促销横幅
  • card: 用于卡片组件
  • background: 用于背景纹理
  • illustration: 用于装饰性插图
  • product: 用于产品展示
  • team: 用于团队区域占位图
  • nature: 用于自然主题区域
  • technology: 用于科技相关内容
  • abstract: 用于抽象艺术元素
• width (可选): 图片宽度（像素）
• height (可选): 图片高度（像素）

list_image_styles

列出所有可用的图片风格预设。

配置

1. 获取API密钥

1. 访问 ModelScope
2. 注册/登录账号
3. 在个人中心获取API密钥

2. 配置MCP设置

在MCP设置文件中配置MODELSCOPE_API_KEY环境变量：

{
  "mcpServers": {
    "web-image-generator": {
      "command": "node",
      "args": ["C:\\Users\\admin\\Documents\\Cline\\MCP\\web-image-generator\\build\\index.js"],
      "env": {
        "MODELSCOPE_API_KEY": "your-api-key-here"
      }
    }
  }
}

使用示例

生成Hero区域图片

使用generate_web_image工具生成一张"modern city skyline at sunset"的hero风格图片

生成产品展示图片

使用generate_web_image工具生成一张"wireless headphones on white background"的product风格图片

生成背景纹理

使用generate_web_image工具生成一张"subtle geometric pattern"的background风格图片

返回格式

工具返回JSON格式的结果，包含：

{
  "success": true,
  "imageUrl": "https://...",
  "prompt": "增强后的提示词",
  "originalPrompt": "原始提示词",
  "style": "hero",
  "usage": {
    "html": "<img src=\"...\" alt=\"...\" />",
    "css": "background-image: url('...');",
    "markdown": "![...](...)"
  }
}

开发

安装依赖

npm install

编译

npm run build

运行

npm start

技术栈

• TypeScript
• Model Context Protocol SDK
• ModelScope Image Generation API (FLUX model)
• Axios

License

MIT