Web Design Image Generator MCP Server

一个专为网页设计优化的MCP服务器，使用AI文生图模型为网页设计生成高质量的占位图片和装饰图片。

功能特性

• 🎨 智能图片生成: 使用ModelScope的FLUX模型生成高质量图片
• 🌐 网页设计优化: 专门针对网页设计场景优化的提示词和风格
• 🎯 多种图片类型: 支持Hero图、Banner、缩略图、背景图等
• 🎨 风格选择: 提供现实、卡通、抽象、极简、专业等多种风格
• 📦 批量生成: 支持一次性生成多张图片
• 💡 智能建议: 根据网站类型和图片用途提供提示词建议

🚀 快速开始

方式一：使用NPX（推荐）

# 直接运行（推荐）
npx web-design-image-generator-mcp@latest

遇到问题？ 请查看 故障排除指南

MCP客户端配置

{
  "mcpServers": {
    "web-design-image-generator": {
      "command": "npx",
      "args": ["web-design-image-generator-mcp@latest"]
    }
  }
}

方式二：本地开发

1. 安装依赖

npm install

2. 构建项目

npm run build

3. 配置MCP客户端

运行配置生成命令：

npm run config

这将生成 generated-mcp-config.json 文件，包含各种MCP客户端的配置示例。

4. 运行服务器

npm start

或者在开发模式下运行：

npm run dev

MCP客户端配置

Claude Desktop配置

在Claude Desktop的配置文件中添加以下配置：

{
  "mcpServers": {
    "web-design-image-generator": {
      "command": "node",
      "args": ["path/to/your/project/dist/index.js"]
    }
  }
}

VS Code GitHub Copilot配置

在VS Code的设置中配置MCP服务器：

{
  "github.copilot.chat.mcp.servers": {
    "web-design-image-generator": {
      "command": "node",
      "args": ["d:\\AI编程垂直小流量商业化\\MCP\\配图的MCP Server\\dist\\index.js"]
    }
  }
}

注意: 请将上述路径替换为您的实际项目路径。

可用工具

1. generate-web-image

生成单张网页设计图片。

参数：

• prompt (必需): 图片生成的英文描述提示词
• apiKey (必需): ModelScope API密钥
• width (可选): 图片宽度
• height (可选): 图片高度
• style (可选): 图片风格 (realistic, cartoon, abstract, minimalist, professional)

示例：

生成一张现代办公室的Hero图片
提示词: "modern office building with glass facade, professional architecture"
API密钥: your-api-key
风格: professional

2. generate-multiple-web-images

批量生成多张网页图片。

参数：

• prompts (必需): 图片生成的英文描述提示词数组
• apiKey (必需): ModelScope API密钥
• style (可选): 统一的图片风格

示例：

批量生成电商网站图片
提示词: ["modern shopping cart icon", "product showcase scene", "customer service illustration"]
API密钥: your-api-key
风格: professional

3. suggest-image-prompts

根据网页设计需求提供图片生成提示词建议。

参数：

• websiteType (必需): 网站类型 (business, portfolio, blog, ecommerce, landing, educational)
• imageType (必需): 图片类型 (hero, banner, thumbnail, icon, background, product, avatar)
• theme (可选): 网站主题或行业

示例：

为商业网站的Hero图片获取建议
网站类型: business
图片类型: hero
主题: technology consulting

API密钥获取

1. 访问 ModelScope
2. 注册并登录账户
3. 在个人中心获取API密钥
4. 在使用工具时传入API密钥

注意: 请妥善保管您的API密钥，不要在代码中硬编码。

使用场景

网页设计师

• 快速生成网站原型的占位图片
• 为不同页面类型生成合适的视觉元素
• 批量生成一致风格的图片素材

前端开发者

• 在开发过程中生成临时图片
• 为演示项目生成专业的视觉内容
• 快速填充网站模板的图片需求

产品经理

• 为产品原型生成合适的图片
• 快速验证设计概念
• 生成用户故事的视觉示例

