Diseñador Visual
Un canvas HTML/CSS interactivo con soporte para diseño responsive. El plan Free incluye 3 breakpoints (móvil, tablet, desktop); el plan Premium añade 7 tamaños y animaciones avanzadas.
Canvas interactivo
El diseñador usa un canvas basado en HTML/CSS real. Lo que diseñas es lo que obtienes al exportar: código limpio y semántico.
- •Drag & drop de elementos: contenedor, texto, imagen, botón, input, icono…
- •Redimensiona y reposiciona con gestos touch
- •Panel de propiedades CSS en tiempo real
- •Vista previa instantánea del resultado
- •Capas: reorganiza elementos y gestiona z-index
Diseño responsive
El plan Free incluye los 3 breakpoints esenciales. El plan Premium desbloquea los 7 tamaños estándar:
Free: móvil, tablet, desktop — Premium: todos los tamaños
| Breakpoint | Ancho mínimo | Dispositivo típico | Plan |
|---|---|---|---|
| sm | 480px | Móvil | Free |
| md | 768px | Tablet | Free |
| lg | 1024px | Desktop | Free |
| xs | < 480px | Móvil pequeño | Premium |
| xl | 1280px | Desktop grande | Premium |
| 2xl | 1536px | Pantalla grande | Premium |
| Custom | — | Definido por el usuario | Premium |
Animaciones CSS
Añade animaciones de entrada, salida y efectos hover a cualquier elemento del canvas.
3 presets
Fade, slide y scale predefinidos listos para usar.
10 presets + custom
10 presets adicionales y editor de keyframes personalizado.
Design tokens
Define una paleta de colores, escala tipográfica y tokens de espaciado reutilizables en todo el proyecto:
- •Colores: primario, secundario, neutros y semánticos (error, éxito…)
- •Tipografía: familias, pesos y escalas de tamaño
- •Espaciado: grid de 4px con valores predefinidos
- •Radios, sombras y efectos de blur
- •Los tokens se exportan junto con el código
Exportar diseño
| Formato | Free | Premium |
|---|---|---|
| HTML / CSS | ✅ | ✅ |
| SVG | ✅ | ✅ |
| React (JSX + CSS modules) | — | ✅ |
| Vue (SFC) | — | ✅ |
| Svelte | — | ✅ |
| React Native (StyleSheet) | — | ✅ |
Siguiente
Marketplace