Kage Design logo kage
krea.ai
Krea 3 feature grid component

Design analysis

A comparison headline leads into three side-by-side processing panels, making relative latency and output quality easy to compare.

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/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389816-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389704928-full.webp
- Component on Kage: https://kage.design/component/krea-3-feature-grid-4

## Before you start
Ask what the user's product and brand are, then apply the following principles to their comparison section rather than copying this reference.

Build a comparison feature with a split heading row: a large two-line statement on the left and a concise explanatory paragraph on the right. Below, show three equal-width media panels with aligned top labels, soft blurred or placeholder states, and bottom metadata. Add a centered segmented control over the panels for modes such as original, faster, and highest quality. Use white background, #f5f5f2 panel surfaces, 1px #e7e7e3 borders, 14–16px radius, and small 12px labels. Keep columns synchronized so users can compare the same input; stack them into a swipeable carousel on mobile.

Never:
- use the reference logo or product name
- copy competitor names, figures, or copy
- reuse its imagery or illustration
- reproduce the exact layout or visual assets

More components