支持的图片风格

• realistic: 真实感照片风格，适合商业和专业网站
• cartoon: 卡通插画风格，适合儿童或娱乐网站
• abstract: 抽象艺术风格，适合创意和艺术网站
• minimalist: 极简设计风格，适合现代简约网站
• professional: 专业商务风格，适合企业和服务网站

支持的网站类型

• business: 商业企业网站
• portfolio: 个人作品集网站
• blog: 博客和内容网站
• ecommerce: 电商购物网站
• landing: 着陆页和营销网站
• educational: 教育和学习网站

技术栈

• MCP SDK: Model Context Protocol TypeScript SDK
• TypeScript: 类型安全的JavaScript
• Axios: HTTP客户端
• Zod: 运行时类型验证
• ModelScope API: AI图片生成服务

开发

项目结构

web-design-image-generator-mcp/
├── src/
│   └── index.ts          # 主服务器文件
├── dist/                 # 编译输出目录
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript配置
└── README.md            # 项目文档

开发命令

# 安装依赖
npm install

# 编译TypeScript
npm run build

# 启动服务器
npm start

# 开发模式（编译并启动）
npm run dev

# 监听模式（自动重新编译）
npm run watch

错误处理

服务器包含完善的错误处理机制：

• API错误: 显示具体的API错误信息和状态码
• 网络错误: 提示网络连接问题
• 参数错误: 验证输入参数的有效性
• 限流处理: 批量生成时自动添加延迟避免API限制

许可证

MIT License

贡献

欢迎提交Issue和Pull Request来改进这个项目！

📦 NPM发布

发布到NPM

# 发布补丁版本
npm run publish:patch

# 发布次要版本
npm run publish:minor

# 发布主要版本
npm run publish:major

发布后使用

用户可以通过NPX直接使用，无需本地安装：

# 测试运行
npx web-design-image-generator-mcp

配置MCP客户端：

{
  "mcpServers": {
    "web-design-image-generator": {
      "command": "npx",
      "args": ["web-design-image-generator-mcp"]
    }
  }
}

📚 更多文档

• 使用示例 - 详细的使用示例和最佳实践
• 快速配置指南 - 一步步配置说明
• 发布指南 - NPM发布详细说明
• MCP配置示例 - 各种客户端的配置示例
• NPX配置示例 - 发布后的配置示例

🔧 故障排除

常见问题

1. Node.js版本不兼容

错误信息：

npm WARN EBADENGINE Unsupported engine
required: { node: '>=20.0.0' }
current: { node: 'v18.18.0' }

解决方案：

• 升级Node.js到20.0.0或更高版本
• 访问 nodejs.org 下载LTS版本
• 或使用nvm版本管理工具

2. NPM缓存权限错误

错误信息：

npm WARN tar TAR_ENTRY_ERROR EPERM: operation not permitted

解决方案：

# 清理NPM缓存
npm cache clean --force

# Windows用户（以管理员身份运行）
.\scripts\windows-fix.bat

# macOS/Linux用户
./scripts/unix-fix.sh

自动化诊断工具

# 下载项目后运行综合诊断
npm run diagnose

# 仅检查版本兼容性
npm run check-node-version

详细文档

• 用户指南 - 完整的使用指南
• 综合故障排除 - 详细的问题解决方案
• 快速修复指南 - 常见问题快速解决
• 紧急修复指南 - 紧急情况处理

环境要求

| 组件 | 最低版本 | 推荐版本 | |------|----------|----------| | Node.js | 20.0.0 | 20.x LTS | | NPM | 9.0.0 | 最新版本 |

更新日志

v1.0.3

• 🔧 修复Node.js版本兼容性问题
• 🛠️ 添加自动化诊断和修复工具
• 📚 完善文档体系
• ✅ 添加版本检查脚本
• 🎯 改善用户体验

v1.0.0

• 初始版本发布
• 支持单张和批量图片生成
• 提供图片提示词建议功能
• 支持多种图片风格和网站类型