Proyecto personal • Editor visualDel visual al código.Capas ypropiedadesTemas y
componentesVista previa
responsive
Diseño y código,en el mismo flujo.
Lienzo, componentes y prototipado para construir interfaces.
Un editor visual que corre en el navegador: la pantalla se arma arrastrando bloques y sale como código en 5 formatos y 6 bibliotecas.Arma pantallas arrastrando bloques y sal con el código listo.
- Next.js 14.2
- React 18.3
- TypeScript 5.9
- Tailwind CSS 3.4
- Zustand 4.5
- Babel Parser 7.28
- JSZip 3.10
Proyecto personal • Editor visualDel visual al código.Capas ypropiedadesTemas y
componentesVista previa
responsive
Diseño y código,en el mismo flujo.
Lienzo, componentes y prototipado para construir interfaces.
- Next.js 14.2
- React 18.3
- TypeScript 5.9
- Tailwind CSS 3.4
- Zustand 4.5
- Babel Parser 7.28
- JSZip 3.10
Un editor visual que corre en el navegador: la pantalla se arma arrastrando bloques y sale como código en 5 formatos y 6 bibliotecas.Arma pantallas arrastrando bloques y sal con el código listo.
- Next.js 14.2
- React 18.3
- TypeScript 5.9
- Tailwind CSS 3.4
- Zustand 4.5
- Babel Parser 7.28
- JSZip 3.10
El editor
Arrastra, suelta y ajusta.
Armar una pantalla suele ser un ir y venir entre el programa de diseño y el código. En UIForge la pantalla se arma como en un editor de imágenes: cada bloque va a su lugar con el mouse y todo encaja en una grilla. Este funciona, muévelo a gusto.
Capas
Arrastra un bloque para moverlo; el tamaño cambia con los botones − y + de las propiedades. Con el teclado, las flechas también lo mueven.
Propiedades
Botón
- Tipo
- Botón
- X
- 48
- Y
- 248
- An
- 136
- Al
- 40
Todo encaja de 8 en 8 puntos; cerca del centro, el bloque se pega a la guía.
El código
Del diseño al código, al instante.
El diseño terminado todavía tiene que volverse código, y cada equipo lo hace a su manera. UIForge escribe la misma pantalla en 5 formatos y en 6 bibliotecas de componentes. Cambia abajo: el código se escribe de nuevo, frente a ti.
5 formatos
6 bibliotecas
Sendero de la Sierra
Tres días de caminata, con guía y posada incluidos.
ReservarCard.tsxexport function Card() { return ( <div className="flex flex-col gap-3 rounded-xl bg-white p-6 shadow-lg"> <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-500" /> <h3 className="text-xl font-extrabold text-slate-900">Sendero de la Sierra</h3> <p className="text-sm text-slate-600">Tres días de caminata, con guía y posada incluidos.</p> <button className="self-start rounded-lg bg-blue-500 px-4 py-2 font-bold text-white"> Reservar </button> </div> );}Ejemplo del tipo de código que genera el editor, con nombres claros y las etiquetas correctas (título, texto, botón) en vez de cajas sin nombre.
Importa. Crea. Exporta.
React, HTML y Figma como punto de partida para tus interfaces.
React y HTMLImportación de FigmaExportación de imagenEdición visual y generación de código en el mismo lugar.Casi nadie empieza una pantalla desde cero: ya hay un componente, una página lista o un archivo en Figma. UIForge lee lo que ya existe, arma el árbol de bloques y lo pone todo en el lienzo, listo para editar. Elige una puerta y toca o pasa el mouse por los nodos del árbol.
1La fuenteCard.tsx
function Card() { return ( <div className="card p-6"> <h3 className="text-xl">Sendero de la Sierra</h3> <p className="text-sm">Tres días de caminata,…</p> <button className="btn">Reservar</button> </div> );}2El árbol
3En el lienzo
La imagen
Lleva la pantalla como imagen.
A veces lo que hace falta es solo una imagen de la pantalla, para mostrar al cliente, poner en una presentación o en una tienda de aplicaciones. La ventana de exportar de UIForge hace la cuenta sola. Elige y mira cambiar el tamaño final; en la lupa, el borde de un círculo de cerca.
El cuadro exportado: 1.440 × 900
El responsive
Una pantalla, cuatro anchos.
Un sitio se ve en un monitor grande, en una notebook, en una tablet y en un celular. UIForge muestra la misma pantalla en los cuatro anchos, para ver dónde el menú se vuelve botón y las columnas se apilan. Baja, o elige un ancho.
Ancho: 1440 px · aquí al 60%
Los colores
Cambia la paleta, toda la pantalla la sigue.
Cambiar el color de un sitio a mano es buscar el mismo tono en cien lugares. En UIForge los colores viven en una paleta: se cambia la paleta y todos los botones, fondos y textos la siguen. Son 10 listas; haz clic en una y mira caer la pintura.
10 paletas
variables.css:root { --color-primary: #3b82f6; --color-secondary: #6366f1; --color-accent: #8b5cf6; --color-background: #ffffff; --color-surface: #f4f4f5; --color-text: #18181b; --color-text-muted: #71717a; --color-border: #e4e4e7; --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444;}Las tecnologías
De qué está hecho, pieza por pieza
Un editor visual que corre entero en el navegador, sin servidor y sin base de datos: el diseño vive en la memoria de la página y sale como código o imagen. Elige una pieza para ver qué hace aquí y en qué archivo está.
12tecnologías, en 4 capas
Pantalla
Estado
Lectura
Salida
Las pantallas
Capa por capa.
El editor por dentro, tal como es: oscuro, con el lienzo blanco en el medio. Cada pantalla es una capa de la lista, toca o pasa el mouse para traerla al frente y haz clic para verla grande.
Capas 13
EditorEl editor, con capas y propiedades
Siguiente proyecto37 / 51
Herramientas de creación y desarrolloBiblioteca Pessoal de DesignAcervo personal de 346 efectos y componentes de interfaz en 18 categorías, cada uno en vivo y con el código listo para la web y para FiveMNext.js 16.1 (estático)React 19.2TypeScript 5.7Tailwind CSS 4.2
← AnteriorVisualizador de Site Responsivo