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

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

连接关系

WorkBuddy ──MCP──▶ Open Design ──使用 OpenCode 模型──▶ 设计文件 (HTML/CSS)
    │                              (opencode/mino-v2.5-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/年

重要选择：在主机安装向导里，务必选 WordPress（不要选 Horizons/AI App Builder 之类非 WordPress 的产品），并选择 Build from scratch（从零构建），这样站点是空的，方便 Open Design 从零设计。

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（构建期间避免频繁授权弹窗）

如果开启 AI Abilities 后没出现认证方式选择，多半是域名问题：确保后台地址用的是你的真实域名（临时域名换成正式域名），重新登录后再试。

1.5 安装主题 — 让 WorkBuddy 执行

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

推荐两个轻量级主题（本指南提示词以 Astra 为例，Solace 用户把提示词里的 Astra 换成 Solace 即可）：

选项 A：Astra（推荐）

• 自带 Header/Footer 构建器（HFG）
• 极简设计，不会与 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。这是给 Open Design 的需求文件，包含设计规则 + 产品信息 + 图片清单：

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

## 公司信息
- **品牌名称：** [公司名]
- **产品：** [列出核心产品，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 中发送下面这个完整英文提示词（这是原教程的第 1 个提示词，已改为产品通用型）。

说明：上半部分是「构建规则」，让设计能干净地转入 WordPress；下半部分（---- 分隔线以下）是「你的网站」，把 [方括号] 换成你的产品信息。

Build rules. Follow all of these.

Layout: use flexbox for all layout. Do not use CSS grid. Do not use absolute or fixed positioning, except for a sticky navigation bar if the design needs one.

Styling: define every colour, font family, font size, and spacing value once as a CSS custom property in :root, then reference them with var(). Do not hard-code a colour or a size anywhere in the page.

Fonts: write every font family value as a quoted string, including families whose names contain a space or a number.

Class names: give each repeated visual pattern one short, descriptive class name, for example card-product or button-primary, and reuse that same class every time the pattern appears. Do not use long stacks of single-purpose utility classes.

Do not style part of a heading differently from the rest of it. If a phrase inside a heading needs its own colour, make it a separate element.

Do not use pseudo-elements such as ::before or ::after for anything visible. Bullets, dots, and decorative marks must be real elements.

Header and footer: design them once, as their own standalone components. Do not repeat the header and footer markup inside each page. Each page's content starts below the navigation and ends above the footer.

Images: I have attached my own photos and my logo. Use them in the design and keep their filenames.

If an image generation connector is available to you, you may also generate images. In that case: use my attached photos as style references, so everything you generate matches them for lighting, colour, setting, and season. Where one of my photos is low quality or looks like a phone snapshot, generate a professional version of that same subject and use it instead. Generate any additional imagery the design needs in the same consistent style.

If I have not attached a logo, generate one that fits the brand.

If no image generation connector is available, use only my attached photos and do not substitute or invent other images.

Contact form: style the form fields and the button as a visual mockup only. Do not write any submission logic. Label it clearly as a mockup.

Screens: design and show me the desktop, tablet, and mobile layout for every page. Lay mobile out deliberately rather than letting things stack by accident.

- - - - - - - - - - - - - - - - - - - - - - - - - -

THE WEBSITE

Design a five-page website for [BUSINESS NAME], a [BUSINESS TYPE] in [LOCATION].

What they do: [TWO SENTENCES OF SPECIFIC DETAIL, INCLUDING WHAT MAKES THEM DIFFERENT]

Who it's for: [CUSTOMER]

Products/Services: [FOUR NAMED PRODUCTS OR SERVICES]

Pages: Home, Products, About, Blog, Contact.

Design direction: [3-5 WORDS].

Write specific copy for this business. No placeholder text and no lorem ipsum.

Copy voice: write like a person, not like an AI. Do not use em dashes anywhere in the copy. Avoid stock AI phrasing such as "unlock", "elevate", "seamless", "in today's fast-paced world", and "it's not just X, it's Y". Short, concrete, specific sentences about what this business actually does.

流程：

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

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

2.3 检查与迭代设计

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

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

修复元素溢出（完整英文提示词 ②） —— 逐页检查右边缘，发现任何溢出就发给 Open Design：

On the individual page previews, several pages have elements extending beyond the right edge of the page. Review and fix all occurrences.

其它修改：直接在 WorkBuddy 里用自然语言描述，例如：

The logo seems a bit small in the header. Let's increase its presence. Also, I don't want to reuse any photos throughout the design — each photo should only be used once. Anytime a duplicate photo appears, swap it out for something else. Can you also use a brighter / warmer accent colour?

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

第三章：构建到 WordPress（WorkBuddy）

3.1 验证 WorkBuddy ↔ Novamira 连接（完整英文提示词 ③）

确保 Novamira MCP 已在 WorkBuddy 中连接。让 WorkBuddy 执行（构建前必跑）：

Are you connected to my WordPress site? Tell me the site name and the active theme.

读答案时注意：会返回站点名、WordPress 版本、活动主题。关键看主题——如果不是你装的 Astra（或 Solace），说明主题没启用成功，先回去启用，不要继续。

3.2 将 HTML 设计构建为 Elementor 页面（完整英文提示词 ④）

让 WorkBuddy 读取设计文件并构建首页。这是核心提示词，最后一行让它先建首页停下，方便你检查：

Attached are the exported pages of a website design: Home, Products, About, Blog, and Contact.

Rebuild them on my WordPress site as Elementor pages.

Use Elementor version 4 atomic elements. Do not paste raw HTML into an HTML widget anywhere, and do not use a shortcode to embed markup.

Build page content only. Do not add the header or the footer to any page, because the theme handles those. Each page starts below the navigation and ends above the footer.

Images: before uploading any photograph to my media library, convert it to WebP and resize it so its longest edge is at most 1600 pixels and the file is under 400 KB. Do this conversion on the server. Large PNGs cause the Elementor editor to fail to paint images, so do not upload a photograph over 400 KB under any circumstances. Keep logos and any image with transparency as PNG.

Wherever the design has an image referencing a local file, convert it to an optimized format, then upload it to the WordPress media library and the site design.

Wherever the design has an image that references a URL, download the image from the URL so we have a local copy, convert it to an optimized format, then upload it to the WordPress media library and the site design.

Use real image widgets for photographs. Do not build a photo as a background image on an empty container, and do not leave any container empty.

Turn every CSS custom property from the design into an Elementor global variable, and every repeated class into an Elementor global class. Reference those instead of setting values on individual elements.

Do not create, enqueue, or link any stylesheet, and do not put any styling in the theme's Additional CSS or a child theme. Every style must live in an Elementor global class, an Elementor global variable, or the element's own settings panel. If a style cannot be expressed that way, tell me instead of writing CSS.

Set colour explicitly on any class that styles a heading, because the theme sets heading colours directly and will otherwise win.

Set every page's template to Elementor Full Width, and in the Astra settings for each page use the full-width container, no sidebar, and hide the page title.

Recreate the responsive behaviour using Elementor's own per-device controls for tablet and mobile. Do not assume the media queries in my files carry across.

On the contact page, leave an empty section where the form mockup is, and tell me where it is. I'll put a working form there myself.

If you need to install anything to do this work, go ahead and install it.

Build the Home page first, then stop and tell me it's done so I can check it before you continue.

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

3.3 检查首页构建结果

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

发现问题：截图丢给 WorkBuddy：

The build looks great overall. There's just one problem: [描述问题，例如 the gallery button doesn't appear to be styled correctly]. Please review the screenshot and the code and then fix.

3.4 构建其余页面

确认首页无误后：

Build the remaining pages.

完成后验证：

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

3.5 故障恢复提示词（第 ⑤、⑥ 个）

⑤ 页面变成无法点开的原始代码块（只发生问题时用）：

This page came in as raw HTML inside a single widget. I expected Elementor version 4 atomic elements that I can select and edit individually. Please rebuild it that way, with no HTML widgets.

⑥ 样式表覆盖 Elementor（改颜色无效）（只发生问题时用）：

These elements are styled by an external CSS class instead of by Elementor. I expected every style to live in the element's own panels. Please rebuild them using only Elementor's own settings, so the background, spacing, borders, and typography are all in the Style and Advanced panels. Then remove the CSS class and the stylesheet. Do this for every page, not just this one.

第四章：收尾工作

4.1 设置导航菜单 — 让 WorkBuddy 执行（先建菜单，再做 Header）

顺序很重要：先手动建好菜单，再让 WorkBuddy 建 Header，否则页面会按字母序排列。

在 WordPress 后台帮我：外观 → 菜单 → 创建新菜单，命名 "Primary Menu"。
添加页面：Products、About、Blog、Contact（首页可以不加，点 Logo 就能回首页）。
按合理顺序排列：Products → About → Blog → Contact。菜单位置设为 Primary Menu（Astra）/ primary（Solace），保存。

4.2 构建 Header 和 Footer（完整英文提示词 ⑦）

Set up the Astra header and footer to match the design I gave you, using the site menu I just created. Use the designs from the design package I provided earlier.

（Solace 用户把 Astra 换成 Solace。）

完成后让 WorkBuddy 把首页设为站点首页：

Add Home to the menu and set it as the front page (Settings → Reading → static page → select the homepage).

Header/Footer 手动修改入口：前台点「Customize」→ Header → 可改 Logo、菜单、按钮、Footer。这里由主题（Astra/Solace）控制，不走 Elementor 全局变量。

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

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

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

测试很重要：一个看着正常却悄悄不投递的表单，是产品网站最致命的坑。亲自提交一次，确认邮件到达。若收不到，先查垃圾箱；若仍没有，多半是 WordPress 用了一个不属于你域名的发件地址，去主机上建一个域名邮箱设为 WPForms 发件人。

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

在 Elementor 编辑器中分别用 桌面 / 平板 / 手机 视图检查每个页面，修复所有布局问题：间距异常、元素错位、手机端文字溢出、按钮太小（触摸目标 ≥ 44px）、图片变形。检查完毕后逐页汇报。

移动端修改只影响移动端，不会破坏桌面布局。若某处间距异常找不到原因，截图丢给 WorkBuddy 修复（它会顺带检查全站同类问题）。

4.5 发布设置 — 让 WorkBuddy 执行

帮我完成发布前设置：

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

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

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

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

第五章：后续维护

5.1 两种修改方式

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

• 页面 → 用 Elementor 编辑；结构面板（Ctrl+I）查看页面层级，拖拽调整
• 点击任意元素，左侧面板改样式和内容
• 水滴图标 → Design System → 全局变量改色 → 全站更新（但 Header/Footer 由主题控制，不走这个）
• 改完点「发布」；AI 改动后先刷新页面再看，避免旧缓存

方式 B：让 WorkBuddy 改——直接描述需求，WorkBuddy 通过 Novamira 连接直接修改。

5.2 添加新页面（完整英文提示词 ⑧）

Design and build a new Elementor page on my site for [PURPOSE].

First read my existing pages and my Elementor global variables and global classes, and match the style, spacing, colours, and fonts you find there.

Use Elementor version 4 atomic elements, reuse the existing global variables and classes rather than making new ones, no HTML widgets, no empty containers, and no header or footer in the page content. Set the page template to Elementor Full Width with the Astra title hidden, like the other pages, and set the tablet and mobile layouts with Elementor's per-device controls.

Convert every photograph to WebP under 400 KB before uploading it to my media library. If an image is only a URL, download it first so we have a local copy.

Make it a sub-page of [PARENT PAGE] and link it as a sub-item in the primary menu.

For imagery, use the Instant Images plugin I have installed to find stock photos that match the existing images on my site.

（Solace 用户把 Astra 换成 Solace。）

5.3 生成页面图片（完整英文提示词 ⑨，可选）

Generate images for this page with Artlist that match the theme, style and setting of the images already in my media library, then use them on the page.

（如果你没有 Artlist，可把提示词改为用 Open Design 连接的模型生成，或省略。）

5.4 添加博客（完整英文提示词 ⑩，可选）

Add a blog to my site.

Create a page called Blog and set it as the posts page under Settings, then Reading.

Add it to the primary menu.

Style the blog listing and the single post layout using Astra's own settings so they match the rest of my site: the same colours, the same fonts, the same container width, and no sidebar. Do not try to build post templates in Elementor, because the template builder is a paid feature. Do not create any stylesheet.

Then write one short example post so I can see how it looks, and tell me where in WordPress I go to write the next one.

（Solace 用户把 Astra 换成 Solace。博客文章用 WordPress 自带的 Gutenberg 编辑器写，不是 Elementor。）

附录

附录 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：提示词总览（10 个，来自原 Prompt Pack）

附录 C：常见问题排查

附录 D：成本清单

附录 E：核心命令速查

# OpenCode 已安装桌面版（自带 CLI），确认登录状态
opencode auth list          # 确认已登录 Open Design 云
opencode auth login         # 如未登录，执行此命令

# 设计：不需要手动敲命令
# WorkBuddy ──MCP──▶ Open Design ──使用 OpenCode 模型──▶ 设计文件

WorkBuddy 指令速查：
1. 「通过 MCP 连接 Open Design，让它读取 [项目路径]/PROMPT.md 开始设计」（提示词 ①）
2. 「检查 WordPress 连接，告诉我站点名和活动主题」（提示词 ③）
3. 「把 [项目路径] 的 HTML 设计构建成 Elementor 页面，先建首页」（提示词 ④）
4. 「配置 Astra header/footer，使用 Primary Menu」（提示词 ⑦）
5. 「创建 WPForms 联系表单并放入联系页」
6. 「在桌面/平板/手机视图检查所有页面的响应式布局」

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