102.3K+Descargar
Para desarrolladoresOpenDesign

Creador de sitios web con IA para desarrolladores

Conecta tu agente de programación local, usa tu propia clave de modelo o empieza en OpenDesign Cloud. Aplica un sistema de diseño reutilizable, genera y revisa una interfaz adaptable y conserva los archivos del proyecto para el trabajo de ingeniería posterior.

Descargar OpenDesignVer el ejemplo de sitio web

Agente local · Usa tu propia clave · OpenDesign Cloud

Sitio web de hostelería01 / OpenDesign
client-project.website · Vista previa de escritorio
Sitio web de hosteleríaEstancia   Experiencias   DiarioDescubre la estancia
Sitio web de hosteleríaAlójate sin prisas.

Un sitio web de marca cuidado, con una experiencia editorial, páginas adaptables y archivos de origen listos para la revisión de ingeniería.

Descubre la estancia
Ejemplo ilustrativo de una propuesta de sitio web de escritorio para el flujo de trabajo de OpenDesign como creador de sitios web con IA para desarrolladores.
Adaptable · Sistema de diseño · Listo para agentes
AdaptableSistema de diseñoAgent-Ready
Un brief concreto↗

«Un sitio web de hostelería refinado, con una ruta de reserva clara, narrativa visual envolvente, componentes reutilizables y un sistema de diseño que nuestro agente de programación puede seguir aplicando».

Sitio web ilustrativo · Composición de escritorioArchivos de interfaz editables
01Elige cómo ejecutarloUsa un agente de programación local, aporta tu propia clave o empieza con los modelos alojados en OpenDesign Cloud.
02Aplica reglas de diseñoElige entre más de 152 sistemas de diseño o crea uno a partir de un sitio web, un repositorio de GitHub o un archivo de Figma.
03Previsualiza antes de refactorizarRevisa visualmente el sitio web adaptable, ajústalo e inspecciona los archivos que hay detrás del resultado.
04Conserva el proyecto en localContinúa con HTML, CSS, recursos y tu flujo de trabajo habitual con agentes de programación.
Ejemplo de sitio web

Empieza por el sitio web que realmente necesita el proyecto.

Los desarrolladores crean sitios web para todo tipo de públicos. OpenDesign adapta el resultado visible a la marca y a lo que necesita hacer el visitante, y lo vincula con reglas de diseño, archivos locales y el flujo de trabajo de desarrollo.

Un sitio web creado dentro del flujo de trabajo de desarrollo

El sitio web responde al proyecto, no a quien lo crea.

Un desarrollador puede estar creando un sitio web de hostelería, comercio, contenido editorial, portafolio o producto. OpenDesign adapta la dirección visual a ese propósito. El valor para el desarrollador está detrás del resultado: modelos configurables, reglas de diseño reutilizables, revisión adaptable y archivos locales que siguen formando parte del flujo de trabajo de ingeniería.

  • Una composición de escritorio completa, definida por la marca, el público y el recorrido del visitante
  • Secciones reutilizables y un sistema de diseño coherente, listos para adaptarlos a cada producto
  • Una interfaz adaptable que puede continuar en el control de versiones y con agentes de programación
Interfaz adaptableSistema de diseñoArchivos del proyecto en local
Concepto ilustrativo de sitio web: página de inicio de escritorio completa para una marca de hostelería, con imágenes editoriales, detalles de habitaciones y una llamada a la acción para reservar.
Diseño ilustrativo · No es un proyecto de cliente1672 × 941 · 16:9
Elige cómo ejecutarlo

OpenDesign ofrece tres formas de ejecución para distintas necesidades de desarrollo.

Elige la configuración antes de generar: usa un agente de programación local para acceder a los archivos del proyecto, aporta tu propia clave para controlar directamente los modelos o empieza en OpenDesign Cloud sin configurar ninguna de estas opciones.

01Agente de programación local

Deja que tu agente trabaje con los archivos del proyecto.

Ejecuta OpenDesign mediante un agente de programación instalado, como Codex, Claude Code o Cursor. Elige esta opción cuando el agente necesite permiso para leer y editar el proyecto local.

CodexClaude CodeCursor
Ideal para
Trabajo con repositorios y edición de archivos
Antes de elegir
Se aplican los cargos de tu suscripción al agente o de la API
02Usa tu propia clave

Elige el proveedor, el endpoint y el modelo.

