Diseñador Visual
FreePro: AI Designer + React/Vue/SvelteConstructor visual HTML/CSS al estilo Figma con canvas 2D, snap inteligente, alineación y distribución, paneles de propiedades / capas / temas, soporte de páginas múltiples y un pipeline de exportación que genera HTML/CSS plano y código de framework (React, Vue, Svelte). Incluye un flujo AI Designer Pro que convierte un brief en lenguaje natural en un proyecto editable revisable antes de aplicar.
Canvas 2D
Toca para seleccionar y arrastra para mover, resize, snap a grid y a otros componentes, zoom 0.1× – 4×, smart guides con etiquetas de distancia.
14 componentes built-in
Text, Heading, Button, Link, Badge, Chip, Icon, HR Divider, Text Field, Text Area, Checkbox, Toggle, Option, Select.
Properties · Layers · Theme
Tres paneles laterales para estilizar, ordenar y gestionar color tokens.
Páginas múltiples
Tabs en preview; add / rename / duplicate / delete sin límite.
5 templates built-in
Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace.
Marketplace bidireccional
Importa templates y componentes descargados; publica tus diseños.
Canvas visual
Lienzo nativo puro (no WebView) con artboard de tamaño dinámico, color de fondo configurable, grid visual, smart guides y manipulación directa con dos modos de cursor: Select y Pan.
| Interacción | Mecánica |
|---|---|
| Toque | Selecciona el componente más interno bajo el dedo; tocar en zona vacía deselecciona |
| Arrastrar seleccionado | Lo mueve; snap inteligente sugiere bordes/centros vecinos |
| Arrastrar no seleccionado | Hace scroll/pan del lienzo (no mueve el componente) |
| Pinch (2 dedos) | Zoom 0.1× – 4×, relativo al cursor |
| Resize | Handles en 4 esquinas + 4 lados con ghost preview |
| Snap a grid | Grid size configurable (default 16 px); toggle on/off |
| Selección múltiple | Arrastrar un miembro seleccionado mueve todo el grupo |
| Alineación | Left/Center-H/Right · Top/Center-V/Bottom |
| Distribución | Horizontal y vertical |
| Padre-hijo | Componentes contenedores aceptan hijos anidados con auto-layout flex (row/column/grid, gap, padding, wrap) |
| Lock | Bloquea drag y resize |
| Visibility | Toggle mostrar/ocultar |
| Z-index | Orden visual en panel de capas |
Responsive Preview
Preview del canvas a anchos predefinidos sin tocar el documento subyacente.
Original
—
Mobile S
320 px
Mobile
375 px
Mobile L
428 px
Tablet
768 px
Desktop
1280 px
Desktop L+
1440 px+
Pro
Auto-stack reflow
Una única función pura compartida por el preview del canvas y el generador HTML. En anchos estrechos clusteriza los roots en filas y o bien hace flow-wrap de los items pequeños (navbars, chips) o apila los bloques a ancho completo — display-only, el documento nunca se muta.
Overrides por breakpoint
Cada elemento puede guardar overrides de posición / tamaño / visibilidad por breakpoint (mobile ≤ 480 px, tablet ≤ 900 px). Se editan desde la pestaña Responsive del panel de estilo, ganan sobre el auto-stack y se exportan como @media queries reales.
Además de los anchos del canvas, la vista previa WebView a pantalla completa renderiza el HTML generado dentro de frames de dispositivo reales — Mobile 375 · Tablet 768 · Desktop 1280 · Full — al ancho CSS real del dispositivo, de modo que las @media queries exportadas se disparan de verdad.
Paleta de componentes
Basic
Text · Heading · Button · Link · Badge · Chip · Icon · HR Divider
Input
Text Field · Text Area · Checkbox · Toggle · Option · Select
Layout
Box · Card · Column · Row · Navbar
Container
Componentes que pueden anidar hijos
Navigation
Navbar · Link
Feedback
Badge · Chip
Tab Downloaded muestra componentes descargados del Marketplace, insertables al canvas con un toque.
Panel de propiedades
Pestañas sticky sobre el componente seleccionado: Design, Style, Spacing, Layout, FX y Responsive.
Templates built-in
Landing Page
Landing moderna con hero y grid de características
Login Form
Formulario de autenticación email/password
Dashboard
Panel admin con stats cards y settings
Portfolio
Portfolio personal con about, projects, contact
E-Commerce
Catálogo de productos con vista de detalle
Límite gratuito: 3 diseños desde templates
A partir del 4º diseño desde plantilla se activa el gate de templates ilimitados.
Formatos de exportación
| Formato | Plan | MIME al compartir |
|---|---|---|
| HTML | Free | text/html |
| CSS | Free | text/css |
| SVG | Free | image/svg+xml |
| React (JSX + CSS) | Pro | text/plain |
| Vue (SFC) | Pro | text/plain |
| Svelte | Pro | text/plain |
El CSS exportado emite @media queries reales por componente, combinando el auto-stack (columna limpia en móvil/tablet) con los overrides del usuario (que ganan). Los 3 formatos de framework (React, Vue, Svelte) están protegidos por Premium y heredan las mismas @media; Copy HTML, Copy CSS y View Code son siempre Free.
AI Designer
100 % ProCapacidad exclusiva del plan Pro. Convierte un brief en lenguaje natural en un proyecto de diseño editable, atravesando un pipeline de 5 fases con review-first obligatorio antes de aplicar cambios al canvas.
Pipeline
Phase 1
Brief & Discovery
Page type, style, palette, discovery form
Phase 2
Generación
Stream del plan + LLM call
Phase 3
Review
Critique scores + lista de acciones
Phase 4
Apply
Acciones vía undo/redo manager
Phase 5
Live Preview
WebView, Save/Export/Regenerate
20 page types
Landing · Dashboard · Blog · E-commerce · Portfolio · Admin · SaaS · Marketing · Form · Auth · Onboarding · Settings · Pricing · Data Viz · Docs · Social · Gallery · Email · Wireframe · Presentation
10 visual styles
Minimal · Bold · Dark · Editorial · Playful · Corporate · Technical · Glassmorphism · Brutalist · Soft & Warm
8 paletas
Blues · Purples · Greens · Reds · Warm · Mono · Teals · Pinks · + custom 3 colores
Discovery form (opcional)
Self-critique scores (0-10)
Hierarchy
¿Jerarquía visual clara?
Execution
¿Maquetación limpia?
Specificity
¿Detalles específicos al brief?
Restraint
¿Evita complejidad innecesaria?
Promedio coloreado: verde ≥ 7, amarillo ≥ 4, rojo < 4.
Garantías del flujo
- •Solo se aceptan design actions seguros (validación contra catálogo)
- •Diff visual obligatorio en la pantalla de revisión de cambios IA antes de aplicar
- •Undo/Redo permanece intacto — todas las acciones pasan por el historial del canvas
- •Las exportaciones reutilizan el generador HTML/CSS del flujo manual
Herramientas AI auxiliares (Pro)
- AI Align — recibe los componentes seleccionados y los reajusta automáticamente.
- AI Component — genera una sección o componente desde un brief corto y lo inserta en el canvas.
Plan Free vs Pro
| Funcionalidad | Plan |
|---|---|
| Canvas editor (todos los componentes built-in) | Free |
| Snap, grid, rulers, alineación, distribución | Free |
| Páginas múltiples | Free |
| Color tokens, themes, custom CSS | Free |
| Undo/Redo, auto-save | Free |
| Templates built-in (hasta 3 diseños) | Free |
| Templates a partir del 4º diseño | Pro |
| Responsive preview (hasta Desktop 1280) | Free |
| Responsive Desktop L + custom breakpoints | Pro |
| Export HTML / CSS / SVG | Free |
| Export React / Vue / Svelte | Pro |
| Copy HTML, Copy CSS, View Code | Free |
| Publish Design / Component al Marketplace | Free |
| AI Designer completo (Brief → Review → Apply → Live Preview) | Pro |
| AI Align, AI Component | Pro |
Estadísticas del módulo
14
Componentes built-in
5
Templates built-in
6
Formatos export
6
Pestañas de estilo
7
Responsive modes
2
Breakpoints de override
20
AI page types
10+
AI visual styles
8
AI palettes
Siguiente
Marketplace