Kage Design logo kage
koiscribe.com
Koi feature grid component

Design analysis

A shortcut-oriented section explains a file gesture through a large desktop visual, then uses a compact four-item capability row to broaden the use case.

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/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792649021-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792648920300-full.webp
- Component on Kage: https://kage.design/component/koi-feature-grid-6

## Before you start
Ask what desktop gesture, shortcut, or direct-manipulation action is central to the user's product. Apply these interaction principles to an original implementation.

Build a dark feature band with a centered eyebrow and a bold action-oriented headline. Explain the gesture in a concise paragraph and show a large rounded desktop mockup beneath, with a contextual radial menu or overlay positioned near the action target. The visual should use a deep blue-to-purple desktop background, dark chrome, soft inset shadows, and small floating labels. Under the visual, add four evenly spaced capability summaries with tiny icons. Make the interaction hint clearly supplemental: it should not cover the focal content. Support keyboard navigation and offer an accessible text alternative for users who cannot perform the gesture.

Never: copy logos, product names, copy, illustrations, or imagery from the reference.

More components