![\"vibeSpot](\"assets/readme/00-hero-banner.svg\")
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/vibespot?style=flat&color=e8613a&labelColor=1f2937\")
![\"License\"](\"https://img.shields.io/badge/license-FSL--1.1--Apache--2.0-e8613a?style=flat&labelColor=1f2937\"){kind=icon}
![\"Node](\"https://img.shields.io/badge/node-%E2%89%A518-e8613a?style=flat&labelColor=1f2937\"){kind=icon}
![\"Website\"](\"https://img.shields.io/badge/site-vibespot.letsplaywith.tech-e8613a?style=flat&labelColor=1f2937\"){kind=icon}
Build HubSpot landing pages with AI.
\n\n\n Describe what you want in plain English — or paste a Figma URL. vibeSpot generates a native HubSpot theme: editable modules, real fields, your design tokens. Local-first. Your keys, your portal, your code.\n
\n\n\n ![\"vibeSpot](\"assets/readme/01-vibe-coding-hero.png\")
\n
\n\nType 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.\n\n### 2. Check the work before the expensive build — Checkpoints\n\n\n ![\"Design](\"assets/readme/02-checkpoints.png\")
\n
![\"Figma](\"assets/readme/03-figma-import.png\")
\n\nPaste 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.\n\n### 4. Build whole sites in one prompt\n\n![\"Multi-page](\"assets/readme/04-multi-page-sites.png\")
\n\nOne 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.\n\n### 5. Edit in the live preview\n\n![\"Inline](\"assets/readme/05-inline-wysiwyg.png\")
\n\nClick 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.\n\n### 6. Upload straight to HubSpot\n\n![\"Celebration](\"assets/readme/06-hubspot-upload.png\")
\n\nClick 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.\n\n## Choose your AI engine\n\nvibeSpot runs the same pipeline across seven engines. Use whichever subscription you already pay for.\n\n| Engine | Install | Notes |\n|--------|---------|-------|\n| Anthropic API | API key only | [console.anthropic.com](https://console.anthropic.com) |\n| Claude OAuth | `claude setup-token` | Uses your Claude Pro/Max subscription |\n| OpenAI API | API key only | Any OpenAI model |\n| Gemini API | API key only | Google Gemini models |\n| [Claude Code](https://claude.ai/code) | `npm i -g @anthropic-ai/claude-code` | Uses your Claude subscription |\n| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `npm i -g @google/gemini-cli` | Uses your Google AI account |\n| [OpenAI Codex](https://github.com/openai/codex) | `npm i -g @openai/codex` | Uses your OpenAI account |\n\n## How the models compare\n\nWe 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/`](test/eval/benchmark-results/).\n\n| Model | Accuracy | Cost/page | Speed/page |\n|-------|----------|-----------|------------|\n| Sonnet 4.6 | 99% | $1.39 | ~6 min |\n| Opus 4.7 | 98% | $7.76 | ~5 min |\n| GPT 5.4 | 97% | $0.83 | ~4.5 min |\n| Opus 4.8 | 97% | $6.50 | ~4 min |\n| GPT 5.5 | 96% | $3.91 | ~9 min |\n| Haiku 4.5 | 92% | $0.39 | ~2 min |\n\nEvery 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`](test/eval/BENCHMARK.md)).\n\n## Setup\n\n1. **Node 18+** — `node -v` to check, [nodejs.org](https://nodejs.org) to install.\n2. **An AI engine key** — pick one from the table above.\n3. **Run it** — `npx vibespot`. The browser opens.\n4. **Connect HubSpot** — Settings → HubSpot → add a Personal Access Key. vibeSpot connects via the HubSpot API directly. No CLI install.\n\n### Access from another device (LAN / Tailscale)\n\nFor 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:\n\n```bash\nVIBESPOT_HOST=0.0.0.0 npx vibespot\n```\n\nThe 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.\n\n## Commands\n\nMost users only need `npx vibespot`. The web UI handles everything else.\n\n```bash\nvibespot # Vibe coding web UI (default)\nvibespot wizard # Classic CLI wizard for React → HubSpot\nvibespot convert # Convert a React project (no upload)\nvibespot upload # Upload a theme to HubSpot\nvibespot inverse # Reverse-engineer an imported HubSpot theme\nvibespot doctor # Diagnose environment issues\n```\n\n## What's new in v1.3\n\n- **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.\n- **Email template generation** — full pipeline for HubSpot emails: table layouts, MSO/VML compatibility, email validator auto-fix, 3 email starters.\n- **Multi-page sites** — single prompt → full site with shared header/footer, page tree, navigation validation.\n- **Inline WYSIWYG editing** — edit text, images, and links directly in the live preview with per-section visual controls.\n\nFull history: [CHANGELOG.md](CHANGELOG.md).\n\n## Links\n\n- **Website** — [vibespot.letsplaywith.tech](https://vibespot.letsplaywith.tech)\n- **LinkedIn** — [myvibespot](https://www.linkedin.com/company/myvibespot/)\n- **npm** — [vibespot](https://www.npmjs.com/package/vibespot)\n- **Contributing** — [CONTRIBUTING.md](CONTRIBUTING.md)\n- **Code of Conduct** — [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)\n\n## License\n\nFSL-1.1-Apache-2.0 — see [LICENSE](LICENSE) for details.\n\n","readmeFilename":"README.md"}