Publicada el
Tu Canva en Claude el prompt que te construye un editor de diseño dentro del chat
Una sola pieza de texto te monta un editor visual tipo Canva dentro de Claude. Lo construyes una vez y luego diseñas a mano sin gastar sesión a cada cambio. Para creadores de contenido, community managers y dueños de marca que quieren producir carruseles, historias, posts y slides sin abrir tres herramientas distintas.
Lo que hay dentro, de principio a fin
Qué es esto y por qué te interesa la idea en una frase
Seguro que te ha pasado: abres Claude, le pides un diseño, otro, un cambio y a las pocas vueltas se te acaba la sesión. Mucho esfuerzo para acabar con cuatro imágenes sueltas.
Aquí le damos la vuelta. En vez de pedir diseños de uno en uno, le pedimos a Claude que te construya, de una sola vez, TU PROPIO EDITOR tipo Canva: una página que abres en el navegador y donde diseñas tú, a mano, todo lo que quieras.
Lo que ya hace ese editor (todo esto se pide dentro del único prompt de la sección 03):
- Escribir y mover los textos arrastrándolos.
- Cambiar fuente, tamaño, color y alineación.
- Subir tus fotos y ponerlas de fondo.
- Controlar el brillo y el oscurecido del fondo con deslizadores.
- Botón de descargar una imagen y botón de descargar todas.
- Deshacer y rehacer, duplicar páginas, y guardado automático.
Un solo prompt te monta un Canva entero dentro de Claude. Lo construyes una vez y luego diseñas tú, sin gastar a cada cambio. Solo necesitas tu cuenta de Claude y unas fotos en tu ordenador.
El paso a paso cinco pasos en orden
Hazlo en orden. Es justo lo que vas a narrar si grabas el proceso.
Paso 1. Crea un proyecto en Claude
Un proyecto es como una carpeta especial: todo lo que metas dentro se queda guardado y Claude lo tiene en cuenta.
Ejemplo: TuMarca.
Paso 2. Sube tus fotos a la carpeta del proyecto
Dentro del proyecto, busca el botón de "Añadir contenido" o "Add content" y arrastra ahí tus fotos y capturas.
Las fotos van dentro del PROYECTO, no en un chat suelto. Así Claude puede usarlas en el editor y no se pierden al cerrar la sesión.
Paso 3. Copia el prompt y envíalo
Ve a la sección 03 de esta guía, copia todo el bloque del prompt, pégalo en el chat del proyecto y dale a enviar.
Paso 4. Espera y ábrelo
Claude tarda un poco en construirlo. Cuando termine, te abre el editor para que lo pruebes. Juega: mueve un texto, sube una foto, prueba el brillo.
Paso 5. Pide cambios con tus palabras
¿Algo no te encaja? Pídelo en lenguaje normal, encima de lo ya hecho:
- "Haz el titular más grande."
- "Cambia este fondo por otra foto."
- "Ponme un botón para cambiar el color del texto."
Cambia solo eso, no lo rehace todo. Ahí está el ahorro.
El prompt cópialo tal cual
Este es el prompt que lo construye todo. Cópialo entero, rellena los [corchetes] (te explico cómo en la sección 04) y pégalo en el chat de tu proyecto.
Quiero que me construyas un EDITOR DE DISEÑO VISUAL tipo Canva, en un solo archivo HTML, que funcione en el navegador sin instalar nada. Úsalo con las fotos e imágenes que he subido a la carpeta del proyecto. CONTENIDO INICIAL: - Crea una secuencia de [NÚMERO] diseños sobre el tema: [DESCRIBE TU TEMA]. - Formato (elige uno): Historias 1080x1920 / Carrusel 1080x1350 / Post 1080x1080 / Slides 1920x1080. - Estilo: limpio y premium, fondos con foto real ligeramente oscurecida, titulares grandes con pocas palabras, una idea por pantalla. Color principal de marca: [#TU COLOR]. EL EDITOR DEBE TENER: 1. Un LIENZO central que muestra el diseño a escala, con zoom (+ / − / ajustar). 2. Un PANEL LATERAL con todas las páginas: clic para cambiar, y botones de añadir, duplicar y borrar página. 3. MOVER cualquier elemento arrastrándolo con el ratón, con guías de centrado automáticas. 4. REDIMENSIONAR arrastrando las esquinas. Las imágenes mantienen su proporción real (no se deforman ni se recortan) y su marco abraza la foto con esquinas redondeadas. 5. Doble clic en un texto para ESCRIBIR directamente. 6. Un PANEL DE PROPIEDADES a la derecha que, al seleccionar un elemento, permita cambiar: - Texto: fuente, tamaño, peso, interlineado, espaciado, alineación, mayúsculas, color (paleta + selector libre) y un resaltado (sólido / borde / subrayado). - Imagen: reemplazarla, subir una nueva, encuadre, radio de esquinas, marco discontinuo on/off, y ajuste "completa" o "rellenar". - Posición y tamaño exactos por número, opacidad, y orden de capas (subir/bajar), duplicar y eliminar. 7. CONTROLES DE FONDO de cada página: cambiar la foto de fondo, brillo y oscurecido con deslizadores, y subir un fondo propio. 8. SUBIR FOTOS desde mi ordenador y que queden guardadas en una galería "Tus imágenes" para reutilizarlas al instante. 9. DESHACER y REHACER (Ctrl+Z / Ctrl+Y), mover con flechas del teclado, y borrar con Supr. 10. Botón para DESCARGAR la página actual en PNG y otro para DESCARGAR TODAS en PNG. 11. Que TODO se guarde solo en el navegador, para no perder los cambios al recargar. Hazlo fluido: al seleccionar un elemento no recargues todo, solo lo necesario. Cuando termines, ábrelo para que lo pruebe.
Quiero que me construyas un EDITOR DE DISEÑO VISUAL tipo Canva, en un solo archivo HTML, que funcione en el navegador sin instalar nada. Úsalo con las fotos e imágenes que he subido a la carpeta del proyecto. CONTENIDO INICIAL: Crea una secuencia de [NÚMERO] diseños sobre el tema: [DESCRIBE TU TEMA]. Formato (elige uno): Historias 1080x1920 / Carrusel 1080x1350 / Post 1080x1080 / Slides 1920x1080. Estilo: limpio y premium, fondos con foto real ligeramente oscurecida, titulares grandes con pocas palabras, una idea por pantalla. Color principal de marca: [#TU COLOR]. EL EDITOR DEBE TENER: 1. Un LIENZO central que muestra el diseño a escala, con zoom (+ / − / ajustar). 2. Un PANEL LATERAL con todas las páginas: clic para cambiar, y botones de añadir, duplicar y borrar página. 3. MOVER cualquier elemento arrastrándolo con el ratón, con guías de centrado automáticas. 4. REDIMENSIONAR arrastrando las esquinas. Las imágenes mantienen su proporción real (no se deforman ni se recortan) y su marco abraza la foto con esquinas redondeadas. 5. Doble clic en un texto para ESCRIBIR directamente. 6. Un PANEL DE PROPIEDADES a la derecha que, al seleccionar un elemento, permita cambiar: Texto: fuente, tamaño, peso, interlineado, espaciado, alineación, mayúsculas, color (paleta + selector libre) y un resaltado (sólido / borde / subrayado). Imagen: reemplazarla, subir una nueva, encuadre, radio de esquinas, marco discontinuo on/off, y ajuste "completa" o "rellenar". Posición y tamaño exactos por número, opacidad, y orden de capas (subir/bajar), duplicar y eliminar. 7. CONTROLES DE FONDO de cada página: cambiar la foto de fondo, brillo y oscurecido con deslizadores, y subir un fondo propio. 8. SUBIR FOTOS desde mi ordenador y que queden guardadas en una galería "Tus imágenes" para reutilizarlas al instante. 9. DESHACER y REHACER (Ctrl+Z / Ctrl+Y), mover con flechas del teclado, y borrar con Supr. 10. Botón para DESCARGAR la página actual en PNG y otro para DESCARGAR TODAS en PNG. 11. Que TODO se guarde solo en el navegador, para no perder los cambios al recargar. Hazlo fluido: al seleccionar un elemento no recargues todo, solo lo necesario. Cuando termines, ábrelo para que lo pruebe.
Rellena los cuatro huecos antes de enviar los corchetes del prompt
El prompt funciona en cualquier marca. Solo tienes que cambiar cuatro cosas marcadas con [corchetes]:
| Hueco | Qué poner | Ejemplo |
|---|---|---|
| [NÚMERO] | Cuántos diseños quieres de salida. | 8 |
| [DESCRIBE TU TEMA] | De qué van los diseños. | "cómo nuestro producto ahorra costes" |
| Formato | Borra los que no uses y deja solo el tuyo (Historias, Carrusel, Post o Slides). | Carrusel 1080x1350 |
| [#TU COLOR] | El color de tu marca en código hexadecimal. | #FF3D14 |
Si no sabes el código de tu color, pídele a Claude que lo saque de tu logo.
Trabaja SIEMPRE dentro del mismo proyecto y pide los cambios encima de lo ya hecho. Empezar de cero cada vez es lo que encarece. Reutilizar es lo que lo hace rápido y barato.
Cuando te guste el resultado, dile "descárgamelo" y guarda el archivo HTML. Ábrelo desde tu ordenador con doble clic: así se queda tuyo y los cambios se guardan. Dentro de la vista previa de Claude puede que se reinicie al recargar; como archivo descargado, no.
Dudas rápidas lo que falla y cómo se arregla
| Pregunta | Respuesta |
|---|---|
| ¿Necesito saber programar? | No, nada. Tú solo copias el prompt y luego pides cambios hablando normal. El editor lo construye Claude. |
| ¿Sirve para historias, carruseles y posts? | Sí. Eliges el formato dentro del prompt. Puedes pedirle otro formato más adelante. |
| ¿Puedo seguir editando otro día? | Sí. Vuelve al mismo proyecto y pide el cambio encima de lo hecho, o reabre el archivo HTML que descargaste. |
| ¿Por qué a otra gente se le acaba la sesión y a mí no? | Porque ellos piden diseños sueltos sin parar. Tú construyes el editor una vez y luego diseñas tú a mano, sin gastar a cada paso. |
| ¿Y si el editor sale con algún fallo? | Dile en una frase qué falla: "el botón de descargar no funciona", "no me deja mover el texto". Lo arregla sobre lo que ya hay. |
Si recargas la pestaña dentro de Claude sin descargar el HTML, pierdes los cambios de la sesión. Descarga siempre que vayas a cerrar.