Watch the full walkthrough
A couple of weeks ago Anthropic shipped Claude's Design — a design tool that spits out real HTML/CSS/JS prototypes you can hand straight to a coding agent.
This post is the companion to my new video, where I take an Odoo website from design to live in a few hours: design in Claude Design, hand off to Claude Code, deploy through Odoo MCP Studio's `manage_webapp` tool, replace the homepage, publish.
The problem with Odoo's website builder
Don't get me wrong, the standard Odoo website builder is genuinely good at what it's good at:
- E-commerce
- Blog
- Contact / lead forms
- Standard CMS pages with safe drag-and-drop editing
Non-tech people can edit pages without breaking anything. Odoo's been polishing this for over a decade.
But it's also locked into Odoo's aging tech stack — QWeb templates, Bootstrap, the snippets system, theme settings applied site wide. The moment you want an interactive 3D Three.js scene, a custom React component, a slider that talks to your live Odoo data, or basically anything that doesn't fit an existing snippet or was designed through the website builder… you're fighting the framework.
That's where odoo mcp studio and my manage_webapp tool comes in. React 19, Tailwind, custom CDN libraries, Python-powered data fetching, full client-side router — but no build step, no separate deploy, served straight from your Odoo instance.
The tradeoff: no drag-and-drop editor. Non-tech people can't easily edit it. You need an AI agent (or yourself, with one) to make changes.
So… use both.
The Hybrid Approach
The insight the video lands on: you dont have to choose, you can run them side by side.
-Odoo website builder for: contact forms, blog posts, e-commerce, docs your team needs to edit themselves.
-Managed web apps for: marketing pages, portfolios, dashboards, custom portals, anything that demands a modern look or live data
The two coexist on the same domain. A managed web app can replace the homepage at `/`. The Odoo blog still lives at `/blog`. Your shop still lives at `/shop`. Forms still post to the same controllers. Nothing rips out.
The one fiddly bit: making the headers and footers consistent across both stacks. They render through different layers — Odoo website pages get the standard Odoo navbar; managed web apps render their own React layout. You either build your nav twice (once in QWeb, once in React) or hide the Odoo nav on managed routes and let React take over. I chose the latter for this rebuild. The video breaks that down around the 6:20 mark.
It's not perfect. But the alternative — pretending one stack can do everything well — is worse.
Claude Design: The next gen handoff tool
Using the manage_webapp tool raw works, but when it comes to website designs, using specialized tooling can be a major benefit, claude design is purpose built to make building website prototypes seamless and modern, it asks questions, you can make edits directly to your design, highlight specific areas for changes, its a full tech suite.
The clever bit isn't the design itself (it's nice, but Figma exists). It's the handoff bundle. Claude Design exports a clean tarball — `index.html`, CSS, JS, scene files — with a README written specifically for the next coding agent. The README points at the chat transcript, tells you which file the user was iterating on last, and explains how to follow the imports.
That bundle is what you feed to Claude Code. Under the hood claude design uses uses react / popular cdn libraries like three.js, so the transition from design --> working odoo webapp is seemless as it can make use of the same tech stack.
Hand It Off, Watch it Build
In the video I simply copied the claude code handover prompt, gave a small additional instruction to build the website using manage_webapp mcp tool and let it cook.
Claude reads the bundle, opens the index.html, follows the imports through to the shared CSS and the Three.js scene file, then calls `manage_webapp` over MCP. One tool call creates the webapp shell with shared CSS, fonts, and Three.js loaded from a CDN. Three more calls add the Index, About, and Portfolio pages. The Three.js scene becomes a page-level component file.
Time from "I have a design" to "homepage is live" was under an hour.
Adding Dynamic Features After the Fact
Static handoff is nice, but the whole reason you'd do this in MCP Studio instead of dropping HTML on a CDN is that it can pull live Odoo data and be responsive to logged-in users. So once the static port was done, I asked for two upgrades.
A "popular webapps" slider on the homepage. Horizontal scroller of the most-viewed managed web apps on my server, sorted by view count.
Replicating the standard odoo account dropdown in the heade. sign-in link when logged out, avatar + dropdown (Apps / My Account / My Webapps / Log out) when logged in. Hits the same routes the standard Odoo portal header uses (`/web/login`, `/web/session/get_session_info`, `/web/session/logout`). Matches the rest of the Odoo experience so users don't get yanked between visual styles when they log in.
Both go in starting at 15:15 in the video.
Going Live
All you need to publish your website is share with all user groups, you can build the website on staging, then export and import web apps on production seamlessly.
Check it out
- 📺 Video walkthrough (with chapters):
https://www.youtube.com/watch?v=K4ZCWlN25JY
- 🛠️ Odoo MCP Studio module: https://apps.odoo.com/apps/modules/19.0/odoo_remote_mcp