Build the Interface

Building the CRM Interface

Now that your data model is solid, it's time to build the three views you'll use every day: the deal pipeline, contact pages, and the activity feed.

The Pipeline View

This is the heart of your CRM. Use this prompt:

Build a Kanban-style pipeline view at /pipeline that shows deals
as cards in columns by stage. Each column is a deal stage
(Lead, Qualified, Proposal, Negotiation, Closed Won, Closed Lost).

Each deal card shows: title, company name, deal value (formatted
as currency), contact name, and expected close date.

Add drag-and-drop to move deals between stages. When a deal is
dropped in a new column, update the stage via API.

Color-code the columns: blue for early stages, yellow for middle,
green for Closed Won, red for Closed Lost. Show a total value
per column at the top. Dark theme, responsive.

The pipeline view should feel instant. Drag a deal from "Proposal" to "Negotiation" and it should update immediately (optimistic UI), then save to the database in the background.

Contact Pages

Build the contact list and detail views:

Create a contacts page at /contacts with:
1. A searchable, sortable table of all contacts showing name,
   email, company, title, and last contacted date
2. Click a contact row to go to /contacts/[id] detail page
3. Detail page shows: contact info card, associated company,
   linked deals with current stages, and a timeline of all
   activities sorted by date (newest first)
4. "Add Activity" button on the detail page that opens a modal
   to log a call, email, meeting, or note
5. "Add Contact" button on the list page with a creation form

Make the table sortable by clicking column headers.
Add a search bar that filters by name, email, or company name.

Activity Feed

The activity feed is your team's shared memory:

Add a dashboard page at / that shows:
1. A summary bar: total contacts, active deals, total pipeline
   value, deals closing this month
2. Recent activity feed showing the last 20 activities across
   all contacts, with links to the related contact and deal
3. Upcoming tasks: activities with a dueDate in the future
   that haven't been completed

Each activity in the feed shows: type icon, subject, related
contact name, time ago, and a brief description preview.

Navigation

Make sure your sidebar or header navigation has links to Dashboard, Pipeline, Contacts, and Companies. The pipeline view is the primary view — make it the most prominent link.

After building these three views, spend a few minutes clicking through the app. Create a new contact, add a deal, drag it through the pipeline, log an activity. If any of these flows feel clunky, refine them with follow-up prompts before moving on.