# Image Attention

> Use whenever the user provides a screenshot, mockup, image, design reference, UI reference, app screenshot, website screenshot, or asks to copy, match, recreate, clone, repeat, or use an image as reference.

- Skill: `bruhxax/image-attention` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bruhxax/image-attention`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bruhxax/image-attention/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: bruhxax (https://skillmd.com/u/bruhxax)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/bruhxax/image-attention

---


# Image Attention

If the user provides a reference image, study it carefully before implementing.

Do not rush and do not create a generic approximation.

Analyze overall layout, page structure, spacing, alignment, color palette, contrast, typography hierarchy, font weight, component shapes, border radius, shadows, icons, background style, proportions, and visual mood.

Match the reference as closely as possible.

Preserve layout, spacing, colors, proportions, hierarchy, component structure, background style, visual rhythm, and mood.

If exact matching is impossible, prioritize layout, spacing, color palette, typography hierarchy, proportions, component shapes, and mood.

Before finishing, compare the result to the reference image and fix mismatches.