首页 / 资讯中心 / 文章详情

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

在 Olares 上使用 Open Design:让本地大模型把提示词变成可交付的 HTML 原型与幻灯片 ★ FEATURED ARTICLE
云原生后端运维【免费下载链接】TerminusOpen-Source Personal Cloud OS for Always-On Agents项目地址https://gitcode.com/gh_mirrors/terminus2/Terminus点击查看免费下载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 或更高版本的设备具有足够的磁盘空间和内存。使用本地模型时能够访问RouterOlares 内置的 AI 网关随 v1.12.7 提供。安装以下模型模型类型模型获取方式对话Qwen3.8-27B (llama.cpp)从 Market 安装使用其他模型可选不一定要用 Qwen3.8-27B。你可以从应用市场安装其他聊天模型或通过引擎基座应用Engine Base克隆出模型实例然后在 Router 的Default models页面将其设为默认聊天模型。使用default-chat作为模型名的客户端会自动调用新的默认模型无需修改客户端设置如果你希望某个客户端始终使用指定模型则改填 Router 的How to call this model窗口中显示的完整模型名称。安装 Open Design打开Market搜索Open Design。点击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 获取模型连接信息从启动台打开Router。在Default models页面将 Qwen3.8-27B (llama.cpp) 设为默认聊天模型。进入LLM页面找到 Qwen3.8-27B (llama.cpp)点击模型所在行的View connection example图标。在弹出的How to call this model窗口中选择Apps in Olares因为 Open Design 是安装在 Olares 内的应用请求由应用自身进程发出位于 Olares 内部网络复制完整的Base URL保留末尾的/v1。记下模型名称default-chat。理解两个关键点default-chat是路由名称不会出现在模型列表 API 的返回结果中。如果客户端会自动获取模型列表你需要手动添加它如果客户端只允许选择列表中的模型则改用 Router 中显示的完整模型名称。Olares 内的应用无需 Router API 密钥。平台会为来自 Olares 内应用的每个请求盖上身份头如X-Olares-App-ID完成鉴权客户端字段允许留空时留空必填时填写占位值olares即可。第二步在 Open Design 中添加模型从启动台打开Open Design。打开Settings在Models providers页面选择API provider。在Provider preset中选择Custom provider。配置提供方配置项值说明Base URL从 Router 复制的完整地址必须包括末尾的/v1否则请求路径不完整连接测试会失败API Key任意非空值例如olares同一 Olares 集群内的应用调用本地模型时不需要真实密钥占位即可Modeldefault-chat路由名称指向 Router 默认聊天模型Max tokens可选65536如需更小的上下文窗口可改为32768点击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。创建设计项目从提示词到可导出文件连接好模型后就可以开始创建第一个设计项目在首页选择项目类型例如Prototype、Slide deck、Document或Website clone。选择符合任务需求的Skill预设例如Blog Post。也可以打开提示词下方的示例把它作为起点。根据需要选择Design system和Working directory。输入具体需求。建议说明目标受众、内容、视觉风格和输出格式。例如为产品发布会制作一张封面幻灯片。 使用深色背景、醒目的几何字体和青绿色点缀。 产品名称为“Northstar”副标题为“Find your next move.”。确认已选择目标模型然后点击箭头开始生成。等待工作区打开并显示预览。在对话中继续调整结果。你可以拖入参考图片或输入添加项目文件然后说明要修改的部分——模型会结合参考素材迭代当前设计。结果满意后打开导出菜单根据项目类型下载 ZIP、PDF 或 PPTX 文件。提示词质量决定了设计下限从上面的示例可以看出Open Design 的提示词应同时覆盖四类信息受众给谁看、内容放什么、视觉方向深色/几何字体/青绿点缀等风格约束、输出格式封面幻灯片、多页落地页等。约束越具体首次生成结果越接近目标后续需要的人工修正就越少。可选连接云端模型不想占用本地资源时你也可以使用云端模型。打开设置在模型与提供商页面选择API 提供方然后选择提供商预设或使用匹配的协议、Base URL、API Key 和模型配置自定义提供方。提供商协议Base URLOpenAIOpenAIhttps://api.openai.com/v1OpenRouterOpenAIhttps://openrouter.ai/api/v1DeepSeekOpenAIhttps://api.deepseek.comAnthropicAnthropichttps://api.anthropic.com通义 QwenOpenAIhttps://dashscope.aliyuncs.com/compatible-mode/v1硅基流动OpenAIhttps://api.siliconflow.cn/v1KimiOpenAIhttps://api.moonshot.cn/v1云端模型的调用费用由所选提供商收取。请使用该提供商的完整模型名称和有效 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 等发送模型请求的应用。RouterOlares AI 能力的统一入口负责验证调用方身份、访问控制和配额管理把不同来源、不同模态的接口归一化为标准 API再按名字把调用路由到对应后端。模型服务本地模型应用中运行的推理引擎如 llama.cpp或 Router 已接入的远程模型服务商。配置时涉及的三类参数与 Router 的对应关系如下参数作用本场景取值API 格式Provider定义客户端与 Router 之间的请求格式OpenAI-CompatibleOpenAI 兼容Base URL指定 Router 的访问地址和 API 路径从 Router 复制的地址含/v1模型名称 / Model ID指定要调用的模型或路由规则default-chat路由名跟随默认模型API key验证调用方身份Olares 内应用无需真实密钥占位olares其中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 上的完整配置方式。赞分享云原生后端运维【免费下载链接】TerminusOpen-Source Personal Cloud OS for Always-On Agents项目地址https://gitcode.com/gh_mirrors/terminus2/Terminus点击查看免费下载相关推荐在 Olares 上使用 Open Design把自然语言提示词变成 HTML 原型、落地页与幻灯片在 Olares 上使用 Open Design把自然语言提示词变成 HTML 原型、落地页与幻灯片 Open Design 是开源的 AI 设计工作室它通云原生后端运维Olares 上使用 Open Design用提示词生成 HTML 原型、落地页与幻灯片的完整指南Olares 上使用 Open Design用提示词生成 HTML 原型、落地页与幻灯片的完整指南 Open Design 是一款开源 AI 设计工作室它通云原生后端运维Open CoDesign 上手指南用一句话提示词在本地生成 HTML 原型、幻灯片与营销素材Open CoDesign 上手指南用一句话提示词在本地生成 HTML 原型、幻灯片与营销素材 Open CoDesign开源 Claude Design人工智能AI 应用桌面应用上一篇kubernetes-handbook 最佳实践从零构建线上可用 Kubernetes 集群的八步路线图下一篇Detox 端到端测试防抖动指南识别、诊断与消除 Flaky Tests创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
阅读完成 · 觉得有帮助?
咨询建站