Exercise 2: Vibe Code an Account Pipeline Health Widget

In this exercise, you'll use Agentforce Vibes to build a small Lightning Web Component for an Account record page. You'll first ask Vibes to add a calculated Account field, then ask it to build a compact visual health card that reads that field from the current Account record.

Scenario

Sellers and partner managers need a quick way to judge whether an Account is worth attention. The score uses simple Account data like Type, Annual Revenue, Employees, and Rating. The Lightning Web Component turns that score into a visual health badge.

This is a clean two-step build: first metadata, then UI. It gives you a visible payoff without needing Apex.

Vibe Coding Mindset

Good vibe coding is a loop:

1. Frame the outcome. Tell the agent what business result you want.
2. Build a thin slice. Start with something small enough to deploy and preview.
3. Watch the agent use context. Notice how it uses metadata, files, MCP servers, and skills while it works.
4. Test from evidence. Use deployment output and Component Preview to decide what to ask next.
5. Iterate. Make one focused improvement at a time.

The prompts in this exercise are intentionally specific. You are still vibe coding: after each build, deploy the change, preview the component, and use what you see to decide the next prompt.

Step 1: Create the Formula Field

1. Open the Agentforce Vibes Sidebar.

2. Use this prompt to create the Account formula field:

   Create a Number formula field on Account called Pipeline Health Score with API name Pipeline_Health_Score__c.
   
   The formula should calculate a 0-100 score:
   - Partner accounts start at 70
   - Customer accounts start at 60
   - Prospect accounts start at 45
   - All other accounts start at 50
   - Add 15 if AnnualRevenue is greater than 25000000
   - Add 10 if NumberOfEmployees is greater than 500
   - Add 10 if Rating is Hot
   - Subtract 20 if Rating is Cold
   - Cap the score between 0 and 100
   
   Use Salesforce formula syntax similar to MIN(100, MAX(0, ...)).
   
   Add field-level read access for this field to the Partner Management permission set:
   force-app/main/default/permissionsets/Partner_Management.permissionset-meta.xml
   
   Create or update the needed Salesforce metadata files in this project.

   

3. As Vibes works, notice how it combines the LLM, MCP tools, and Salesforce skills to understand your project and org metadata.

   

4. Ask Vibes to deploy the formula field before you build the component.

   Vibes may offer to deploy automatically. If it does, approve the deployment command. If it does not, use this prompt:

   Deploy the Account Pipeline Health Score field and Partner Management permission set changes to my target org.

5. After deployment completes, you should see a deployment confirmation.

   

Step 2: Build the Account Record Page LWC

1. Use this prompt to build the Lightning Web Component:

   Create a Lightning Web Component for the Account record page called accountPipelineHealth.
   
   It should use Lightning Data Service to read the current Account record and display:
   - Account Name
   - Type
   - Rating
   - Pipeline_Health_Score__c
   
   Render the score as a compact Sales Cloud health card:
   - 80-100: Strong
   - 60-79: Healthy
   - 40-59: Needs Attention
   - Below 40: At Risk
   
   Use SLDS styling. Show the score as a progress bar or large badge. Include a short helper message based on the score.
   
   If Pipeline_Health_Score__c is blank, show "No pipeline health score available."
   
   Make the component available on Account record pages.

2. Ask Vibes to deploy the LWC before you preview it.

   Vibes may deploy automatically after it creates the component. If it does not, use this prompt:

   Deploy the accountPipelineHealth Lightning Web Component to my target org.

3. After deployment completes, you should see a deployment confirmation.

   

Step 3: Preview the LWC

1. Expand the Component Preview list above the chat input.

2. Select Preview next to the accountPipelineHealth.html file.

   

3. If prompted, press Enter to approve the component preview.

4. If the component does not load or the preview does not show Account data, ask Vibes to make the component preview-friendly.

   Component Preview does not automatically provide the same recordId context as an Account record page. For preview testing, Vibes may need to hard-code a valid Account Id into the component as a fallback. Keep that fallback scoped to preview testing so the component still works on real Account record pages:

   Can you update the LWC JavaScript so the component can use a valid Account Id when running in Component Preview?
   
   Keep the component compatible with Account record pages by using the real recordId when Salesforce provides one. Only use a hard-coded valid Account Id as a fallback for live preview testing.

5. Deploy the preview fix if Vibes changes the component.

   Deploy the latest accountPipelineHealth component changes to my target org.

6. Run Component Preview again and review the health card.

   The preview should show a compact Account health card with a score, status label, and helper message.

   

Step 4: Iterate from the Preview

1. Review the widget and ask yourself:

   • Does the score display clearly?
   • Does the health label match the score range?
   • Does the empty state explain what is missing?
   • Does the styling feel like a compact Sales Cloud card?

2. Ask Vibes for one small improvement based on what you saw.

   Review the current accountPipelineHealth component and recommend one small improvement that would make the health card clearer for sellers.
   
   Keep the improvement small enough to build, deploy, and preview quickly. Explain the change before editing files.

3. If you like the recommendation, ask Vibes to build it.

   Build that improvement for accountPipelineHealth. Keep the change focused and update only the files needed.

4. Deploy the update.

   Deploy the latest accountPipelineHealth changes to my target org.

5. Run Component Preview again and confirm the improvement.

You do not need to open the component in the Salesforce org for this exercise. The goal is to practice the build, deploy, preview, and iterate loop inside Agentforce Vibes.

Summary

• You created an Account formula field that calculates a Pipeline Health Score.
• You updated the Partner Management permission set with read access to the new field.
• You built an Account record page Lightning Web Component with Lightning Data Service.
• You deployed after each build and used Component Preview to test the UI.

You now have a working pattern for building a focused Lightning component with Agentforce Vibes: create the metadata, build the UI, deploy, preview, and iterate.