Añade la clave, el endpoint y el modelo de tu proveedor y prueba la conexión antes de generar. El proveedor te cobra el uso en lugar de descontarlo de los créditos de OpenDesign.

Clave de APIEndpointModelo
Ideal para
Elección de modelo y control directo de costes
Antes de elegir
Genera diseños; para editar archivos del proyecto, usa un agente local
03OpenDesign Cloud

Empieza sin instalar un agente ni añadir una clave.

Inicia sesión y usa los modelos alojados disponibles en OpenDesign Cloud. Es la forma más rápida de empezar a diseñar antes de configurar un flujo de desarrollo local.

Iniciar sesiónModelos alojadosCréditos
Ideal para
Empezar rápidamente con modelos alojados
Antes de elegir
Se necesita una cuenta y créditos del plan de OpenDesign

Un producto, distintas opciones de control. Puedes empezar con el agente local y BYOK sin una cuenta de OpenDesign. OpenDesign Cloud requiere una cuenta y créditos del plan. El agente o proveedor de modelos que elijas podría cobrarte por separado.

Flujo de trabajo de desarrollo

Ejecución → Sistema de diseño → Sitio web → Repositorio.

OpenDesign se ocupa de generar el diseño y después entrega la interfaz al flujo de trabajo de ingeniería, donde corresponden la revisión, la refactorización, la integración y el despliegue.

  1. 1

    Elige cómo ejecutar OpenDesign

    Conecta un agente de programación local cuando necesites editar archivos, aporta tu propia clave para acceder directamente a los modelos o inicia sesión en OpenDesign Cloud para empezar con modelos alojados.

  2. 2

    Elige o crea un sistema de diseño

    Empieza con uno de los más de 152 sistemas de código abierto o crea uno a partir de un sitio web, un repositorio de GitHub o un archivo de Figma.

  3. 3

    Describe, genera y revisa

    Describe el público, las páginas, la identidad de marca y las restricciones técnicas. Revisa el resultado adaptable y ajústalo mediante instrucciones o selecciones directas.

  4. 4

    Continúa con los archivos

    Usa el proyecto local como material de implementación: inspecciónalo, ponlo bajo control de versiones, pruébalo, refactorízalo y conéctalo con el resto de tu stack.

Una revisión concreta para probar

Conserva el sistema de diseño aprobado. Separa la navegación, la sección principal y el pie de página repetidos en componentes reutilizables que sigan las convenciones del repositorio. Muestra los archivos modificados; no añadas dependencias sin explicarlas.

Qué conservas

Creador de sitios web con IA para desarrolladores: archivos y contexto de diseño.

El resultado útil no es solo la vista renderizada. Es la combinación de un sitio web adaptable, material del proyecto inspeccionable y reglas de diseño que el siguiente trabajo con agentes puede reutilizar.

01

Una interfaz adaptable lista para funcionar

Genera páginas web reales y secciones reutilizables, en lugar de recibir una captura aplanada o una referencia visual que haya que reconstruir.

02

Archivos del proyecto en local

Conserva HTML, CSS, recursos relacionados y la estructura del proyecto en tu ordenador para integrar el resultado en los procesos habituales de control de versiones y revisión.

03

Contexto de diseño reutilizable

Conserva los colores, la tipografía, el espaciado y las reglas de componentes elegidos como contexto compartido para la siguiente página y la siguiente tarea del agente de programación.

Qué distingue a OpenDesign

Dale a tu agente de programación un sistema de diseño, no otra instrucción imprecisa.

Elige entre más de 152 sistemas de diseño de código abierto o crea uno a partir de un sitio web, un repositorio de GitHub o un archivo de Figma. OpenDesign convierte las decisiones sobre color, tipografía, espaciado y componentes en un contexto reutilizable que puede dar forma a cada página generada.

Entrada del sistema de diseñoContexto reutilizable para agentes
Más de 152 sistemasSitio webRepositorio de GitHubArchivo de Figma
OpenDesignDESIGN.mdColor · Tipografía · Espaciado · Componentes
Página de inicioPáginas de productoPágina de entrada a la documentaciónNuevas iteraciones
Un mismo sistema visual puede guiar la primera generación y el trabajo posterior con el agente de programación.
01

Más de 152 puntos de partida de código abierto

Usa un sistema visual definido en lugar de pedirle a un modelo que invente un estilo nuevo a partir de unos pocos adjetivos.

