跳转到正文

WARNING

本文档由 AI 自动翻译,仅供参考。涉及关键操作或信息时,请以英文原文为准。

使用 Open Design 创建设计文件 ​

Open Design 是一款开源 AI 设计工作室,可以将自然语言需求转化为可直接使用的设计文件。它通过内置的 OpenCode 调用你配置的模型,生成可预览的 HTML 原型、落地页、仪表盘、线框图和幻灯片。

在 Olares 上,你可以通过 Router 将 Open Design 连接到本地模型,也可以使用云端模型的 API Key。每个项目集中保存提示词、参考素材、预览和生成文件,方便你持续调整并导出最终设计。

当前输出限制

Olares 上的 Open Design 0.22.1 暂不支持通过文本直接生成独立图片。请用它创建页面、原型、仪表盘或幻灯片。

学习目标 ​

在本指南中,你将学习如何:

  • 在 Olares 上安装 Open Design。
  • 通过 OpenAI 兼容 API 连接本地模型。
  • 创建、调整和导出设计项目。
  • 排查常见的模型连接和生成问题。

前提条件 ​

开始前,你需要:

  • 一台运行 Olares 1.12.7 或更高版本、具有足够磁盘空间和内存的 Olares 设备。

  • 使用本地模型时,能够访问 Router。

  • 以下模型:

    模型类型模型获取方式
    对话Qwen3.8-27B (llama.cpp)从 Market 安装
可选:使用其他模型

从应用市场安装其他聊天模型,或通过引擎基座应用创建模型实例,然后在 Router 的 Default models 页面将其设为默认聊天模型。使用 default-chat 的客户端会调用新的默认模型,无需修改客户端的模型设置。

如果希望某个客户端始终使用指定模型,可改填 Router 的 How to call this model 窗口中显示的完整模型名称。

安装 Open Design ​

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

连接本地模型 ​

获取模型连接信息 ​

模型连接的工作原理

在 Olares 1.12.7 及以上版本中,AI 客户端通过 Olares Router 连接模型。Router 提供 Base URL,并将 default-chat 的请求转发给**默认模型(Default models)**页面中设置的聊天模型。

本教程使用 Qwen3.8-27B (llama.cpp) 作为默认聊天模型。连接格式和 API 密钥要求详见连接 AI 应用。

本指南使用 OpenAI-Compatible API 格式,将 Open Design 连接到 Qwen3.8-27B (llama.cpp):

  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,复制完整的 Base URL,保留末尾的 /v1。

  4. 模型名称使用 default-chat。

    在应用中选择模型

    default-chat 是路由名称,不会出现在从 Router 获取的模型列表中。如果要连接 Router 的应用会加载模型列表,请手动添加 default-chat。如果应用只允许选择列表中的模型,请选择 Router 的 How to call this model 窗口中显示的完整模型名称。

  5. API 密钥留空。如果要连接 Router 的应用要求填写此字段,请填入 olares。

在 Open Design 中添加模型 ​

  1. 从启动台打开 Open Design。

  2. 打开 Settings。在 Models & providers 页面选择 API provider。

  3. 在 Provider preset 中选择 Custom provider。

  4. 配置提供方:

    • Base URL:粘贴从 Router 复制的 Base URL,包括末尾的 /v1。
    • API Key:填写 olares。
    • Model:填写 default-chat。
    • Max tokens(可选):输入 65536。如需使用更小的上下文窗口,可改为 32768。
  5. 点击 Test 检查连接。显示绿色的 Connected 状态表示连接成功。修改会自动保存。

先做小规模测试

开始制作多页幻灯片或落地页之前,先让 Open Design 生成一张封面幻灯片。预览成功后,说明 Base URL、模型名称和 token 上限可以正常配合使用。

创建设计项目 ​

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

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

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

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

    text
    为产品发布会制作一张封面幻灯片。
    使用深色背景、醒目的几何字体和青绿色点缀。
    产品名称为“Northstar”,副标题为“Find your next move.”。
  5. 确认已选择目标模型,然后点击箭头开始生成。

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

  7. 在对话中继续调整结果。你可以拖入参考图片,或输入 @ 添加项目文件,然后说明要修改的部分。

  8. 完成后打开导出菜单,根据项目类型下载 ZIP、PDF 或 PPTX 文件。

可选:连接云端模型 ​

你也可以使用云端模型。打开设置,在模型与提供商页面选择 API 提供方,然后选择提供商预设,或使用匹配的协议、Base URL、API Key 和模型配置自定义提供方。

提供商协议Base URL
OpenAIOpenAIhttps://api.openai.com/v1
OpenRouterOpenAIhttps://openrouter.ai/api/v1
DeepSeekOpenAIhttps://api.deepseek.com
AnthropicAnthropichttps://api.anthropic.com
通义 QwenOpenAIhttps://dashscope.aliyuncs.com/compatible-mode/v1
硅基流动OpenAIhttps://api.siliconflow.cn/v1
KimiOpenAIhttps://api.moonshot.cn/v1

云端模型的调用费用由所选提供商收取。请使用该提供商的完整模型名称和有效 API Key。

故障排查 ​

连接测试失败或返回 404 ​

从 Router 的 How to call this model 窗口重新复制 Apps in Olares 下的 Base URL,保留 /v1。在 LLM 页面确认默认聊天模型显示 Callable。

设计尚未生成完成便停止 ​

将**最大 tokens(可选)**设置为 65536 或 32768。多页幻灯片需要的输出 token 比单页或封面幻灯片更多。

Open Design 一直没有响应 ​

返回模型应用的 Model Console。确认模型显示就绪,且引擎显示运行中后再继续。

Open Design 使用了错误的模型 ​

使用 default-chat,并在 Router 的 Default models 页面检查它指向的模型。如需固定使用某个模型,请改填 Router 中显示的完整模型名称。

Open Design 无法生成独立图片 ​

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

了解更多 ​