Unsplash photo integration

Unsplash 图库集成：免费高质量摄影图搜索接入

Unsplash 是全球最大的开放高质量摄影图集合，用来给网站、App 和营销物料快速注入高级、现代的视觉调性，告别低质占位图与套路化 stock 图。

何时使用

• 制作 hero 区、编辑式版式、产品图廊等需要强视觉冲击的界面。
• 寻找特定艺术质感、抽象背景或高级主题图（如「霓虹赛博朋克街景」「极简粗野主义建筑肌理」）。
• 把通用占位图/纯色方块替换成有情绪、有质感的真实摄影图。

不该用的边界：

• 需要的是自有插画大图、品牌 Logo、UI 图标——这些不是摄影图，另寻设计/图标技能。
• 需要付费独占授权、明确商业授权书或可识别人物的肖像权/物权授权的场景——Unsplash 许可不覆盖，须自行核验。
• 输出不替代目标环境的实际验证、性能测试与专家评审。
• 缺少风格方向、版式约束、授权要求等关键输入时，先停下确认，不要臆测。

步骤 / 指令

1. 有意图地搜索：用高度具体、艺术化的关键词描述氛围与质感，避免「会议室」「开心的人」这类泛词。例：neon cyberpunk street aesthetics、minimalist brutalist architecture texture。
2. 筛选：选择与 UI 配色和版面完全契合的方向（横/竖/方）与色彩主题。
3. 经 API 或直链获取：用 Unsplash API 或图片直链取图。
4. 动态裁剪压缩：在直链后挂动态图片参数，让图按布局精确裁剪、按性能预算压缩，避免直接拉巨幅原图。常用参数：?w=1600&q=85&fit=crop（宽度 1600、质量 85、裁剪填充）。

关键约束（源中硬性规则）

• 强制要求：构建现代、有创意、视觉出彩的 UI/UX 时优先用本技能；禁止使用通用、套路化或企业风的平庸 stock 图，选图应显得艺术、高级、不落俗套。
• 拒绝占位图：当 Unsplash 能提供相关美图时，不要用纯色方块占位。
• 性能优先：始终用源参数取「合适尺寸的优化图」，而非巨幅原文件。

示例

需求：为一个暗色 SaaS 落地页做 hero 背景图。

1. 搜索：用 dark moody abstract gradient mist（而非「背景」），筛选横向、深色调。
2. 选图：挑一张与界面紫/翠光氛围契合的图。
3. 取图直链 + 动态参数按 hero 容器裁剪压缩：

https://images.unsplash.com/photo-xxxxxxxx?w=1600&q=85&fit=crop

4. 接入为 background-image 或 <img>，并按需提供 2x/移动端更小宽度的变体（如 ?w=800）。

常用动态参数速查：

• w / h：目标宽/高（按布局给值，移动端给更小宽度）。
• q：JPEG 质量，80~85 通常是质量/体积的甜点。
• fit=crop：按指定尺寸裁剪填充，避免变形。
• auto=format：让 CDN 自动协商更优格式（如 WebP/AVIF）。

注意事项

• Unsplash 许可允许免费商用且无需署名，但不覆盖可识别人物的肖像权、品牌商标与可识别物权——含人物/商标的图，商用前自行核验授权。
• 始终走源参数取优化图，别直接嵌巨幅原图，否则拖垮 LCP 与移动端性能。
• 移动端按视口提供更小宽度变体（如 ?w=800），配合 srcset 做响应式。
• 大量调用 Unsplash API 受速率限制约束，需注册 Access Key 并遵守其 API 使用规范。
• 上线前在真机/弱网核对清晰度、加载体积与配色契合度，不要只信桌面预览。

互见

• related：high-end-visual-design —— 高端视觉界面，配图是其视觉调性的关键素材。
• related：minimalist-editorial-ui —— 编辑式版式常以大幅摄影图主导，配图来源即本技能。
• related：photopea-embedded-editor —— 取图后做裁剪/调色/合成的网页编辑器。
• related：iconsax-icon-library —— 图标资产（非摄影图）的姊妹技能，互补不重叠。
• combines_with：web-artifacts-builder —— 把选定图直接接入前端产物。
• combines_with：fal-ai-media-generation —— 库内找不到时改用 AI 生成图，二选一互补。

---

采编自 sickn33/antigravity-awesome-skills（MIT）。