使用说明
🔧 资产管
网页设计的AI图像生成流水线——Claude Code Skill+MCP Server。
在构建网站时，直接从Claude Code生成专业的网络资产——英雄图像、图标、徽标、背景、横幅等。由谷歌Gemini提供技术支持。
运作原理
You: "Build me a landing page for a fitness app"
↓
┌─────────────────────────────┐
│ Skill (SKILL.md) │ ← Recognizes images are needed
│ Picks asset type + style │ Optimizes the prompt
│ Applies brand context │
└─────────────┬───────────────┘
↓
┌─────────────────────────────┐
│ MCP Server (Python) │ ← Calls Gemini API
│ generate / edit / batch │ Returns image + metadata
└─────────────┬───────────────┘
↓
┌─────────────────────────────┐
│ Your Project │ ← Images saved to project
│ public/images/hero.png │ Integrated into your code
└─────────────────────────────┘
技能 =教克劳德 当 和 怎么 在web开发过程中生成图像
MCP服务器 =通过Google Gemini的API创建它们的引擎
特性
- 10种资产类型 --英雄、图标、徽标、背景、缩略图、插图、头像、横幅、产品、自定义
- 10种视觉风格 --照片级真实感、平面、3D、水彩、极简主义、渐变、等距、线条艺术、玻璃形态、霓虹
- 智能提示增强 --您的简单描述针对网页设计质量进行了优化
- 批量生成 --为整个页面创建一组一致的资产
- 图像编辑 --修改现有图像（更改颜色、删除元素、重新设计样式）
- 品牌一致性 --跨代共享调色板和品牌背景
- 主动建议 --该技能教克劳德在建造场地时建议使用图像
快速开始
先决条件
- 克劳德代码 安装
- Python 3.10+
- Google Gemini API密钥(免费访问aistudio.google.com)
安装
git clone https://github.com/YOUR_USERNAME/assetpipe.git
cd assetpipe
./install.sh
安装程序处理一切：检查先决条件，安装依赖项，提示Gemini API密钥，注册MCP服务器，并安装技能。完成后重新启动Claude Code。
验证
打开克劳德代码并询问：
What image generation tools do you have?
用法
生成英雄形象
Generate a hero image for my SaaS landing page —
cloud computing theme, blue and purple gradient, modern and clean
创建整页资产集
I need all images for my portfolio site:
- A hero banner with abstract 3D art
- A subtle dot-grid background texture
- Flat icons for the skills section
- A professional avatar placeholder
编辑现有图像
Make the hero image darker so white text is readable on top
匹配品牌颜色
Generate product images using our brand palette: #2563EB, #1E40AF, #DBEAFE
批次一致
Create 4 feature illustrations for a fintech app,
all in flat style with the same teal color palette
资产类型
| 类型 | 最适合 | 默认大小 |
|---|---|---|
hero |
全宽页眉 | 1536×768 |
icon |
UI元素图标 | 512×512 |
logo |
品牌标志 | 1024×1024 |
background |
页/节背景 | 1024×1024 |
thumbnail |
博客文章或卡片缩略图 | 640×360 |
illustration |
功能部分、解释符 | 1024×768 |
avatar |
用户配置文件占位符 | 256×256 |
banner |
社交媒体或促销横幅 | 1200×628 |
product |
电子商务产品截图 | 1024×1024 |
custom |
其他 | 1024×1024 |
风格
| 风格 | Vibe |
|---|---|
photorealistic |
自然光照，逼真的纹理 |
flat |
纯色，干净的几何形状 |
3d |
软照明、深度和尺寸 |
watercolor |
柔和的边缘，有机色彩混合 |
minimal |
大量的空白，克制的调色板 |
gradient |
流畅的色彩过渡，现代风格 |
isometric |
3D平面设计，角度一致 |
line-art |
轮廓清晰，手绘感 |
glassmorphism |
磨砂玻璃、透明、模糊 |
neon |
深色背景，充满活力的发光元素 |
MCP工具参考
| 工具 | 说明 |
|---|---|
generate_web_asset |
通过智能提示增强生成任何网络图像资产 |
edit_web_asset |
根据文本指令修改现有图像 |
batch_generate |
通过共享品牌背景生成多个相关资产 |
enhance_prompt |
预览优化后的提示，而不生成 |
list_asset_types |
显示所有可用类型、样式及其默认值 |
配置
| 变量 | 必填 | 默认 | 描述 |
|---|---|---|---|
GEMINI_API_KEY |
✅ | — | Google AI Studio API密钥（由安装程序设置） |
IMAGE_OUTPUT_DIR |
没有 | ./generated-images |
图像输出目录 |
GEMINI_MODEL |
没有 | gemini-2.5-flash-image |
使用Gemini模型 |
LOG_LEVEL |
没有 | INFO |
记录冗长 |
唯一需要的配置是 GEMINI_API_KEY，安装程序会自动提示。
项目结构
assetpipe/
├── mcp-server/
│ ├── server.py # MCP server — 5 tools
│ ├── providers/
│ │ ├── __init__.py
│ │ └── gemini.py # Google Gemini provider
│ ├── utils/
│ │ └── __init__.py
│ └── requirements.txt
├── skill/
│ └── SKILL.md # Claude Code skill
├── install.sh # One-command installer
├── pyproject.toml # Python package config
├── .env.example # Environment template
├── .gitignore
└── README.md
添加更多提供商
该架构专为多个提供商而设计。要添加一个：
- 创建
mcp-server/providers/your_provider.py - 实施
generate_image(prompt) -> bytes和edit_image(image_bytes, prompt) -> bytes - 在中注册
server.py
潜在补充：
| 提供者 | 包 | 注释 |
|---|---|---|
| OpenAI（gpt-image 1） | openai |
高品质，付费 |
| 稳定性AI | stability-sdk |
细粒度控制 |
| 复制（Flux） | replicate |
多种型号可供选择 |
看 贡献.md 了解详情。
故障排除
| 问题 | 修复 |
|---|---|
GEMINI_API_KEY not set |
把它传给 claude mcp add 命令 |
No image returned |
提示可能会碰到安全过滤器——请重新表述 |
| 图片不在项目中 | 检查 IMAGE_OUTPUT_DIR 是一条绝对路径 |
| MCP服务器未显示 | 注册后重新启动Claude Code |
| 风格不一致 | 使用 batch_generate 与共享 brand_context |
| 图像中的文本乱码 | 不要让AI渲染文本——而是通过CSS添加文本 |
许可证
麻省理工学院
