Skip to main content
skill CX Codex

unsplash-asset-images — Claude Code skill: Unsplash images

This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill unsplash-asset-images -a claude-code
Open on GitHub

What unsplash-asset-images does

The skill kicks in when an agent has to choose an image for a product or design asset: an avatar, a headshot, a portrait, a wide site background, an abstract wallpaper. It returns the Unsplash photo page URL plus suggested ratios and sizes for that use case.

Inside are five curated sets of five images each: avatars at 1:1, headshots at 4:5 and 3:4, portraits, 16:9 backgrounds, and abstract wallpapers for desktop and mobile. Sizes come with each category — 256×256 and 1024×1024 for avatars, 1920×1080 and 2880×1620 for wide backgrounds, 1080×1920 for mobile wallpapers. The skill file lives at ~/.claude/skills/unsplash-asset-images/SKILL.md.

The skill tells you to skip Unsplash+ images and not to treat the photographer name as required attribution, since Unsplash does not require it. Need an actual file? Use the Download button on the photo page, then crop to the target ratio in your design tool. Keep faces centered for avatars and preserve the horizon on wide backgrounds.

What it helps with

  • pick an avatar with a clean background and a centered face
  • choose the ratio and resolution for a headshot card
  • find a wide background for a site hero section
  • grab abstract wallpapers for desktop and mobile
  • filter out Unsplash+ images and keep the regular ones

Example prompts for the agent

  • pick a 1:1 avatar for a profile, give me the link and sizes
  • I need a 16:9 hero background, show me Unsplash options
  • find abstract 9:16 wallpapers for a mobile screen

How to install unsplash-asset-images

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill unsplash-asset-images -a claude-code

2Manually: put the files in place

~/.claude/skills/unsplash-asset-images/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/unsplash-asset-images/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about unsplash-asset-images

How do I install unsplash-asset-images in Claude?

Run npx skills add MengTo/Skills --skill unsplash-asset-images -a claude-code. The skill file then lands at ~/.claude/skills/unsplash-asset-images/SKILL.md.

What does unsplash-asset-images do?

It picks Unsplash photos for avatars, headshots, portraits, backgrounds and wallpapers, and returns the photo page URL with suggested ratios and sizes.

Which ratios does the skill suggest for each use case?

Avatar: 1:1. Headshot card: 4:5 or 3:4. Website hero background: 16:9. Mobile wallpaper: 9:16.

Source text

SKILL.md · MIT
---
name: unsplash-asset-images
description: Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for producing the right resolutions and aspect ratios (1:1, 4:5, 3:4, 16:9, 9:16).
---

# Unsplash Asset Images (Avatars, Portraits, Backgrounds, Wallpapers)

Goal: quickly grab *good-looking* images from Unsplash and deliver them in the **right size + ratio**.

## Output rule
For each recommendation, output:
1) **Unsplash page URL** (canonical)
2) Suggested **ratios + sizes** for the use case

If the user wants a file, instruct them to use the **Download** button on Unsplash and then crop/resize in their design tool or image pipeline.

## License / safety (keep it simple)
- Unsplash images are generally free to use, but **avoid Unsplash+** images unless the user explicitly wants them.
- Don’t present the photographer name as “required attribution” (Unsplash doesn’t require it), but it’s good practice to include.

---

## How to deliver the right size + ratio

1. Open the Unsplash photo page and use the **Download** button.
2. Resize/crop to the target ratio in your design tool or image pipeline.
3. Keep faces centered for avatars/headshots and preserve horizon for wide backgrounds.

Note: do not include Unsplash source or secondary image links; keep only the main photo page URLs.

---

## Curated picks (5 each)

### 1) Avatars (1:1)
Pick images with clean face framing + simple backgrounds.

1. https://unsplash.com/photos/man-wearing-black-shirt-aoEwuEH7YAs
2. https://unsplash.com/photos/grayscale-photography-of-man-wearing-crew-neck-shirt-jmURdhtm7Ng
3. https://unsplash.com/photos/grayscale-photography-of-woman-with-two-hands-on-her-face--Keh6vLM7w0
4. https://unsplash.com/photos/man-in-black-crew-neck-shirt-QWa0TIUW638
5. https://unsplash.com/photos/man-wearing-black-denim-jacket-near-building-2RFwLL-YX44

Suggested deliverables:
- 1:1: **256×256**, **512×512**, **1024×1024**

### 2) Headshots (4:5 or 3:4)
Aim for shoulders-up framing, neutral backgrounds, “professional but human”.

