Skip to content

WARNING

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

使用 Open Design 创建设计文件

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

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

当前输出限制

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

学习目标

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

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

前提条件

开始前,你需要:

  • Olares 1.12.6 或更高版本。

  • 以下模型:

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

你也可以选择不同大小的模型,或改用其他模型提供商:

  • 从应用市场安装其他模型应用。
  • 通过引擎基座应用创建模型实例,使用自己的模型。

如果 AI Agent 应用已安装 Olares CLIAgent Skills,可以让它部署模型并跳过手动设置。例如:

plain
使用 Ollama 引擎基座在我的 Olares 上部署 qwen3.5:9b。

安装 Open Design

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

连接本地模型

获取模型连接信息

模型连接的工作原理

Olares 上的独立模型作为与客户端应用分开的服务运行。要连接两者,客户端需要准确的 Model name,以及与其所需 API 格式相匹配的 Base URL

你可以从模型控制台获取这两个值。有关更多信息,可参阅连接 AI 应用

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

  1. 从启动台打开模型应用。其模型控制台会自动打开。

  2. 等待模型显示就绪,且引擎显示运行中

    Qwen3.6-27B 模型控制台

  3. 模型部分,按显示内容原样复制模型名称

  4. 引擎部分:

    a. 连接来源:选择 Olares 内应用

    b. API 格式:选择 OpenAI-Compatible

    c.按显示内容原样复制 Base URL 地址。

在 Open Design 中添加模型

  1. 从启动台打开 Open Design。

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

  3. Provider preset 中选择 Custom provider

  4. 配置提供方:

    • Base URL:粘贴从 Model Console 复制的 Base URL,包括末尾的 /v1
    • API Key:输入任意非空值,例如 olares。同一 Olares 集群中的应用调用本地模型时,不需要真实密钥。
    • Model:输入从 Model Console 复制的完整 Model name。
    • Max tokens(可选):输入 65536。如需使用更小的上下文窗口,可改为 32768
  5. 点击 Test 检查连接。显示绿色的 Connected 状态表示连接成功。修改会自动保存。

先做小规模测试

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

创建设计项目

  1. 在首页选择项目类型,例如 PrototypeSlide deckDocumentWebsite clone

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

  3. 根据需要选择 Design systemWorking 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

重新复制 Model Console 中的 Base URL,不要修改路径。本指南使用本地模型时,需要在 Model Console 中选择 OpenAI-Compatible,并原样使用显示的 URL,包括 /v1

设计尚未生成完成便停止

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

Open Design 一直没有响应

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

Open Design 使用了错误的模型

比较 Open Design 中的模型与 Model Console 中的 Model name。两者必须完全一致。

Open Design 无法生成独立图片

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

了解更多