在 Olares 上使用 Open Design：让本地大模型把提示词变成可交付的 HTML 原型与幻灯片

• 云原生
• 后端
• 运维

Open Design 是一款开源 AI 设计工作室，能把自然语言需求直接转化为可预览、可导出的设计文件。本指南基于 Olares 应用市场中的 Open Design 0.22.1 版本，完整讲解从安装、通过 OpenAI 兼容 API 连接本地模型（或云端模型），到创建、迭代并导出设计项目的全过程，并针对常见的连接失败、生成中断等问题给出可落地的排查方案。读完本文，你将掌握一套在 Olares 个人云上运行自托管 AI 设计工作流的完整方法。

Open Design 是什么：从自然语言到设计文件

Open Design 的核心能力，是把一段自然语言需求（brief）转化为"可直接使用"的设计文件。它不是简单地生成一张图片，而是通过内置的OpenCode代理调用你配置好的模型，产出结构化的设计产物，包括：

• HTML 原型（Prototype）
• 落地页（Landing page）
• 仪表盘（Dashboard）
• 线框图（Wireframe）
• 幻灯片（Slide deck）

在 Olares 上，Open Design 有两种模型接入方式：通过 Router 连接本地模型（数据不出设备），或直接携带云端提供商的 API Key 调用云模型。每个设计项目都会集中保存提示词、参考素材、预览结果和生成文件，方便你在导出最终设计前反复调整。

:::warning 当前输出限制 Olares 上的 Open Design 0.22.1 暂不支持通过文本直接生成独立图片（standalone image）。请用它创建页面、原型、仪表盘或幻灯片，文生图请选择 Olares 上其他 Creative 类能力。 :::

准备工作：版本、Router 与模型

开始之前，请确认以下条件（依据 docs/zh/reusables/ai-service-connections.md 中的通用前提）：

• 一台运行Olares 1.12.7 或更高版本的设备，具有足够的磁盘空间和内存。
• 使用本地模型时，能够访问Router（Olares 内置的 AI 网关，随 v1.12.7 提供）。
• 安装以下模型：

使用其他模型（可选）

不一定要用 Qwen3.8-27B。你可以从应用市场安装其他聊天模型，或通过引擎基座应用（Engine Base）克隆出模型实例，然后在 Router 的Default models页面将其设为默认聊天模型。使用default-chat作为模型名的客户端会自动调用新的默认模型，无需修改客户端设置；如果你希望某个客户端始终使用指定模型，则改填 Router 的How to call this model窗口中显示的完整模型名称。

安装 Open Design

1. 打开Market，搜索Open Design。
2. 点击Get，然后点击Install，等待安装完成。

安装完成后，Open Design 会出现在 Olares 启动台（Launchpad）上。

连接本地模型：通过 OpenAI 兼容 API 走 Router

在 Olares 1.12.7 及以上版本中，AI 客户端统一通过Router连接模型：Router 提供 Base URL，并把default-chat的请求转发到Default models页面中设置的聊天模型（详见 docs/zh/reusables/ai-service-connections.md）。本指南使用OpenAI-CompatibleAPI 格式，将 Open Design 连接到 Qwen3.8-27B (llama.cpp)。

第一步：从 Router 获取模型连接信息

1. 从启动台打开Router。在Default models页面将 Qwen3.8-27B (llama.cpp) 设为默认聊天模型。
2. 进入LLM页面，找到 Qwen3.8-27B (llama.cpp)，点击模型所在行的View connection example图标。
3. 在弹出的How to call this model窗口中，选择Apps in Olares（因为 Open Design 是安装在 Olares 内的应用，请求由应用自身进程发出，位于 Olares 内部网络），复制完整的Base URL，保留末尾的/v1。
4. 记下模型名称default-chat。

理解两个关键点：

• default-chat是路由名称，不会出现在模型列表 API 的返回结果中。如果客户端会自动获取模型列表，你需要手动添加它；如果客户端只允许选择列表中的模型，则改用 Router 中显示的完整模型名称。
• Olares 内的应用无需 Router API 密钥。平台会为来自 Olares 内应用的每个请求盖上身份头（如X-Olares-App-ID）完成鉴权，客户端字段允许留空时留空，必填时填写占位值olares即可。

第二步：在 Open Design 中添加模型

1. 从启动台打开Open Design。
2. 打开Settings，在Models & providers页面选择API provider。
3. 在Provider preset中选择Custom provider。
4. 配置提供方：

5. 点击Test检查连接。显示绿色的Connected状态表示连接成功。修改会自动保存。

:::tip 先做小规模测试 开始制作多页幻灯片或落地页之前，先让 Open Design 生成一张封面幻灯片。预览成功，说明 Base URL、模型名称和 token 上限三者能正常配合使用。 :::

