AI图片生成MCP Server

一个专为网页开发和内容创作设计的AI图片生成MCP Server。该服务器能够自动理解和规划网页开发所需的图片信息，生成高质量的英文提示词，并调用ModelScope AI文生图API生成相应的占位图片。

🚀 快速使用（推荐）

使用npx直接运行，无需安装：

# 直接运行MCP Server
npx mcp-ai-image-generator-xc

# 或者设置环境变量后运行
MODELSCOPE_API_KEY="your-api-key" npx mcp-ai-image-generator-xc

🌟 核心功能

1. 智能网页图片规划

• 自动分析：解析网页项目描述，智能识别所需图片类型
• 元素分类：支持Hero横幅、产品展示、功能介绍、用户头像等多种网页元素
• 尺寸建议：根据元素类型自动推荐合适的图片尺寸

2. 专业提示词生成

• 中英转换：将中文描述智能转换为专业的英文AI绘图提示词
• 模板系统：内置多套针对不同网页元素的提示词模板
• 风格适配：支持现代、企业、创意、科技等多种设计风格

3. 高质量图片生成

• ModelScope集成：调用ModelScope的FLUX高质量AI图像生成模型
• 批量处理：支持一次生成多张图片，提高工作效率
• 智能重试：内置错误处理和重试机制，确保生成成功率

4. 文章配图建议

• 内容分析：分析文章内容，建议合适的配图位置和类型
• 图文匹配：根据文章主题生成相关的配图提示词
• SEO优化：提供图片使用建议，提升内容质量

📦 安装方式

方式一：使用npx（推荐）

无需安装，直接使用：

npx mcp-ai-image-generator-xc

方式二：全局安装

npm install -g mcp-ai-image-generator-xc
mcp-ai-image-generator-xc

方式三：本地开发

# 克隆项目
git clone https://github.com/seachal/mcp-ai-image-generator-xc.git
cd mcp-ai-image-generator-xc

# 安装依赖
npm install

# 编译项目
npm run build

# 启动服务器
npm start

获取ModelScope API密钥

1. 访问 ModelScope官网
2. 注册并登录账户
3. 进入控制台，创建API密钥
4. 在MCP客户端配置中设置环境变量

⚙️ MCP客户端配置

使用npx方式（推荐）

在您的MCP客户端配置文件中添加以下配置：

{
  "mcpServers": {
    "ai-image-generator": {
      "command": "npx",
      "args": ["mcp-ai-image-generator-xc"],
      "env": {
        "MODELSCOPE_API_KEY": "your-modelscope-api-key"
      }
    }
  }
}

使用全局安装方式

{
  "mcpServers": {
    "ai-image-generator": {
      "command": "mcp-ai-image-generator-xc",
      "env": {
        "MODELSCOPE_API_KEY": "your-modelscope-api-key"
      }
    }
  }
}

使用本地路径方式

{
  "mcpServers": {
    "ai-image-generator": {
      "command": "node",
      "args": ["/path/to/your/project/dist/index.js"],
      "env": {
        "MODELSCOPE_API_KEY": "your-modelscope-api-key"
      }
    }
  }
}

🛠️ MCP工具说明

1. analyze-webpage - 网页图片需求分析

分析网页开发需求，规划所需的图片类型和数量。

参数：

• description (string): 网页或项目描述
• pageType (string, 可选): 页面类型（如：首页、产品页、关于我们等）
• style (enum, 可选): 设计风格（modern/corporate/creative/tech/healthcare/education/ecommerce/startup）

示例：

{
  "description": "一个现代化的科技公司官网，包含产品展示和团队介绍",
  "pageType": "首页",
  "style": "tech"
}

2. generate-images - AI图片生成

根据英文提示词生成AI图片，自动使用环境变量中配置的ModelScope API密钥。

参数：

• prompts (array): 英文提示词数组
• batchSize (number, 可选): 批次大小（1-5，默认3）

示例：

{
  "prompts": [
    "A professional tech company hero section image, modern design, clean composition",
    "Professional product photography, clean white background, high resolution"
  ]
}

3. generate-webpage-images - 一键生成网页图片

分析网页需求并自动生成所有需要的图片，自动使用环境变量中配置的ModelScope API密钥。

参数：

• description (string): 网页或项目描述
• pageType (string, 可选): 页面类型
• style (enum, 可选): 设计风格
• maxImages (number, 可选): 最大图片数量（1-10，默认5）

示例：

{
  "description": "一个在线教育平台，需要展示课程和师资",
  "pageType": "教育平台首页",
  "style": "education",
  "maxImages": 3
}

