30 Claude Prompts That Build a CRM

You are a front-end engineer who builds lightweight internal CRM tools. <context> I need a working contact manager as one self-contained HTML file (HTML, CSS, and vanilla JS inline) that saves to localStorage, so I can open it in a browser and use it as a previewable artifact with no backend. </context> <inputs> - Team / use case: [WHO USES IT, E.G. SOLO CONSULTANT, 3-PERSON SALES TEAM] - Fields I need per contact: [NAME, COMPANY, EMAIL, PHONE, STATUS, OWNER, TAGS, NOTES] - Statuses / stages: [E.G. LEAD, PROSPECT, CUSTOMER, CHURNED] - Must-have actions: [ADD, EDIT, DELETE, SEARCH, FILTER, EXPORT] </inputs> <task> Build a contact manager with: a top bar with a search box and an "Add contact" button, a sortable/filterable table of contacts, a modal form to add and edit a contact with validation, delete with confirm, filter chips by status and tag, a live count, and an "Export CSV" button. Persist everything to localStorage and seed 6 realistic sample contacts on first load. </task> <constraints> - One self-contained HTML file, no external libraries or CDNs; vanilla JS only. - Data persists across refreshes via localStorage; valid, well-commented code. - Accessible form labels, keyboard-usable modal, responsive layout. </constraints> <format> Return the full HTML file in a code block as a runnable artifact, then a short note on how to add a new field and where the data is stored. </format>

You are a front-end engineer building account-based CRM views. <context> I need a company (account) directory as one self-contained HTML file with inline CSS and vanilla JS that persists to localStorage, previewable instantly as an artifact, where each company can hold multiple linked contacts. </context> <inputs> - Company fields: [NAME, INDUSTRY, SIZE, WEBSITE, OWNER, ACCOUNT STATUS, ANNUAL VALUE] - Contact fields nested under a company: [NAME, ROLE, EMAIL, PHONE] - Account tiers: [E.G. STRATEGIC, MID-MARKET, SMB] - Actions I need: [ADD COMPANY, ADD CONTACT TO COMPANY, SEARCH, FILTER BY TIER] </inputs> <task> Build an account directory with a searchable list of company cards showing key fields and a contact count, an expandable panel per company listing its contacts, a modal to add/edit a company, and a modal to add a contact under a specific company. Include tier filter chips and a total-account-value summary at the top. Seed 4 sample companies with 2-3 contacts each. </task> <constraints> - One self-contained HTML file, vanilla JS, no CDNs; localStorage persistence. - Clean relational structure (company object holds a contacts array); commented code. - Responsive cards and accessible modals. </constraints> <format> Return the full HTML as a runnable artifact, then explain the company-to-contacts data shape so I can extend it. </format>

You are a data engineer who designs clean, normalized CRM databases. <context> Before I build anything, I need a solid relational data schema for contacts and companies that I can hand to any tool (Postgres, Airtable, a spreadsheet), delivered as a ready-to-use artifact. </context> <inputs> - What I sell / business type: [DESCRIBE] - Entities I care about: [CONTACTS, COMPANIES, DEALS, ACTIVITIES, USERS] - Reports I will eventually need: [E.G. PIPELINE BY OWNER, DEALS BY STAGE] - Preferred target: [POSTGRES SQL / AIRTABLE / GENERIC] </inputs> <task> Design the schema: for each table list columns with types, primary keys, and foreign keys, and explain the relationships (a company has many contacts, a contact has many activities, a deal links a contact and a company). Provide the CREATE TABLE statements (or an equivalent field table if I chose Airtable), sensible enums for statuses and stages, and 3 sample INSERT rows per table. </task> <constraints> - Valid SQL that runs as-is (or a clean field-by-field table for Airtable). - Normalized, with clear FK constraints and indexes on lookup columns. - Comment each table's purpose; no orphan columns. </constraints> <format> Return the schema as a code block artifact, then a short entity-relationship summary in plain English. </format>

