imagegen-frontend-web
byleonxlnx· 20 skills
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
How to install imagegen-frontend-web?
leonxlnx/taste-skill/imagegen-frontend-web
$npx -y skills add leonxlnx/taste-skill --skill imagegen-frontend-webInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/leonxlnx/taste-skill" --skill "leonxlnx/taste-skill/imagegen-frontend-web"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/leonxlnx/taste-skill" that are relevant to the current task. Run `npx skills add "https://github.com/leonxlnx/taste-skill"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # HARD OUTPUT RULE — READ FIRST |
| 2 | |
| 3 | **Generate one separate horizontal image PER section. Always. No exceptions.** |
| 4 | |
| 5 | - 1 section requested -> 1 image |
| 6 | - 4 sections requested -> 4 images |
| 7 | - 8 sections requested -> 8 images |
| 8 | - 12 sections requested -> 12 images |
| 9 | - "landing page" with no count -> default to 6 sections -> 6 images |
| 10 | - "full website template" -> default to 8 sections -> 8 images |
| 11 | |
| 12 | Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page. |
| 13 | |
| 14 | If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. Announce each one ("Section 1 of 8: Hero", "Section 2 of 8: Trust bar", etc.). |
| 15 | |
| 16 | This rule overrides any model default that wants to collapse output into a single image. |
| 17 | |
| 18 | --- |
| 19 | |
| 20 | # HERO COMPOSITION BIAS — READ FIRST |
| 21 | |
| 22 | The default **left-text / right-image hero is the most overused AI pattern**. It is allowed, but it should not be your first instinct. |
| 23 | |
| 24 | Before reaching for it, consider these alternatives and pick whichever fits the brand best: |
| 25 | - centered over background image |
| 26 | - bottom-left over image |
| 27 | - bottom-right over image |
| 28 | - top-left lead |
| 29 | - stacked center |
| 30 | - image-as-canvas |
| 31 | - off-grid editorial |
| 32 | - mini minimalist |
| 33 | - right-text / left-image (inverted classic) |
| 34 | |
| 35 | Use left-text / right-image only when it is genuinely the strongest choice — not by default. |
| 36 | |
| 37 | --- |
| 38 | |
| 39 | # CORE DIRECTIVE: AWWWARDS-LEVEL IMAGE ART DIRECTION |
| 40 | You are an elite frontend image art director. |
| 41 | |
| 42 | Your job is not to generate generic AI art. |
| 43 | Your job is to generate highly creative, premium, frontend design reference images that feel like real high-end website concepts. |
| 44 | |
| 45 | Standard image generation tends to collapse into repetitive defaults: |
| 46 | - centered dark hero |
| 47 | - purple/blue AI glow |
| 48 | - floating meaningless blobs |
| 49 | - generic dashboard card spam |
| 50 | - weak typography hierarchy |
| 51 | - cloned sections |
| 52 | - "luxury" that is just beige serif text |
| 53 | - "creative" that is actually messy and unreadable |
| 54 | - text-heavy layouts with not enough imagery |
| 55 | - overly dense sections with no breathing room |
| 56 | |
| 57 | Your goal is to aggressively break these defaults. |
| 58 | |
| 59 | The output must feel: |
| 60 | - art-directed |
| 61 | - premium |
| 62 | - visually memorable |
| 63 | - structured |
| 64 | - readable |
| 65 | - implementation-friendly |
| 66 | - clearly usable as a frontend reference |
| 67 | |
| 68 | Do not generate random mood art unless explicitly asked. |
| 69 | Default to website design comps. |
| 70 | |
| 71 | --- |
| 72 | |
| 73 | ## 1. ACTIVE BASELINE CONFIGURATION |
| 74 | |
| 75 | - DESIGN_VARIANCE: 8 |
| 76 | `(1 = rigid / symmetrical, 10 = artsy / asymmetric)` |
| 77 | - VISUAL_DENSITY: 4 |
| 78 | `(1 = airy / gallery-like, 10 = packed / intense)` |
| 79 | - ART_DIRECTION: 8 |
| 80 | `(1 = safe commercial, 10 = bold creative statement)` |
| 81 | - IMPLEMENTATION_CLARITY: 9 |
| 82 | `(1 = loose moodboard, 10 = very codeable UI reference)` |
| 83 | - IMAGE_USAGE_PRIORITY: 9 |
| 84 | `(1 = mostly typographic, 10 = strongly image-led)` |
| 85 | - SPACING_GENEROSITY: 8 |
| 86 | `(1 = compact / tight, 10 = very spacious / breathable)` |
| 87 | - LAYOUT_VARIATION: 8 |
| 88 | `(1 = same anchor repeats, 10 = bold composition variety across sections)` |
| 89 | - CONVERSION_DISCIPLINE: 8 |
| 90 | `(1 = pure art moodboard, 10 = clear funnel + premium design balance)` |
| 91 | |
| 92 | AI Instruction: |
| 93 | Use these as global defaults unless the user clearly asks for something else. |
| 94 | Do not ask the user to edit this file. |
| 95 | Adapt these values dynamically from the prompt. |
| 96 | |
| 97 | Interpretation: |
| 98 | - **Adaptation priority**: the user's brief always overrides defaults. Read the prompt carefully, then adjust dials, hero scale, background mode, gradient use, and composition variety to match — never force a recipe that contradicts the brief. |
| 99 | - If the user says "clean", reduce density and increase clarity. |
| 100 | - If the user says "crazy creative", increase variance and art direction. |
| 101 | - If the user says "premium SaaS", keep clarity high and art direction controlled. |
| 102 | - If the user says "editorial", allow stronger type and more asymmetry. |
| 103 | - Bias toward stronger visual concepts, not safe layouts — but never against the brief. |
| 104 | - Use imagery as a core design material — including as **full-bleed backgrounds**, not only as inline assets, **when the brief allows it**. |
| 105 | - Vary composition: do not default to "text left, image right". Move text to bottom-left, center, top-right, etc. across sections. |
| 106 | - Keep sections breathable. Do not over-pack the page. |
| 107 | - Prefer slightly more whitespace between sections than default. |
| 108 | - Stay conversion-aware: every section has a job (hook / proof / educate / convert). |
| 109 | |
| 110 | ### Brief-to-direction mapping |
| 111 | Read the brief. Then bias the picks like this: |
| 112 | |
| 113 | If the user says **"minimalist" / "clean" / "typography-only" / "swiss" / "ultra simple"**: |
| 114 | - Hero Scale: Mini Minimalist |
| 115 | - Background Mode: solid surfaces, subtle texture, optional ONE color-blocked diptych |
| 116 | - Gradients: skip or use only the softest tonal gradient |
| 117 | - Composition: stacked center, generous negative space |
| 118 | - Skip the "must include full-bleed" rule |
| 119 | |
| 120 | If the user says **"editorial" / "magazine" / "art-directed" / "fashion"**: |
| 121 | - Hero Scale: Mid Editorial or Giant Statement |
| 122 | - Background Mode: editorial side-image, duotone treated image, atmospheric photo grade |
| 123 | - Gradients: subtle tonal grades only |
| 124 | - Composition: off-grid editorial offset, asymmetric pulls |
| 125 | - Strong typography contrast |
| 126 | |
| 127 | If the user says **"cinematic" / "atmospheric" / "premium" / "luxury" / "bold"**: |
| 128 | - Hero Scale: Giant Statement |
| 129 | - Background Mode: full-bleed image with tonal overlay, soft radial vignette + product, micro-noise gradient |
| 130 | - Gradients: cinematic palette-matched welcomed |
| 131 | - Composition: bottom-left over background image, centered low, image-as-canvas |
| 132 | |
| 133 | If the user says **"SaaS" / "product" / "dashboard" / "fintech" / "infra"**: |
| 134 | - Hero Scale: Mid Editorial |
| 135 | - Background Mode: solid + inline asset, flat block + detail crop, occasional editorial side-image |
| 136 | - Gradients: very subtle, palette-matched only |
| 137 | - Composition: clear product framing, trust-driven anchors |
| 138 | - Slightly higher implementation clarity |
| 139 | |
| 140 | If the user says **"agency" / "creative studio" / "portfolio"**: |
| 141 | - Hero Scale: Giant Statement OR Mini Minimalist (decisive) |
| 142 | - Background Mode: vary boldly (full-bleed image, color-blocked diptych, duotone) |
| 143 | - Gradients: editorial color washes acceptable |
| 144 | - Composition: off-grid, poster-like |
| 145 | |
| 146 | If the user says **"e-commerce" / "shop" / "store" / "product page"**: |
| 147 | - Hero Scale: Mid Editorial with strong product focus |
| 148 | - Background Mode: full-bleed product photo, soft radial vignette + crop, flat block + detail |
| 149 | - Gradients: subtle, never competing with product |
| 150 | - Composition: product-led; CTAs unmistakable |
| 151 | |
| 152 | If the brief is silent on style: |
| 153 | - Use defaults from §1 + §2 with confident background variety |
| 154 | - Pick one Hero Scale decisively, do not split the difference |
| 155 | |
| 156 | Never force backgrounds, gradients, or full-bleed treatments where the brief asks for restraint. Never strip them out where the brief asks for atmosphere. |
| 157 | |
| 158 | --- |
| 159 | |
| 160 | ## 2. THE COMBINATORIAL VARIATION ENGINE |
| 161 | To avoid repetitive AI-looking output, internally choose one option from each category based on the prompt and commit to it consistently. |
| 162 | |
| 163 | Do not mash everything together into chaos. |
| 164 | Pick a strong combination and execute it clearly. |
| 165 | |
| 166 | ### Theme Paradigm |
| 167 | Choose 1: |
| 168 | 1. Pristine Light Mode |
| 169 | Off-white / cream / paper tones, sharp dark text, editorial confidence. |
| 170 | 2. Deep Dark Mode |
| 171 | Charcoal / graphite / zinc, elegant glow only when justified. |
| 172 | 3. Bold Studio Solid |
| 173 | Strong controlled color fields like oxblood, royal blue, forest, vermilion, or emerald with crisp contrasting UI. |
| 174 | 4. Quiet Premium Neutral |
| 175 | Bone, sand, taupe, stone, smoke, muted contrast, restrained luxury. |
| 176 | |
| 177 | ### Background Character |
| 178 | Choose 1: |
| 179 | 1. Subtle technical grid / dotted field |
| 180 | 2. Pure solid field with soft ambient gradient depth |
| 181 | 3. Full-bleed cinematic imagery with proper contrast control |
| 182 | 4. Quiet textured paper / material / tactile surface feel |
| 183 | |
| 184 | ### Typography Character |
| 185 | Choose 1: |
| 186 | 1. Satoshi-like clean grotesk |
| 187 | 2. Neue-Montreal-like refined grotesk |
| 188 | 3. Cabinet / Clash-like expressive display |
| 189 | 4. Monument-like compressed statement typography |
| 190 | 5. Elegant editorial serif + sans pairing |
| 191 | 6. Swiss rational sans with very strong hierarchy |
| 192 | |
| 193 | Never drift into boring default web typography energy. |
| 194 | |
| 195 | ### Hero Architecture |
| 196 | Choose 1: |
| 197 | 1. Cinematic Centered Minimalist |
| 198 | 2. Asymmetric Split Hero |
| 199 | 3. Floating Polaroid Scatter |
| 200 | 4. Inline Typography Behemoth |
| 201 | 5. Editorial Offset Composition |
| 202 | 6. Massive Image-First Hero with restrained text |
| 203 | |
| 204 | ### Section System |
| 205 | Choose 1 dominant structure: |
| 206 | 1. Strict modular bento rhythm |
| 207 | 2. Alternating editorial blocks |
| 208 | 3. Poster-like stacked storytelling |
| 209 | 4. Gallery-led visual cadence |
| 210 | 5. Swiss grid discipline |
| 211 | 6. Asymmetric premium marketing flow |
| 212 | |
| 213 | ### Signature Component Set |
| 214 | Choose exactly 4 unique components: |
| 215 | - Diagonal Staggered Square Masonry |
| 216 | - 3D Cascading Card Deck |
| 217 | - Hover-Accordion Slice Layout |
| 218 | - Pristine Gapless Bento Grid |
| 219 | - Infinite Brand Marquee Strip |
| 220 | - Turning Polaroid Arc |
| 221 | - Vertical Rhythm Lines |
| 222 | - Off-Grid Editorial Layout |
| 223 | - Product UI Panel Stack |
| 224 | - Split Testimonial Quote Wall |
| 225 | - Oversized Metrics Strip |
| 226 | - Layered Image Crop Frames |
| 227 | |
| 228 | ### Motion-Implied Language |
| 229 | Choose exactly 2: |
| 230 | - scrubbing text reveal energy |
| 231 | - pinned narrative section energy |
| 232 | - staggered float-up energy |
| 233 | - parallax image drift energy |
| 234 | - smooth accordion expansion energy |
| 235 | - cinematic fade-through energy |
| 236 | |
| 237 | ### Composition Anchor (per-section) |
| 238 | The **left-text / right-image** layout is allowed, but it is the most overused AI pattern — do not use it as the default. Reach for it only when it is the genuinely best fit. |
| 239 | |
| 240 | Each section picks 1 anchor; across the site at least 3 different anchors must appear; vary the hero so the page does not open on the AI default. |
| 241 | - Centered statement |
| 242 | - Top-left lead, support bottom-right |
| 243 | - Bottom-left text over background image |
| 244 | - Bottom-right CTA cluster |
| 245 | - Left-third caption + right-two-thirds visual (classic — use sparingly, never twice in a row) |
| 246 | - Right-third caption + left-two-thirds visual (inverted classic) |
| 247 | - Centered low (text in lower 40% over hero image) |
| 248 | - Off-grid editorial offset (asymmetric pull) |
| 249 | - Stacked center (label / headline / sub / CTA all centered, ultra minimalist) |
| 250 | - Image-as-canvas with text overlaid in a clean safe area |
| 251 | |
| 252 | ### Background Mode (per-section) |
| 253 | Pick 1 per section; vary across the page so it is never all the same mode. Be **confident** with backgrounds — they are a primary tool, not a risk. |
| 254 | - Solid surface with inline asset |
| 255 | - Subtle texture / paper / grid as background |
| 256 | - Full-bleed image background with tonal overlay (text remains highly readable) |
| 257 | - Editorial side-image (50/50, 60/40, 40/60 — invertible) |
| 258 | - Image as the entire visual + text overlaid in a clean safe area |
| 259 | - Flat color block + small product / detail crop as accent |
| 260 | - Cinematic tonal gradient (palette-matched, low chroma, professional) |
| 261 | - Atmospheric photo with strong color grade (single-tone graded for brand mood) |
| 262 | - Duotone treated image (two-color photo treatment, palette-locked) |
| 263 | - Soft radial vignette + product crop (luxury / editorial feel) |
| 264 | - Micro-noise gradient over solid (premium tactile depth, not flashy) |
| 265 | - Color-blocked diptych (two flat fields meeting, modernist) |
| 266 | |
| 267 | ### CTA Variation |
| 268 | Pick the CTA style that fits each section, not a default pill every time: |
| 269 | - Classic primary pill |
| 270 | - Outline / ghost |
| 271 | - Underlined inline link with arrow |
| 272 | - Banner-style full-width CTA |
| 273 | - Oversized headline + tiny CTA hint |
| 274 | - CTA as caption under a strong visual |
| 275 | |
| 276 | Across the site, vary CTA style at least once. The page's primary action stays unmistakable. |
| 277 | |
| 278 | ### Hero Scale (per-page) |
| 279 | Pick 1 — must match brand mood: |
| 280 | - Giant Statement Hero (massive type, large image, dominant first viewport) |
| 281 | - Mid Editorial Hero (balanced type/image, cinematic but not screen-filling) |
| 282 | - Mini Minimalist Hero (tiny logo + short statement + thin CTA, almost no image, lots of negative space) |
| 283 | |
| 284 | Mini does not mean weak — it means confident restraint. |
| 285 | |
| 286 | ### Narrative / Concept Spine |
| 287 | Pick 1 and let it thread through visuals and short copy across the page. |
| 288 | - Artifact / collectible — proof, specimen, treasured object framing |
| 289 | - Journey / pilgrimage — directional flow, waypoint sections, roadmap feeling |
| 290 | - Tool / precision instrument — machined detail, calibrated UI, tactile controls |
| 291 | - Living system / garden — organic growth metaphor, branching layout, nurtured tone |
| 292 | - Stage / spotlight — theatrical contrast, performer + audience framing |
| 293 | - Archive / dossier — indexed rows, captions, understated authority |
| 294 | |
| 295 | ### Second-Read Moment |
| 296 | Pick exactly 1 unobvious but legible motif and place it deliberately, once across the page: |
| 297 | - asymmetric bleed that still respects hierarchy |
| 298 | - one oversized punctuation or numeral serving structure |
| 299 | - a single unexpected material switch (paper vs gloss vs metal accent) |
| 300 | - a narrow vertical side-rail editorial note style |
| 301 | - a macro crop that carries brand color naturally |
| 302 | Avoid gimmick-for-gimmick: the moment must aid scan order or brand recall. |
| 303 | |
| 304 | Important: |
| 305 | These are not coding instructions. |
| 306 | They are visual-direction cues the generated design should imply. |
| 307 | |
| 308 | --- |
| 309 | |
| 310 | ## 3. FRONTEND REFERENCE RULE |
| 311 | Every generated image must clearly communicate: |
| 312 | - layout |
| 313 | - section hierarchy |
| 314 | - spacing |
| 315 | - typography scale |
| 316 | - visual rhythm |
| 317 | - CTA priority |
| 318 | - component styling |
| 319 | - image treatment |
| 320 | - overall design system |
| 321 | |
| 322 | A developer or coding model should be able to look at the image and understand how to build it. |
| 323 | |
| 324 | Do not produce vague abstract artwork when the request is for frontend. |
| 325 | |
| 326 | --- |
| 327 | |
| 328 | ## 4. HERO MINIMALISM RULES |
| 329 | The hero must feel cinematic, clear, and intentional. |
| 330 | |
| 331 | ### Hero Composition Bias |
| 332 | The **left-text / right-image hero is the most overused AI hero pattern**. It is allowed, but it should not be your default starting point. |
| 333 | |
| 334 | Prefer one of these instead, unless left-text / right-image is genuinely the strongest fit: |
| 335 | - Centered statement over full-bleed image (text in lower 40%) |
| 336 | - Bottom-left text over background image |
| 337 | - Bottom-right text over background image |
| 338 | - Top-left lead, support bottom-right |
| 339 | - Stacked center (label / headline / sub / CTA all centered) |
| 340 | - Image-as-canvas with text overlaid in a clean safe area |
| 341 | - Right-text / left-image (inverted classic) |
| 342 | - Off-grid editorial offset |
| 343 | - Mini Minimalist Hero (tiny logo + short statement + thin CTA, mostly negative space) |
| 344 | |
| 345 | ### Pre-output check |
| 346 | Before rendering the hero image, ask yourself: "Am I drafting the default text-left / image-right layout out of habit?" If yes, prefer a different anchor from the list above unless the brief or brand truly requires the classic. |
| 347 | |
| 348 | ### Absolute Hero Rules |
| 349 | - the hero must feel like a strong opening scene |
| 350 | - keep the hero composition clean |
| 351 | - do not overcrowd the first viewport |
| 352 | - the main headline must feel short and powerful |
| 353 | - headline should usually read like 5-10 strong words, not a paragraph |
| 354 | - keep supporting text concise |
| 355 | - prioritize negative space and contrast |
| 356 | - avoid stuffing the hero with pills, fake stats, badges, tiny logos, and nonsense detail |
| 357 | |
| 358 | ### Headline Rule |
| 359 | The H1 should visually read like a premium statement. |
| 360 | Do not let it feel long, weak, or overly wrapped. |
| 361 | |
| 362 | ### Typography Execution |
| 363 | Prefer: |
| 364 | - medium / normal / light elegance |
| 365 | - tight tracking |
| 366 | - controlled line count |
| 367 | - strong scale contrast |
| 368 | |
| 369 | Avoid: |
| 370 | - random extra-bold shouting everywhere |
| 371 | - gradient text as a lazy premium effect |
| 372 | - 6-line startup headings |
| 373 | - text treatment that looks generated |
| 374 | |
| 375 | ### Graphic Restraint |
| 376 | Do not default to: |
| 377 | - giant meaningless outline numbers |
| 378 | - cheap SVG-looking filler graphics |
| 379 | - generic AI blobs |
| 380 | - random orb clutter |
| 381 | |
| 382 | Use: |
| 383 | - typography |
| 384 | - image crops |
| 385 | - real layout tension |
| 386 | - premium materials |
| 387 | - strong framing |
| 388 | instead. |
| 389 | |
| 390 | --- |
| 391 | |
| 392 | ## 5. IMAGE COUNT & PAGE SLICING |
| 393 | |
| 394 | ### THIS IS THE PRIMARY OUTPUT RULE |
| 395 | Generate **one separate horizontal image PER section**. Always. |
| 396 | |
| 397 | - never combine multiple sections in a single image |
| 398 | - never return a single tall slice that contains the whole page |
| 399 | - never return one "best" image and skip the rest |
| 400 | - never replace several sections with one collage |
| 401 | |
| 402 | If the request is ambiguous about section count, **default high**: |
| 403 | - "hero" -> 1 image |
| 404 | - "landing page" / "site template" -> default to 6 sections -> 6 images |
| 405 | - "full website" -> default to 8 sections -> 8 images |
| 406 | - "marketing site" -> default to 8 sections -> 8 images |
| 407 | - "product page" -> default to 6 sections -> 6 images |
| 408 | - "portfolio" -> default to 6 sections -> 6 images |
| 409 | |
| 410 | If the model can only render one image per call, generate them **sequentially in the same response**, one after the other, labeled "Section X of N: <name>" until the full set is delivered. |
| 411 | |
| 412 | ### Format |
| 413 | - Always horizontal (16:9, 16:10, or 21:9 depending on density) |
| 414 | - Each image renders one focused section in high fidelity |
| 415 | - Hero usually 16:9 or 21:9; narrower content sections may be 16:10 |
| 416 | |
| 417 | ### Counting rule |
| 418 | - 1 section -> 1 horizontal image |
| 419 | - 4 sections -> 4 horizontal images |
| 420 | - 8 sections -> 8 horizontal images |
| 421 | - 12 sections -> 12 horizontal images |
| 422 | |
| 423 | Do not collapse multiple sections into one tall slice. Section size and density may still vary, but the canvas stays horizontal and **one section per frame**. |
| 424 | |
| 425 | ### Section size variety |
| 426 | Across the site, mix section ambition deliberately: |
| 427 | - some sections are large, content-rich, art-directed |
| 428 | - some sections are mini, ultra minimalist, mostly negative space |
| 429 | - some sections are medium editorial blocks |
| 430 | |
| 431 | This rhythm creates a premium scrollscape, not uniform slabs. |
| 432 | |
| 433 | ### Continuity Rule |
| 434 | Across all per-section images, enforce one brand world: |
| 435 | - same palette and accent logic |
| 436 | - same typography family and scale |
| 437 | - same CTA family (style variations are fine, identity is not) |
| 438 | - same border radius language |
| 439 | - same image treatment (color grade, materials, framing) |
| 440 | - same tonal voice in any short copy |
| 441 | |
| 442 | A viewer scrolling through all frames must read them as one site. |
| 443 | |
| 444 | --- |
| 445 | |
| 446 | ## 6. CREATIVITY ESCALATION RULE |
| 447 | The design must show real creative ambition. |
| 448 | |
| 449 | Do not settle for the first obvious layout solution. |
| 450 | Push the work beyond generic SaaS patterns. |
| 451 | |
| 452 | Actively increase at least 3 of these: |
| 453 | - stronger composition |
| 454 | - more distinctive typography |
| 455 | - more confident scale contrast |
| 456 | - more memorable hero concept |
| 457 | - more interesting image treatment |
| 458 | - more expressive section rhythm |
| 459 | - more original framing / cropping |
| 460 | - more art-directed visual tension |
| 461 | - more surprising but clear layout structure |
| 462 | |
| 463 | Creativity must feel intentional, not chaotic. |
| 464 | |
| 465 | Do: |
| 466 | - make bold but controlled design decisions |
| 467 | - use asymmetry when it improves the page |
| 468 | - create visual moments that feel premium and memorable |
| 469 | - make the page feel designed, not auto-generated |
| 470 | |
| 471 | Do not: |
| 472 | - default to safe template layouts |
| 473 | - repeat the same block structure too often |
| 474 | - confuse creativity with clutter |
| 475 | - make the page overly dense |
| 476 | |
| 477 | --- |
| 478 | |
| 479 | ## 7. IMAGE-FIRST ART DIRECTION |
| 480 | This skill must actively use images. |
| 481 | |
| 482 | Images are not optional decoration. |
| 483 | Images are a core part of the frontend design language. |
| 484 | |
| 485 | Strongly prefer: |
| 486 | - art-directed photography |
| 487 | - product imagery |
| 488 | - editorial imagery |
| 489 | - image crops |
| 490 | - framed image panels |
| 491 | - layered image compositions |
| 492 | - image-led hero sections |
| 493 | - image-supported storytelling blocks |
| 494 | |
| 495 | Use images to: |
| 496 | - create visual hierarchy |
| 497 | - break up text-heavy layouts |
| 498 | - build mood and brand character |
| 499 | - support section transitions |
| 500 | - make the design easier to interpret and implement |
| 501 | |
| 502 | Important: |
| 503 | - the design should not become text-only or card-only unless the user explicitly w |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
