借助ai半小时设计出来一款获取图片自动填充路径的mcp插件

mcp-unsplash-image-downloader

一个基于MCP协议的智能图片下载服务，让AI助手轻松获取高质量图片

📖 查看文档 • [🚀 快速开始](#🚀 快速开始 "#%E5%AE%89%E8%A3%85") • [💡 使用示例](#💡 使用示例 "#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95")

背景

今天突发奇想。想到平时用cursor或者其他的ai 编辑器在生成网页代码的时候，img标签虽然有名称，但是实际上我们的图片素材都是空的。那么我就在想，以往都是ai开发好网站，我手动去网上搜集相关的图片进行下载，然后改名字，然后复查代码里面的路径。这个流程不难就是很耗费时间。

于是就有了想法。

大模型开始按照你的prd设计网站，
处理到图片的时候
去自动调取mcp工具
mcp会将生成的图片存储在您指定/或默认的素材文件里面
并自动获取相对路径进行图片的url填充
最终打开网站，避免了缺失图片素材这个问题。

出发点

首先我去github上面去进行搜索 key word mcp , mcp-image , mcp-image-download，但是经过几轮检索，

mcp-server-google-images: 专门用于从 Google Images 搜索和下载图片
mcp-server-unsplash: 从 Unsplash 获取高质量免费图片
mcp-server-pixabay: 从 Pixabay 下载免版权图片

这些打通了下载 这一步，但是仍不满足我当前的需求。我的想法就是让mcp 这个工具和 ai大模型生成代码的时候，互相打配合。生成需要图片的时候，就存放本地。并且自动引用路径。全程自动化。

第一个出发点基于所需出发，第二个方面就是平时一直在使用各种mcp工具，但是却不知道如何制作mcp插件。于是就想借助ai 开发成功一个mcp 的同时自己也去学习一下。

前置内容补充

还不了解mcp的朋友可以去 https://modelcontextprotocol.io/docs/getting-started/intro 进行浏览一下。其实本人对mcp相关的概念了解的也不是很多，但是我们目前有了想法再加上 ai 的加持，还是很有信心的。

需求设计

对于一个产品/插件/系统/等等，不仅仅只限于互联网，任何行业。在做一件事的时候，设计出来一份需求设计，是一个很好的开始。

在这个模块，主要就是进行探讨设计。我们可以去咨询多个ai大模型，包括目前主流的 claude4 sonnet, gemini 2.5 pro, kimi k2 , gpt5 等等，我们可以将组

织好的需求描述，丢给不同的模型去进行比较。然后分析选择较为优秀的一种方案。有了这个方案之后，再去丢给开发工具去进行开发，将会特别迅速。（前提是我们把prd 产品需求设计编写非常完善。）前期多做一些工作，后期就少一些返工。

上面就是做出来的prd 需求文档。

ai开发

基于prd 生成 rules

首先我们打开ai 编辑器，我这边目前用的是kiro。然后在对话框里面输入

根据我提供的产品需求设计，设计该项目的 steering， #mcp-images-download-prd.md

Steering 是 Kiro 中用来给 AI 助手提供持续指导和约束的机制，它们本质上就是规则集合，用来规范 AI 的行为和决策

与传统 Rules 的区别

动态性：Steering 可以根据项目需要随时添加、修改或删除
条件性：可以设置在特定条件下才生效（比如只在读取某些文件时生效）
项目特定：每个项目可以有自己独特的 steering 规则
分类管理：可以按主题分成多个文件（如 tech.md、structure.md、product.md、guide.md）

所以可以说，Steering 是 Kiro 中实现"智能规则系统"的方式，让 AI 助手能够根据项目特点和团队偏好来调整自己的行为。

当我们将上面那句话发送出去，就会自动生成该项目的一些相关的rules，这个方法不局限于工具，在任何ai编辑器都可以这样进行项目的开发。

有了需求设计书，也有了该项目的规则，接下来我们可以放心大胆去交给ai 按照需求设计里面的方案进行插件的开发了。

基于prd+rules 生成最优实施方案

这时候我们就需要细化下方案，目前还只是整个项目的大方向，开发，测试，文档知识库这些。我们可以继续提问

根据目前的需求设计+项目规则文件，给出该项目的核心目标，以及产品的开发详细方案，给出所有的可行实施方案，分析其特点，给出您自行认为合理的，经过我同意之后才进行方案的实施。

当前目前我们全面交给ai 去做，但是我们想要需要进一步控制，包括各个文件的命名，组织，可以再次追问

给出你当前方案的详细措施。我需要审查是否有不合理的地方，待我通过方可实施。

然后觉得可以的话，直接开启auto模式进行编写即可，因为该项目也不大就是一个小插件。

ai自测

我们开完完毕之后，就是一个测试的环节了，我们可以让他基于当前的开发的项目，进行自测。

代码跑的通。--> 自动化测试案例能够跑的通

目前我们的插件就要求上述两个关键点。

、

测试完成之后，我们可以亲自是体验一下了。

人工审查

这一步骤，也是最好玩的步骤，因为我们不清楚ai带给我们的是惊喜还是惊吓，经过前面的详细设计工作，我感觉惊喜的可能性会非常大。哈哈哈

首先我们去配置一下mcp UNSPLASH_ACCESS_KEY请自行配置。

unsplash.com/developers 获取免费的API密钥。下面这个只是本地文件的mcp配置，后续我发布npm之后，就可以通过第二种的配置直接使用。

本地：

json 复制代码

{
  "mcpServers": {
    "image-downloader": {
      "command": "node",
      "args": [
        "image-server.js"
      ],
      "env": {
        "UNSPLASH_ACCESS_KEY": "您自己的密钥"
      },
      "disabled": false,
      "autoApprove": ["downloadProjectImage"]
    }
  }
}

云：

json 复制代码

{
  "mcpServers": {
    "image-downloader": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-unsplash-image-downloader"
      ],
      "env": {
        "UNSPLASH_ACCESS_KEY": "您自己的密钥"
      },
      "disabled": false,
      "autoApprove": ["downloadProjectImage"]
    }
  }
}

我们这边直接采取第二个方式。（已经测试过了 ok的，大家放心搞）。

场景1测试基于已有的色彩占位网站统一替换为对应图：

#index.html #script.js #style.css 分析用到图片的地方提取关键词，统一使用 #[image-downloader] downloadProjectImage mcp 插件下载对应相关图片，存放在 images文件夹下，并在代码里面进行路径引用

一开始的效果:

mcp工作流程:

最终的效果:

场景2测试基础测试下载图片:

下载一张适合做网站横幅的"自然风景"图片

总结

目前来看虽然根据关键词搜索图片不是非常精确，不过这好像跟插件美贯休哈哈哈，因为调取的还是Unsplash API. 的能力。

最主要的一点是我对mcp插件的开发完全未知，但通过详细的prd设计规则设计，模块细分，短短半小时吧这样的一个mcp插件开发完了。

这个就是整个运作流程了