You are a data-quality engineer who cleans messy CRM imports. <context> I have an export of contacts to load into my CRM and it is messy. I need a self-contained HTML/JS tool that takes pasted CSV, cleans and dedupes it, and lets me download a clean CSV, usable instantly as an artifact. </context> <inputs> - Columns in my file: [E.G. NAME, EMAIL, PHONE, COMPANY] - Cleaning rules: [TRIM WHITESPACE, LOWERCASE EMAILS, FORMAT PHONES, TITLE-CASE NAMES] - Dedupe key: [EMAIL / EMAIL+NAME] - What to flag vs auto-fix: [DESCRIBE] </inputs> <task> Build a tool with a paste-CSV textarea, a "Clean" button, and a results table showing cleaned rows with a badge for each fix applied and each duplicate merged. Show a summary (rows in, duplicates removed, fields fixed, rows flagged for review) and a "Download clean CSV" button. Parse CSV in vanilla JS, handle quoted fields and missing values gracefully. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries. - Robust CSV parsing (commas inside quotes, trailing newlines); never crash on bad input. - Show exactly what changed per row; commented code. </constraints> <format> Return the full HTML as a runnable artifact, then note the cleaning rules applied and how to add a new rule. </format>

You are a UX-minded front-end engineer building CRM detail screens. <context> I want a single-contact 360 profile view as one self-contained HTML file with inline CSS and vanilla JS, previewable as an artifact, that pulls together everything about one person on one screen. </context> <inputs> - Contact fields to show: [NAME, TITLE, COMPANY, EMAIL, PHONE, OWNER, STATUS, TAGS] - Panels I want: [OPEN DEALS, RECENT ACTIVITY, NOTES, NEXT STEP] - Sample person to render: [OR SAY "MAKE ONE UP"] </inputs> <task> Build a detail view with a header card (avatar initials, name, title, company, status badge, quick email/call buttons), a left column with contact details and tags, and a right column with an open-deals list, a reverse-chronological activity timeline, a pinned "next step" with a due date, and a quick-add note box that prepends to the timeline. Wire the note box in JS so adding a note updates the timeline live. Seed realistic sample data. </task> <constraints> - One self-contained HTML file, vanilla JS, no CDNs. - Clean two-column responsive layout that stacks on mobile; accessible buttons. - Commented, tidy code; timeline sorted newest-first. </constraints> <format> Return the full HTML as a runnable artifact, then explain how to bind it to real data from a contacts array. </format>

You are a front-end engineer who builds sales pipeline tools. <context> I need a Kanban deal pipeline as one self-contained HTML file with inline CSS and vanilla JS (HTML5 drag-and-drop) that saves to localStorage, previewable and usable instantly as an artifact. </context> <inputs> - Pipeline stages (left to right): [E.G. NEW, QUALIFIED, PROPOSAL, NEGOTIATION, WON, LOST] - Deal card fields: [DEAL NAME, COMPANY, VALUE, OWNER, CLOSE DATE] - What I want to see per column: [DEAL COUNT AND TOTAL VALUE] </inputs> <task> Build a board with one column per stage, deal cards I can drag between columns, per-column headers showing count and summed value, an "Add deal" button opening a modal form, click-to-edit and delete on a card, and a total pipeline value in the header. Persist card positions and edits to localStorage. Seed 8 sample deals spread across stages. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries; native drag-and-drop. - State (including column) survives refresh via localStorage; commented code. - Cards keyboard-movable via a small stage dropdown fallback; accessible. </constraints> <format> Return the full HTML as a runnable artifact, then explain the drag-and-drop and how to rename or add a stage. </format>

You are a revenue-operations consultant who designs pipeline definitions. <context> I need a rigorous pipeline-stage definition I can load into any CRM, delivered as a ready-to-use reference document plus a data schema for the deals table. </context> <inputs> - What I sell and typical sales cycle: [DESCRIBE] - Rough stages I use today: [LIST] - Average deal size and close rate if known: [OPTIONAL] </inputs> <task> Define a clean pipeline: for each stage give a name, a one-line definition, the objective, the entry and exit criteria, a default win-probability percentage, and the key activity that moves a deal forward. Then provide a deals table schema (columns, types, FKs to contacts/companies, a stage enum, value, close_date, probability) as SQL, plus a small table mapping each stage to its probability for weighted forecasting. </task> <constraints> - Objective, testable exit criteria per stage (no vague "showed interest"). - Valid SQL for the deals table; probabilities sum-logic explained. - Concise; no filler. </constraints> <format> Return a stage-definition table and the SQL schema as artifacts, then a short note on keeping stages honest. </format>

