# 企业官网切图 MCP 测试用例

## 用途

将下面“发送给 AI 的完整测试指令”直接发给支持 MCP 工具调用的 AI，用于验证以下完整流程：

1. AI 分析企业官网的视觉需求。
2. AI 调用 `generate_image` 异步生成网页切图。
3. AI 使用 `get_image_generation` 轮询任务状态。
4. AI 创建企业官网 HTML 页面。
5. HTML 使用相对路径引用 MCP 生成的真实图片。
6. AI 启动本地静态服务器并验证页面和图片是否正常加载。

## 前置条件

- 已构建并配置 `3hdmx-image-mcp.exe`。
- MCP 客户端已连接 `3hdmx-image` 服务。
- 工具列表中包含：
  - `generate_image`
  - `get_image_generation`
- MCP 进程对项目目录具有写入权限。
- 根据实际工作区修改下面指令中的项目路径。

## 发送给 AI 的完整测试指令

```text
请为一家名为“远岚智造”的工业 AI 企业制作一个完整、现代、响应式的中文企业官网，并进行真实的端到端测试。

企业定位：
- 面向制造业提供工业视觉检测、预测性维护和数字孪生解决方案。
- 品牌气质：可靠、专业、先进、有工程感，但不要像传统模板网站。
- 主要色彩：深海军蓝、科技青、少量暖橙色。
- 页面语言：简体中文。

工作目录：
./yuanlan-corporate-site

图片目录：
./yuanlan-corporate-site/assets

必须严格完成以下任务：

一、使用 MCP 生成真实网页切图

调用远程 `generate_image` 异步生成以下 4 类图片，每类生成 1 张。任务成功后，从 `images` 中取得下载 URL，并由本地 AI 客户端将图片下载到：
./yuanlan-corporate-site/assets

图片 1：官网 Hero 主视觉
- 推荐尺寸：1536x1024。
- 内容：现代智能工厂内部，机械臂、工业视觉传感器、数字孪生光线和数据粒子。
- 构图：主体集中在画面右侧，左侧保留深色干净空间用于网页标题。
- 风格：真实工业摄影与高端科技可视化结合，电影级光影。
- 限制：图片中不得出现文字、字母、数字、Logo、水印和无法识别的标牌。

图片 2：工业视觉检测方案切图
- 推荐尺寸：1024x1024。
- 内容：工业相机扫描精密金属零件，青色检测框与微弱光线，但不得出现任何文字或数字。
- 风格：专业、精密、现代、深蓝背景、青色高光。
- 构图：主体居中，四周留出适合卡片裁切的空间。

图片 3：预测性维护方案切图
- 推荐尺寸：1024x1024。
- 内容：大型工业涡轮或电机的数字化健康监测场景，橙色能量热点和青色数据流。
- 限制：不得出现文字、数字、Logo 和水印。
- 构图：主体居中，适合企业官网功能卡片。

图片 4：数字孪生方案切图
- 推荐尺寸：1024x1024。
- 内容：真实工厂设备与半透明数字孪生模型相互映射，蓝青色网格、空间粒子和精密光线。
- 限制：不得出现文字、数字、Logo 和水印。
- 构图：主体居中，适合企业官网功能卡片。

每次调用 `generate_image` 后：
1. 从结果中取得 `task_id`。
2. 使用 `get_image_generation` 查询该任务。
3. 如果状态是 `queued` 或 `running`，等待数秒后继续查询。
4. 如果状态是 `succeeded`，记录 `images` 返回的下载 URL 和文件名，并立即下载到本地图片目录。
5. 如果状态是 `failed`，记录错误，并仅针对失败图片重新提交一次。
6. 不要因为第一次查询尚未完成就放弃任务。
7. 不要虚构任务 ID、下载地址、本地文件路径或生成结果。

允许依次提交任务，也允许并行提交后分别轮询。必须确保最终至少有 1 张 Hero 图片和 3 张方案图片成功保存。

二、制作完整企业官网

在工作目录创建 `index.html`。可以将 CSS 和少量 JavaScript 直接写入 HTML，避免不必要的工程依赖。

页面至少包含：

1. 顶部导航
- 企业名称“远岚智造”。
- 导航项：首页、核心方案、行业能力、落地流程、联系我们。
- 一个明显的“预约演示”按钮。
- 页面滚动后仍然清晰可用。

2. Hero 首屏
- 使用 MCP 生成的 Hero 图片作为真实背景或主视觉。
- 标题：“让每一台设备，都拥有智能”。
- 副标题需要体现工业 AI、质量检测、设备运维和数字孪生。
- 提供“查看解决方案”和“预约专家演示”两个按钮。
- 展示 3 个可信的示例指标，例如检测准确率、部署周期、设备接入量；应明确是产品展示数据，不要伪造真实客户背书。

3. 核心方案
- 三张方案卡片：工业视觉检测、预测性维护、数字孪生平台。
- 每张卡片必须引用对应的 MCP 生成图片。
- 包含简短说明和查看详情入口。

4. 行业能力
- 展示汽车制造、3C 电子、能源设备、精密加工等行业。
- 使用布局、图标或 CSS 视觉元素即可，不要使用网络占位图片。

5. 落地流程
- 展示需求诊断、数据接入、模型部署、持续优化四个步骤。

6. 企业价值或数据区域
- 使用专业且克制的企业表达。
- 不要声称拥有未经提供的真实客户、认证、融资和政府背书。

7. 联系区域与页脚
- 提供预约演示表单界面，包含姓名、企业、电话或邮箱、需求描述。
- 表单只需做前端交互演示，不向真实服务器提交。
- 页脚包含企业名称、业务方向和版权信息。

三、设计与实现要求

- 页面必须具有高质量企业官网视觉，不能只是几个简单矩形堆叠。
- 使用语义化 HTML、现代 CSS 和少量原生 JavaScript。
- 支持桌面端、平板和手机端。
- 保证文字与背景对比度，按钮具有悬停和键盘焦点状态。
- 为图片提供有意义的替代文本；背景图附近也要有可访问的文字内容。
- 所有 MCP 图片必须通过相对路径引用，例如：`assets/image-xxx.png`。
- 禁止把图片写成 Base64 内嵌到 HTML。
- 禁止使用远程图片 URL、随机图片服务或不存在的占位图替代 MCP 切图。
- 不要引入大型前端框架，除非当前工作区已经存在对应项目。
- 页面中的企业资料仅作为界面测试内容，不得伪造真实新闻、客户评价或官方认证。

四、实际验证

完成页面后必须执行以下检查：

1. 检查 `index.html` 引用的每个本地图片文件是否真实存在。
2. 启动本地静态 HTTP 服务器。
3. 在浏览器中打开页面，确认返回 HTTP 200。
4. 检查 Hero 图和三张方案图片是否成功加载。
5. 检查浏览器控制台是否存在资源加载错误或 JavaScript 错误。
6. 分别检查桌面宽度和手机宽度下的布局。
7. 如果发现问题，直接修改并重新验证。

五、最终回复格式

完成后只需简要报告：
- 创建或修改了哪些文件。
- 生成了哪些图片及其相对路径。
- 每张图片对应的 MCP `task_id` 和最终状态。
- 本地预览地址。
- HTTP、图片加载、控制台和响应式检查结果。
- 如果存在未完成事项，明确说明原因，不得声称已经完成。
```

