# 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. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/customer-support-inbox/ ## 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. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the inbox and the conversation pane. Prompt: ```text 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. ## Assets ### prompt.md — The full prompt. ~~~~ # Customer support inbox Copy this prompt into Claude, Cursor or Lovable. ```text 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. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Customer support inbox

Inbox open

Refund for duplicate chargeDana W. - 4 min ago

Can't export invoices to CSVPriya S. - 12 min ago

How do I add a teammate?Marco B. - 20 min ago

Feature request: dark modeLena O. - 1 h ago

Can't export invoices to CSV OpenSolved

Hi team, the Export CSV button on the invoices page just spins and nothing downloads. I need this for my accountant today. Thanks!

AI suggested reply

Thanks Priya, sorry about that. We found a bug with very large date ranges and shipped a fix just now. Please refresh and try again, and your export will download in a few seconds.

Send reply

``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Customer support inbox" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/customer-support-inbox/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the reply flow → Check the status → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Customer support inbox" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/customer-support-inbox/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the reply flow → Check the status → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Customer support inbox" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/customer-support-inbox/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the reply flow → Check the status → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.