1. https://unsplash.com/photos/mans-grey-and-black-shirt-ILip77SbmOE
2. https://unsplash.com/photos/man-facing-on-left-side-co2Nn11OP3k
3. https://unsplash.com/photos/woman-with-blue-eyes-and-black-hair-VLJV46hPLSM
4. https://unsplash.com/photos/woman-with-blonde-hair-and-red-lipstick-8f3yvMdkWJI
5. https://unsplash.com/photos/a-young-woman-poses-with-hands-near-her-face-bF6wuOivk2M

Suggested deliverables:
- 4:5: **800×1000**, **1200×1500**, **1600×2000**
- 3:4: **900×1200**, **1500×2000**

### 3) Portraits (editorial / candid)
Use these when the vibe is “human story”, not “corporate headshot”.

1. https://unsplash.com/photos/woman-holding-vintage-camera-to-take-a-picture-O_UK4X6ekgI
2. https://unsplash.com/photos/man-wearing-a-straw-hat-and-maroon-shirt-Rd2UXAg8Zc0
3. https://unsplash.com/photos/brPuA0a0Uuk
4. https://unsplash.com/photos/Plii16U9bOU
5. https://unsplash.com/photos/man-leaning-on-wall-silhouette-2trSyEqR0pA

Suggested deliverables:
- 3:4: **1500×2000**
- 4:5: **1200×1500**
- 1:1 crop for social: **1080×1080**

### 4) Large backgrounds (website hero, banners) — 16:9
Pick wide shots with clean negative space and readable gradients.

1. https://unsplash.com/photos/landscape-photography-of-mountains-twukN12EN7c
2. https://unsplash.com/photos/a-black-landscape-with-mountains-in-the-background-X93tlrlx5kI
3. https://unsplash.com/photos/a-landscape-with-trees-and-mountains-in-the-background-96mTBTH9MEw
4. https://unsplash.com/photos/mountains-and-a-blue-sky-create-a-picturesque-landscape-fgCR4Yj3CLs
5. https://unsplash.com/photos/landscape-with-milky-way-night-sky-with-stars-on-the-mountain-long-exposure-photograph-with-grain-Vt7Se0uqEpA

Suggested deliverables:
- Desktop hero: **1920×1080**, **2400×1350**, **2880×1620**
- Social banner: **1500×500** (3:1) — consider manual crop

### 5) Abstract wallpapers (desktop/mobile)
Use when you need “brand-safe”, non-specific visuals.

1. https://unsplash.com/photos/an-abstract-purple-background-with-a-black-background-5Q9Gf0WSyLk
2. https://unsplash.com/photos/abstract-layered-shapes-with-a-gradient-orange-color-5q4zsTaVN4I
3. https://unsplash.com/photos/abstract-organic-shapes-with-blue-and-yellow-gradients-c0B1HYG6ZK4
4. https://unsplash.com/photos/blue-waves-form-a-soft-abstract-gradient-dYksH3vHorc
5. https://unsplash.com/photos/abstract-purple-waves-on-a-dark-background-ZQSPIiFEMoU

Suggested deliverables:
- Desktop: **2560×1600** or **2880×1800**
- Mobile: **1080×1920** (9:16)

---

## Quick “which ratio do I use?” cheatsheet
- **Avatar**: 1:1
- **Headshot card**: 4:5 (great default), 3:4 (taller)
- **Website hero background**: 16:9
- **Mobile wallpaper / story background**: 9:16

If the user asks for “best image”:
- prefer clean negative space
- avoid busy backgrounds
- ensure face is not cropped awkwardly (use `crop=faces` on production URLs)

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Design →

From the same set148

marquee-loop This skill guides an agent through building a looping marquee from repeated items. Use it for scrolling logos, testimonials, screenshots, or tags. CX Codex +1 1,500installs matterjs Walks the agent through a Matter.js scene: engine, render, runner, bodies and mouse dragging. Useful when a canvas needs physics. CX Codex +1 1,500installs css-border-gradient Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. Useful when surfaces need subtle edge highlights without loud glowing outlines. CX Codex +1 1,500installs scroll-scrubbed-visual-sequence Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. Useful for interactive hero sections, diagrams, and image sequences. CX Codex +1 1,500installs scroll-world-storytelling Turns articles, case studies, and product journeys into visual scroll-driven landing pages. Useful when you need a connected story instead of generic stacked sections. CX Codex +1 1,600installs staggered-word-reveal Builds word-by-word text reveals as content enters the viewport. Use it for short headlines, section intros, quotes, and hero copy. CX Codex +1 1,600installs editorial-portfolio-chapters A skill for creative-studio, agency, photographer and artist sites where the work leads the story. Useful when a portfolio has to read as a run of magazine chapters. CX Codex +1 1,400installs performance-profiling Guides performance profiling for Apple apps using Instruments and MetricKit. It directs the AI agent to pinpoint hangs and slow launch times. CX Codex +1 1,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor