← Weboldal építők adatlapja

Skill · 1.0.0 verzió

Vizuális erőforrás briefje

Az oldal kommunikációs igényét kompozícióval, kimeneti formátummal és márkakorláttal ellátott megvalósítható képbrieffé alakítja.

visual-asset-brief

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha megrendelt vagy generált kép tárgyának, vágásának és helyének a felületet kell szolgálnia.

Miben segít neked?

  • Meghatározza a kép feladatát, helyét, méretét és vágási igényét.
  • Konkrét tárgyat, kompozíciót, fényt és márkapalettát ír le.
  • Külön tartja a fordítható szöveget, rögzíti a jogi és pontossági korlátot.

Például ezt kérheted

Írj nyitóképbriefet mobilbiztos vágással és címszövegnek hagyott hellyel. Add meg a téma helyét, szövegterületet és asztali–telefonos kivágást. A lényegi látvány maradjon meg, fordítandó címsor ne kerüljön a képbe.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

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:

  1. 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).
  2. Subject: who or what, doing what, in which setting. Concrete nouns and actions, not adjectives.
  3. 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.
  4. 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.
  5. Light and color: time of day or light quality, contrast, and the palette tied to the brand tokens.
  6. 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.
  7. Constraints: brand rules, real product details that must be accurate, people and diversity, licensing and usage rights, file size limits.
  8. 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.

Csomagban lévő fájlok 1

  • SKILL.md