duvi.ai
Design analysis
A typographic introduction leads into a large visual showing a customer question, live inventory/product context, and an assistant response. It communicates the whole interaction rather than a single UI feature.
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/duvi/fdecc34f-2fb4-47cd-8615-09e917d211ca-1789884152-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duvi/fdecc34f-2fb4-47cd-8615-09e917d211ca-1789884106277-full.webp - Component on Kage: https://kage.design/component/duvi-feature-grid-3 ## Before you start Ask what the user's product, audience, and brand are, then apply these principles to that product rather than reproducing the reference. Design a dark feature band that introduces an outcome-oriented workflow. Use a two-line headline with the first line in off-white and the second in a muted gray, followed by a concise explanatory paragraph. Below or beside it, create a wide composite mockup: a light product/detail panel next to a dark assistant conversation panel. The product panel should use a soft neutral surface (#e8e5dc), dark type, a restrained product image placeholder, price/status metadata, and a clear action. The assistant panel should use #0d1011, thin separators, compact message bubbles, and a subtle send field. Keep alignment editorial, with generous negative space and a clear visual reading order. Include responsive stacking and accessible labels for every simulated control. Never use logos, product names, copy, illustrations, or imagery from the reference.
kage