4. analyze-article - 文章图片建议

分析文章内容，建议合适的配图位置和类型。

参数：

• content (string): 文章内容
• articleType (string, 可选): 文章类型（如：技术博客、新闻稿、产品介绍等）

示例：

{
  "content": "人工智能技术正在快速发展...",
  "articleType": "技术博客"
}

📊 MCP资源说明

1. stats://server - 服务器统计信息

查看服务器运行状态和使用统计，包括：

• 总请求数
• 成功/失败次数
• 平均响应时间
• 服务器运行时间

2. templates://prompts - 提示词模板库

查看所有可用的提示词模板，包括：

• 网页元素模板
• 文章配图模板
• 通用图片模板

3. guide://api-setup - API配置指南

ModelScope API密钥的获取和配置指南。

🎯 内置提示词模板

网页开发模板

1. hero_section - 主页横幅模板

专为网站首页横幅设计的高质量图片模板。

模板内容：

专业的{风格}主页横幅图片，展示{描述}内容，高质量，现代设计，{尺寸}分辨率，简洁构图，鲜艳色彩，适合网站头部使用

变量：

• {风格} - 设计风格关键词
• {描述} - 具体内容描述
• {尺寸} - 图片尺寸

使用场景： 网站首屏背景、主页横幅

2. product_showcase - 产品展示模板

专业产品摄影模板，适合电商和产品页面。

模板内容：

专业的{描述}产品摄影，干净的白色背景，工作室打光，高分辨率，商业质量，细节丰富，锐利聚焦，适合电商使用

变量：

• {描述} - 产品描述

使用场景： 产品页面展示、电商图片、商品目录

3. feature_illustration - 功能插画模板

现代风格的功能说明插画模板。

模板内容：

现代插画展示{描述}，{风格}风格，简洁设计，专业感，适合网站功能区域，矢量风格外观

变量：

• {描述} - 功能描述
• {风格} - 设计风格

使用场景： 功能介绍、特性说明、服务展示

4. background_pattern - 背景图案模板

抽象背景图案模板，不干扰主要内容。

模板内容：

{描述}的抽象背景图案，{风格}风格，微妙，不分散注意力，适合网站背景，无缝拼接，专业感

变量：

• {描述} - 背景主题
• {风格} - 设计风格

使用场景： 页面背景、装饰元素、视觉辅助

5. user_avatar - 用户头像模板

专业人像头像模板。

模板内容：

专业的{描述}头像照片，干净背景，友好表情，高质量，适合用户资料，多样化，专业外观

变量：

• {描述} - 人物描述

使用场景： 用户资料、团队介绍、客户评价

文章内容模板

6. article_illustration - 文章插画模板

文章配图专用模板。

模板内容：

关于{描述}的编辑插画，现代风格，信息丰富，引人入胜，适合博客文章，高质量

变量：

• {描述} - 文章主题

使用场景： 博客文章、新闻配图、内容营销

7. concept_diagram - 概念图表模板

信息图表和概念说明模板。

模板内容：

解释{描述}的简洁信息图表，极简设计，清晰视觉层次，教育性，专业感

变量：

• {描述} - 概念或数据

使用场景： 教程说明、数据展示、概念解释

通用模板

8. general_image - 通用图片模板

适用于各种场景的通用模板。

模板内容：

高质量的{描述}图片，专业摄影，良好构图，清晰细节，适合网页使用

变量：

• {描述} - 图片内容

使用场景： 通用占位图、多用途图片

🎨 设计风格关键词

模板中的{风格}变量支持以下预设风格：

| 风格代码 | 中文名称 | 英文关键词 | 适用场景 | |---------|---------|-----------|----------| | modern | 现代风格 | modern, contemporary, sleek, minimalist | 现代企业、科技产品 | | corporate | 企业风格 | corporate, professional, business, formal | 商务网站、企业形象 | | creative | 创意风格 | creative, artistic, innovative, dynamic | 设计工作室、艺术项目 | | tech | 科技风格 | technology, digital, futuristic, high-tech | 科技公司、IT产品 | | healthcare | 医疗风格 | medical, healthcare, clean, trustworthy | 医疗机构、健康产品 | | education | 教育风格 | educational, academic, friendly, approachable | 教育机构、学习平台 | | ecommerce | 电商风格 | commercial, retail, product-focused, appealing | 电商网站、零售平台 | | startup | 创业风格 | innovative, young, energetic, fresh | 创业公司、新兴品牌 |

🔧 模板使用方法

1. 自动模板选择

系统会根据网页元素类型自动选择合适的模板：

