个人项目 UI 没配图？用 Pexels API + Claude Code 一键搞定

原创于 2026-06-29 10:17:06 发布 · 260 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#ui #前端 #claude #UI配图 #网站配图

AI前沿站专栏收录该内容

82 篇文章

订阅专栏

个人项目 UI 没配图？用 Pexels API + Claude Code 一键搞定

一、为什么你的项目需要自动配图方案

作为个人开发者，你是不是经常遇到这样的情况：用 Claude Code 噼里啪啦写了一堆代码，功能都实现了，但打开页面一看 —— 光秃秃的，商品页没有商品图，Banner 位是空的，用户头像全是默认灰色占位符。整个 UI 瞬间就"廉价"了。

手动找图吧，太费时间：打开素材网站、搜索关键词、筛选尺寸、下载、重命名、放到项目目录里……一套流程下来半小时没了，而且还只搞定了几张图。

有没有更高效的方式？

有。把 Pexels 的 API 密钥丢给 Claude Code，让 AI 帮你自动抓取配图。从"手动找图半小时"变成"一句话搞定所有配图"，这才是 AI 开发时代该有的效率。

核心思路： Pexels 提供免费商用的高质量图片 API，Claude Code 可以读取你的项目代码、理解页面结构，然后自动调用 API 为每个需要配图的位置生成合适的图片。你只需要提供一个 API Key。

二、为什么选择 Pexels

市面上免费图片网站不少，但 Pexels 是最适合开发者接入的之一：

完全免费商用： 所有图片都可以免费用于个人和商业项目，无需署名（虽然署名是礼貌的）
图片质量高： 都是专业摄影师上传的高清素材，比那些"免费图库"的质量高好几个档次
API 友好： RESTful 接口设计，文档清晰，接入简单
搜索功能强大： 支持关键词搜索、颜色筛选、方向筛选、尺寸筛选等
调用额度充足： 免费版每小时 200 次请求，每天 20000 次，个人项目完全够用

三、获取你的 Pexels API Key

3.1 注册账号

访问 https://www.pexels.com，点击右上角注册账号，可以用邮箱注册，也可以直接用 Google / Facebook 账号登录。

3.2 申请 API Key

登录后，访问 https://www.pexels.com/api/
点击 “Your API Key” 或 “Get Started” 按钮
填写你的项目名称和用途（随便写就行，比如 “Personal project”）
提交后就能看到你的 API Key 了

注意： API Key 是私密信息，不要直接硬编码在代码里，更不要提交到公开的 GitHub 仓库。正确做法是放在环境变量或配置文件中。
在这里插入图片描述

四、项目配置

4.1 环境变量配置

在你的项目根目录创建 .env 文件，把 API Key 放进去：

# Pexels API 配置
PEXELS_API_KEY=你的API密钥填在这里
PEXELS_BASE_URL=https://api.pexels.com/v1

# 可选：默认图片尺寸
PEXELS_DEFAULT_WIDTH=800
PEXELS_DEFAULT_HEIGHT=600

配置位置说明： 上面的 PEXELS_API_KEY= 后面就是你需要填写 API 密钥的位置。把等号后面的文字替换成你从 Pexels 官网拿到的真实 Key 即可。

然后安装 dotenv 包来读取环境变量（Node.js 项目）：

npm install dotenv
# 或者
yarn add dotenv

4.2 封装 API 调用

建议把 Pexels 的 API 调用封装成一个工具函数，方便在项目各处使用：

const axios = require('axios');
require('dotenv').config();

const PEXELS_API_KEY = process.env.PEXELS_API_KEY;
const PEXELS_BASE_URL = process.env.PEXELS_BASE_URL || 'https://api.pexels.com/v1';

const pexelsClient = axios.create({
  baseURL: PEXELS_BASE_URL,
  headers: {
    Authorization: PEXELS_API_KEY
  }
});

/**
 * 搜索图片
 * @param {string} query - 搜索关键词
 * @param {Object} options - 可选参数
 * @param {number} options.perPage - 每页数量，默认 1
 * @param {string} options.orientation - 方向：landscape/portrait/square
 * @param {string} options.size - 尺寸：small/medium/large
 * @param {string} options.color - 主色调
 * @returns {Promise<Array>} 图片列表
 */
async function searchPhotos(query, options = {}) {
  const { perPage = 1, orientation, size, color } = options;

  const params = {
    query,
    per_page: perPage,
  };

  if (orientation) params.orientation = orientation;
  if (size) params.size = size;
  if (color) params.color = color;

  try {
    const response = await pexelsClient.get('/search', { params });
    return response.data.photos;
  } catch (error) {
    console.error('Pexels API 调用失败:', error.message);
    return [];
  }
}

/**
 * 获取单张随机图片
 * @param {string} query - 搜索关键词
 * @param {Object} options - 可选参数
 * @returns {Promise<string|null>} 图片 URL
 */
async function getRandomPhoto(query, options = {}) {
  const photos = await searchPhotos(query, { ...options, perPage: 15 });
  if (photos.length === 0) return null;

  // 随机选一张，避免每次都是同一张
  const randomIndex = Math.floor(Math.random() * photos.length);
  const photo = photos[randomIndex];

  // 返回中等尺寸的图片 URL
  return photo.src.medium;
}

module.exports = {
  searchPhotos,
  getRandomPhoto,
};