02

Crea un sistema a partir del trabajo existente

Usa un sitio web, un repositorio de GitHub o un archivo de Figma como material de origen para un sistema de diseño específico del proyecto.

03

Contexto de diseño legible para agentes

Mantén juntas las reglas de diseño reutilizables y los archivos del proyecto para que el siguiente trabajo con agentes empiece con algo más que una captura.

04

Coherencia entre iteraciones

Ajusta textos, diseño, componentes y páginas nuevas sin perder de vista las mismas decisiones visuales.

Alcance · Creador de sitios web con IA para desarrolladores

Mantén el control de la ejecución. Revisa la implementación antes de publicar.

La configuración de modelos, los permisos de acceso a los archivos del proyecto y la preparación para producción son decisiones independientes. Las integraciones de publicación compatibles siguen necesitando un proveedor de despliegue y configuración.

Lo que recibirás para tu sitio web

  • Una interfaz adaptable lista para funcionar
  • Archivos del proyecto en local
  • Contexto de diseño reutilizable

Servicios y responsabilidades separados

  • Servicios de backend y API
  • Autenticación y bases de datos
  • Alojamiento gestionado y dominios
  • Compatibilidad automática con frameworks

OpenDesign es la capa de generación de diseños de un flujo de trabajo de desarrollo, no una plataforma para crear aplicaciones full-stack. Trata la interfaz generada como material de implementación que aún requiere revisión, pruebas, comprobaciones de accesibilidad, trabajo de seguridad y adaptación a los estándares de tu repositorio.

Preguntas frecuentes sobre el creador de sitios web con IA para desarrolladores

Creador de sitios web con IA para desarrolladores: claves, agentes, archivos y límites.

Configuración de proveedores, acceso de agentes locales, fuentes para sistemas de diseño y archivos del proyecto que puedes seguir desarrollando.

¿Puedo usar mi propia clave de API con este creador de sitios web con IA para desarrolladores?

Sí. Añade la clave de API, el endpoint y el modelo de tu proveedor y prueba la conexión. El proveedor te cobra directamente por el uso del modelo, por lo que no consumes créditos de OpenDesign. BYOK puede generar diseños, pero no edita por sí solo los archivos del proyecto; si necesitas acceder a ellos, usa un agente de programación local.

¿Necesito una cuenta de OpenDesign?

No para los flujos de trabajo con agente de programación local o con tu propia clave. OpenDesign Cloud requiere una cuenta porque usa modelos alojados y créditos del plan.

¿Puede OpenDesign trabajar con mi repositorio actual?

Un agente de programación local puede trabajar con los archivos a los que tenga permiso de acceso, por lo que es la opción adecuada para adaptar el trabajo de interfaz generado dentro de un repositorio existente. Antes de publicar, revisa los cambios y ajústalos a tu framework, tus pruebas y tus convenciones.

¿Puedo usar mi sistema de diseño actual?

Puedes elegir entre más de 152 sistemas de diseño de código abierto o crear uno a partir de un sitio web, un repositorio de GitHub o un archivo de Figma. La dirección resultante para el color, la tipografía, el espaciado y los componentes puede guiar el sitio web y las iteraciones posteriores.

¿Qué genera y exporta OpenDesign?

OpenDesign crea una interfaz web que puedes inspeccionar y seguir desarrollando. Exporta HTML independiente o el código fuente y los recursos disponibles, y usa PDF o imágenes para la revisión. Las integraciones configuradas con Cloudflare Pages o Vercel pueden publicar los resultados compatibles; las cuentas de proveedores, la infraestructura, los servicios de backend y las comprobaciones de producción siguen siendo responsabilidad tuya.

Empieza a crear

Diseña el sitio web. Sigue desarrollando en tu stack.

Elige cómo ejecutarlo, aplica un sistema de diseño reutilizable, revisa la interfaz adaptable y continúa con los archivos del proyecto local.

Descargar OpenDesign

Gratis y de código abierto · Sin dependencia de un proveedor · Compatible con tu agente de programación

Interfaz del creador de sitios web con IA para desarrolladores de OpenDesign, conectada a archivos editables, componentes reutilizables y trabajo posterior con agentes de programación.
Listo para seguir editandoInterfaz generada con el creador de sitios web con IA para desarrolladoresHTML · CSS · JavaScript · Componentes