You are a sales-analytics engineer who builds forecasting tools. <context> I need a weighted pipeline forecast calculator as one self-contained HTML file with inline CSS and vanilla JS, previewable as an artifact, that turns a list of deals into an expected-revenue forecast. </context> <inputs> - Deal inputs: [DEAL NAME, VALUE, STAGE, EXPECTED CLOSE MONTH] - Stage-to-probability mapping: [E.G. QUALIFIED 20%, PROPOSAL 50%, NEGOTIATION 80%] - Quota / target to compare against: [NUMBER] </inputs> <task> Build a tool with an editable deals table (add/remove rows), a stage dropdown per deal that auto-fills probability, a computed weighted value per deal (value x probability), a totals row for raw and weighted pipeline, a by-month forecast breakdown, and a target-vs-forecast gap indicator with a simple bar. Recalculate live on every edit. Seed 6 sample deals. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries. - All math correct and live; currency formatted; no rounding errors shown. - Commented code; accessible table inputs. </constraints> <format> Return the full HTML as a runnable artifact, then explain the weighting formula and how to change the probability map. </format>

You are a front-end engineer building CRM deal-detail screens. <context> I need a single-deal detail view as one self-contained HTML file with inline CSS and vanilla JS, previewable as an artifact, that shows everything about one opportunity and its next actions. </context> <inputs> - Deal fields: [NAME, COMPANY, VALUE, STAGE, OWNER, CLOSE DATE, PROBABILITY] - Panels: [CONTACTS ON THE DEAL, ACTIVITY HISTORY, NEXT STEPS / TASKS, NOTES] - Sample deal to render: [OR "MAKE ONE UP"] </inputs> <task> Build a deal view with a header (deal name, value, stage badge, probability, close date, a stage-advance button), a left panel of associated contacts with roles, a center panel with a checkable next-steps task list (add task with due date, mark complete) and a notes box, and a right panel with an activity timeline. Wire tasks and notes in JS so adding one updates the view live. Seed realistic data. </task> <constraints> - One self-contained HTML file, vanilla JS, no CDNs. - Completed tasks visibly struck through; overdue due dates highlighted. - Responsive layout; accessible controls; commented code. </constraints> <format> Return the full HTML as a runnable artifact, then explain the data shape linking a deal to contacts, tasks, and activities. </format>

You are a marketing-ops engineer who builds lead-scoring models. <context> I need a lead-scoring tool as one self-contained HTML file with inline CSS and vanilla JS, previewable as an artifact, that scores and ranks leads by fit and engagement. </context> <inputs> - Fit attributes and points: [E.G. TARGET INDUSTRY +20, COMPANY SIZE 50-500 +15, DECISION-MAKER TITLE +25] - Engagement signals and points: [E.G. OPENED EMAIL +5, BOOKED DEMO +40, VISITED PRICING +15] - Grade thresholds: [E.G. A >=80, B 60-79, C <60] </inputs> <task> Build a tool with an editable leads table where each lead's attributes and signals are toggled or selected, a live computed score and letter grade per lead, color-coded grade badges, sorting by score, and a summary of how many leads fall in each grade. Include an editable scoring-rules panel so I can tune point values and see scores recompute live. Seed 6 sample leads. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries. - Scores recompute instantly when rules or lead data change; math correct. - Commented code; accessible controls and clear color contrast on badges. </constraints> <format> Return the full HTML as a runnable artifact, then explain the scoring model and how to add a new signal. </format>

You are a front-end engineer who builds CRM activity feeds. <context> I need an activity timeline as one self-contained HTML file with inline CSS and vanilla JS that persists to localStorage, previewable and usable as an artifact, where I log every touchpoint with a contact or deal. </context> <inputs> - Activity types: [CALL, EMAIL, MEETING, NOTE, TASK] - Fields per activity: [TYPE, WHO (CONTACT/COMPANY), SUBJECT, DATE/TIME, OUTCOME, OWNER] - Filters I want: [BY TYPE, BY CONTACT, BY DATE RANGE] </inputs> <task> Build a timeline with a quick-add bar (type selector, contact, subject, outcome), a reverse-chronological feed grouped by day with a distinct icon and color per activity type, filter chips by type and a contact filter, an inline edit and delete, and a running count of activities this week. Persist to localStorage and seed 8 realistic recent activities. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries; localStorage persistence. - Feed always sorted newest-first and grouped by day; commented code. - Accessible controls; responsive layout. </constraints> <format> Return the full HTML as a runnable artifact, then explain the activity data shape and how to add a new activity type. </format>

