通用产品网站搭建指南 — WorkBuddy + Open Design + OpenCode + WordPress + Elementor

角色分工（一台电脑需要安装三件套）

连接关系

WorkBuddy ──MCP──▶ Open Design ──使用 OpenCode 模型──▶ 生成设计文件 (HTML/CSS)
    │                              (opencode/deepseek-v4-flash-free)
    │
    └──MCP──▶ Novamira ──▶ WordPress ──▶ Elementor 页面

工具安装清单

在 WorkBuddy 中把 Open Design 配置为自定义 MCP 连接，之后你在 WorkBuddy 里用自然语言指挥它设计，不需要手动敲命令。

目录

1. 第一章：准备工作
2. 第二章：设计（WorkBuddy 指挥 Open Design）
3. 第三章：构建到 WordPress（WorkBuddy）
4. 第四章：收尾工作
5. 第五章：后续维护
6. 附录

第一章：准备工作

1.1 主机和域名

• 主机推荐：Hostinger、SiteGround、阿里云、腾讯云等，选择支持 WordPress 一键安装的主机
• 域名：免费域名通常在购买主机时赠送，也可在已有域名注册商处购买
• SSL 证书：现代主机都免费提供（Let's Encrypt），确保网站启用 HTTPS
• 预算：主机约 $3-10/月（或等值人民币），域名约 $10-15/年

1.2 安装 WordPress

1. 登录主机控制面板 → 找到 WordPress 安装程序（通常是 Softaculous 或一键安装）
2. 设置站点名称、管理员账号和密码
3. 等待安装完成，记下 WordPress 后台地址：https://你的域名/wp-admin/

1.3 核对本地三件套（已安装）

确认三个工具已就绪：

检查 WorkBuddy ↔ Open Design 连接：

在 WorkBuddy 的 MCP/Connectors 中确认 Open Design 已添加为自定义连接，测试连接成功。

1.4 安装必要插件 — 让 WorkBuddy 执行

打开 WorkBuddy，让它完成以下任务（一句话即可）：

登录我的 WordPress 后台 https://你的域名/wp-admin/，安装并启用以下插件：

1. Elementor（Elementor 出品的那个）
2. WPForms Lite（熊图标，Syed Balkhi 出品）
3. Instant Images（免费图库，ConnektHQ 出品）
4. Novamira（从官网 novamira.ai/download 下载 ZIP 后上传安装）

Novamira 安装后还需配置（让 WorkBuddy 完成）：

1. 插件 → Novamira → Configuration → 开启 AI Abilities（AI 能力）→ 保存设置
2. 出现「This looks like a production site」弹窗 → 点 OK
3. 选择认证方式 → OAuth → 按提示完成连接（拿到 Name 和 Server URL 两个值）
4. 在 WorkBuddy 的 MCP/Connectors 配置中，添加自定义 MCP 连接（名字 + Novamira 提供的 Server URL）
5. 连接后把权限设为 Always allow（构建期间避免频繁授权弹窗）

1.5 安装主题 — 让 WorkBuddy 执行

继续安装主题：在 外观 → 主题 → 添加主题 中搜索 Astra，安装并启用。
然后检查插件 → Elementor → 设置 → 高级，确认 Atomic Editor（新体验）已启用。

推荐两个轻量级主题，选一个即可：

选项 A：Astra（推荐）

• 自带 Header/Footer 构建器
• 极简设计，不会与 Elementor 冲突

选项 B：Solace

• 自带 HFG（Header Footer Grid）构建器
• 同样轻量，适合产品网站

1.6 准备设计素材

创建项目文件夹并收集素材：

~/Downloads/jianzhan/my-website-v1/
├── assets/
│   └── images/
│       ├── hero-product.jpg       # 主图/横幅图
│       ├── product-1.jpg          # 产品照片
│       ├── product-2.jpg
│       ├── product-3.jpg
│       ├── about-factory.jpg      # 关于页图片
│       ├── app-1.jpg              # 应用场景图
│       └── logo.svg / logo.png    # 公司 Logo
├── reference-design.png           # [可选] 参考设计截图
└── PROMPT.md                      # 设计简报（见下）

图片建议：真实产品照片 > AI 生成 > 免费图库。真实照片展现的是你实际的产品和工作。
手机随手拍的照片也没关系，Open Design 会基于它们生成专业版本。

第二章：设计（WorkBuddy 指挥 Open Design）

2.1 编写 PROMPT.md（设计简报）

在项目文件夹中创建 PROMPT.md，参考模板：

# [品牌名] 产品网站 — 设计简报

## 设计参考
[可选] 参考截图：`reference-design.png`
风格参考：[描述风格，如：工业/科技蓝/白色系、卡片式布局、大图轮播等]

