---
title: "Diseño con IA"
description: "Crea y rediseña un widget describiéndolo en el chat de Diseño con IA del editor."
---

El **Diseño con IA** es el chat dentro del editor del widget donde describes el widget que quieres y se crea por ti. En lugar de definir el diseño, los colores y el espaciado a mano, escribes lo que buscas y luego sigues ajustándolo en la misma conversación.

Está en la barra lateral izquierda de la pestaña '**Editor**', marcado como '**Diseño con IA**'. Cada generación cuesta 1 crédito, y el contador en la esquina superior derecha del editor muestra cuántos te quedan.

Completa antes tus ajustes de [Marca](/docs/widgets/branding/) y el editor ya conocerá tu logotipo, tu tipografía y tus colores de marca. El primer resultado llega entonces ya alineado con tu marca, así que tu prompt puede centrarse solo en el diseño y el contenido.

## Cómo crear un widget con el Diseño con IA

:::steps
1. **Describe el widget.** Escribe lo que quieres en '**Escribe tu mensaje...**'. Si no sabes cómo empezar, elige uno de los prompts sugeridos debajo del cuadro.
![La pantalla Describe tu widget perfecto con el cuadro de prompt, los botones Fuentes y Mejorar prompt, y los prompts sugeridos debajo](https://embedsocial.com/images/docs/ai-design/1-describe-your-perfect-widget.jpg)
2. **Mejora el prompt (opcional, recomendado).** Haz clic en '**Mejorar prompt**' y tu idea de una línea se convierte en un briefing detallado que cubre el diseño, la cabecera, la animación, los colores de marca y el comportamiento en móvil. Edítalo antes de generar.
![El botón Mejorar prompt ampliando una idea corta en un briefing detallado de varias líneas](https://embedsocial.com/images/docs/ai-design/2-enhance-prompt.jpg)
3. **Elige qué fuentes lo alimentan.** Abre el desplegable '**Fuentes**' y marca las cuentas, hashtags o páginas cuyas publicaciones deban aparecer en el widget.
![El desplegable Fuentes abierto en el chat de Diseño con IA con las cuentas conectadas listadas como casillas](https://embedsocial.com/images/docs/ai-design/3-select-sources-in-chat.jpg)
![El chat de Diseño con IA con el desplegable Fuentes en la parte inferior del cuadro de mensaje y el banner Connect your source encima de la vista previa](https://embedsocial.com/images/docs/ai-design/5-connect-your-source.jpg)
4. **Añade una imagen de referencia (opcional).** Usa el botón de imagen junto a '**Mejorar prompt**' para subir una captura de pantalla o un elemento visual de marca, y el diseño se crea a partir de ella.
5. **Genera.** Haz clic en '**Generar**' para gastar el crédito y crear el widget.
6. **Aplica tus colores de marca (opcional).** Cuando generas desde una plantilla, el editor detecta los colores de marca de tu sitio web y te pregunta en el chat si quieres aplicarlos. Confirma y se aplican en cabeceras, botones, enlaces y acentos; omite este paso para mantener los colores propios de la plantilla.
7. **Sigue ajustando en el chat.** Después del primer resultado, aparecen sugerencias de seguimiento como chips ('**Añadir efectos al pasar el cursor**', '**Cambiar la paleta de colores**'). Haz clic en una o escribe tu propio cambio, y el widget se actualiza en la vista previa junto al chat.
![El widget terminado en la vista previa con los chips de sugerencias de seguimiento debajo de la conversación de Diseño con IA](https://embedsocial.com/images/docs/ai-design/6-follow-up-suggestions.jpg)
:::

> Mejorar prompt merece el clic extra. Un prompt corto deja el diseño, el movimiento y los detalles de marca al azar, y el briefing ampliado es editable, así que puedes eliminar cualquier cosa que no quieras antes de generar.

## Conectar una fuente a un widget generado

Si empezaste desde una plantilla o generaste el widget antes de conectar nada, la vista previa se llena de contenido de ejemplo y aparece un banner que dice '**This is a dummy source. Connect your source →**'. Haz clic en él para cambiar el contenido de ejemplo por tus propias publicaciones.

También puedes añadir una fuente sin salir del chat: abre '**Fuentes**', haz clic en '**Conectar fuente**' y después elige la plataforma.

![El modal Elegir plataforma con Instagram, Google, Trustpilot, TikTok, Threads, LinkedIn, Facebook, YouTube, X, Pinterest, Vimeo, RSS Feed, Custom y Request source](https://embedsocial.com/images/docs/ai-design/4-choose-platform.jpg)

'**Custom**' cubre el contenido que no procede de una plataforma social, y '**Request source**' pide a nuestro equipo una plataforma con la que aún no nos integramos. Consulta [Fuentes](/docs/social-media-aggregator/sources/) para ver qué extrae cada plataforma.

## Créditos de IA en el editor

El Diseño con IA funciona con **créditos de IA**. Cada generación cuesta un crédito, ya sea el primer resultado o un cambio de seguimiento que escribas en el chat. Empezar desde una plantilla, conectar una fuente y ajustar las opciones de visualización de un widget a mano no cuesta nada.

Tu saldo aparece en la esquina superior derecha del editor y en la parte inferior izquierda de la barra lateral, y va bajando a medida que generas. Consulta [Créditos de IA](/docs/billing/ai-credits/) para ver la tarifa de cada función y cómo comprar más.

¿Listo para crear uno? [Descubre qué puede hacer el AI Widget Builder](/ai-widget/) o [empieza tu prueba gratuita](/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget).

## Preguntas frecuentes

**Q: ¿Cuántos créditos cuesta un widget, y qué pasa si se me acaban?**

Cada generación cuesta 1 crédito, que se muestra en el contador de la esquina superior derecha del editor. Consulta [Créditos de IA](/docs/billing/ai-credits/) para ver la tarifa de cada función, tu saldo y cómo comprar más.

**Q: ¿Tengo que escribir el prompt yo mismo?**

No. En un widget nuevo aparecen prompts sugeridos debajo del cuadro, y '**Mejorar prompt**' convierte una idea de una línea en un briefing completo que puedes editar.

**Q: ¿Puedo cambiar el widget después de generarlo?**

Sí. Sigue escribiendo en el mismo chat, o haz clic en uno de los chips de sugerencias de seguimiento. La vista previa se actualiza a medida que avanzas.

**Q: ¿Por qué mi widget muestra publicaciones que no son mías?**

Se generó desde una plantilla con contenido de ejemplo. Haz clic en '**Connect your source**' en el banner encima de la vista previa, o elige tus cuentas en el desplegable '**Fuentes**'.

**Q: ¿Qué pasa si falla una generación?**

Un error '**Unable to generate HTML**' añade un botón **Reintentar** en el chat. Haz clic en él para reenviar el mismo prompt, sin tener que volver a escribir nada.

**Q: ¿Puedo diseñar a partir de una captura de pantalla en lugar de una descripción?**

Sí. Sube una imagen de referencia con el botón de imagen junto a '**Mejorar prompt**' y el diseño se ajusta a ella.

**Q: ¿Tengo que describir mis colores de marca en cada prompt?**

No. Configura tu logotipo, tu familia tipográfica y tus colores de marca una vez en [Marca](/docs/widgets/branding/) y todos los widgets que generes después partirán de ellos.

**Q: ¿Qué pasó con el CSS personalizado?**

El CSS personalizado ya no es un ajuste aparte en el editor. El estilo se define aquí: describe el cambio que quieres en el chat, y usa CSS cuando necesites un control exacto sobre el resultado.

## Qué sigue

Configura la marca de tu espacio de trabajo una vez en [Marca](/docs/widgets/branding/) para que todos los widgets empiecen alineados con tu marca. Con el diseño listo, ajusta qué publicaciones aparecen con [Filtros](/docs/widgets/filters/) y después define las opciones de visualización en [Ajustes del widget](/docs/widgets/widget-settings/).

> Si tienes alguna pregunta, haz clic en el icono de chat de la esquina inferior derecha para hablar con nuestro equipo de atención al cliente o escríbenos a [support@embedsocial.com](mailto:support@embedsocial.com). Estamos aquí para ayudarte 🙏