Integration Grid Hero
A hero grid that proves 'works with your stack' at a glance.
Turns your AI into a hero-section designer — inventories your real integrations, arranges them in a scannable logo grid that proves breadth without clutter, and pairs the grid with one headline and one call to action.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
Integration Grid Hero
When to use
- Your product connects to a dozen or more tools and the hero currently says "integrates with everything" with nothing to show for it
- A landing page for a platform, automation tool, or API product where visitors ask "does it work with what I already use?" before anything else
- A redesign where the hero is a generic product screenshot and the integration list is buried three screens down
- A partner or marketplace page that needs to show breadth of coverage without becoming a wall of logos
- A launch page where the integration set is the main selling point, ahead of features or pricing
Workflow
- Inventory the real integrations (input: your product docs + integration list → output: verified integration roster)
List only integrations that actually exist and work today — name, what it does in one line, and whether it is native, via API, or via a connector. Drop anything in beta unless you label it beta, and drop anything deprecated. A grid that shows a logo for an integration that does not work is a refund request waiting to happen. Sort the roster into tiers: the 6–10 integrations your buyers ask about most, then the rest. - Write the promise first (input: verified roster → output: headline + subhead + one CTA)
The grid proves; the headline sells. Write one headline naming the audience and the outcome ("Connect your whole stack in an afternoon"), one subhead naming the mechanism in plain words ("Native integrations, no code, no middleware"), and one call to action. The headline goes above or beside the grid, never inside it — the grid is evidence, not copy. If you cannot state the promise in one line, the grid cannot save the hero. - Lay out the grid (input: roster + promise → output: grid layout spec)
Place the top-tier integrations in the first two rows, largest and most legible, in the order buyers search for them — not alphabetical, not by partner size. Use a strict grid: equal tile sizes, consistent logo treatment (all monochrome, or all on identical light tiles), generous gutters. Cap the visible grid at 12–18 tiles; anything more becomes a searchable directory below the fold, not part of the hero. Every tile gets a text label under or beside the logo — logos alone fail for tools people do not recognize.
Template preview
Integration Grid Hero — Build Template
Fill this in before laying out the hero. Only integrations that work today go in the grid.
Promise
Headline (one line): {audience + outcome, e.g. "Connect your whole stack in an afternoon"}
Subhead (one line): {mechanism in plain words, e.g. "Native integrations, no code, no middleware"}
CTA: {one action, e.g. "Browse integrations"} → {destination}
Verified integration roster
Only real, working integrations. Mark beta where it applies.
Total integrations: {N} — Visible in hero grid: {12–18} — Rest go to: {directory / search page}
Grid layout
Columns: desktop {n} · tablet {n} · phone {n}
