Build a HubSpot CMS theme with AI: theme, pillar page and blog module

Create a basic HubSpot CMS theme for [COMPANY NAME], [ONE-LINE DESCRIPTION, e.g. a B2B SaaS company].

FIRST
Inspect the project and follow its supported HubSpot development approach and conventions. If empty, propose the structure first. Do not assume React or TypeScript is appropriate for every theme file. Consult current official HubSpot documentation where needed.

COMPANY
[COMPANY NAME] helps [AUDIENCE] [WHAT YOU HELP THEM DO].
Promise: [ONE-SENTENCE PROMISE].
Headline: [HOMEPAGE HEADLINE].
Primary CTA: [PRIMARY CTA, e.g. Book a demo].
Secondary CTA: [SECONDARY CTA, e.g. See how it works].

DESIGN
[THREE OR FOUR WORDS FOR THE FEEL, e.g. Clean, calm, practical, professional].
Background [HEX]; cards [HEX]; text [HEX]; primary buttons and links [HEX]; accent [HEX]; borders [HEX].
[FONT] with a sans-serif fallback. Generous spacing, [CORNER STYLE, e.g. gently rounded] cards and buttons, maximum content width around [WIDTH, e.g. 1,200px]. Responsive layouts, readable text, accessible contrast, visible keyboard focus. Avoid distracting decorative animations.

BUILD NOW
Create reusable styles, appropriate editable theme settings, a simple header and footer, and a minimal homepage template for a later blog-module demonstration. Keep it small and easy to explain. Use clearly marked placeholder copy where real copy is missing. Do not invent customer logos, testimonials, statistics, or results.

LATER — DO NOT BUILD YET
A reusable pillar-page template and a homepage recent-blog-posts module.

HANDOFF
Run available checks. Explain what was created, what can be edited, and how to preview it. Flag remaining issues. Do not expose credentials or commit authentication files. Do not upload, deploy, or publish in this step.

Create a reusable HubSpot CMS pillar-page template inside the [COMPANY NAME] theme we just built.

FIRST
Inspect the theme. Reuse its styles, components, conventions, and supported development approach. Consult current official HubSpot documentation where needed.

CONTEXT
[COMPANY NAME] is [ONE-LINE DESCRIPTION].
Demo topic: [PILLAR TOPIC]. This is illustrative, not a keyword opportunity validated by research.
Example title: [EXAMPLE TITLE, e.g. The Complete Guide to …].
Audience: [AUDIENCE].
Purpose: [WHAT THE READER SHOULD BE ABLE TO DO AFTER READING].

LAYOUT
Include breadcrumbs; one H1 and introduction; optional author and updated date; key takeaways; accessible table of contents linked to section anchors; editable main content with logical H2 and H3 headings; space for illustrations, examples, and checklists; editable FAQs; related resources; and a relevant [PRIMARY CTA] CTA.

EXAMPLE SECTIONS
[5–7 SECTION HEADINGS FOR THE DEMO TOPIC, e.g. What is …? / How it works / Who owns what / Measuring progress / Common mistakes]
Frequently asked questions.

EDITING AND ACCESSIBILITY
Use HubSpot-supported editing features. Make the template reusable for other topics rather than hardcoding the example throughout. Keep implementation minimal. Use concise placeholder copy. Do not invent statistics, sources, quotes, or customer results. Use semantic HTML, descriptive links, logical headings, keyboard-accessible controls, and readable mobile layouts. Keep important content in the rendered page. Sticky navigation must not obscure headings.

SEARCH
Use HubSpot's existing facilities for editable page titles and meta descriptions. Do not duplicate metadata or structured data already supplied. Do not claim the template, FAQs, or schema guarantees rankings or inclusion in AI answers.

HANDOFF
Run available checks. Explain what was created, what a marketer can edit, and how to preview. Flag remaining issues. Do not upload, deploy, or publish in this step.

Create a reusable HubSpot CMS module displaying recent blog posts on the [COMPANY NAME] homepage.

FIRST
Inspect the theme and follow its conventions. Use current official HubSpot documentation for unfamiliar features and the appropriate supported module approach for this project.

DESIGN
Match the theme's typography, colors, spacing, and card styling. Use responsive desktop and mobile layouts.

EDITOR CONTROLS
Editable section heading, blog selection, and a sensible bounded number of posts to display.

POST CARDS
Use the selected blog's actual recent posts. Show featured image when available, title, short plain-text excerpt, and descriptive article link. Handle missing images, long titles, and empty blogs gracefully. Use semantic markup and visible keyboard focus. Avoid unnecessary dependencies.

DEMO CONTENT
If no posts exist, provide a helpful empty state. If sample cards are needed, add explicit demo mode, clearly label sample content, and leave demo mode off by default.

CONSISTENCY
Keep field definitions and rendering consistent. Follow existing theme patterns. Keep the module simple and reusable.

HANDOFF
Run available checks. Explain how to add the module to the homepage and change its settings. Describe desktop and mobile preview. Flag remaining issues. Do not upload, deploy, or publish in this step.