AI 如何在 2 分钟内生成完整的 WordPress 网站

每次有人在 PAGEnza 中输入公司描述并点击生成时，后台都会发生一些相当复杂的事情——大约需要 90 秒。本文将详细解释这到底是什么。

模板的问题

大多数 AI 网站构建器的工作方式是：它们选择一个模板，替换您的文本，然后称之为“AI 生成”。结果看起来与其他在该平台上构建的网站一样。

PAGEnza 的工作方式不同。没有模板。每个网站都从一个空白的 Gutenberg 画布开始，并根据我们称为设计指令的一组设计规则算法化地构建。

什么是设计指令？

设计指令是一个结构化的提示——大约 8,000 个 token——它描述了特定网站的每一个视觉和结构决策。它在进行任何 AI 调用之前，基于您的输入在 Python 中构建。

它包含六个部分：

A 部分 — 品牌标识：行业、公司名称、语气（例如，“专业”与“俏皮”）、目标受众。

B 部分 — 色彩系统：一个 4 色调色板（ink、bg1、bg2、accent），算法化生成并根据 WCAG AA 对比度规则进行验证。每个调色板都经过实际亮度数学计算——而非猜测——进行检查。

C 部分 — 排版：一个字体三件套（标题/正文/强调），从 80 多个 Google 字体中选择，按行业原型过滤，并验证包含 latin-ext 字符支持。

D 部分 — 布局蓝图：页面结构——哪些部分出现，按什么顺序，以及使用什么变体（例如，全宽图像的英雄部分或分体式布局的英雄部分）。

E 部分 — 设计约束：边框半径样式（sharp / soft / rounded）、部分分隔符形状、图像处理、间距系统。

F 部分 — 内容规则：文本放置位置、标题结构、号召性用语（CTA）出现方式。

调色板如何生成

色彩是大多数 AI 工具失败的地方。要求 LLM 选择颜色会得到随机的十六进制代码，这些代码单独看起来可能不错，但无法通过可访问性测试——或者只是看起来很普通。

我们采取了不同的方法。我们的调色板系统的工作方式如下：

1. 根据您的行业和原型（例如，“奢华”、“大胆”、“质朴”），我们从20 个预先审核的调色板组中进行选择
2. 在每个组内，我们选择一个调色板，其中 ink 与所有背景的对比度 ≥4.5:1
3. 我们验证 accent 与 bg1 和 bg2 的对比度 ≥3.0:1
4. 我们确保两个背景色具有对比鲜明的色温（一个暖色，一个冷色），以便各部分感觉不同

如果调色板未能通过任何检查，它将被自动替换。此步骤不涉及 LLM——纯粹是数学计算。

Gutenberg 块如何组装

设计指令准备就绪后，它会发送到 Gemini Flash，并附带一个严格的提示，该提示指定：

• 允许使用的块（约 40 种 Gutenberg 块类型的白名单）
• 每种块类型必需的属性
• 输出的确切 JSON 格式

AI 返回原始的 Gutenberg 块 JSON——不是 HTML，不是 React，而是实际的 WP 块标记。然后，该 JSON 会经过几个验证阶段：

1. 模式验证——必需的属性存在，没有未知的块类型
2. CSS 类清理——发明的类名被剥离，替换为我们的设计系统类
3. 修复过程——同步间距属性，标准化封面块渐变，注入形状分隔符

结果直接通过 WP REST API 上传到 WordPress，并激活为网站的主页。

每个网站的独特性

即使是同一行业，每次生成之间也有几个变量：

• 调色板：20 多个组，每组有多个调色板
• 字体三件套：每个原型有 6 种以上的组合
• 部分顺序和变体：英雄布局、统计样式、功能卡片排列
• 形状分隔符：有机与几何，幅度/频率变化
• 斑点形状：对于有机行业，图像和卡片斑点从 12 种变体中随机选择

结果是，在同一天生成的两个披萨店网站将具有不同的颜色、不同的字体、不同的布局——并且两者都将符合 WCAG AA 标准。

下一步

我们目前正在进行以下工作：

• 多页面生成——从同一指令生成 /about、/services 和 /contact 页面
• 实时预览——在部署到 WordPress 之前查看网站
• 样式迁移——上传您喜欢的网站的截图并提取其设计 DNA

如果您想亲眼看看该系统如何运作，该生成器可免费试用——首次生成无需注册。