Skip to content

Create design files with Open Design

Open Design is an open-source AI design studio that turns natural-language briefs into working design files. Its built-in OpenCode agent uses a model provider you configure to create previewable HTML prototypes, landing pages, dashboards, wireframes, and slide decks.

On Olares, you can connect Open Design to a local model through Model Console or bring an API key for a cloud provider. Projects keep their prompts, references, previews, and generated files together so you can iterate on a design before exporting it.

Current output limitation

Open Design 0.22.1 on Olares does not generate standalone images from text. Use it to create pages, prototypes, dashboards, or slide decks instead.

Learning objectives

In this guide, you will learn how to:

  • Install Open Design on Olares.
  • Connect a local model through its OpenAI-compatible API.
  • Create, refine, and export a design project.
  • Troubleshoot common model connection and generation issues.

Prerequisites

Before you begin, you need:

  • Olares 1.12.6 or later.

  • The following model:

    Model typeModelHow to get it
    ChatQwen3.6-27B (llama.cpp)Install from Market
Optional: Use a different model

You can use a different model size or provider instead of the one listed above:

  • Install a different model app from Market.
  • Create a model instance from Engine Base apps to bring your own model.

If your AI agent app has the Olares CLI and Agent Skills installed, ask it to deploy the model and skip the manual setup. For example:

plain
Deploy qwen3.5:9b on my Olares using the Ollama Engine Base.

Install Open Design

  1. Open Market and search for "Open Design".
  2. Click Get, then Install, and wait for installation to complete.

Connect a local model

Get the model connection details

How model connections work

A standalone model on Olares runs as a separate service from the client app. To connect them, the client needs the exact Model name and a Base URL that matches the API format it expects.

You can get both values from the model's console. For more details, see Connect AI apps.

In this guide, Open Design connects to Qwen3.6-27B (llama.cpp) using the OpenAI-Compatible API format:

  1. Open the model app from Launchpad. Its Model Console opens automatically.

  2. Wait until Model shows READY and Engine shows RUNNING.

    Qwen3.6-27B model console

  3. Under Model, copy the Model name exactly as shown.

  4. Under Engine:

    a. Connection source: Select Apps in Olares.

    b. API format: Select OpenAI-Compatible.

    c. Copy the provided Base URL exactly as shown.

Add the model to Open Design

  1. Open Open Design from Launchpad.

  2. Open Settings. On the Models & providers page, select API provider.

  3. Under Provider preset, select Custom provider.

  4. Configure the provider:

    • Base URL: Paste the Base URL copied from Model Console, including the trailing /v1.
    • API key: Enter any non-empty value, such as olares. Local model apps do not require a real key for requests from another app in the same Olares cluster.
    • Model: Enter the exact Model name copied from Model Console.
    • Max tokens (optional): Enter 65536. You can use 32768 for a smaller context window.
  5. Click Test to verify the connection. A green Connected status confirms that the connection is established. Changes are saved automatically.

Start with a small test

Ask Open Design to create a single title slide before starting a multi-page deck or landing page. A successful preview confirms that the Base URL, model name, and token limit work together.

Create a design project

  1. On the Home page, select a project type, such as Prototype, Slide deck, Document, or Website clone.

  2. Choose a Skill preset that matches your task, such as Blog Post. You can also open one of the examples below the prompt to use it as a starting point.

  3. Optionally, select a Design system and Working directory.

  4. Enter a specific brief. Include the intended audience, content, visual direction, and output format. For example:

    text
    Create a title slide for a product launch presentation.
    Use a dark background, a bold geometric title, and a teal accent.
    Include the product name "Northstar" and the subtitle "Find your next move."
  5. Check that the intended model is selected, then click the arrow to start generating.

  6. Wait for the workspace to open and the preview to render.

  7. Refine the result in the conversation. You can drag in a reference image or type @ to attach a project file, then describe the part you want to change.

  8. When the result is ready, open the export menu and download it as ZIP, PDF, or PPTX, depending on the project type.

Optional: Connect a cloud model

You can use a cloud provider instead of the local model. Open Settings, select API provider on the Models & providers page, then choose a provider preset or configure a custom provider with the matching protocol, Base URL, API key, and model.

ProviderProtocolBase 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
SiliconFlowOpenAIhttps://api.siliconflow.cn/v1
KimiOpenAIhttps://api.moonshot.cn/v1

Cloud usage is billed by the selected provider. Use that provider's exact model name and a valid API key.

Troubleshooting

The connection test fails or returns 404

Paste the Base URL from Model Console again without changing its path. For the local model in this guide, select OpenAI-Compatible in Model Console and use the URL exactly as displayed, including /v1.

Generation stops before the design is complete

Set Max tokens to 65536 or 32768. Multi-page slide decks need more output tokens than a single page or cover slide.

Open Design does not respond

Return to the model app's Model Console. Continue only when Model shows READY and Engine shows RUNNING.

Open Design uses the wrong model

Compare the Model value in Open Design with the Model name in Model Console. The values must match exactly.

Open Design does not create a standalone image

This is a limitation of Open Design 0.22.1 on Olares. Select a Skill for a page, slide deck, dashboard, wireframe, or interactive prototype instead.

Learn more