## 公司信息
- **品牌名称：** [公司名]
- **产品：** [列出核心产品，3-5个]
- **目标客户：** [B2B/B2C，建筑师/批发商/终端用户等]
- **品牌调性：** [专业、可靠、创新、亲民等]
- **核心行动号召：** [获取报价 / 在线咨询 / 免费样品]
- **联系方式：** [电话/微信/邮箱]

## 可用图片
图片在 `assets/images/` 目录中：
- hero-*.jpg — 横幅/主图
- product-*.jpg — 产品图
- about-*.jpg — 关于页
- app-*.jpg — 应用场景
- logo.* — 公司 Logo

## 页面结构（5个页面，每页一个 HTML 文件）

### IMPORTANT — Elementor-Ready 构建规则
1. **不使用 CSS Grid** — 仅使用 Flexbox 布局
2. **不使用 JavaScript** — 纯 HTML + CSS，无 JS 依赖
3. **不使用外部库或框架** — 图标用内联 SVG
4. **CSS 变量** — 在样式表顶部定义颜色、字体、间距、圆角
5. **Mobile-first 响应式** — 手机、平板、桌面完美适配
6. **SEO 优化** — 唯一 meta 标签、语义化 HTML5
7. 使用本地图片，带描述性 alt 文本
8. **无占位符文本** — 所有内容写真实文案
9. **无障碍** — 键盘可导航、焦点状态可见

### 文件结构

my-website-v1/
├── index.html # 首页
├── products.html # 产品页
├── about.html # 关于页
├── blog.html # 博客页
├── contact.html # 联系页
├── styles.css # 共享样式表
└── assets/images/ # 图片资源

