用途:把 Figma 设计稿转换为 Odoo 网站主题,并提供完整的页面模板参考。
工作流:先分析设计稿提取颜色、字体、布局与组件;再与 Odoo 内置模板比对页头、页脚和页面布局;选出最接近的模板;通过变量配置(如 $o-website-values-palettes);仅对模板无法实现的部分补充自定义 CSS;最后为 Odoo 未提供的组件创建自定义片段。
设计提取:可用 Figma MCP,提示词要求转成 Odoo 指定版本的 HTML 主题并使用 Bootstrap v5.1.3 类(而非 Tailwind),结构需符合 Odoo 的 section 与 container;也可提取配色并映射到 o-color-1 至 o-color-5,或转换文字样式为 Bootstrap 排版类。使用 Chrome MCP 时导航到 Figma URL 并打开 Pages(不是 components),点击页面元素提取页头/导航、CTA 按钮、区块背景、正文与标题的字体和颜色。
颜色映射:主品牌色(按钮、链接)映射 o-color-1,强调/CTA 色映射 o-color-2,浅色区块背景映射 o-color-3,主内容背景映射 o-color-4,深色文字/标题映射 o-color-5。
模板参考:提供 11 种页头模板(含对齐、可见性变体与可组合组件)、9 种页脚模板、商店页布局与筛选选项、博客列表与详情选项、购物车与结账选项,并配有决策流程用于选择模板。
配置生成:从设计分析生成 primary_variables.scss,在 $o-theme-font-configs 中定义字体,在 $o-website-values-palettes 中设置字体、页头/页脚模板、链接样式、Logo 高度、按钮圆角等;再编写 theme.utils 在模块复制后以编程方式启用或禁用对应视图(如 enable_view、disable_view)。
适用场景:需要将 Figma 视觉稿快速落地为 Odoo 网站主题的设计与开发。
限制:资料聚焦 Odoo 主题结构与模板选择,未提供完整代码示例之外的实现细节;具体收费、价格、平台支持版本与效果均暂未提供。