Customer support inbox
A two-pane support inbox: a ticket opens, an AI suggested reply appears, gets sent and the ticket flips to Solved while the open count drops.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A helpdesk screen with the ticket list left and the conversation right. A typing indicator pulses, an “AI suggested reply” tag shows, the reply is sent, the status pill changes from Open to Solved and the counter goes from 12 to 11. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the inbox and the conversation pane.
Create a single-file HTML customer support inbox, 1280x720, light grey background #f4f5f8, ink #1a1d29, accent blue #4f6bff. White rounded panels (22px) with soft shadows. System fonts, no libraries. Left panel: heading "Inbox" with an open ticket counter, then five ticket rows (subject, customer and time, blue unread dot on the first three). The second ticket "Can't export invoices to CSV" is selected with a pale blue background. Right panel: the ticket title with a yellow "Open" status pill, the customer message in a grey bubble, then a reply bubble in blue aligned right, and a dark "Send reply" button bottom right. Motion (8 second loop): the customer bubble fades up, a three dot typing indicator bounces, a small "AI suggested reply" tag appears, then the blue reply bubble rises in. The Send button presses (scale .92). Then the status pill cross-fades from yellow Open to green Solved and the inbox counter changes from 12 to 11 (CSS @property integer). Fade everything out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the reply flow
Typing dots, the AI tag, then the blue reply should appear.
-
3
Check the status
The pill should flip to Solved and the count should drop to 11.
Done when You can see it working in the browser.
-
4
Make it real
Wire the reply box and status to your helpdesk data.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.