### 设计方向
- 色彩：[描述配色，如：蓝色#0d5ea6 + 白色背景 + 灰色表面]
- 字体：[标题字体 / 正文字体]
- 风格：[简洁现代 / 工业专业 / 温暖亲和]

> 完整构建所有页面和共享样式表。无占位符，无简写，无截断。生产就绪。

2.2 指挥 Open Design 开始设计

在 WorkBuddy 中发送：

请通过 MCP 连接 Open Design，让它为我的项目 [项目路径] 开始设计。
设计简报在 [项目路径]/PROMPT.md，图片素材在 [项目路径]/assets/images/。
让 Open Design 完成设计后，把生成的 HTML/CSS 文件保存到项目文件夹中。

流程说明：

1. WorkBuddy 通过 MCP 调用 Open Design
2. Open Design 读取 PROMPT.md 简报 + 图片素材
3. Open Design 使用 OpenCode 提供的模型（opencode/deepseek-v4-flash-free）生成设计
4. 设计结果（index.html、products.html、about.html、blog.html、contact.html、styles.css）保存到项目文件夹
5. WorkBuddy 汇报设计完成，并告知文件位置

⚠️ Open Design 是 headless 守护进程，无 GUI。设计过程中可能在后台运行较长时间。
期间不要关闭 Open Design 或 WorkBuddy。

2.3 检查与迭代设计

设计完成后，让 WorkBuddy 用浏览器打开项目 HTML 文件预览（或用 MyChrome 打开），检查：

• [ ] 每个页面在手机/平板/桌面视图下是否正常
• [ ] 所有图片是否正确显示（真实产品图，而非占位图）
• [ ] 颜色、字体、间距是否一致
• [ ] 按钮和链接的悬停效果
• [ ] 是否有元素溢出页面边缘（最常出现问题）
• [ ] 文案是否准确，无占位符、无 lorem ipsum

发现问题？ 在 WorkBuddy 中直接说：

Open Design 的设计有几个问题：[描述问题，例如「产品页的第一张卡片按钮溢出边缘」「首页配色偏暗，希望更明亮」]。
请让 Open Design 修改设计后再生成一次，保存到同一项目文件夹。

迭代直到满意为止。使用同一项目文件夹，Open Design 会记住项目背景，后续修改只需一句话。

第三章：构建到 WordPress（WorkBuddy）

3.1 验证 WorkBuddy ↔ Novamira 连接

确保 Novamira MCP 已在 WorkBuddy 中连接。让 WorkBuddy 执行第一个验证指令：

我现在连接到我的 WordPress 站点了，告诉我：

1. 站点名称
2. WordPress 版本
3. 当前启用主题
4. Elementor 版本
5. 已安装的插件列表

确认要点：

• 主题必须是 Astra（或你装的 Solace）——如果不是，回去启用
• Elementor 版本存在 → Atomic Editor 才可能工作

3.2 将 HTML 设计构建为 Elementor 页面

让 WorkBuddy 读取设计文件并构建首页（首次只建首页）：

我的项目文件夹是 [项目路径]，里面有 Open Design 生成的 HTML 设计文件（index.html、products.html、about.html、contact.html、blog.html 和 styles.css）。
把这些设计作为 Elementor 页面重建成我的 WordPress 站。
要求：

1. 使用 Elementor 4.x 原子元素（atomic elements）
2. 禁止在 HTML widget 里粘贴原始代码，禁止用 shortcode 嵌入标记
3. 只构建页面内容，不含 header 和 footer（主题负责）
4. 把设计和主题的配色、字体统一成全局样式
5. 图片处理：上传前把照片转成 WebP，最长边 ≤ 1600px，文件 ≤ 400KB（在服务器端转换）；Logo 和透明图保留 PNG；设计里引用 URL 的图片先下载到本地再上传；照片用真实 image widget，不允许空容器当背景图
6. 把 CSS 变量转成 Elementor 全局变量，重复样式类转成 Elementor 全局类，不允许创建/引用任何 stylesheet；如果样式无法用 Elementor 方式表达，直接告诉我而不是写 CSS
7. 先只构建首页，完成后停下来让我检查，我确认后再继续构建其余页面

💡 网页构建原理：WorkBuddy 通过 Novamira MCP 的 execute-php 能力，把 Elementor JSON 数据写入 _elementor_data，并设置正确的元数据（edit_mode、template_type、version），然后清缓存、删除自动保存的修订版本。

3.3 检查首页构建结果

• 让 WorkBuddy 报告：构建了多少个元素、上传了多少张图片、哪些颜色/字体成了全局变量
• 用浏览器打开首页，确认设计还原度
• 用 Elementor 编辑器打开，确认每个元素都可选中、可编辑（这是「可编辑」而非「一张图」的关键验证）

发现问题：截图（或描述问题）丢给 WorkBuddy：

整体构建很好，但 [描述问题，例如：产品区的第二个按钮样式不对]。请检查截图和相关代码并修复。

3.4 构建其余页面

确认首页无误后：

首页检查通过了，现在构建其余的页面（产品、关于、博客、联系）。

完成后再次验证：

• [ ] 每页 Elementor 可编辑
• [ ] 站内链接互相跳转正常
• [ ] 没有样式泄漏（页面间样式互相影响）
• [ ] 无原始 HTML 代码块

3.5 图片处理规范（给 WorkBuddy 的约束）

⚠️ 超过 400KB 的大 PNG 会导致 Elementor 编辑器无法渲染图片。这条是硬性约束。

3.6 颜色变量化

构建时已把设计颜色转为 Elementor 全局变量。手动修改入口：
Elementor 编辑器 → 左上角水滴图标 → Design System（全局变量面板）。
修改一个变量 = 全站同步更新。

注意：Header/Footer 由主题（Astra/Solace）控制，不走 Elementor 全局变量。改颜色时如果 Header 不变，去 外观 → 自定义 里改。

第四章：收尾工作

4.1 设置导航菜单 — 让 WorkBuddy 执行

在 WordPress 后台帮我：

1. 外观 → 菜单 → 创建新菜单，命名 "Primary Menu"
2. 添加页面：产品、关于、博客、联系（首页可以不加，点 Logo 就能回首页）
3. 按合理顺序排列：通常是 产品 → 关于 → 博客 → 联系
4. 菜单位置设为 Primary Menu（Astra）/ primary（Solace），保存

4.2 构建 Header 和 Footer — 让 WorkBuddy 执行

按照 Open Design 设计文件里的 header 和 footer 设计（在 [项目路径] 的 HTML 文件里），用 Astra [或 Solace] 的 Header/Footer 构建器配置我的站点 header 和 footer：

• 使用我刚刚创建的 Primary Menu
• 设置 Logo、导航菜单、CTA 按钮（如「获取报价」）
• 页脚包含版权信息、联系信息、链接
  只配置一次，全站生效。

完成后让 WorkBuddy 把首页设为站点首页（如果设计里首页在 /home）：

把首页设为站点首页（Settings → Reading → 静态页面 → Homepage 选择首页），并在菜单中加入「首页」。

4.3 添加联系表单 — 让 WorkBuddy 执行

用 WPForms 创建一个联系表单（用 Simple Contact Form 模板），命名为 "Contact Form"：

1. 设置通知邮箱为 [你的邮箱]，确保能收到提交
2. 保存表单
3. 在联系页面的表单占位区域，拖入 WPForms 小工具并选择这个表单
4. 样式匹配：按钮背景色设为我的主色 [如 #0d5ea6]，边框圆角与站点其他按钮一致（约 35-40px）
5. 设置提交成功提示信息
6. 然后我自己测试提交一次，确认邮件能收到

4.4 响应式检查 — 让 WorkBuddy 执行，你审核

在 Elementor 编辑器中分别用 桌面 / 平板 / 手机 视图检查每个页面，修复所有布局问题：

• 间距异常、元素错位
• 手机端文字溢出
• 按钮太小（触摸目标 ≥ 44px）
• 图片变形
  检查完毕后逐页汇报。

4.5 发布设置 — 让 WorkBuddy 执行

帮我完成发布前设置：

1. 设置 → 阅读：首页显示设为「一个静态页面」，首页选 [首页名称]，文章页选博客页
2. 设置 → 常规：站点标题改为 [品牌名]，副标题写 [一句话描述]，站点图标上传 Logo
3. 检查 SSL 生效，全站 HTTPS

4.6 上线前检查清单（你亲自过一遍）

用无痕浏览器打开网站，逐项确认：

• [ ] 所有页面加载正常，无 404
• [ ] 导航菜单链接正确
• [ ] 联系表单可提交，邮件能收到（亲测一次）
• [ ] 手机端显示正常
• [ ] 图片全部加载，无裂图
• [ ] 页面速度可接受
• [ ] HTTPS 正常
• [ ] 已做完整备份（主机面板或插件）

第五章：后续维护

5.1 两种修改方式

方式 A：手动（Elementor 可视化编辑器）

• 页面 → 用 Elementor 编辑
• 结构面板（Ctrl+I）查看页面层级，拖拽调整
• 点击任意元素，左侧面板改样式和内容
• 水滴图标 → Design System → 全局变量改色 → 全站更新
• 改完点「发布」

方式 B：让 WorkBuddy 改

• 直接描述需求，WorkBuddy 通过 Novamira 连接直接修改
• 改完记得刷新 WordPress 页面再看，避免看到旧缓存

5.2 添加新页面 — 让 WorkBuddy 执行

在我的站点上设计并构建一个关于 [子产品/子服务名] 的新 Elementor 页面。

1. 先读取我现有的页面、Elementor 全局变量和全局类，匹配已有的风格、间距、颜色和字体
2. 使用 Elementor 4.x 原子元素，复用现有全局变量和类，不新建
3. 不用 HTML widget、不留空容器、页面内容不含 header/footer
4. 设为 [父页面] 的子页面，并在主菜单 Primary Menu 中作为子菜单项
5. 每张照片转 WebP（≤ 400KB）后上传；只引用 URL 的图片先下载
6. 图片用 Instant Images 插件找与现有站点匹配的免费图库照片

5.3 添加博客 — 让 WorkBuddy 执行

给我的站点加博客：

1. 创建名为「博客」的页面，在 设置 → 阅读 中设为文章页
2. 加入主菜单
3. 用主题自带的博客样式设置，让列表页和文章页匹配站点配色、字体、容器宽度，无侧边栏
4. 不要用 Elementor 构建文章模板（模板构建器是付费功能）
5. 不创建任何样式表
6. 写一篇示例文章，并告诉我今后在哪里写新文章

5.4 生成 AI 图片（可选）

为 [页面名] 页面生成一组 AI 图片，主题和场景要匹配媒体库里已有图片，然后用在页面上。
（如果 Open Design 连接的模型支持图片生成，可以让它生成后再上传）

附录

附录 A：通用 PROMPT.md 模板

# [品牌名称] 产品网站 — 设计简报

## 公司信息
- **品牌名称：** 
- **产品：** 
- **目标客户：** 
- **品牌调性：** 
- **核心行动号召：** 获取报价 / 立即咨询 / 免费样品
- **联系方式：** 

## 可用图片
图片在 `assets/images/` 目录中。

## 页面结构（5个页面，每页一个 HTML 文件）

### IMPORTANT — Elementor-Ready 构建规则
1. **不使用 CSS Grid** — 仅使用 Flexbox
2. **不使用 JavaScript** — 纯 HTML + CSS
3. **不使用外部库或框架** — 内联 SVG 图标
4. **CSS 变量** — 顶部定义所有颜色、字体、间距
5. **Mobile-first 响应式**
6. **SEO 优化** — 语义化 HTML5，唯一 meta 标签
7. **无占位符文本** — 真实文案

### 文件结构

project/
├── index.html
├── products.html
├── about.html
├── blog.html
├── contact.html
├── styles.css
└── assets/images/

### 设计方向
- 色彩：
- 字体：
- 风格：

附录 B：常见问题排查

附录 C：成本清单

最后建议：每完成一个大步骤，用无痕浏览器看一眼网站；上线前和每次重大修改后做一次完整备份。