Trilium AI Design 插件使用教程

🌟 插件简介

Trilium AI Design 是一款革命性的 AI 驱动 Gutenberg 块生成器，它能够：

1. 🤖 智能生成页面 - 用自然语言描述，AI 自动创建完整的 Gutenberg 块结构
2. ✨ 优化现有块 - 选中已有内容，让 AI 帮你增强设计、重构布局
3. 🎯 专业设计系统 - 内置专业级设计令牌（间距、配色、排版规范），确保输出符合设计标准
4. 🔄 多轮迭代优化 - 不满意可以持续调整，AI 会记住之前的所有修改
5. 💾 会话状态保持 - 页面刷新后仍可恢复之前的工作会话

💡 核心理念：让非设计师也能快速创建专业级别的网页布局，告别"廉价感"设计。

1. 前置要求与安装 🛠️

1.1 系统要求

⚠️ 重要：本插件是 TriliumAI Chat 主插件的扩展模块，必须先安装并配置好主插件才能使用！

1.2 安装步骤

步骤一：确保主插件就绪

首先确认你已安装并激活 TriliumAI Chat 插件，且版本 ≥ 4.0.0。

步骤二：上传插件

将 trilium-ai-design 文件夹上传到：

/wp-content/plugins/trilium-ai-design/ 

步骤三：激活插件

在 WordPress 后台 「插件」 页面，找到 Trilium AI Design 并点击 「启用」。

1.3 依赖检查

激活后，如果看到以下提示，说明主插件未正确安装：

⚠️ Trilium AI Design 需要 TriliumAI Chat 主插件（版本 4.0.0+）才能正常工作。

请先解决主插件问题，确保 API 配置正常后再继续。

2. 基础设置 ⚙️

2.1 进入设置页面

在 WordPress 后台，导航到 「设置」→「AI Design」

2.2 设计偏好配置

插件提供了多项默认设计偏好设置：

🎨 设计风格

🌈 配色方案

提供 8 种预设配色方案：

• 靛蓝 (Indigo) - 专业稳重（默认）
• 翡翠 (Emerald) - 清新自然
• 玫瑰 (Rose) - 温馨浪漫
• 琥珀 (Amber) - 活力温暖
• 石板 (Slate) - 中性专业
• 紫罗兰 (Violet) - 创意神秘
• 青色 (Cyan) - 科技清爽
• 中性 (Neutral) - 极简黑白

📏 间距比例

2.3 高级设置

⏱️ 会话过期时间

设置生成/优化会话历史的保留时间：

• 最短：2 小时
• 推荐：96 小时（4天）
• 最长：720 小时（1个月）

较长的保留时间允许你在更长周期内继续之前的工作。

3. 生成模式：从零创建页面 🚀

3.1 打开 AI 块生成器

1. 创建或编辑任意文章/页面
2. 在 Gutenberg 编辑器中，点击右上角的 「⋮ 更多选项」 按钮
3. 在下拉菜单中选择 「AI 块生成器」
4. 右侧将打开 AI 块生成器侧边栏

3.2 描述你想要的内容

在 「生成」 标签页中的输入框，用自然语言描述你想要的页面内容。

📝 优质提示词示例

基础描述：

创建一个SaaS产品的着陆页，包含：Hero区块展示产品价值主张，三列特性介绍，用户评价区，底部CTA行动召唤

详细描述（推荐）：

为一款AI写作助手创建着陆页：

1. Hero区块：
   - 大标题"让AI成为你的写作伙伴"
   - 副标题强调效率提升3倍
   - 两个按钮：免费试用（主按钮）、了解更多（次按钮）
   - 背景使用浅色渐变

2. 功能特性（3列）：
   - 智能续写
   - 多语言翻译
   - 语法纠错

3. 定价区块：
   - 免费版/专业版/企业版 三档
   - 专业版需要视觉突出

4. 底部CTA：深色背景，白色文字

3.3 点击生成

点击 「生成内容」 按钮，等待 AI 完成设计：

⏳ AI正在设计中... (通常需要10-30秒)

3.4 预览生成结果

生成完成后，你可以：

• 👀 预览块结构 - 查看生成的块层级
• 📊 查看块数量 - 了解生成了多少个块
• 📋 查看原始JSON - 高级用户可查看底层结构

3.5 迭代优化

如果对生成结果不完全满意，你可以继续输入调整指令：

示例调整指令：

把Hero区块的背景改成深蓝色渐变，文字改成白色

在特性区块增加第四个特性：24/7客服支持

定价区块的按钮改成圆角胶囊形状

点击 「继续优化」 按钮，AI 会基于当前结果进行修改。

3.6 插入到编辑器

满意后，点击 「插入到编辑器」 按钮，将生成的块直接插入到当前编辑位置。

4. 优化模式：改进现有内容 ✨

4.1 选择要优化的块

1. 在编辑器中，点击选中你想要优化的块
2. 按住 Shift 可以多选连续的块
3. 打开 AI 块生成器侧边栏
4. 切换到 「优化选中块」 标签页

4.2 选择优化模式

插件提供 5 种预设优化模式：

4.3 输入优化指令

根据选择的模式，在输入框中提供具体指令：

增强设计示例：

使用更大的内边距，卡片添加微阴影，标题加粗

重构布局示例：

把现在的2列改成3列，每列宽度相等

自定义指令示例：

