Kage Design logo kage
agentcraft.ai
Agent Craft stats component

Design analysis

A section heading introduces four clean metric cards, followed by a small source note that grounds the numbers.

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-1791957789-3.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-stats

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

Create a metrics section with a small green uppercase eyebrow and an editorial heading around 36–44px. Arrange four equal cards in a row inside a max-width container; each card should have a muted category label, optional small capsule, oversized value, green change indicator, and concise comparison text. Use white cards (#ffffff) on a soft gray background (#f8f8fa), 14–18px radius, very subtle shadow or border (#eeeeef), 24px internal padding, and 16px sans-serif body text. Add a low-emphasis explanatory/source note beneath the cards. On mobile, use a two-column grid or vertical stack while preserving the visual hierarchy.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never invent unverifiable performance data; make values configurable.

More components