Quickstart

npx vibespot

A browser opens. Pick an AI engine, drop in an API key, describe your page. That's the whole product.

Requires Node.js 18+. No HubSpot CLI install needed — vibeSpot talks to HubSpot directly via API.

The tour

1. Talk to it. Ship a HubSpot page.

Type what you want on the left. Watch real HubSpot modules render on the right — Split, Plan, and Code views, all live. A four-stage agentic pipeline (Intent → Architect → Module Developer → Quality Check) generates modules in parallel and auto-fixes common HubL issues before they reach you.

2. Check the work before the expensive build — Checkpoints

By default vibeSpot doesn't run the whole pipeline in one blind shot. It pauses at cheap seams and shows you a card before spending tokens on the parallel module build:

• Brand intake — when your theme has no style system yet, vibeSpot asks first: bring your brand (colors, code, an existing theme, a live site, your voice) or let it choose for you.
• Design checkpoint — palette swatches, a type specimen, and one sample hero, rendered straight from the design tokens. No extra model call.
• Structure checkpoint — the planned modules as an editable outline. Reorder, rename, cut, or add sections before a single module is built.

Each card shows the estimated cost of the build it gates. Approve to continue, steer with a note to redo just that stage, skip to build now, or cancel to write nothing. In a hurry? The one-tap one-shot button next to send skips every gate — the old one-call behaviour.

Plan mode is the heaviest checkpoint variant. Toggle it on for a vague brief and vibeSpot asks the questions a senior designer would — audience, primary CTA, sections, voice — and builds a markdown plan in the right pane. Generation is hard-gated until you approve. Pre-canned templates skip the cold start for common page types.

3. Translate Figma 1:1

Paste a Figma URL. vibeSpot extracts the exact design tokens (colors, type, spacing, shadows), the literal copy, and the section structure — then translates each section to HubL. The AI translates; it doesn't invent. What ships matches the Figma file.

4. Build whole sites in one prompt

One prompt → multi-page HubSpot site. Shared header and footer, per-page layouts, cross-page navigation validation. The project sidebar shows the page tree with type badges and module counts. Drag to reorder, click to open.

5. Edit in the live preview

Click text, images, and links directly in the live preview to edit them inline. Hover any module for a floating toolbar: color picker, spacing slider, image swap, font size. Undo/redo through every generation step.

6. Upload straight to HubSpot

Click Upload. Per-file progress, auto-fix for common errors, celebration popup with a direct link to your HubSpot portal (EU and NA regions auto-detected). From there it's Content → Landing Pages → Create → drop your modules onto the page.

Choose your AI engine

vibeSpot runs the same pipeline across seven engines. Use whichever subscription you already pay for.

| Engine | Install | Notes | |--------|---------|-------| | Anthropic API | API key only | console.anthropic.com | | Claude OAuth | claude setup-token | Uses your Claude Pro/Max subscription | | OpenAI API | API key only | Any OpenAI model | | Gemini API | API key only | Google Gemini models | | Claude Code | npm i -g @anthropic-ai/claude-code | Uses your Claude subscription | | Gemini CLI | npm i -g @google/gemini-cli | Uses your Google AI account | | OpenAI Codex | npm i -g @openai/codex | Uses your OpenAI account |

How the models compare

We ran the same two landing-page briefs through the pipeline on six models and kept every theme. The table shows accuracy (HubSpot/HubL validity + section coverage + an LLM judge), cost, and speed per page. The full themes, renders, and Langfuse trace ids live in test/eval/benchmark-results/.

| Model | Accuracy | Cost/page | Speed/page | |-------|----------|-----------|------------| | Sonnet 4.6 | 99% | $1.39 | ~6 min | | Opus 4.7 | 98% | $7.76 | ~5 min | | GPT 5.4 | 97% | $0.83 | ~4.5 min | | Opus 4.8 | 97% | $6.50 | ~4 min | | GPT 5.5 | 96% | $3.91 | ~9 min | | Haiku 4.5 | 92% | $0.39 | ~2 min |

Every model produced valid, complete pages — 100% validator pass and section coverage across the board. Sonnet 4.6 leads on quality at roughly a fifth of Opus's cost; GPT 5.4 is the value pick; Opus 4.8 matches Opus 4.7's quality a bit cheaper and faster; Haiku 4.5 is fastest and cheapest if you plan to polish by hand. Two briefs scored by one judge — read it as a directional guide, and judge fidelity yourself from the saved themes. Reproduce it with npm run benchmark (see test/eval/BENCHMARK.md).

Setup

1. Node 18+ — node -v to check, nodejs.org to install.
2. An AI engine key — pick one from the table above.
3. Run it — npx vibespot. The browser opens.
4. Connect HubSpot — Settings → HubSpot → add a Personal Access Key. vibeSpot connects via the HubSpot API directly. No CLI install.

Access from another device (LAN / Tailscale)

For security, vibeSpot binds to 127.0.0.1 only — other devices can't reach it out of the box. To use it from an iPad or another machine:

VIBESPOT_HOST=0.0.0.0 npx vibespot

The terminal prints a URL containing a one-time access token (?token=...). Open that exact URL on the other device — it's the auth secret, and it's exchanged for a session cookie on first load. Pin a stable token with VIBESPOT_AUTH_TOKEN, e.g. openssl rand -hex 24. Behind tailscale serve (which keeps the loopback bind), set VIBESPOT_AUTH_TOKEN and open the tokenized URL the same way.

Commands

Most users only need npx vibespot. The web UI handles everything else.

vibespot              # Vibe coding web UI (default)
vibespot wizard       # Classic CLI wizard for React → HubSpot
vibespot convert      # Convert a React project (no upload)
vibespot upload       # Upload a theme to HubSpot
vibespot inverse      # Reverse-engineer an imported HubSpot theme
vibespot doctor       # Diagnose environment issues

What's new in v1.3

• Release highlights on upgrade — open the builder on a new version and a dialog shows what changed, with a link to the full changelog. Dismiss it and it stays gone until the next release.
• Email template generation — full pipeline for HubSpot emails: table layouts, MSO/VML compatibility, email validator auto-fix, 3 email starters.
• Multi-page sites — single prompt → full site with shared header/footer, page tree, navigation validation.
• Inline WYSIWYG editing — edit text, images, and links directly in the live preview with per-section visual controls.

Full history: CHANGELOG.md.

Links

• Website — vibespot.letsplaywith.tech
• LinkedIn — myvibespot
• npm — vibespot
• Contributing — CONTRIBUTING.md
• Code of Conduct — CODE_OF_CONDUCT.md

License

FSL-1.1-Apache-2.0 — see LICENSE for details.