把这个区块改成深色主题，添加渐变背景，所有文字改成白色

4.4 多轮迭代

优化模式支持多轮迭代，每次优化时：

• 🧠 AI 会记住所有历史指令
• 📜 你可以点击 「查看历史」 查看之前的所有操作
• 🔄 不满意可以继续输入新指令
• ♻️ 点击 「重置」 可恢复到原始选中的块

4.5 应用优化结果

满意后有两个选择：

• 「应用优化」 - 替换原来选中的块
• 「插入为新块」 - 在当前位置插入，保留原块

5. 设计系统详解 📐

5.1 为什么需要设计系统？

本插件内置专业级设计系统，确保 AI 生成的内容：

• ✅ 间距遵循 8px 网格系统
• ✅ 颜色使用科学的色阶
• ✅ 排版符合视觉层级规范
• ✅ 整体风格一致统一

5.2 间距令牌系统

基于 8px 网格的间距规范：

5.3 视觉层级规则

AI 严格遵守的标题层级规范：

5.4 设计反例（AI 会避免）

插件训练 AI 避免以下常见设计错误：

❌ 间距问题：

• 内边距太小（内容紧贴边缘）
• 所有元素间距相同（无节奏感）
• 内容填满整个区块（无呼吸空间）

❌ 排版问题：

• 页面有多个 H1
• 标题层级跳跃（H1 直接到 H3）
• 正文字体小于 16px

❌ 颜色问题：

• 主色面积超过 30%
• 使用超过 3 种主要颜色
• 对比度不足

6. 会话管理与历史记录 📚

6.1 会话自动保存

插件会自动保存你的工作会话：

• 🔄 页面刷新后自动恢复 - 不会丢失进度
• ⏰ 按设置的过期时间保留 - 默认 96 小时
• 👤 按用户和文章隔离 - 不同文章有独立会话

6.2 查看对话历史

在生成模式下，你可以查看与 AI 的完整对话历史：

1. 原始请求
2. AI 响应
3. 你的调整指令
4. AI 的修改结果
5. ...循环

6.3 查看指令历史

在优化模式下，点击 「查看历史」 可以看到：

📝 优化指令历史

第 1 轮 [增强设计]: 增加内边距和阴影
第 2 轮 [自定义]: 把背景改成渐变色
第 3 轮 [简化精炼]: 删除多余的描述文字

6.4 清除会话

如果想重新开始：

• 生成模式：点击 「清除对话」 按钮
• 优化模式：点击 「重置」 按钮

7. 最佳实践与技巧 💡

7.1 写好提示词的技巧

✅ 明确结构

好的示例：
"创建一个包含3个区块的页面： 1. Hero区块（居中标题+副标题+按钮）
2. 特性区块（4列卡片）
3. CTA区块（深色背景）" 
不好的示例：
"做一个漂亮的页面" 

✅ 指定具体内容

好的示例：
"Hero标题：'让数据驱动决策'" 
不好的示例：
"写个合适的标题" 

✅ 说明设计偏好

好的示例：
"使用现代简约风格，主色用靛蓝色，大量留白" 

7.2 迭代优化的策略

1. 先整体后细节 - 先确定大结构，再调整细节
2. 一次一个修改 - 每轮聚焦一个调整点
3. 使用具体数值 - "内边距改成64px" 优于 "内边距大一点"

7.3 优化模式使用场景

8. 常见问题解答 ❓

Q1：生成失败，提示"TriliumAI Chat API 未找到"？

原因：主插件未安装或版本过低

解决方案：

1. 确认已安装 TriliumAI Chat 插件
2. 确认版本 ≥ 4.0.0
3. 确认主插件的 API 配置正确

Q2：生成的设计不符合预期怎么办？

解决方案：

1. 在设置中调整默认设计风格和配色
2. 在提示词中明确指定设计要求
3. 使用迭代功能逐步调整

Q3：为什么AI总是生成居中布局？

原因：这是许多专业设计的默认选择

解决方案：在提示词中明确指定：

使用左对齐布局，不要居中

Q4：生成的块插入后样式不对？

可能原因：

• 主题样式覆盖了块样式
• 主题不支持某些 Gutenberg 功能

解决方案：

• 使用支持完整 Gutenberg 的现代主题
• 检查主题是否覆盖了核心块样式

Q5：会话刷新后没有恢复？

可能原因：

• 超过了设置的过期时间
• 切换了用户账号
• 编辑了不同的文章

解决方案：

• 在设置中增加会话过期时间
• 确保在同一文章中操作

Q6：如何使用本地 AI（Ollama）？

1. 确保 TriliumAI Chat 主插件已配置好 Ollama
2. 在主插件设置中选择 Ollama 作为 AI 提供商
3. 配置 Ollama 地址（默认 http://localhost:11434）
4. 选择已安装的模型（如 llama3.2:3b）

🎉 总结

Trilium AI Design 让你能够：

• ✅ 用自然语言快速创建专业级页面布局
• ✅ 通过多轮迭代精细调整设计细节
• ✅ 优化改进现有的 Gutenberg 块内容
• ✅ 确保输出符合专业设计系统规范

无论你是设计新手还是经验丰富的开发者，这个插件都能显著提升你的页面构建效率！

🔗 相关资源

• TriliumAI Chat 主插件设置：设置 → TriliumAI
• Trilium AI Design 设置：设置 → AI Design