Skip to content
Get packs

Image-First Grid Layout

Design full-screen, photo-led web pages with structured grid overlays and anchored text.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent follows a specific visual direction for web pages: a large background photo or video fills the screen, with dark gradients for readability, faint guide lines and small markers laid over it, and headlines and buttons placed in a deliberate grid column rather than centered stacked sections. It also gives guidance on typography, transparent supporting cards, and slow, subtle motion. The skill is a style guide the agent applies while writing front-end code.

Great for

  • Designers or developers building a cinematic landing page or product hero section
  • Teams wanting a premium, image-dominant look instead of a conventional SaaS layout
  • Anyone who wants a consistent design direction for an agent-built website

Skip it if

  • Content-heavy sites or galleries that need dense information layouts, since the skill explicitly steers away from stacked sections and gallery layouts
  • Projects with strict brand guidelines that conflict with its restrained palette and overlay style, since the agent will impose its own visual system

Try asking

  • “Build a full-screen hero landing page for my architecture studio using a large background photo.”
  • “Redesign our product homepage with an image-first grid layout and a bottom-anchored headline and CTA.”
  • “Add a transparent testimonial box and faint animated guide lines over our hero image.”
Step-by-step guide: how to use Image-First Grid LayoutInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    image-first-grid-layout.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Supply your own high-quality landscape or architectural photo, since the style depends on a strong dominant image.
  • Specify your brand accent color so the agent keeps the single subtle accent within your palette.
  • Review the generated overlay darkness and text contrast for accessibility before publishing.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.