← Back to Next.js project starter
See how it helps
Visual asset briefs
Turns a page’s communication need into an actionable image brief with composition, delivery formats and brand-specific constraints.
visual-asset-brief
Agents using this skill
When is it useful?
Use it when commissioning or generating artwork whose subject, cropping and placement must serve the interface rather than decorate it.
What does it help you do?
- Defines the image’s job, placement, dimensions and crop requirements.
- Describes concrete subjects, composition, lighting and brand palette.
- Keeps translatable text separate and records rights and accuracy constraints.
Try asking this
Write a hero-image brief with mobile-safe cropping and space for the page headline. Specify the subject's position, text-safe area and desktop-to-phone crop. The brief should keep essential visual meaning intact without baking translated headings into the image.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Visual Asset Brief
Start from the job
- Name where the image appears and what it must do there: explain a feature, set the mood of a hero, show the real product, guide the eye to the call to action. An image without a job is decoration; leave it out.
- Check what exists first: brand guidelines, existing illustrations and photos, icon set, color tokens. New assets extend that language instead of starting another.
The brief
Write every brief with these parts, one or two lines each:
- Use case: placement, size on screen, aspect ratio and the formats needed (e.g. 16:9 hero at 1600 px and 4:5 crop for mobile).
- Subject: who or what, doing what, in which setting. Concrete nouns and actions, not adjectives.
- Style: photo, flat illustration, 3D render, line icon; the reference it should feel like, described in words, never "in the style of" a living artist or another brand.
- Composition: framing, viewpoint, where the subject sits, and the empty space that text or UI will cover. Keep the focal point inside the area every crop keeps.
- Light and color: time of day or light quality, contrast, and the palette tied to the brand tokens.
- Text in the image: avoid it; render text in HTML so it can be translated, read by screen readers and kept sharp. If unavoidable, give the exact wording.
- Constraints: brand rules, real product details that must be accurate, people and diversity, licensing and usage rights, file size limits.
- Avoid: what would break it (clichés such as handshakes and glowing brains, clutter, wrong product details, extra fingers and garbled text from generators, trademarks of others).
Consistency across a set
- Fix the shared parameters once (style, palette, light direction, line weight, corner radius, camera angle) and repeat them verbatim in every brief of the set.
- Keep one reference image per set and compare each new asset with it side by side.
- Icons: one grid size, stroke width and corner style; check them together at the size they are used.
Honesty
- Never invent customers, testimonials, results, awards or logos in an image. Product screenshots and mockups show the real product or are clearly marked as illustrative.
- Do not depict real, identifiable people without permission; generated people must not look like a real person.
Deliver and check
- Export in modern formats (AVIF or WebP with a fallback, SVG for icons and simple illustrations) at the sizes the layout needs, with responsive variants.
- Write alt text that states the image's purpose in the page; decorative images get an empty alt.
- Look at the image in the real layout at phone and desktop widths, in light and dark themes, with the real text over it, before calling it done.
Before you finish
- Each asset has a stated job and placement.
- The brief covers use case, subject, style, composition, light, text, constraints and avoid.
- Set-wide parameters are fixed and repeated.
- Nothing fake or unlicensed; no text baked in without reason.
- Checked in the real layout, with alt text.
Included files 1
SKILL.md