AutoGineer
Generated banner for Image First Grid Layout
Generated logo for Image First Grid Layout

Image First Grid Layout

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

From the author

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Image First Grid Layout skill provides a structured approach to designing web experiences where photography or cinematic media serves as the primary stage. It focuses on balancing visual impact with functional UI by using full-bleed imagery, precise structural guide lines, and anchored content blocks. The system emphasizes a restrained aesthetic, utilizing tonal vignettes and subtle technical overlays to maintain readability while ensuring the media remains the dominant element of the composition.

What it does

  • Defines a grid-based system for layering content over full-bleed imagery.
  • Provides patterns for anchored content blocks, such as headlines, CTAs, and secondary metrics.
  • Suggests visual treatments like gradient washes and tonal vignettes for text readability.
  • Outlines the use of structural elements like vertical rails and corner markers to organize the layout.
  • Recommends motion patterns like slow drifts and masked reveals to enhance the cinematic feel.
  • Specifies a restrained color palette and typography style to complement photographic backgrounds.

When to use it

  • When designing hero sections that require a dominant, immersive photographic or cinematic visual.
  • When you need to organize content precisely over an image without using standard stacked marketing sections.
  • When building a product-grade interface that requires a balance between aesthetic impact and structural order.
  • When you want to introduce subtle technical atmosphere, such as faint WebGL lines or additive streaks, to a design.

Advantages

  • Ensures the visual media remains the focal point of the user experience.
  • Provides a clear, intentional structure through visible grid rails and markers.
  • Maintains text readability over complex imagery using measured gradient and overlay techniques.
  • Promotes a cohesive, premium aesthetic through restrained color and typography choices.
  • Prevents visual clutter by anchoring content rather than centering it.

Usage examples

“Design a hero section for a luxury architectural firm using the image-first grid layout.”
The agent will generate a layout plan featuring a full-bleed architectural image, vertical guide rails, and bottom-anchored text blocks with a subtle dark gradient for readability.
“How should I arrange secondary content cards over a cinematic background image?”
The agent will advise using lightly framed, transparent, or low-fill cards that sit on the grid without heavy container chrome to avoid obscuring the image.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/image-first-grid-layout/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip image-first-grid-layout.zip -d .agents/skills

Documentation by Meng To

Image First Grid Layout Skill

Use When

  • Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

Workflow

Scope

  • Apply this as a full design-system direction across hero image treatment, layout grid, overlay framing, typography, supporting cards, and motion.

  • Use it when the experience should feel led by a dominant photographic or cinematic visual field, with content arranged as precise overlay blocks rather than stacked marketing sections.

  • This is not a gallery layout and not plain editorial minimalism. The image should act as the stage, while the grid and content overlays give it product-grade structure.

Visual target

  • Build the page around a large immersive background image or media surface that fills most or all of the viewport.

  • Add dark gradient washes, directional overlays, or tonal vignettes so text remains readable while the image still feels present and expansive.

  • Use visible structural lines such as outer rails, center guides, and small corner markers to impose order on top of the image field.

  • Anchor the main content low in the viewport or along a deliberate edge so the image retains dominance instead of being crowded by centered UI.

  • Keep the palette restrained and image-responsive: use neutrals, whites, smoke grays, and one subtle accent derived from the image or brand when needed.

Implementation guidance

  • Prefer a full-screen or large-stage hero with the background image treated as a foundational layer, not a small card or thumbnail.

  • Overlay the image with a measured grid system using vertical container lines, subtle framing guides, or a split-column scaffold that remains visible but quiet.

  • Place the primary headline and CTA group in one anchored grid column, then use a secondary box for quote, proof, metric, or supporting narrative in another.

  • Supporting cards should feel lightly framed and transparent or low-fill, so they sit on top of the image instead of fighting it with heavy container chrome.

  • Introduce subtle technical atmosphere when useful, such as faint WebGL lines, additive streaks, slow background motion, or minimal parallax over the image plane.

  • Typography should stay clean and premium: confident sans-serif headlines, soft low-contrast body copy, and restrained micro-labels or nav text.

  • Motion should emphasize reveal and drift rather than busy interaction, using masked text entrances, slow line movement, and gentle hover sweeps.