需要留意的是，客户端填写的 token 上限不能超过模型引擎实际配置的上下文长度。只增大客户端设置不会扩大引擎容量。可以在 Router 的LLM页面打开模型的Model card，查看Context window与Engine args中的精确配置（例如 llama.cpp 引擎以-c参数指定上下文大小，参见 docs/zh/reusables/ai-service-connections.md）。

创建设计项目：从提示词到可导出文件

连接好模型后，就可以开始创建第一个设计项目：

1. 在首页选择项目类型，例如Prototype、Slide deck、Document或Website clone。

2. 选择符合任务需求的Skill预设，例如Blog Post。也可以打开提示词下方的示例，把它作为起点。

3. 根据需要选择Design system和Working directory。

4. 输入具体需求。建议说明目标受众、内容、视觉风格和输出格式。例如：

   为产品发布会制作一张封面幻灯片。 使用深色背景、醒目的几何字体和青绿色点缀。 产品名称为“Northstar”，副标题为“Find your next move.”。

5. 确认已选择目标模型，然后点击箭头开始生成。

6. 等待工作区打开并显示预览。

7. 在对话中继续调整结果。你可以拖入参考图片，或输入@添加项目文件，然后说明要修改的部分——模型会结合参考素材迭代当前设计。

8. 结果满意后，打开导出菜单，根据项目类型下载 ZIP、PDF 或 PPTX 文件。

提示词质量决定了设计下限

从上面的示例可以看出，Open Design 的提示词应同时覆盖四类信息：受众（给谁看）、内容（放什么）、视觉方向（深色/几何字体/青绿点缀等风格约束）、输出格式（封面幻灯片、多页落地页等）。约束越具体，首次生成结果越接近目标，后续需要的人工修正就越少。

可选：连接云端模型

不想占用本地资源时，你也可以使用云端模型。打开设置，在模型与提供商页面选择API 提供方，然后选择提供商预设；或使用匹配的协议、Base URL、API Key 和模型配置自定义提供方。

云端模型的调用费用由所选提供商收取。请使用该提供商的完整模型名称和有效 API Key（与本地模型场景不同，云端场景的 API Key 必须真实有效）。

故障排查

连接测试失败或返回 404

从 Router 的How to call this model窗口重新复制Apps in Olares下的 Base URL，保留/v1。不要在客户端里手改路径。同时回到 Router 的LLM页面，确认默认聊天模型显示Callable（可调用），如果不可用，查看状态下方显示的原因。

设计尚未生成完成便停止

把**最大 tokens（可选）**设置为65536或32768。多页幻灯片需要的输出 token 比单页或封面幻灯片更多，token 上限过小会导致生成在途中被截断。

Open Design 一直没有响应

返回模型应用的Model Console，确认模型显示就绪（Ready）、引擎显示**运行中（Running）**后再继续。模型文件未下载完成或推理引擎未上线时，任何请求都不会得到响应（模型就绪状态说明见 docs/zh/use-cases/llm-base-apps.md）。

Open Design 使用了错误的模型

使用default-chat，并在 Router 的Default models页面检查它当前指向的模型。如需固定使用某个模型，请改填 Router 中显示的完整模型名称，这样就不会随默认模型的更换而漂移。

Open Design 无法生成独立图片

这是 Olares 上 Open Design 0.22.1 的当前限制。请改用页面、幻灯片、仪表盘、线框图或交互式原型对应的 Skill。

原理纵深：Olares 上的模型连接架构

理解 Router 在本次配置中的角色，有助于你复用同样的方法连接其他 AI 应用。Olares 的 AI 连接包含三层（详见 docs/zh/manual/best-practices/connect-ai-apps.md 与 docs/zh/use-cases/olares-router.md）：

• 客户端应用：Open Design 等发送模型请求的应用。
• Router：Olares AI 能力的统一入口，负责验证调用方身份、访问控制和配额管理，把不同来源、不同模态的接口归一化为标准 API，再按名字把调用路由到对应后端。
• 模型服务：本地模型应用中运行的推理引擎（如 llama.cpp），或 Router 已接入的远程模型服务商。

配置时涉及的三类参数与 Router 的对应关系如下：

其中default-chat这类以default-前缀开头的名字是系统默认名：Router 会自动把请求路由到当前分配给该能力的模型。这也是为什么更换默认聊天模型后，Open Design 无需改配置就能跟随新模型——代价是你必须清楚default-chat当前指向谁。

更多阅读

• 使用 Ollama、vLLM、llama.cpp 和 SGLang 运行本地大模型：使用引擎基座应用部署本地模型，并通过 Router 连接客户端。
• 将 AI 应用连接到模型服务：深入了解模型名称、API 格式和 Base URL 的语义。
• 使用 Olares Router 作为你的 AI 网关：了解 Router 的鉴权机制、模型命名规范与能力分类。
• 将 OpenCode 设置为你的 AI 编码代理：Open Design 内部依赖的 OpenCode 代理在 Olares 上的完整配置方式。

• 云原生
• 后端
• 运维