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.

bruhxax Updated

File contents

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.

bruhxax/codex-skills-pack/tree/main/.codex/skills/image-attention commit 9dd2f5892d

Frequently asked questions

npx skillmds@latest add bruhxax/image-attention