Prompt Guide
The AI agent generates HubSpot UI extensions from your text prompts. The more specific and descriptive your prompt, the better the result. This guide covers techniques for writing effective prompts.
Be Specific
Section titled “Be Specific”Vague prompts produce generic results. Specific prompts produce exactly what you need.
-
Vague: “Make a chart”
-
Better: “Create a bar chart showing monthly revenue from the deal pipeline, with green bars and values displayed above each bar”
-
Vague: “Show contact info”
-
Better: “Display the contact’s first name, last name, email, and phone number in a two-column layout with labels on the left and values on the right”
Reference CRM Fields
Section titled “Reference CRM Fields”The agent knows your CRM schema because Palpaca fetches it during onboarding. Reference specific field names to get accurate data bindings:
- “Show the contact’s lifecycle_stage and lead_status as colored badges”
- “Display the deal’s amount, close_date, and deal_stage in a summary card”
- “List all associated_company contacts in a table”
Describe the Layout
Section titled “Describe the Layout”Tell the agent how elements should be arranged:
- “Put the title at the top, three metrics in a row below it, and a table at the bottom”
- “Use a two-column grid with the form on the left and a preview on the right”
- “Stack everything vertically with generous spacing between sections”
Prompt Templates
Section titled “Prompt Templates”Data Display Card
Section titled “Data Display Card”“Create a card that shows the current [object type]‘s [field1], [field2], and [field3]. Use a clean layout with labels on the left and values on the right. Add a header with the record name.”
Action Card
Section titled “Action Card”“Build a card with a form that lets users update the [field] on the current [object type]. Include a dropdown for selecting values, input validation, and a submit button that saves the changes.”
Dashboard Card
Section titled “Dashboard Card”“Design a summary card showing [metric1] and [metric2] as large numbers at the top, with a trend indicator for each. Add a bar chart below showing the last 6 months of data.”
Table Card
Section titled “Table Card”“Create a card that displays a table of [related records] with columns for [field1], [field2], and [field3]. Add sorting by clicking column headers and a search input above the table.”
- Start simple and iterate — you can always refine with follow-up prompts
- Mention component names from the gallery (like “use a StatisticsItem” or “use an Alert component”) to guide the agent toward specific UI patterns
- Ask for responsive layouts if your card needs to work in both sidebars and full-width tabs
- Specify colors, sizes, and spacing if the defaults do not match your needs