Kage Design logo kage
agentcraft.ai
Agent Craft gallery component

Design analysis

A gallery headline frames three content preview cards with media thumbnails, captions, author details, and small carousel controls.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/agent-craft/d8105fc6-c65e-46ba-b702-5f209216873d-1791957791-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/agent-craft/d8105fc6-c65e-46ba-b702-5f209216873d-1791957724400-full.webp
- Component on Kage: https://kage.design/component/agent-craft-gallery

## Before you start
Ask what the user's product and brand are, then apply these principles to that product rather than copying the reference.

Build an examples gallery with a centered serif heading around 38–44px and a muted subtitle. Show three equal preview cards in a horizontal row: each has a media thumbnail with a platform/category chip and play affordance, then a white caption area with excerpt, avatar/name/date, and a quiet source link. Use white cards (#fff), 12–16px radius, subtle #e7e7e9 border, soft shadow, and a neutral background (#fafafd). Add compact previous/next controls below or beside the cards; make the carousel keyboard accessible, swipeable, and horizontally scrollable on mobile. Keep media ratios consistent.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never use copied social posts or autoplay sound; use placeholders or user-provided content.

More components