个人项目 UI 没配图用 Pexels API Claude Code 一键搞定一、为什么你的项目需要自动配图方案作为个人开发者你是不是经常遇到这样的情况用 Claude Code 噼里啪啦写了一堆代码功能都实现了但打开页面一看 —— 光秃秃的商品页没有商品图Banner 位是空的用户头像全是默认灰色占位符。整个 UI 瞬间就廉价了。手动找图吧太费时间打开素材网站、搜索关键词、筛选尺寸、下载、重命名、放到项目目录里……一套流程下来半小时没了而且还只搞定了几张图。有没有更高效的方式有。把 Pexels 的 API 密钥丢给 Claude Code让 AI 帮你自动抓取配图。从手动找图半小时变成一句话搞定所有配图这才是 AI 开发时代该有的效率。核心思路Pexels 提供免费商用的高质量图片 APIClaude Code 可以读取你的项目代码、理解页面结构然后自动调用 API 为每个需要配图的位置生成合适的图片。你只需要提供一个 API Key。二、为什么选择 Pexels市面上免费图片网站不少但 Pexels 是最适合开发者接入的之一完全免费商用所有图片都可以免费用于个人和商业项目无需署名虽然署名是礼貌的图片质量高都是专业摄影师上传的高清素材比那些免费图库的质量高好几个档次API 友好RESTful 接口设计文档清晰接入简单搜索功能强大支持关键词搜索、颜色筛选、方向筛选、尺寸筛选等调用额度充足免费版每小时 200 次请求每天 20000 次个人项目完全够用三、获取你的 Pexels API Key3.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_URLhttps://api.pexels.com/v1# 可选默认图片尺寸PEXELS_DEFAULT_WIDTH800PEXELS_DEFAULT_HEIGHT600配置位置说明上面的PEXELS_API_KEY后面就是你需要填写 API 密钥的位置。把等号后面的文字替换成你从 Pexels 官网拿到的真实 Key 即可。然后安装dotenv包来读取环境变量Node.js 项目npminstalldotenv# 或者yarnadddotenv4.2 封装 API 调用建议把 Pexels 的 API 调用封装成一个工具函数方便在项目各处使用constaxiosrequire(axios);require(dotenv).config();constPEXELS_API_KEYprocess.env.PEXELS_API_KEY;constPEXELS_BASE_URLprocess.env.PEXELS_BASE_URL||https://api.pexels.com/v1;constpexelsClientaxios.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 {PromiseArray} 图片列表 */asyncfunctionsearchPhotos(query,options{}){const{perPage1,orientation,size,color}options;constparams{query,per_page:perPage,};if(orientation)params.orientationorientation;if(size)params.sizesize;if(color)params.colorcolor;try{constresponseawaitpexelsClient.get(/search,{params});returnresponse.data.photos;}catch(error){console.error(Pexels API 调用失败:,error.message);return[];}}/** * 获取单张随机图片 * param {string} query - 搜索关键词 * param {Object} options - 可选参数 * returns {Promisestring|null} 图片 URL */asyncfunctiongetRandomPhoto(query,options{}){constphotosawaitsearchPhotos(query,{...options,perPage:15});if(photos.length0)returnnull;// 随机选一张避免每次都是同一张constrandomIndexMath.floor(Math.random()*photos.length);constphotophotos[randomIndex];// 返回中等尺寸的图片 URLreturnphoto.src.medium;}module.exports{searchPhotos,getRandomPhoto,};五、与 Claude Code 配合使用5.1 怎么告诉 Claude Code 用 Pexels API这是最关键的一步。你不需要自己写所有调用逻辑只需要把 API Key 和需求告诉 Claude Code它会帮你搞定一切。在 Claude Code 中输入类似这样的指令我项目里已经配置了 Pexels APIAPI 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}fromreact;import{getRandomPhoto}from../utils/pexels;functionProductCard({product}){const[imageUrl,setImageUrl]useState();const[loading,setLoading]useState(true);useEffect((){asyncfunctionloadImage(){setLoading(true);// 根据商品名称搜索图片consturlawaitgetRandomPhoto(product.name,{orientation:square,size:medium});setImageUrl(url);setLoading(false);}loadImage();},[product.name]);return(div classNameproduct-carddiv classNameproduct-image{loading?(div classNameskeleton/):imageUrl?(img src{imageUrl}alt{product.name}loadinglazy/):(div classNameplaceholder暂无图片/div)}/divh3{product.name}/h3p classNameprice¥{product.price}/p/div);}exportdefaultProductCard;6.2 博客文章封面图根据文章标题或标签自动生成封面图asyncfunctiongenerateCoverImage(article){// 优先用文章标签搜索没有标签就用标题关键词constkeywordarticle.tags?.[0]||article.title.split( )[0];returnawaitgetRandomPhoto(keyword,{orientation:landscape,size:large});}6.3 用户头像占位图用户没有上传头像时用 Pexels 的人像图作为默认头像asyncfunctiongetDefaultAvatar(genderpeople){returnawaitgetRandomPhoto(${gender}portrait,{orientation:square,size:small});}6.4 页面 Banner 图根据页面主题自动匹配 Banner 背景图// 首页 BannerconstbannerImageawaitgetRandomPhoto(technology workspace,{orientation:landscape,size:large});// 关于我们页面 BannerconstaboutBannerawaitgetRandomPhoto(team meeting office,{orientation:landscape,size:large});七、进阶优化技巧7.1 图片缓存不要每次都请求 API加上本地缓存// 简单的内存缓存constimageCachenewMap();asyncfunctiongetCachedPhoto(query,options{}){constcacheKey${query}-${JSON.stringify(options)};if(imageCache.has(cacheKey)){returnimageCache.get(cacheKey);}constphotoawaitgetRandomPhoto(query,options);if(photo){imageCache.set(cacheKey,photo);}returnphoto;}7.2 降级策略API 调用失败时要有备选方案asyncfunctiongetPhotoWithFallback(query,fallbackUrl){try{constphotoawaitgetRandomPhoto(query);returnphoto||fallbackUrl;}catch(error){console.warn(获取 Pexels 图片失败使用降级图片);returnfallbackUrl;}}7.3 批量获取图片如果需要很多图片一次性获取比多次请求更高效asyncfunctiongetBatchPhotos(queries){constpromisesqueries.map(querygetRandomPhoto(query));returnawaitPromise.all(promises);}// 使用示例constproductNames[运动鞋,背包,耳机,键盘];constimagesawaitgetBatchPhotos(productNames);八、注意事项与最佳实践8.1 API 调用限制限制类型免费额度说明每小时请求数200 次滚动窗口计算每天请求数20,000 次个人项目完全够用小技巧开发阶段可以把获取到的图片 URL 保存到本地 JSON 文件里避免反复调用 API 浪费额度。8.2 版权说明Pexels 的图片使用规则很宽松可以免费用于商业和非商业项目不需要征得摄影师同意不需要署名但署名是礼貌的可以修改、裁剪、二次创作但也有一些限制不能把图片直接拿去卖比如做成图库、NFT 等不能用图片上的可识别人物做代言、广告等可能侵犯肖像权的用途如果图片中有品牌、商标要注意使用场景8.3 性能优化建议图片懒加载使用loadinglazy或 Intersection Observer选择合适尺寸不要在小图位置用超大尺寸的图片添加缓存相同关键词的图片不要重复请求预加载关键图片Banner 图等首屏图片可以提前加载使用 CDN生产环境建议把图片缓存到自己的 CDN 上8.4 安全提示永远不要把 API Key 硬编码在前端代码里前端调用建议走后端代理避免暴露 Key把.env文件加入.gitignore如果 API Key 泄露了立即去 Pexels 后台重新生成九、总结回顾一下整个方案的核心去 Pexels 官网申请一个免费的 API Key在项目里配置好环境变量把 Key 填进去告诉 Claude Code“我有 Pexels API帮我给项目配图”Claude Code 自动扫描、自动调用、自动搞定所有配图整个过程可能只需要 10 分钟但能让你的项目 UI 质感提升好几个档次。对于个人开发者来说这是性价比极高的提升方式。以前我们说一张好图胜过千言万语现在可以说一个 API Key 胜过千张手动找的图。马上试试现在就去 Pexels 申请 API Key然后丢给 Claude Code看看它能给你的项目带来什么样的变化。你会发现原来给项目配图可以这么简单。配置位置回顾在项目的.env文件中找到PEXELS_API_KEY这一行把等号后面替换成你的真实 API 密钥即可。这个是我项目中使用的效果想看我具体的使用效果到wx小程序里搜索 【节日里的故事】
个人项目 UI 没配图?用 Pexels API + Claude Code 一键搞定
发布时间:2026/6/30 14:08:55
个人项目 UI 没配图用 Pexels API Claude Code 一键搞定一、为什么你的项目需要自动配图方案作为个人开发者你是不是经常遇到这样的情况用 Claude Code 噼里啪啦写了一堆代码功能都实现了但打开页面一看 —— 光秃秃的商品页没有商品图Banner 位是空的用户头像全是默认灰色占位符。整个 UI 瞬间就廉价了。手动找图吧太费时间打开素材网站、搜索关键词、筛选尺寸、下载、重命名、放到项目目录里……一套流程下来半小时没了而且还只搞定了几张图。有没有更高效的方式有。把 Pexels 的 API 密钥丢给 Claude Code让 AI 帮你自动抓取配图。从手动找图半小时变成一句话搞定所有配图这才是 AI 开发时代该有的效率。核心思路Pexels 提供免费商用的高质量图片 APIClaude Code 可以读取你的项目代码、理解页面结构然后自动调用 API 为每个需要配图的位置生成合适的图片。你只需要提供一个 API Key。二、为什么选择 Pexels市面上免费图片网站不少但 Pexels 是最适合开发者接入的之一完全免费商用所有图片都可以免费用于个人和商业项目无需署名虽然署名是礼貌的图片质量高都是专业摄影师上传的高清素材比那些免费图库的质量高好几个档次API 友好RESTful 接口设计文档清晰接入简单搜索功能强大支持关键词搜索、颜色筛选、方向筛选、尺寸筛选等调用额度充足免费版每小时 200 次请求每天 20000 次个人项目完全够用三、获取你的 Pexels API Key3.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_URLhttps://api.pexels.com/v1# 可选默认图片尺寸PEXELS_DEFAULT_WIDTH800PEXELS_DEFAULT_HEIGHT600配置位置说明上面的PEXELS_API_KEY后面就是你需要填写 API 密钥的位置。把等号后面的文字替换成你从 Pexels 官网拿到的真实 Key 即可。然后安装dotenv包来读取环境变量Node.js 项目npminstalldotenv# 或者yarnadddotenv4.2 封装 API 调用建议把 Pexels 的 API 调用封装成一个工具函数方便在项目各处使用constaxiosrequire(axios);require(dotenv).config();constPEXELS_API_KEYprocess.env.PEXELS_API_KEY;constPEXELS_BASE_URLprocess.env.PEXELS_BASE_URL||https://api.pexels.com/v1;constpexelsClientaxios.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 {PromiseArray} 图片列表 */asyncfunctionsearchPhotos(query,options{}){const{perPage1,orientation,size,color}options;constparams{query,per_page:perPage,};if(orientation)params.orientationorientation;if(size)params.sizesize;if(color)params.colorcolor;try{constresponseawaitpexelsClient.get(/search,{params});returnresponse.data.photos;}catch(error){console.error(Pexels API 调用失败:,error.message);return[];}}/** * 获取单张随机图片 * param {string} query - 搜索关键词 * param {Object} options - 可选参数 * returns {Promisestring|null} 图片 URL */asyncfunctiongetRandomPhoto(query,options{}){constphotosawaitsearchPhotos(query,{...options,perPage:15});if(photos.length0)returnnull;// 随机选一张避免每次都是同一张constrandomIndexMath.floor(Math.random()*photos.length);constphotophotos[randomIndex];// 返回中等尺寸的图片 URLreturnphoto.src.medium;}module.exports{searchPhotos,getRandomPhoto,};五、与 Claude Code 配合使用5.1 怎么告诉 Claude Code 用 Pexels API这是最关键的一步。你不需要自己写所有调用逻辑只需要把 API Key 和需求告诉 Claude Code它会帮你搞定一切。在 Claude Code 中输入类似这样的指令我项目里已经配置了 Pexels APIAPI 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}fromreact;import{getRandomPhoto}from../utils/pexels;functionProductCard({product}){const[imageUrl,setImageUrl]useState();const[loading,setLoading]useState(true);useEffect((){asyncfunctionloadImage(){setLoading(true);// 根据商品名称搜索图片consturlawaitgetRandomPhoto(product.name,{orientation:square,size:medium});setImageUrl(url);setLoading(false);}loadImage();},[product.name]);return(div classNameproduct-carddiv classNameproduct-image{loading?(div classNameskeleton/):imageUrl?(img src{imageUrl}alt{product.name}loadinglazy/):(div classNameplaceholder暂无图片/div)}/divh3{product.name}/h3p classNameprice¥{product.price}/p/div);}exportdefaultProductCard;6.2 博客文章封面图根据文章标题或标签自动生成封面图asyncfunctiongenerateCoverImage(article){// 优先用文章标签搜索没有标签就用标题关键词constkeywordarticle.tags?.[0]||article.title.split( )[0];returnawaitgetRandomPhoto(keyword,{orientation:landscape,size:large});}6.3 用户头像占位图用户没有上传头像时用 Pexels 的人像图作为默认头像asyncfunctiongetDefaultAvatar(genderpeople){returnawaitgetRandomPhoto(${gender}portrait,{orientation:square,size:small});}6.4 页面 Banner 图根据页面主题自动匹配 Banner 背景图// 首页 BannerconstbannerImageawaitgetRandomPhoto(technology workspace,{orientation:landscape,size:large});// 关于我们页面 BannerconstaboutBannerawaitgetRandomPhoto(team meeting office,{orientation:landscape,size:large});七、进阶优化技巧7.1 图片缓存不要每次都请求 API加上本地缓存// 简单的内存缓存constimageCachenewMap();asyncfunctiongetCachedPhoto(query,options{}){constcacheKey${query}-${JSON.stringify(options)};if(imageCache.has(cacheKey)){returnimageCache.get(cacheKey);}constphotoawaitgetRandomPhoto(query,options);if(photo){imageCache.set(cacheKey,photo);}returnphoto;}7.2 降级策略API 调用失败时要有备选方案asyncfunctiongetPhotoWithFallback(query,fallbackUrl){try{constphotoawaitgetRandomPhoto(query);returnphoto||fallbackUrl;}catch(error){console.warn(获取 Pexels 图片失败使用降级图片);returnfallbackUrl;}}7.3 批量获取图片如果需要很多图片一次性获取比多次请求更高效asyncfunctiongetBatchPhotos(queries){constpromisesqueries.map(querygetRandomPhoto(query));returnawaitPromise.all(promises);}// 使用示例constproductNames[运动鞋,背包,耳机,键盘];constimagesawaitgetBatchPhotos(productNames);八、注意事项与最佳实践8.1 API 调用限制限制类型免费额度说明每小时请求数200 次滚动窗口计算每天请求数20,000 次个人项目完全够用小技巧开发阶段可以把获取到的图片 URL 保存到本地 JSON 文件里避免反复调用 API 浪费额度。8.2 版权说明Pexels 的图片使用规则很宽松可以免费用于商业和非商业项目不需要征得摄影师同意不需要署名但署名是礼貌的可以修改、裁剪、二次创作但也有一些限制不能把图片直接拿去卖比如做成图库、NFT 等不能用图片上的可识别人物做代言、广告等可能侵犯肖像权的用途如果图片中有品牌、商标要注意使用场景8.3 性能优化建议图片懒加载使用loadinglazy或 Intersection Observer选择合适尺寸不要在小图位置用超大尺寸的图片添加缓存相同关键词的图片不要重复请求预加载关键图片Banner 图等首屏图片可以提前加载使用 CDN生产环境建议把图片缓存到自己的 CDN 上8.4 安全提示永远不要把 API Key 硬编码在前端代码里前端调用建议走后端代理避免暴露 Key把.env文件加入.gitignore如果 API Key 泄露了立即去 Pexels 后台重新生成九、总结回顾一下整个方案的核心去 Pexels 官网申请一个免费的 API Key在项目里配置好环境变量把 Key 填进去告诉 Claude Code“我有 Pexels API帮我给项目配图”Claude Code 自动扫描、自动调用、自动搞定所有配图整个过程可能只需要 10 分钟但能让你的项目 UI 质感提升好几个档次。对于个人开发者来说这是性价比极高的提升方式。以前我们说一张好图胜过千言万语现在可以说一个 API Key 胜过千张手动找的图。马上试试现在就去 Pexels 申请 API Key然后丢给 Claude Code看看它能给你的项目带来什么样的变化。你会发现原来给项目配图可以这么简单。配置位置回顾在项目的.env文件中找到PEXELS_API_KEY这一行把等号后面替换成你的真实 API 密钥即可。这个是我项目中使用的效果想看我具体的使用效果到wx小程序里搜索 【节日里的故事】