You are a sales-tooling engineer building fast activity-capture screens. <context> I need a call and meeting logger as one self-contained HTML file with inline CSS and vanilla JS that saves to localStorage, previewable as an artifact, optimized for logging a conversation in under 20 seconds right after it ends. </context> <inputs> - Contact list to pick from: [OR SAY "SEED SAMPLES"] - Outcome options: [E.G. CONNECTED, LEFT VOICEMAIL, NO ANSWER, BOOKED MEETING] - Fields: [CONTACT, TYPE (CALL/MEETING), DURATION, OUTCOME, NEXT STEP, DATE] </inputs> <task> Build a logger with a compact form (contact dropdown, call/meeting toggle, outcome buttons, duration, a next-step field with a due date, and notes), a "Log it" button that saves and clears the form, and a table of recent logged interactions with filters by contact and outcome. Show today's call count and connect rate. Persist to localStorage; seed sample contacts and a few logged calls. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries. - Minimal clicks to log; outcome as one-tap buttons; localStorage persistence. - Correct connect-rate math; accessible form; commented code. </constraints> <format> Return the full HTML as a runnable artifact, then explain how the connect rate is computed and how to add an outcome. </format>

You are a front-end engineer building note-taking tools for salespeople. <context> I need a tagged note-capture tool as one self-contained HTML file with inline CSS and vanilla JS that persists to localStorage, previewable as an artifact, for jotting deal and contact notes I can find again fast. </context> <inputs> - What I attach notes to: [CONTACT / COMPANY / DEAL] - Tags I use: [E.G. OBJECTION, BUDGET, CHAMPION, RISK, FOLLOW-UP] - Search needs: [FULL-TEXT, BY TAG, BY LINKED RECORD] </inputs> <task> Build a tool with a note composer (linked record selector, a textarea, and clickable tag chips), a searchable note list showing snippet, tags, linked record, and timestamp, full-text search plus tag-filter chips, pin-important, and edit/delete. Highlight matching text in search results. Persist to localStorage and seed 6 sample notes with varied tags. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries; localStorage persistence. - Search is case-insensitive and highlights matches; commented code. - Accessible tag toggles and search box; responsive layout. </constraints> <format> Return the full HTML as a runnable artifact, then explain the tag/search model and how to add a tag. </format>

You are a front-end engineer building CRM task management. <context> I need a follow-up task list as one self-contained HTML file with inline CSS and vanilla JS that persists to localStorage, previewable as an artifact, tying every task to a contact or deal with a due date. </context> <inputs> - Task fields: [TITLE, LINKED CONTACT/DEAL, DUE DATE, PRIORITY, OWNER, STATUS] - Views I want: [OVERDUE, TODAY, THIS WEEK, DONE] - Priorities: [HIGH, MEDIUM, LOW] </inputs> <task> Build a task manager with an add-task form, tabs for Overdue / Today / This Week / Upcoming / Done, tasks sorted by due date within each tab, a priority badge and linked-record label per task, check-to-complete, and a header showing overdue and due-today counts. Overdue tasks styled clearly. Persist to localStorage and seed sample tasks across the date ranges. </task> <constraints> - One self-contained HTML file, vanilla JS, no libraries; localStorage persistence. - Correct date-bucketing logic (uses today's date at load); commented code. - Accessible checkboxes and tabs; responsive layout. </constraints> <format> Return the full HTML as a runnable artifact, then explain the date-bucketing logic and how to add a priority level. </format>

You are a data engineer designing an activity-tracking data model. <context> I need a clean schema for logging all interactions (calls, emails, meetings, notes, tasks) against contacts, companies, and deals, delivered as a ready-to-use artifact I can implement anywhere. </context> <inputs> - Interaction types to support: [CALL, EMAIL, MEETING, NOTE, TASK] - What each links to: [CONTACT, COMPANY, DEAL, USER] - Reports I need: [ACTIVITIES PER REP PER WEEK, TOUCHES PER DEAL, LAST-CONTACTED] </inputs> <task> Design an activities table (with type enum, polymorphic or explicit links to contact/company/deal, owner, subject, outcome, occurred_at, created_at) plus any supporting tables, using valid SQL with FKs and indexes on the columns the reports need. Include a view or query for "last contacted per contact" and "activity count per rep this week," and 4 sample INSERT rows covering different types. </task> <constraints> - Valid SQL that runs as-is; clear FK constraints and useful indexes. - Explain the trade-off if you chose polymorphic links vs separate columns. - Commented; no orphan columns. </constraints> <format> Return the schema and the two report queries as code-block artifacts, then a short note on how to extend it with a new interaction type. </format>