--- title: AI Modules Maker --- AI Modules Maker [Features](https://hstest.developmentpreviews.com/module-maker-app#features) [How it Works](https://hstest.developmentpreviews.com/module-maker-app#how-it-works) [Pricing](https://hstest.developmentpreviews.com/module-maker-app#pricing) [FAQ](https://hstest.developmentpreviews.com/module-maker-app#faq) Built for HubSpot CMS # Describe a HubSpot Module. Get It Built. Type what you want in plain English — or attach a screenshot — and get a complete, responsive, fully editable HubSpot module pushed straight to your Design Manager in minutes. See How It Works 100,000 free tokens every month · No credit card needed **Real JS**sliders, tabs & accordions built in **Native Fields**every official HubSpot field type **Live Preview**shareable link, no login needed Building your module… fields.json module.html module.css module.js "Create a 3-column pricing table with a featured middle plan and a CTA button" Pushed to HubSpot Describe it Generate it Push it live Refine in chat Live Preview it Responsive by default Describe it Generate it Push it live Refine in chat Live Preview it Responsive by default Describe it Generate it Push it live Refine in chat Live Preview it Responsive by default Describe it Generate it Push it live Refine in chat Live Preview it Responsive by default ## Everything You Need to Ship Modules Faster Not a toy generator — a chat-based builder that produces complete, production-ready HubSpot modules you actually own. ### Chat-Based Iteration Describe it once, then refine in conversation — "make the heading bigger", "add a third column". Each chat stays locked to one module and remembers every change. ### Live, Shareable Preview Links One click builds a live demo page — no HubSpot login needed to view it. Send the URL to a client, and it updates itself every time you revise the module. ### Design-Accurate from Screenshots Attach a mockup and the AI reads colors, spacing, card fills and text contrast, then reproduces them closely — about 90% accurate on the first pass, with anything left just a quick follow-up message away. ### Every HubSpot Field Type Text, rich text, image, color, link, choice, slider and boolean — plus repeaters, field groups and conditional visibility rules, generated correctly. ### Real Working Interactivity Sliders, tabs, accordions and lightboxes ship as working vanilla JavaScript — scoped per instance, not a static block pretending to be interactive. ### Direct Push, Auto-Repaired All five files land in your Design Manager automatically. If HubSpot rejects a field, the error is fed back to the AI and the push retries — hands-free. ### Zero Setup, Sign In & Go No install, no HubL to learn, no separate account to create. Sign in with Google, paste your HubSpot key once, and start describing modules. 5 complete files per module Every HubSpot field type Auto-repaired on validation errors Real tablet & mobile breakpoints No HubL. No boilerplate. ## Describe It, Get a Working Module Skip hand-writing fields.json and module.html from scratch. Describe the module — or point it at a screenshot — and get back a real, editable HubSpot module: correct field types, conditional visibility, repeaters, and working interactivity, not a static mockup. [Start Building Free](https://hstest.developmentpreviews.com/module-maker-app#pricing) See a Live Preview Example → ## Up and Running in 4 Steps No install, no HubL to learn — just your HubSpot account and a description. 1 ### Sign in with Google One click — you get 100,000 free tokens every month. No credit card needed. 2 ### Create a HubSpot Service Key In HubSpot: CRM Development → Keys → Create key. Add one scope from **Others**: `content`. 3 ### Paste It in Settings One time only. The key is stored securely on your account — never shared, never exposed to the browser after saving. 4 ### Describe Your Module Watch it appear in your Design Manager moments later, ready to drop onto any page. ## Built for Professional Agency Workflows Editor-friendly output, multi-portal ready, and no lock-in — the details that matter when clients depend on it. ### Full Editor Customization Google Fonts, colors, backgrounds (full-width or contained), padding, container width, extra classes and IDs — all exposed as editable module fields. ### Responsive by Default Real tablet and mobile breakpoints on every module — multi-column grids collapse, headings scale down, and nothing overflows at 375px. ### One Module Per Chat Each conversation is locked to a single module and its full revision history — no accidental cross-talk between separate client projects. ### ZIP Export & Full Ownership Download any module as a ready-to-upload package at any time. It's plain HubSpot code — extend it, version it, or hand it off. No lock-in. ### Multi-Portal Ready Swap the service key and target folder per client portal, so one account can serve every project you're building for. ### Secure Key Handling Your HubSpot service key is stored server-side on your account, never exposed to the browser after saving, and only ever writes module files. ### Saved Straight to Your Portal Every module lands directly in your own Design Manager the moment it's generated — no manual import, no export step, ready to drop onto a page immediately. ### One Dashboard, Every Module Track your token balance, plan, and every module you've built — live or draft — from a single dashboard, without digging through HubSpot. ## Every HubSpot Field Type, Fully Supported Text, images, colors, links, repeaters, groups, conditional visibility — generated correctly, every time. Fields Text Rich Text Image CTA Link Choice & Toggle Slider Repeater & Group New: shareable in one click ## See It Live Before You Commit Live Preview builds a real, public demo page for the exact module you just generated — perfect for showing a client before it ever touches their site. - Auto-updates every time you revise the module - No HubSpot login required to view it - Shareable with clients as a plain URL - Review and approve before it touches a live site yourportal.hubspot.net/ai-preview/pricing-table-x7k2 Free to start · no credit card ## Ready to Build Your First Module? Sign in with Google, connect your HubSpot service key, and describe what you need. You get 100,000 tokens every month, free — enough to build and push real modules before you pay anything. ## Simple Monthly Pricing A module typically costs **20,000–40,000 tokens** depending on complexity, whether a design screenshot is used, and how many revisions you make — averaging about **30,000**. Your balance resets every 30 days; unused tokens don't roll over. ### Free $0 100,000 tokens / month ≈ 2–4 modules — enough to fully evaluate it - All module types - Push to Design Manager - Screenshot-to-module - Live Preview links ### Starter $9 / month 200,000 tokens / month ≈ 5–10 modules / month - Everything in Free - 2× the free allowance - Cancel anytime Subscribe — $9/mo Most Popular ### Pro $29 / month 750,000 tokens / month ≈ 19–37 modules / month - Everything in Starter - Best value per token - Covers a full site build monthly Subscribe — $29/mo ### Agency $79 / month 2,500,000 tokens / month ≈ 62–125 modules / month - Everything in Pro - Multiple client portals - Priority support Subscribe — $79/mo Module-count ranges assume the 20,000–40,000 token range per module and will vary with your actual usage. Online checkout is coming soon. We only read your email address to identify your account. ## Frequently Asked Questions Everything you need to know before you start building. What is AI Modules Maker? A chat-based tool that generates complete, production-ready HubSpot CMS modules from a plain-English description or a design screenshot, and pushes them directly into your Design Manager. How many tokens does a module cost, really? Typically 20,000–40,000 tokens, averaging around 30,000. Simple text-only modules cost less; modules built from a screenshot or with several rounds of revisions cost more, since the design reference and prior code are resent each turn so the AI keeps matching them. Can I edit a module after it's generated? Yes, two ways: keep refining it in the same chat ("make the heading bigger"), or open it directly in HubSpot's Design Manager and hand-edit the code — it's a completely normal HubSpot module. Does it work from a screenshot or design mockup? Yes. Attach an image and the AI reads colors, spacing, card fills, text contrast and layout structure, then reproduces them closely — typically about 90% accurate on the first pass, including turning repeated cards into a proper field repeater. Any remaining details are usually a quick follow-up message away. What happens if HubSpot rejects a push? The AI is shown HubSpot's exact validation error and asked to fix it once, then the module is automatically re-pushed. This only spends tokens when a real push error occurs. Can I preview a module before it's live? Yes — Live Preview builds a real, public demo page with no HubSpot login required, so you (or a client) can see it before it ever touches a live site. Is my HubSpot service key stored securely? Yes — it's stored server-side on your account, never in the browser, and only ever used to write module files into your own Design Manager. Can I use this across multiple client portals? Yes — swap the service key and Design Manager folder in Settings for each portal you're building for, or download a module as a ZIP and upload it manually elsewhere. What happens when I run out of tokens? Generation pauses until your balance renews (every 30 days) or you upgrade your plan — nothing you've already built is affected. Do unused tokens roll over? No — your balance resets to your plan's allowance every 30 days and doesn't carry over, so it's simplest to think of it as a fresh monthly budget. AI Modules Maker Describe a HubSpot CMS module in plain English — or attach a screenshot — and get a complete, responsive, fully editable module pushed straight to your Design Manager. #### Product [Features](https://hstest.developmentpreviews.com/module-maker-app#features) [How it Works](https://hstest.developmentpreviews.com/module-maker-app#how-it-works) [Live Preview](https://hstest.developmentpreviews.com/module-maker-app#live-preview) #### Get Started [Pricing & Tokens](https://hstest.developmentpreviews.com/module-maker-app#pricing) [FAQ](https://hstest.developmentpreviews.com/module-maker-app#faq) [Sign In](https://hstest.developmentpreviews.com/module-maker-app#top) AI Modules Maker — HubSpot CMS modules, generated by AI. Built for HubSpot developers & agencies. ✕ ✕ ## Connect your HubSpot One-time setup — tell us where to save your modules. Stored securely on your account, not in this browser. HubSpot Service Key Scope: Others → `content` · How to get your key Design Manager folder Save & continue → AI Modules Maker … Sign out … Tokens left · plans … renews — … Tokens used in total … Modules generated ### Your modules + New Module ### Settings HubSpot Service Key How to get your key Design Manager folder Save settings + New Module Module Options Include standard settings Padding, container width, alignment & background fields. Uncheck for a lean module with only content fields. Padding Top / Bottom (px) Include container settings Custom container width Font Size (px) Font Family (Google Fonts) Default (theme font) Inter Roboto Open Sans Lato Montserrat Poppins Raleway Nunito Nunito Sans Work Sans DM Sans Source Sans 3 Manrope Rubik Mulish Karla Oswald Playfair Display (serif) Merriweather (serif) Lora (serif) Roboto Slab (serif) Space Grotesk The module loads this font from Google Fonts and applies it to all its text. Scope Local Global (reusable, synced) Include primary color Include background None Color Image field Background type/color/image is always editable on the module afterward — this just sets the starting default. Spans the full width behind the content. Background Width Full width (whole section) Contained (container width) Where a set background sits: edge-to-edge across the section, or only behind the centered content. Recent AI Modules Maker HubSpot AI Generator … ← Dashboard Saving to: Live demo page: Open live preview ↗ auto-updates on every edit · removed after 7 days ✕ ### Get your HubSpot Service Key 1. Open your HubSpot portal and go to **CRM Development → Keys** (or Settings → Integrations → Private Apps). [Open HubSpot ↗](https://app.hubspot.com) 2. Click **Create key** and name it, e.g. **AI Modules Maker**. 3. Add exactly one scope — under **Others**, select `content` 4. Copy the key (starts with `pat-na1-…`) and paste it into **Settings** here, then start building. The key only lets the builder write module files into your Design Manager — nothing else. It is saved in this browser only; we never store it on our servers. ✕ ### Plans & tokens | Plan | Tokens / month | Price | | --- | --- | --- | | Free | 100,000 | $0 | | Starter | 200,000 | $9/mo | | Pro | 750,000 | $29/mo | | Agency | 2,500,000 | $79/mo | Your balance resets to your plan's allowance every 30 days — unused tokens don't roll over. A module typically costs 20,000–40,000 tokens (averaging ~30,000), depending on complexity, whether a screenshot is used, and how many revisions you make. Online checkout is coming soon.