FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Image-first page grid v1.0.0
Use this resource to design a landing page led by a large photograph
New
- 332 downloads
- 135 likes
- 119 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install image-first-grid-layoutWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a page around a full-bleed image, veiled with dark gradients so the text stays readable. It adds quiet grid rails, anchors the headline and call to action low in the viewport, and places a secondary box (quote, metric or proof) beside them. You get a calm, cinematic page that keeps the photo in front.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: the full design direction
- A visual target: full-bleed image, gradient washes, grid rails and corner markers
- Recommended patterns (bottom-anchored hero, translucent buttons, faint WebGL lines)
- Tuning knobs and a list of pitfalls to avoid
Good fit for
- Landing page for a venue, brand or product with strong photography
- Launch page or portfolio with a cinematic mood
- Reworking a bland centered hero into a more structured composition
Not for
- Image galleries or shops with many products to compare
- Pages heavy on text or tables
- Projects with no strong image to feature
Tags
- hero
- grid
- photography
- landing page
- design
About
You say
"Rebuild my landing page hero with the image-first-grid-layout skill: my site photo full-bleed, headline bottom left and a client quote on the right."
Skill published by MengTo under the MIT license.
Show moreShow less
Prerequisites
- You bring
- A good wide photograph and The headline, call to action and a quote or metric
How to use it
- Install the skill in your agent's skills folder.
- Give the agent your main image and the hero text.
- Ask it to tune overlay darkness and grid visibility.
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- SKILL.md4.5 KB
Origin and licence
Modified by PalateKit
- Author
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/image-first-grid-layout
- Licence
- MIT
Notice
Version modifiée de « image-first-grid-layout » (MengTo, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Do I need a specific photo?
You need a wide, strong image, ideally a landscape or architecture shot. Without a good image the effect is lost.
Are the WebGL effects required?
No. The animated lines are optional: remove them for a simpler, lighter page.