Cómo utilizar Open Design con las API de SiliconFlow

Índice de contenidos

Open Design es un espacio de trabajo de diseño con vibración de agente, a menudo descrito como la alternativa de código abierto a Claude Design. Convierte a un agente de programación que ya utilices (Claude Code, Codex, Cursor, Gemini CLI, OpenCode y más de 20 otros) en un motor de diseño completo: entrégale un informe y un sistema de diseño, y te transmitirá prototipos, páginas de destino, paneles de control, presentaciones, imágenes e incluso vídeos, todo como archivos de proyecto editables que puedes exportar a HTML, PDF, PPTX o MP4.

SiliconFlow ya está disponible como proveedor integrado en Open Design. Conecta tu API Key en el panel de Ajustes para acceder a más de 200 modelos, incluidos DeepSeek, Kimi, GLM, Qwen y más, a través de una única API compatible con OpenAI con tarifas de pago por uso.

Paso 1: Instalar Open Design

Aplicación de escritorio (recomendado)

La vía más rápida: sin Node, sin pnpm, sin clonar repositorios:

Tras la instalación, la aplicación detectará automáticamente cada CLI de agente de programación en tu PATH, cargará más de 259 habilidades y más de 142 sistemas de diseño, y estará lista para funcionar.

Docker (autoalojado)

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

Desde el código fuente

git clone https://github.com/nexu-io/open-design.git
cd

git clone https://github.com/nexu-io/open-design.git
cd

git clone https://github.com/nexu-io/open-design.git
cd

Requiere Node ~24 y pnpm 10.33.x. Detalles completos → QUICKSTART.md.

Paso 2: Obtén tu API Key de SiliconFlow

Para empezar, necesitarás una cuenta de SiliconFlow:

  • Regístrate en https://cloud.siliconflow.com/; puedes usar Google o GitHub.

  • Abre API Keys en el panel de control.

  • Haz clic en 🔑 Create API Key, asígnale un nombre para que puedas encontrarla más tarde y confirma.

  • Haz clic en la clave para copiarla.

🔐 Las API Keys son credenciales. Nunca incluyas una clave real en un documento, captura de pantalla, repositorio o mensaje de chat.

Apikey1

Paso 3: Conectar SiliconFlow a Open Design

En la página de inicio de sesión de Open Design, selecciona Local coding agent o Bring your own key.

  1. Para el Execution mode, elige BYOK.

  2. Para el API provider, elige OpenAI.

  3. Selecciona el ajuste preestablecido SiliconFlow Global en el menú desplegable de proveedores. Esto completará automáticamente la URL Base con https://api.siliconflow.com/v1.

  4. Pega tu API Key de SiliconFlow.

  5. Elige un modelo: introduce cualquier ID de modelo de la biblioteca de modelos de SiliconFlow (por ejemplo, deepseek-ai/DeepSeek-V4 o moonshotai/Kimi-K3).

Eso es todo: Open Design enviará ahora todas las ejecuciones de BYOK a través de SiliconFlow.

Opendesign1

Paso 4: Genera tu primer diseño

  1. Vuelve a la página de Inicio y selecciona New Project o Start Designing.

  2. Elige una habilidad (por ejemplo, canvas-design, ad-creative, twitter share card) o una plantilla de diseño (por ejemplo, Website clone, Prototype, Live artifact).

  3. Escribe un informe en la casilla de chat y dale a ejecutar. Por ejemplo:

Create a responsive sign-in page with email, password, and SSO options with Apple-style
Create a responsive sign-in page with email, password, and SSO options with Apple-style
Create a responsive sign-in page with email, password, and SSO options with Apple-style
  1. Open Design transmite el artefacto a una vista previa en un entorno aislado mientras se genera.

  2. Revisa el resultado antes de aceptar cualquier cambio en los archivos locales.

Desde ahí puedes continuar:

  • Iterar sobre la marcha: perfecciona mediante indicaciones de seguimiento sin tener que volver a empezar.

  • Exportar: descárgalo como HTML, PDF, PPTX o ZIP.

  • Pasar al código: el artefacto es HTML/CSS real, listo para soltarlo en Cursor, Codex o Claude Code.

Qué puedes crear

Con SiliconFlow como proveedor del modelo, todo el catálogo de habilidades de Open Design está a tu disposición:

  • Prototipos: páginas de destino, aplicaciones web, pantallas móviles

  • Presentaciones: exportables a PPTX y PDF

  • Paneles de control: paneles de analítica, vistas de KPI, salas de toma de decisiones

  • Imágenes y vídeo: recursos visuales de marca y gráficos en movimiento

Cambiar de modelo es solo cuestión de modificar los ajustes: un modelo más ligero para iteraciones rápidas o uno más potente para proyectos complejos.

¿Qué modelo deberías elegir?

El modelo que elijas afecta tanto a la calidad de los artefactos generados como a la velocidad de generación. Para las tareas de diseño, lo que más importa es un sólido seguimiento de las instrucciones y una gran capacidad de contexto, ya que el agente necesita leer un tutorial completo de DESIGN.md (a menudo de más de 2000 tokens) además de las instrucciones de las habilidades y producir artefactos completos listos para producción.

Modelo

Aspectos destacados

Kimi K3

Excelente generación de frontend, n.º 1 en Frontend Code Arena, contexto nativo de 1M.

GLM-5.2

Sólido rendimiento de código con una generación de interfaz de usuario de contexto largo muy fiable.

Serie DeepSeek V4

Contexto de 1M, ideal para agentes, excelente relación calidad-precio para las cargas de trabajo cotidianas.

Explorar más

SiliconFlow ofrece más de 200 modelos de laboratorios de IA líderes, incluidos DeepSeek, GLM, Kimi, Qwen, MiniMax, Tencent Hunyuan, LongCat, Nex-agi y más, para que siempre puedas elegir el modelo adecuado para tu tarea.

¿Listo para crear? Crea una API Key de SiliconFlow, conéctala a Open Design y empieza a generar diseños listos para producción con más de 200 modelos en cuestión de minutos.

Recursos

Open Design

SiliconFlow

¿Listo para acelerar tu desarrollo de IA?

¿Listo para acelerar tu desarrollo de IA?

¿Listo para acelerar tu desarrollo de IA?

© 2026 SiliconFlow

© 2026 SiliconFlow

© 2026 SiliconFlow