Recommended patterns

  • Full-bleed landscape or architectural image with layered left-to-right and bottom-up dark gradients for readability.

  • Vertical guide rails with tiny square markers or subtle boundary points running through the stage.

  • Bottom-anchored hero copy paired with a secondary quote, testimonial, or metric box floating in an adjacent grid lane.

  • Sparse top navigation with a light transparent shell so the image remains the main event.

  • Faint WebGL or canvas line field drifting over the image in screen or additive blend mode.

  • Buttons that use translucent dark fills, thin borders, and small moving highlight sweeps instead of loud color blocks.

Tuning knobs

  • Image dominance: let the media occupy nearly the whole experience, then scale content density around it rather than the other way around.

  • Overlay darkness: adjust gradient strength until readability is strong without flattening the image.

  • Grid visibility: make the rails and markers just visible enough to feel intentional, not heavy enough to distract from the photography.

  • Technical atmosphere: add or remove subtle animated lines or glow depending on how product-like versus purely cinematic the page should feel.

  • Content anchoring: shift copy and secondary boxes left, right, or lower in the viewport to preserve strong negative space.

Avoid

  • Turning the image into a decorative background behind a conventional centered SaaS layout.

  • Overfilling the viewport with cards, widgets, or text that erase the image-first composition.

  • Bright multi-color accents that break the calm, cinematic tone of the stage.

  • Heavy solid containers that sever the relationship between the overlays and the underlying image.

  • Treating the grid as invisible; the structure should quietly organize the composition.

Files

demo/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:40:55.372Z",
  "skill": {
    "id": "image-first-grid-layout",
    "label": "Image First Grid Layout",
    "usage_count": 330,
    "url": "https://neuform.ai/skill/image-first-grid-layout"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "40dc5a34-31a3-4490-8fe4-ee4557058230",
    "slug": "kiwi-floral-artisan-botanical-design-1",
    "title": "Kiwi Floral | Artisan Botanical Design",
    "url": "https://neuform.ai/pages/kiwi-floral-artisan-botanical-design-1/index.html",
    "view_count": 2154,
    "favorite_count": 47,
    "remix_count": 27
  },
  "html": {
    "original_sha256": "87aae46219f8e80319e272031226e6b29de1d610c8ef58385c801a549649b97f",
    "bundled_sha256": "25e42ba4831fad7141ec00170a74d6539ca8ca5a288fcdcc6b35b7ea0d2eb548",
    "runtime_dependencies": [
      "https://fonts.googleapis.com",
      "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap",
      "https://fonts.gstatic.com"
    ],
    "hardened_sha256": "cc4b0b15268710a9e9728443fdf7536cbf0aee240d37e3062b62fb90aa5c48b7",
    "sandboxed_sha256": "4559d22599d5ed733eb14ba074e37de12e8db297571b70be93b898a347274658",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 536390,
        "file": "assets/page-01-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/65695f80-23f9-46ee-8487-cbb6c93cc48b_3840w.webp"
      },
      {
        "bytes": 989406,
        "file": "assets/page-02-724142aa-44a6-48d3-9cf3-761e00d05b78-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/724142aa-44a6-48d3-9cf3-761e00d05b78_1600w.jpg"
      },
      {
        "bytes": 44753,
        "file": "assets/page-03-4734259a-bad7-422f-981e-ce01e79184f2-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg"
      },
      {
        "bytes": 728581,
        "file": "assets/page-04-005600e5-f6ab-4e59-bc86-eaeb02797dfa-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/005600e5-f6ab-4e59-bc86-eaeb02797dfa_1600w.jpg"
      },
      {
        "bytes": 85289,
        "file": "assets/page-05-e534354d-c5f2-4399-a1d9-2f50338e8c47-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e534354d-c5f2-4399-a1d9-2f50338e8c47_1600w.jpg"
      },
      {
        "bytes": 201962,
        "file": "assets/page-06-fb6415fd-bf4d-4ccf-8e9d-7ab445e99207-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fb6415fd-bf4d-4ccf-8e9d-7ab445e99207_1600w.jpg"
      },
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/image-first-grid-layout · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download image-first-grid-layout.zip