## 预期 MCP 调用示例

### 1. 提交 Hero 图片任务

```json
{
  "name": "generate_image",
  "arguments": {
    "prompt": "高端工业 AI 企业官网 Hero 主视觉，现代智能工厂内部，机械臂、工业视觉传感器、数字孪生光线与数据粒子，真实工业摄影和高级科技可视化结合，深海军蓝与科技青色调，少量暖橙高光，主体位于画面右侧，左侧保留深色干净文案空间，电影级灯光，无文字、无字母、无数字、无 Logo、无水印",
    "n": 1,
    "size": "1536x1024",
    "quality": "standard"
  }
}
```

预期立即返回：

```json
{
  "task_id": "实际任务ID",
  "status": "queued"
}
```

### 2. 查询任务状态

```json
{
  "name": "get_image_generation",
  "arguments": {
    "task_id": "实际任务ID"
  }
}
```

生成中：

```json
{
  "task_id": "实际任务ID",
  "status": "running"
}
```

生成成功：

```json
{
  "task_id": "实际任务ID",
  "status": "succeeded",
  "images": [
    {
      "url": "https://上游图片域名/generated-image.png?临时签名参数"
    }
  ]
}
```

上游 URL 可能有有效期，成功后应立即下载到本地；本 MCP 不保存图片副本。

生成失败：

```json
{
  "task_id": "实际任务ID",
  "status": "failed",
  "error": "具体错误信息"
}
```

## 通过标准

测试满足以下条件即视为通过：

- `generate_image` 能快速返回 `task_id`，不会等待完整生图过程。
- `get_image_generation` 能返回有效状态。
- 至少成功生成 4 张网页图片。
- AI 客户端能使用返回的 URL 将所有成功图片下载到指定的本地 `assets` 目录。
- `index.html` 使用相对路径引用这些图片。
- 页面通过本地 HTTP 服务访问时返回 `200`。
- 页面不存在图片 `404` 和明显的 JavaScript 错误。
- 桌面端和手机端均可正常浏览。
- AI 没有伪造任务状态、文件路径或测试结果。

## 失败排查

- `generate_image` 未立即返回：确认 MCP 客户端启动的是最新编译的 `3hdmx-image-mcp.exe`。
- 工具列表没有 `get_image_generation`：重启 MCP 客户端或重新连接服务。
- 查询提示任务不存在：确认 MCP 服务进程未重启，并使用原任务返回的准确 `task_id`。
- 状态长期为 `running`：检查 `timeout_seconds` 和上游生图接口状态。
- 状态为 `failed`：读取返回的 `error`，检查 API Key、模型、尺寸和输出目录权限。
- 图片已生成但网页不显示：确认 HTML 使用从页面目录出发的相对路径，并通过 HTTP 服务而不是错误的文件路径访问。