✎ Modo Diseño
Edita la interfaz de tus apps con el dedo o el mouse — mover bloques, reescribir textos, ocultar, cambiar tamaños y colores — y copia un listado preciso de cambios para pegarlo en el chat de Claude. Todo ocurre solo en tu navegador: nadie más ve tus ediciones.
▶ Activarlo en una app tuya
Agrega ?diseno al final de la dirección (también sirve ?diseño, con ñ). Ejemplo:
https://acordemos.pages.dev/?diseno
Queda activo mientras navegas por la app (aunque cambies de página) hasta que toques Salir. Funciona en las apps que incluyen esta línea:
<script src="https://modo-diseno.pages.dev/cargador.js" defer></script>
🔖 Bookmarklet (para sitios sin la línea)
En el computador: arrastra este botón a la barra de marcadores y tócalo estando en cualquier página.
En el teléfono: crea un marcador cualquiera, edítalo y reemplaza su dirección por este código:
🧰 Las herramientas
- Mover arrastra una tarjeta o bloque a donde quieras, incluso a otra sección (o tócalo y usa ▲ ▼). El destino se marca en naranjo.
- Tamaño toca un objeto —una imagen, una tarjeta— y arrastra los tiradores de los bordes para agrandarlo o achicarlo.
- Forma toca una lista o sección y ponla en 1, 2 o 3 columnas, en fila horizontal, alineada a un lado o con el orden invertido. Es la forma sana de reacomodar: el resultado sigue funcionando en cualquier pantalla.
- Colocar libre dentro de Mover: corre un bloque a donde quieras dentro de su contenedor. Se guarda en porcentaje, no en píxeles, así que no se rompe al cambiar de pantalla (y si igual estorba en el teléfono, la vista móvil te avisa).
- Texto toca un texto y escríbelo de nuevo. Enter = listo.
- Ocultar toca un elemento para ocultarlo; se ve atenuado mientras usas la herramienta, y otro toque lo trae de vuelta.
- Estilo tamaño de letra, colores (te ofrece la paleta oficial de la app) y espaciado: separación arriba/abajo y relleno interior.
- Móvil abre la vista de teléfono real a la derecha (390px). Lo que cambies en escritorio se refleja al instante ahí, y al revés. Te avisa si algo se desborda o se corta en el teléfono. Necesita una ventana de 900px o más.
- Copiar genera el resumen + JSON y lo deja en el portapapeles: pégalo en el chat de Claude.
Los cambios quedan guardados en tu navegador (por página) y se reaplican al volver a activar el modo. Borrar todo y restaurar (dentro de Copiar) vuelve todo a la normalidad.
Escritorio y teléfono son ámbitos distintos: lo que editas en la vista grande vale para todas las pantallas; lo que editas seleccionando dentro del panel del teléfono queda marcado como “solo en teléfono” y sale en un bloque aparte del listado, para convertirlo en una regla responsiva.