五、与 Claude Code 配合使用

5.1 怎么告诉 Claude Code 用 Pexels API

这是最关键的一步。你不需要自己写所有调用逻辑，只需要把 API Key 和需求告诉 Claude Code，它会帮你搞定一切。

在 Claude Code 中输入类似这样的指令：

我项目里已经配置了 Pexels API，API Key 在 .env 文件的 PEXELS_API_KEY 中。

请帮我做以下事情：
1. 扫描项目中所有需要配图的地方（商品列表、Banner、用户头像等）
2. 为每个位置调用 Pexels API 获取合适的配图
3. 图片关键词要和页面内容匹配，比如商品页就搜商品相关的词
4. 确保图片尺寸适合对应的 UI 位置
5. 加上图片加载失败时的降级处理

相关工具函数在 utils/pexels.js，你可以直接使用或修改。

5.2 Claude Code 会自动做什么

当你把 API Key 和需求告诉 Claude Code 后，它会：

理解项目结构： 读取你的代码，找出哪些页面、组件需要配图
生成匹配的关键词： 根据页面内容（比如"运动鞋商品页"）自动生成合适的搜索关键词
编写调用逻辑： 在合适的位置插入 API 调用代码
处理加载状态： 自动加上 loading 状态和错误降级
优化性能： 加上图片懒加载、缓存策略等

实际体验： 以前手动给一个电商项目配图可能要花大半天，现在把 API Key 丢给 Claude Code，喝杯咖啡的功夫，整个项目的配图就都搞定了。而且 AI 选的图往往比你自己瞎找的更匹配。

5.3 更精准的控制

如果你对配图有特定要求，可以在提示词里说得更详细：

请为商品列表页的 12 个商品生成配图：
- 每个商品的图片要和商品名称对应
- 图片风格要统一，都是白底产品图风格
- 尺寸统一为 400x400
- 优先选择明亮、干净的图片
- 如果搜索不到完全匹配的，就用相近类别的图代替

商品列表：
1. 白色运动鞋
2. 黑色双肩包
3. 无线蓝牙耳机
4. 机械键盘
...（以此类推）

六、常见应用场景

6.1 商品列表页自动配图

这是最常见的场景。电商项目、展示类项目都需要大量商品图：

import { useState, useEffect } from 'react';
import { getRandomPhoto } from '../utils/pexels';

function ProductCard({ product }) {
  const [imageUrl, setImageUrl] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadImage() {
      setLoading(true);
      // 根据商品名称搜索图片
      const url = await getRandomPhoto(product.name, {
        orientation: 'square',
        size: 'medium'
      });
      setImageUrl(url);
      setLoading(false);
    }
    loadImage();
  }, [product.name]);

  return (
    <div className="product-card">
      <div className="product-image">
        {loading ? (
          <div className="skeleton" />
        ) : imageUrl ? (
          <img src={imageUrl} alt={product.name} loading="lazy" />
        ) : (
          <div className="placeholder">暂无图片</div>
        )}
      </div>
      <h3>{product.name}</h3>
      <p className="price">¥{product.price}</p>
    </div>
  );
}

export default ProductCard;

6.2 博客文章封面图

根据文章标题或标签自动生成封面图：

async function generateCoverImage(article) {
  // 优先用文章标签搜索，没有标签就用标题关键词
  const keyword = article.tags?.[0] || article.title.split(' ')[0];

  return await getRandomPhoto(keyword, {
    orientation: 'landscape',
    size: 'large'
  });
}

6.3 用户头像占位图

用户没有上传头像时，用 Pexels 的人像图作为默认头像：

async function getDefaultAvatar(gender = 'people') {
  return await getRandomPhoto(`${gender} portrait`, {
    orientation: 'square',
    size: 'small'
  });
}

6.4 页面 Banner 图

根据页面主题自动匹配 Banner 背景图：

// 首页 Banner
const bannerImage = await getRandomPhoto('technology workspace', {
  orientation: 'landscape',
  size: 'large'
});

// 关于我们页面 Banner
const aboutBanner = await getRandomPhoto('team meeting office', {
  orientation: 'landscape',
  size: 'large'
});

七、进阶优化技巧

7.1 图片缓存

不要每次都请求 API，加上本地缓存：

// 简单的内存缓存
const imageCache = new Map();

async function getCachedPhoto(query, options = {}) {
  const cacheKey = `${query}-${JSON.stringify(options)}`;

  if (imageCache.has(cacheKey)) {
    return imageCache.get(cacheKey);
  }

  const photo = await getRandomPhoto(query, options);
  if (photo) {
    imageCache.set(cacheKey, photo);
  }

  return photo;
}

7.2 降级策略

API 调用失败时要有备选方案：

async function getPhotoWithFallback(query, fallbackUrl) {
  try {
    const photo = await getRandomPhoto(query);
    return photo || fallbackUrl;
  } catch (error) {
    console.warn('获取 Pexels 图片失败，使用降级图片');
    return fallbackUrl;
  }
}

7.3 批量获取图片

如果需要很多图片，一次性获取比多次请求更高效：

async function getBatchPhotos(queries) {
  const promises = queries.map(query => getRandomPhoto(query));
  return await Promise.all(promises);
}

// 使用示例
const productNames = ['运动鞋', '背包', '耳机', '键盘'];
const images = await getBatchPhotos(productNames);