# 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. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/crm-contact-profile/ ## 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. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the contact list and the profile card. Prompt: ```text 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. ## Assets ### prompt.md — The full prompt. ~~~~ # CRM contact profile Copy this prompt into Claude, Cursor or Lovable. ```text 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. ``` ~~~~ ### 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 CRM contact profile

Contacts

Dana WhitfieldOrbit Retail
Priya SharmaAcme Corp - Champion
Marco BelliniTidal Foods
Lena OkaforHelio Bank
Tom ReyesPine & Co

Priya Sharma

VP Operations - Acme Corp

CustomerRenewal Q1
Opened pricing proposalToday, 9:42 - viewed 3 times
Call: renewal termsYesterday - 28 min with Sam
Signed 12-month contractNov 2025 - $48,000
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "CRM contact profile" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/crm-contact-profile/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the health ring → Check the timeline → 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 "CRM contact profile" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/crm-contact-profile/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the health ring → Check the timeline → 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 "CRM contact profile" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/crm-contact-profile/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the health ring → Check the timeline → 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.