当MCP遇上nano-banana,AI终于能替代前端设计团队

B站影视 内地电影 2025-09-03 12:58 3

摘要:谷歌nano-banana最近因为真正做到言出法而随火遍全球,物理正确、角色一致和闪电速度堪称黑科技。当大V们还在绞尽脑汁研究怎么写更好的提示词、到处找素材图的时候,我已经通过mcp把作图的任务全权交给大模型。

还在手工生图?我已经实现自动化

谷歌nano-banana最近因为真正做到言出法而随火遍全球,物理正确、角色一致和闪电速度堪称黑科技。当大V们还在绞尽脑汁研究怎么写更好的提示词、到处找素材图的时候,我已经通过mcp把作图的任务全权交给大模型。

看下这个应用场景:客户说要做公司官网,你直接把基础素材(logo、创始团队照片、产品图片)放进项目文件夹,然后告诉Claude Code"帮我创建XX公司的官网,并调用生图工具生成贴合主题的图片"。

接下来AI不仅生成了完整的代码,还自动识别到需要配套的背景图、装饰元素、团队页面的其他成员头像等,然后基于现有素材的风格,自动生成风格统一的补充素材。整个过程你只需要等待,不需要再写一句生图/改图提示词,不需要手动调用任何工具。

这就是MCP(Model Context Protocol)与nano-banana结合带来的降维打击式体验。

配置过程非常简单。首先从OpenRouter获取API密钥,这个平台提供了对多个AI模型的统一访问接口,包括nano-banana免费版。

然后克隆并构建MCP服务器:

git clone
cdopenrouter-mcp
npm install
npm run buildclaude mcp add openrouter /path/to/project \
node /path/to/openrouter-mcp/dist/server.js \
--envOPENROUTER_API_KEY=your_openrouter_api_key_here

如果你使用Claude Desktop等GUI工具,在MCP配置文件中添加:

{
"mcpServers": {
"openrouter": {
"command": "node",
"args": ["/path/to/openrouter-mcp/dist/server.js"],
"env": {
"OPENROUTER_API_KEY": "your_openrouter_api_key_here"
}
}
}
}

重启Claude Code后,它就具备了通过OpenRouter调用多种AI模型的能力,包括nano-banana的完整图像生成和集成功能。从此你的每个项目都可以实现素材的完全自动化。

让我演示一个完整的项目。朋友开了一家专注于小团体训练和私教课程的健身工作室创建官网。我先把基础素材放进项目文件夹:工作室logo、主教练照片、几张代表性的训练场地和器械照片。

然后对Claude Code说:"创建Fitflow健身工作室的官网,主打小团体功能性训练和个人私教,目标客户是追求健康生活方式的都市白领。并调用生图工具结合素材生成贴合主题的图片"

AI分析主教练照片的拍摄风格(运动装、健康气质、专业姿态),启用角色一致性功能,生成瑜伽教练、力量训练师、营养顾问等团队成员照片,确保整个教练团队形象与主教练的专业气质保持统一。

课程展示区域需要更多样化的训练场景图。AI基于现有器械和场地照片的布局风格,调用多图融合和现实知识功能,生成不同类型的训练场景:HIIT小团体课、瑜伽私教、力量训练等,风格与已有场地照片完全一致,但展示了更丰富的课程内容。

会员故事页面需要学员训练和生活场景图。AI结合现有素材的健康活力氛围,生成"学员在工作室训练"、"教练指导动作"等情景图,与整体品牌调性保持一致。

整个过程我只需要准备几张最核心的场地照片和教练形象,然后描述一下工作室定位,其余的补充素材全部由AI基于现有风格自主生成。最终交付的是包含所有代码文件和配套素材的完整项目,整体视觉风格完全统一,客户看到的是一个专业、完整的健身品牌形象展示。

当然最后还要指点AI调整一下,毕竟AI永远无法有人的感受。

作为一个追求智能化创新应用的创作者,我始终相信:真正的竞争优势来自于对新技术应用方式的深度思考。当别人还在为吸引流量绞尽脑汁想提示次和玩法时,我已经交付了完整的项目。

技术的价值不在于掌握多少工具,而在于能否创造出全新的工作模式。MCP+nano-banana只是开始,真正有价值的是这种"让AI自主解决完整问题"的思维方式。

来源:寂寞的咖啡

相关推荐