CRM contact profile
A teal CRM contact screen: a profile slides in, a health-score ring fills to 82 and the activity timeline stacks up.
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 calm customer profile page with a contact list on the left. Priya Sharma opens with a ring that fills to a health score of 82, three timeline events rise in one by one and a “Next step” button appears. 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 contact list and the profile card.
Build a single-file HTML CRM contact profile screen, 1280x720, soft teal background #eef6f5, ink #10302d, accent teal #14b8a6, indigo #6366f1. White cards with 22px radius and a soft teal shadow. System fonts, no libraries. Left card "Contacts": five rows (coloured circle avatar, name, company line). The second row, "Priya Sharma - Acme Corp - Champion", is the selected one and gets a pale teal background. Right card (profile): large gradient avatar, name "Priya Sharma", subtitle "VP Operations - Acme Corp", two pills (green "Customer", indigo "Renewal Q1"). On the right a 104px health score ring (SVG circle, stroke-dasharray 289) with a number in the centre that counts up to 82 using a CSS @property integer animation. Below, a vertical timeline with a teal line and dot markers: "Opened pricing proposal", "Call: renewal terms", "Signed 12-month contract", each with a small grey detail line. Bottom right: a dark rounded button "Next step: send renewal quote". Motion (8 second loop): the profile card slides in from the right, the ring fills and the number counts, timeline events fade up one after another, the Next step button scales in last. Everything fades out at the end and restarts. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the health ring
It should fill to 82 as the number counts up.
-
3
Check the timeline
Three events should appear one at a time.
Done when You can see it working in the browser.
-
4
Make it real
Load contacts and events from your CRM instead of the sample text.
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.