Designer Visual
FreePro: AI Designer + React/Vue/SvelteConstrutor visual HTML/CSS no estilo Figma com canvas 2D, encaixe inteligente, alinhamento e distribuição, painéis de propriedades / camadas / temas, suporte a múltiplas páginas e um pipeline de exportação que gera HTML/CSS puro e código de framework (React, Vue, Svelte). Inclui um fluxo AI Designer Pro que transforma um brief em linguagem natural em um projeto editável revisável antes de aplicar.
Canvas 2D
Toque para selecionar e arraste para mover, redimensionar, encaixar na grade e em outros componentes, zoom 0.1× – 4×, guias inteligentes com rótulos de distância.
14 componentes integrados
Text, Heading, Button, Link, Badge, Chip, Icon, HR Divider, Text Field, Text Area, Checkbox, Toggle, Option, Select.
Properties · Layers · Theme
Três painéis laterais para estilizar, ordenar e gerenciar color tokens.
Múltiplas páginas
Abas na pré-visualização; adicionar / renomear / duplicar / excluir sem limite.
5 templates integrados
Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace.
Marketplace bidirecional
Importe templates e componentes baixados; publique seus designs.
Canvas visual
Canvas nativo puro (sem WebView) com artboard de tamanho dinâmico, fundo configurável, grade visual, guias inteligentes e manipulação direta com dois modos de cursor: Select e Pan.
| Interação | Mecânica |
|---|---|
| Toque | Seleciona o componente mais interno sob o dedo; tocar em espaço vazio desseleciona |
| Arrastar selecionado | Move o componente; o encaixe inteligente sugere bordas/centros vizinhos |
| Arrastar não selecionado | Faz pan / rolagem do canvas (não move o componente) |
| Pinçar (2 dedos) | Zoom 0.1× – 4×, relativo ao cursor |
| Resize | Alças nos 4 cantos + 4 lados com pré-visualização fantasma |
| Encaixar na grade | Tamanho de grade configurável (padrão 16 px); alternância ligar/desligar |
| Seleção múltipla | Arrastar um membro selecionado move o grupo inteiro |
| Alinhamento | Left/Center-H/Right · Top/Center-V/Bottom |
| Distribuição | Horizontal e vertical |
| Pai-filho | Componentes contêiner aceitam filhos aninhados com auto-layout flex (row/column/grid, gap, padding, wrap) |
| Bloquear | Bloqueia arrastar e redimensionar |
| Visibilidade | Alternância mostrar/ocultar |
| Z-index | Ordem visual no painel de camadas |
Responsive Preview
Pré-visualize o canvas em larguras predefinidas sem tocar no documento subjacente.
Original
—
Mobile S
320 px
Mobile
375 px
Mobile L
428 px
Tablet
768 px
Desktop
1280 px
Desktop L+
1440 px+
Pro
Reflow de auto-empilhamento
Uma única função pura compartilhada pela pré-visualização do canvas e pelo gerador HTML. Em larguras estreitas ela agrupa os roots em linhas e faz flow-wrap dos itens pequenos (navbars, chips) ou empilha os blocos em largura total — apenas exibição, o documento nunca é alterado.
Overrides por breakpoint
Cada elemento pode armazenar overrides de posição / tamanho / visibilidade por breakpoint (mobile ≤ 480 px, tablet ≤ 900 px). Editados na aba Responsive do painel de estilo, prevalecem sobre o auto-empilhamento e são exportados como @media queries reais.
Além das larguras do canvas, a pré-visualização WebView em tela cheia renderiza o HTML gerado dentro de frames de dispositivos reais — Mobile 375 · Tablet 768 · Desktop 1280 · Full — na largura CSS real do dispositivo, de modo que as @media queries exportadas realmente disparam.
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 podem aninhar filhos
Navigation
Navbar · Link
Feedback
Badge · Chip
A aba Downloaded mostra componentes baixados do Marketplace, inseríveis no canvas com um toque.
Painel de propriedades
Abas fixas sobre o componente selecionado: Design, Style, Spacing, Layout, FX e Responsive.
Templates integrados
Landing Page
Landing moderna com hero e grade de recursos
Login Form
Formulário de autenticação e-mail/senha
Dashboard
Painel admin com cards de estatísticas e configurações
Portfolio
Portfólio pessoal com sobre, projetos, contato
E-Commerce
Catálogo de produtos com visualização de detalhes
Limite grátis: 3 designs a partir de templates
A partir do 4º design baseado em template, o gate de templates ilimitados é acionado.
Formatos de exportação
| Formato | Plan | MIME ao compartilhar |
|---|---|---|
| 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 |
O CSS exportado emite @media queries reais por componente, combinando o auto-empilhamento (coluna limpa no celular/tablet) com os overrides do usuário (que prevalecem). Os 3 formatos de framework (React, Vue, Svelte) são protegidos por Premium e herdam as mesmas @media; Copy HTML, Copy CSS e View Code são sempre Free.
AI Designer
100 % ProCapacidade exclusiva do plano Pro. Transforma um brief em linguagem natural em um projeto de design editável, percorrendo um pipeline de 5 fases com revisão-primeiro obrigatória antes de aplicar mudanças ao canvas.
Pipeline
Phase 1
Brief & Discovery
Page type, style, palette, discovery form
Phase 2
Geração
Stream do plano + chamada LLM
Phase 3
Review
Pontuações de crítica + lista de ações
Phase 4
Apply
Ações via gerenciador de undo/redo
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 · + 3 cores personalizadas
Formulário de descoberta (opcional)
Self-critique scores (0-10)
Hierarchy
Hierarquia visual clara?
Execution
Layout limpo?
Specificity
Detalhes específicos do brief?
Restraint
Evita complexidade desnecessária?
Média com código de cores: verde ≥ 7, amarelo ≥ 4, vermelho < 4.
Garantias do fluxo
- •Apenas design actions seguras são aceitas (validação contra o catálogo)
- •Diff visual obrigatório na tela de revisão de alterações de IA antes de aplicar
- •Undo/Redo permanece intacto — toda ação passa pelo histórico do canvas
- •As exportações reutilizam o gerador HTML/CSS do fluxo manual
Ferramentas auxiliares de IA (Pro)
- AI Align — recebe os componentes selecionados e os reorganiza automaticamente.
- AI Component — gera uma seção ou componente a partir de um brief curto e o insere no canvas.
Plano Free vs Pro
| Funcionalidade | Plan |
|---|---|
| Editor de canvas (todos os componentes integrados) | Free |
| Encaixe, grade, réguas, alinhamento, distribuição | Free |
| Múltiplas páginas | Free |
| Color tokens, temas, CSS personalizado | Free |
| Undo/Redo, salvamento automático | Free |
| Templates integrados (até 3 designs) | Free |
| Templates a partir do 4º design | Pro |
| Pré-visualização responsiva (até Desktop 1280) | Free |
| Responsivo Desktop L + breakpoints personalizados | Pro |
| Export HTML / CSS / SVG | Free |
| Export React / Vue / Svelte | Pro |
| Copy HTML, Copy CSS, View Code | Free |
| Publicar Design / Componente no Marketplace | Free |
| AI Designer completo (Brief → Revisão → Aplicar → Live Preview) | Pro |
| AI Align, AI Component | Pro |
Estatísticas do módulo
14
Componentes integrados
5
Templates integrados
6
Formatos de exportação
6
Abas do painel de estilo
7
Modos responsivos
2
Breakpoints de override
20
AI page types
10+
AI visual styles
8
AI palettes
Próximo
Marketplace