assetpipe (Samer Az)

🔧 资产管

网页设计的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

______________________________________________________________________

资产类型

风格

______________________________________________________________________

MCP工具参考

______________________________________________________________________

配置

唯一需要的配置是 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

______________________________________________________________________

添加更多提供商

该架构专为多个提供商而设计。要添加一个：

1. 创建 mcp-server/providers/your_provider.py
2. 实施 generate_image(prompt) -> bytes 和 edit_image(image_bytes, prompt) -> bytes
3. 在中注册 server.py

潜在补充：

看 贡献.md 了解详情。

______________________________________________________________________

故障排除

______________________________________________________________________

许可证

麻省理工学院