> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aihubmix.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Open Design
> Convierte la alternativa de código abierto a Claude Design en un estudio de diseño de IA local con una sola Key de AIHubMix
[Open Design](https://open-design.ai/) (sitio oficial; repositorio de código abierto [`nexu-io/open-design`](https://github.com/nexu-io/open-design)) es una **«alternativa a Claude Design» de código abierto y local-first**. No incluye modelos propios, sino que usa la IA que tú conectes como motor de diseño: genera directamente prototipos web / de escritorio / móviles, dashboards interactivos, presentaciones, imágenes y vídeos, y puede exportarlos como HTML / PDF / PPTX / MP4. Lo que entrega son artefactos ejecutables con CSS y componentes reales, no píxeles sobre un lienzo. Es de código abierto bajo Apache-2.0 y los datos de tus proyectos se quedan en tu máquina.
**AIHubMix ya es un gateway BYOK con soporte integrado en Open Design**: en su modo API (BYOK) selecciona AIHubMix y, con una sola Key, podrás impulsar a la vez el chat, la generación de imágenes, los vídeos y la voz. Este artículo explica precisamente cómo integrarlo y cómo usarlo.
Open Design ofrece dos modos de ejecución (Settings → Execution mode):
* **Local CLI**: invoca un agente CLI ya instalado en tu equipo (Claude Code / Codex, etc.) como motor de diseño, con capacidad para leer y escribir directamente los archivos de código del proyecto.
* **API provider (BYOK, trae tu propia clave)**: no instala ningún CLI y apunta directamente a un endpoint compatible con OpenAI / Anthropic. **En este artículo seguimos esta vía con AIHubMix.**
## Por qué usar AIHubMix como motor
Una sola Key conecta de extremo a extremo el chat, las imágenes, los vídeos y la voz. La generación de medios nativa de Open Design suele requerir integrar a cada proveedor por separado, de modo que las imágenes, los vídeos y la voz pueden exigir Keys de varios proveedores distintos.
[AIHubMix](https://aihubmix.com) es un **gateway agregador compatible con la interfaz de OpenAI**: una sola Key conecta simultáneamente con OpenAI / Anthropic / Google Gemini / DeepSeek, además de con los principales modelos de imagen, vídeo y voz. Open Design **elige el endpoint de protocolo nativo correspondiente de AIHubMix según el nombre del modelo**: `claude*` va por Anthropic, `gemini*` / `imagen*` van por Gemini, y el resto por la interfaz compatible con OpenAI. Así, la cadena de razonamiento de Claude o la generación nativa de imágenes de Gemini no pierden calidad, y tú solo tienes que gestionar una única Key.
### Comparación con herramientas habituales
Las dimensiones de la siguiente tabla se han tomado de la [tabla Comparison del README oficial de Open Design](https://github.com/nexu-io/open-design#comparison):
| Dimensión | Herramientas propietarias como Claude Design / Figma / Lovable / v0, etc. | Open Design + AIHubMix |
| ----------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------- |
| Código abierto | ❌ | ✅ Apache-2.0 |
| Autoalojado / escritorio | ❌ | ✅ macOS · Windows · Vercel |
| Se ejecuta en tu propio agente, con tu propia Key (BYOK) | ❌ Atado a su propio backend | ✅ 22 CLI + BYOK |
| Una sola Key para combinar Claude / GPT / Gemini / DeepSeek | ❌ | ✅ |
| Sistema de diseño `DESIGN.md` | Propietario / limitado | ✅ 150 plantillas integradas |
| Skills / plugins | Cerrado | ✅ Más de 100 skills · 261 plugins |
| HyperFrames (animación HTML→MP4) | ❌ | ✅ |
| Facturación | Suscripción (Pro / Team) | BYOK, según el consumo de cada modelo |
Las dimensiones de comparación y las marcas de los competidores se basan en la tabla Comparison del README oficial de Open Design; los competidores se agrupan en una sola columna según su naturaleza propietaria / de suscripción. Cada producto se actualiza con rapidez, así que prevalece la información oficial más reciente.
## Integración en tres pasos
### Requisito previo: obtén tu Key de AIHubMix
Inicia sesión en [aihubmix.com](https://aihubmix.com) y crea una API Key en la página **Keys** de la consola (con un formato similar a `sk-...`). Cópiala y guárdala de inmediato tras crearla, porque una vez que cierres la ventana emergente ya no podrás ver el texto completo. Te recomendamos cargar algo de saldo por adelantado: la generación de imágenes y vídeos lo consumirá más adelante (el vídeo, en especial, consume bastante saldo).
### Paso 1: elige el modo de ejecución y el protocolo
Abre Open Design, haz clic en el engranaje de la esquina superior derecha para entrar en **Settings (Ajustes) → Execution mode (Modo de ejecución) → selecciona BYOK** y, en la fila **Gateways**, elige **AIHubMix**.
### Paso 2: pega la Key (la dirección está fija, no hace falta escribirla)
En la misma ventana emergente de la imagen anterior, pega tu Key en el campo **API key** (el marcador de posición es `sk-...`) y haz clic en **Test** para verificar la conexión (la captura muestra `Connected. Replied in … 'ok'`).
A diferencia de otros providers: **AIHubMix es un gateway de entrada única fija, cuya dirección (`https://aihubmix.com/v1`) ya viene integrada y oculta en el formulario**; no necesitas (ni puedes) escribirla a mano: un campo menos que podrías rellenar mal.
### Paso 3: elige un modelo y empieza a trabajar
Los modelos de chat, imagen, vídeo y voz se eligen todos en este panel BYOK: el **modelo de chat** en el desplegable **Model** (una vez verificada la Key podrás buscar en el catálogo en tiempo real de AIHubMix; por defecto viene `gpt-5.5`), y los **modelos de imagen / vídeo / voz** en los selectores correspondientes de la parte inferior del panel. Puedes elegir según el caso de uso consultando las distintas [tablas de Arena](https://arena.ai/); los modelos que aparecen a continuación ya están confirmados como disponibles en AIHubMix.
**① Chat / generación de prototipos web (principal)** · Consulta [Code/WebDev Arena](https://arena.ai/leaderboard/code) (votación humana para generar UI web, lo más cercano a Open Design) y [Agent Arena](https://arena.ai/leaderboard/agent) (orquestación de herramientas)
| Caso de uso | Modelo recomendado |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| Razonamiento de diseño / prototipos web (principal) | `gpt-5.5`, `claude-opus-4-8`, `claude-fable-5` |
| Seguimiento estricto de instrucciones / llamadas a herramientas estables | `claude-fable-5` (líder en Steerability), `kimi-k2.6` (menos alucinaciones) |
| Velocidad / volumen / ahorro de costes | `gpt-4o-mini`, `claude-haiku-4-5`, `deepseek-v4-flash` |
> **La generación de medios depende de las llamadas a herramientas**: en el chat, generar imágenes / vídeos / voz es una function call iniciada por el modelo, así que para el modelo principal prioriza los que admiten **function calling** (`gpt-5.5` y la serie Claude Opus son los más estables); de lo contrario, ocurrirá que «el chat funciona pero no genera imágenes». `claude-fable-5` está entre los primeros tanto en WebDev como en Agent, pero el catálogo indica actualmente que el acceso a su canal oficial está restringido, así que **prevalece la disponibilidad real**.
**② Modelos de imagen** · Consulta [Text-to-Image Arena](https://arena.ai/leaderboard/text-to-image)
Bien posicionados en la tabla y disponibles en AIHubMix: `gpt-image-2`, `gemini-3.1-flash-image` (es decir, nano-banana-2), `gemini-3-pro-image` (nano-banana-pro).
**③ Modelos de vídeo** · Consulta [Video Arena](https://arena.ai/leaderboard/text-to-video)
Bien posicionados en la tabla y disponibles en AIHubMix: `doubao-seedance-2-0-260128`, `happyhorse-1.0-i2v` (predeterminado en Open Design), `veo-3.1-generate-preview`, `wan2.7-i2v`.
> Tanto las clasificaciones como los modelos disponibles cambian rápido: **para las clasificaciones prevalece lo más reciente de [Arena](https://arena.ai/), y para los IDs de modelo prevalece el catálogo en tiempo real de AIHubMix** (búscalos directamente en el desplegable).
## Qué puedes hacer tras integrar AIHubMix
Una vez integrado, AIHubMix impulsa tanto la línea principal de Open Design —generar prototipos y artefactos de diseño con los modelos de chat— como, además, los tres tipos de generación de medios: imagen, vídeo y voz.
### Generación de diseño y prototipos (capacidad principal)
Este es el terreno propio de Open Design. El modelo de chat que elijas se encarga de entender los requisitos y generar **prototipos web / de escritorio / móviles, dashboards interactivos, PPT / decks**, escribir sistemas de diseño, revisar y corregir maquetas: lo que entrega son artefactos ejecutables con CSS y componentes reales. Durante la conversación puedes cambiar de modelo en cualquier momento desde la barra superior, alternando proveedores sin fricción con la misma Key.
**Los límites de capacidad del modo BYOK**: en el modo API (BYOK), el chat y la generación de imágenes / vídeo / voz están todos disponibles, pero la IA **no lee, escribe ni edita directamente los archivos de código de tu proyecto**, solo produce artefactos. Cuando necesites que el agente modifique directamente el código local, cambia al modo **Local CLI**.
### Generación de imágenes / vídeo / voz (medios complementarios)
Además de los prototipos, AIHubMix permite que Open Design genere directamente imágenes, vídeos y voz. Estos tres tipos de modelos de medios se configuran todos **dentro del panel BYOK**, y cada uno tiene ya preseleccionado un modelo predeterminado marcado con `Default` (para los modelos concretos, consulta el «Paso 3: elige un modelo» anterior).
#### Generación de imágenes
En el chat, cambia el modo a **Image** y describe directamente lo que quieres, por ejemplo «Generate an image of the Dragon Boat Festival»; el modelo invocará la herramienta integrada `generate_image` para generar la imagen, con soporte para varias proporciones (1:1, 16:9, 9:16, etc.). La serie Gemini / Imagen pasará automáticamente por la interfaz nativa de generación de imágenes de Gemini.
#### Generación de vídeo
La familia de vídeo abarca **Seedance (Doubao), Wan (Tongyi Wanxiang), Veo (Google), Sora (OpenAI)** y más (para los modelos recomendados, consulta el «Paso 3: elige un modelo» anterior; el soporte concreto de texto-a-vídeo / imagen-a-vídeo, la duración, la proporción y la voz de cada proveedor depende del catálogo en tiempo real y de la documentación oficial correspondiente).
En el chat, cambia el modo a **Video** y describe una frase para activar `generate_video`, con soporte para definir la duración y la proporción. Los modelos de imagen-a-vídeo (i2v) necesitan una imagen de referencia: **si no la indicas, la aplicación tomará automáticamente la última imagen del proyecto** (si quieres un control preciso, especifica la imagen de referencia de forma explícita), lo que encadena de manera muy fluida el flujo «primero genero imagen, luego genero vídeo». El vídeo se genera de forma asíncrona; la aplicación hace polling automáticamente y, al terminar, lo incrusta directamente en la conversación.
#### Voz / locución
El **modelo de voz** y el **timbre** también vienen con valores predeterminados preseleccionados en el panel BYOK (el timbre por defecto es `alloy`, y también puedes elegir entre `echo` / `fable` / `onyx` / `nova` / `shimmer`), de modo que en el chat puedes usar `generate_speech` para convertir cualquier texto en locución: ideal para ponerle voz directamente a la demo de un prototipo o a la narración de un vídeo.
## Preguntas frecuentes (FAQ)
El modo Local CLI (que invoca un agente ya instalado en tu equipo) puede modificar directamente el código local, pero requiere que instales previamente el CLI correspondiente. El modo API (BYOK) no instala ningún CLI: con solo configurar una Key de AIHubMix obtienes de inmediato el paquete completo de chat + imagen / vídeo / voz, y es lo más rápido de poner en marcha. Puedes alternar entre ambos modos según lo necesites.
No. En el modo BYOK la IA solo produce artefactos; no lee, escribe ni edita los archivos del proyecto. Cuando necesites que el agente modifique directamente el código local, cambia al modo Local CLI. El chat y la generación de imagen / vídeo / voz no están sujetos a esta limitación.
No es necesario escribirla a mano. En Open Design, AIHubMix es un gateway de entrada única fija cuya dirección (`https://aihubmix.com/v1`) ya viene integrada y oculta en el formulario. Tú solo introduces la API Key: la dirección es única y fija, un campo menos que podrías rellenar mal.
Una vez que la Key se conecte correctamente, en el desplegable **Model** podrás buscar en el catálogo de modelos en tiempo real de AIHubMix (cientos de modelos). El desplegable también incluye algunos modelos insignia de uso frecuente para empezar rápido. Mientras AIHubMix admita ese nombre de modelo, podrás usarlo; los modelos disponibles en cada momento dependen del catálogo en tiempo real.
* **Test falla, no se conecta**: comprueba que la API Key esté bien introducida, que tu cuenta de AIHubMix tenga saldo y que tu equipo pueda acceder a `aihubmix.com` por red.
* **El chat funciona pero no genera imágenes / vídeos**: lo más probable es que el modelo de chat actual no esté iniciando llamadas a herramientas. Cambia a un modelo que **admita function calling** (como `gpt-5.5` o `claude-opus-4-8`) para que se active la generación de medios.
* **Indica que cierto modelo no es compatible**: prevalecen los modelos que puedas encontrar en el catálogo en tiempo real de AIHubMix.
No. Open Design enruta según el nombre del modelo al endpoint de protocolo nativo correspondiente de AIHubMix: `claude*` va por Anthropic, `gemini*` / `imagen*` van por Gemini, y el resto por la interfaz compatible con OpenAI. El protocolo nativo se conserva con fidelidad, así que capacidades exclusivas como la cadena de razonamiento o la generación nativa de imágenes se aprovechan por completo.
Open Design es una aplicación local-first: tanto la API Key como los datos del proyecto se guardan en tu equipo (SQLite local; los archivos del proyecto están en `.od/projects/`). La telemetría está desactivada por defecto y es opcional (opt-in). Las solicitudes las reenvía un daemon local a AIHubMix, y AIHubMix solo se encarga del enrutamiento y reenvío de los modelos.
## Empieza ahora
1. Regístrate en [aihubmix.com](https://aihubmix.com), crea una Key `sk-` en la consola y carga algo de saldo por adelantado (la generación de imágenes / vídeo lo usará)
2. En Open Design → Settings → Execution mode → API provider(BYOK) elige **AIHubMix** y pega la Key
3. En el desplegable Model elige un modelo y pídele que cree una landing page + visual principal; empieza a crear
Descarga Open Design: [open-design.ai](https://open-design.ai/).