koiscribe.com
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.
kage