元素类型 → 模板映射：
hero/banner → hero_section
product → product_showcase  
feature → feature_illustration
testimonial/avatar → user_avatar
gallery → product_showcase
background → background_pattern
icon/logo → feature_illustration
placeholder → general_image

2. 中英文词汇转换

系统内置常用网页开发术语的中英文转换：

网页元素：

• 首页横幅 → homepage banner
• 产品展示 → product showcase
• 功能介绍 → feature introduction
• 用户头像 → user avatar

行业词汇：

• 科技 → technology
• 医疗 → healthcare
• 教育 → education
• 金融 → finance

风格词汇：

• 现代 → modern
• 简约 → minimalist
• 专业 → professional
• 创意 → creative

🎨 支持的图片类型

| 类型 | 描述 | 建议尺寸 | 使用场景 | |------|------|----------|----------| | hero | 主页横幅 | 1920x800 | 网站首屏背景 | | banner | 页面横幅 | 1920x400 | 页面头部横幅 | | product | 产品展示 | 600x400 | 产品页面展示 | | feature | 功能介绍 | 400x300 | 特性说明配图 | | avatar | 用户头像 | 200x200 | 个人资料图片 | | background | 背景图片 | 1920x1080 | 页面背景装饰 | | icon | 功能图标 | 64x64 | 按钮和功能图标 | | logo | 品牌标识 | 200x100 | 公司logo | | gallery | 图片库 | 800x600 | 作品展示 | | placeholder | 占位图片 | 800x600 | 通用占位 |

🎨 支持的设计风格

• modern - 现代简约风格
• corporate - 企业商务风格
• creative - 创意艺术风格
• tech - 科技未来风格
• healthcare - 医疗健康风格
• education - 教育学术风格
• ecommerce - 电商零售风格
• startup - 创业活力风格

💻 开发指南

项目结构

mcp_pic/
├── src/
│   ├── index.ts              # MCP Server主文件
│   ├── types.ts              # TypeScript类型定义
│   └── utils/
│       ├── promptGenerator.ts # 提示词生成器
│       └── imageGenerator.ts  # 图片生成器
├── dist/                     # 编译输出目录
├── package.json              # 项目配置
├── tsconfig.json             # TypeScript配置
└── README.md                 # 项目文档

扩展功能

添加新的图片类型

1. 在 types.ts 中的 WebPageElement 类型中添加新类型
2. 在 promptGenerator.ts 中添加对应的模板
3. 在 analyzeWebPageDescription 函数中添加检测逻辑

添加新的提示词模板

1. 在 PROMPT_TEMPLATES 中添加新模板
2. 定义模板的变量和分类
3. 在相应的生成函数中调用

集成其他AI图像生成服务

1. 在 imageGenerator.ts 中创建新的生成器类
2. 实现相同的接口方法
3. 在主服务器中支持选择不同的生成器

🔧 故障排除

常见错误

401 Unauthorized

• 原因：API密钥无效或已过期
• 解决：检查API密钥是否正确，或重新生成

402 Payment Required

• 原因：账户余额不足或配额已用完
• 解决：充值账户或等待配额重置

429 Too Many Requests

• 原因：请求频率过高
• 解决：减少并发请求数量，或等待一段时间后重试

500 Internal Server Error

• 原因：ModelScope服务器内部错误
• 解决：稍后重试，或联系ModelScope客服

性能优化

1. 批量处理：尽量使用批量生成功能
2. 并发控制：避免同时发送过多请求
3. 图片缓存：对于相同的提示词，可以缓存结果
4. 提示词优化：使用精确的提示词减少生成失败

📈 最佳实践

网页开发使用建议

1. 规划优先：先使用分析工具了解需要哪些图片
2. 风格统一：为整个项目选择一致的设计风格
3. 尺寸适配：根据实际使用场景调整图片尺寸
4. SEO友好：为生成的图片添加合适的alt属性

文章配图建议

1. 主题相关：确保图片与文章内容高度相关
2. 位置合理：在关键段落添加配图
3. 数量适中：避免图片过多影响阅读体验
4. 质量优先：选择高质量的图片提升专业度

🤝 贡献指南

欢迎提交Issue和Pull Request！

1. Fork本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启Pull Request

📄 许可证

本项目采用MIT许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

• ModelScope - 提供优秀的AI图像生成服务
• MCP SDK - 提供完善的MCP开发工具
• FLUX模型 - 提供高质量的图像生成能力

📞 支持

如有问题或建议，请通过以下方式联系：

• 提交 GitHub Issue
• 发送邮件至：[email protected]

享受AI图片生成的便利，让您的网页和文章更加精彩！ ✨