Docs/Visual Designer

Visual Designer

O Visual Designer monta telas em HTML e CSS num canvas nativo. Arraste componentes, defina layout e estilos, edite por breakpoint, adicione estados, interações e animações e exporte HTML, CSS ou SVG, ou React, Vue e Svelte com o Pro. Ele também pode desenhar uma tela a partir de um briefing escrito, com a chave do seu próprio provedor de IA. Esta página percorre cada tela do módulo, o que você pode fazer nela e o que não pode, com o motivo.

O que é e como abrir

O Designer é um módulo em tela cheia, não uma das cinco páginas do pager. Ele abre numa tela inicial, e um design abre no editor. Tudo é salvo no seu dispositivo.

Formas de entrar

De onde	Como
Ferramentas	Barra inferior ou rail → Ferramentas → Designer.
Paleta de comandos	Execute o comando Designer (Crie interfaces visualmente).
Início	A ação rápida Designer. O widget Designs recentes também abre o Designer, na tela inicial e não no design em que você tocou.
Chat com IA	No visualizador de artefatos de uma resposta, ⋮ Mais ações → Abrir no Designer. Ela é oferecida para artefatos HTML e SVG e avisa O layout pode mudar, porque o importador mantém apenas um subconjunto do HTML.
Só a Caixa de ferramentas	A ação rápida Multimídia do Início abre a Caixa de ferramentas isolada, sem o resto do Designer.

O Designer não abre arquivos .html pelo editor nem pelo explorador de arquivos. Para trazer um HTML existente, use Importar de HTML em Meus Designs ou envie um artefato HTML do Chat com IA.

Onde ficam os seus designs

Cada design é um arquivo .pcd no armazenamento privado do app. Cada salvamento mantém a cópia anterior ao lado, como .pcd.bak.
Um design é salvo automaticamente cerca de 3 segundos depois da sua última alteração e mais uma vez ao fechá-lo. Salvar na barra superior salva na hora.
Versões nomeadas e checkpoints automáticos ficam guardados por design (veja Versões e Comparar no editor).
Suas preferências ficam guardadas por conta: a barra flutuante de seleção ligada ou desligada, a altura de cada painel, a ordem da barra inferior no celular, o modo canhoto, quais dicas de primeiro uso você já viu e seus componentes recentes e favoritos.

Você não pode, e por quê

Abrir um arquivo .html do editor ou do explorador de arquivos direto no Designer. As únicas formas de trazer HTML são Importar de HTML e Abrir no Designer a partir de um artefato do Chat com IA.De propósito

Mapa de telas

Uma linha por tela e subtela. As seções abaixo descrevem cada uma.

Tela	Como chegar	O que você pode fazer
Tela inicial	Abra o Designer	Ir para Meus Designs, criar um Design Manual, iniciar um Design com IA (Pro) ou abrir a Caixa de ferramentas.
Meus Designs	Tela inicial → Meus Designs	Abrir, duplicar ou excluir designs; criar um em branco ou a partir de um modelo; importar `.pcd`, JSON do Figma ou HTML; recuperar um design danificado.
Design Manual	Tela inicial → Design Manual	Dar nome a um design em branco e escolher o tamanho, a orientação e o modo de layout.
Criar com IA	Tela inicial → Design com IA (Pro), ou ✨ Melhorar com IA no editor	Escrever um briefing, escolher o tipo de página, o estilo e o sistema de design, e gerar.
Revisar proposta IA	Só quando uma proposta gerada tem achados de validação bloqueantes	Ler a Autocrítica e a lista de alterações, e depois Aplicar ao Canvas ou Descartar.
Editor no tablet	Abrir ou criar um design	Canvas mais um painel acoplado com cinco abas de ícone: Componentes, Propriedades, Camadas, Tema e Ferramentas.
Editor no celular	Abrir ou criar um design	Canvas mais uma barra inferior: Páginas, Componentes, Estilo, Camadas e Ferramentas. Os painéis abrem como bottom sheets.
Componentes	Aba do painel ou barra inferior	Adicionar componentes e blocos, inserir componentes baixados do Marketplace e os seus próprios componentes reutilizáveis.
Propriedades (Estilo no celular)	Selecione um componente	Onze abas de configurações do componente selecionado, mais comentários.
Camadas	Aba do painel ou barra inferior	Ver a árvore, buscar, renomear, reordenar, aninhar, ocultar, bloquear e reparar camadas.
Tema	Tablet: aba Tema. Celular: Ferramentas → Editar tema	Editar os temas claro e escuro, os tokens, os estilos de texto e os estilos de efeito.
Ferramentas	Aba Ferramentas ou barra inferior	Exportar, copiar, opções de visualização, larguras de pré-visualização, Saúde, Histórico, Versões, Atalhos e Gestos.
Pré-visualização responsiva	Ferramentas → Visualizar → escolha uma largura	Ver o canvas de 320 a 1440 px sem alterar o design; editar as substituições por breakpoint na aba Responsive.
Histórico	Ferramentas → Histórico	Ver as suas edições e voltar ou avançar até qualquer uma delas.
Versões e Comparar versões	Ferramentas → Versões	Salvar, restaurar, excluir e comparar versões.
Saúde do sistema de design	Ferramentas → Saúde do sistema de design	Ver nove tipos de problemas e corrigir alguns com um toque.
Recuperação	Abrir um design danificado, ou Recuperar na linha dele em Meus Designs	Restaurar o backup automático ou uma versão salva.
Visualizar	🌐 na barra superior	WebView em tela cheia nas larguras 375, 768, 1280 ou Full; capturar e compartilhar um PNG.
Atalhos e Gestos	Ferramentas → Atalhos ou Gestos; `Ctrl+/` num teclado físico	Ler os atalhos de teclado e os gestos de toque; repetir a introdução de primeiro uso.
Caixa de ferramentas	Tela inicial → Caixa de ferramentas, ou a ação rápida Multimídia do Início	Onze pequenos utilitários de design: cores, construtores de CSS, tipografia e conversores.

Tela inicial e Meus Designs

Abrir o Designer mostra a tela inicial: o título Visual Designer, Meus Designs em cima e, abaixo, três cartões para criar.

Meus Designs

Abre a lista dos seus designs (Abrir ou gerenciar projetos).

Design Manual

Cria um design em branco que você monta à mão (Construtor visual com controle total).

Design com IA

Desenha uma tela a partir de um briefing com IA (Descreva seu design em linguagem natural). No Free o cartão leva um selo PRO e abre o painel do Pro no lugar.

Caixa de ferramentas

Abre os onze utilitários de design.

Visual Designer start screen with My Designs on top and Manual Design, AI Design and Toolbox below — A tela inicial do Designer num tablet: Meus Designs, depois Design Manual, Design com IA e Caixa de ferramentas.

Meus Designs

Cada cartão mostra o nome do design, o tamanho, o número de páginas e o número de componentes.

Você pode

Toque num cartão para abrir o design no editor.
Abra o menu ⋮ de um cartão para Duplicar (a cópia mantém o nome mais “(cópia)”) ou Excluir. Excluir pede confirmação e remove de forma permanente o design, o backup dele e todas as suas versões.
Toque em Novo design para criar um: um design em branco com nome e tamanho, ou A partir de modelo.
Use os três botões de importação no cabeçalho: Importar design (.pcd), Importar do Figma (JSON) e Importar de HTML.
Crie quantos designs em branco quiser. No Free, aparece um selo PRO em Design Manual e Novo design quando você já tem três designs feitos a partir de modelos, mas ele se refere ao limite de modelos, nunca aos designs em branco.
Se um arquivo de design não puder ser lido, a linha dele diz Este design está danificado; toque em Recuperar (veja Recuperação no editor).

Você não pode, e por quê

Renomear um design. O nome é definido ao criá-lo; o app não tem uma ação de renomear para o design inteiro (as páginas podem ser renomeadas).Ainda não

Criar um design

Há três formas de começar um design: em branco, a partir de um modelo ou importando um arquivo. Todas terminam no editor.

Design em branco

Design Manual na tela inicial abre o formulário de novo design.

Você pode

Dar nome ao design e escolher retrato ou paisagem.
Escolher um tamanho: Mobile (360×640), Tablet (768×1024), Desktop (1280×800) ou Custom, de 64 a 8192 px por lado.
Escolher o layout: Fluxo de página (o padrão: os blocos se empilham em ordem e exportam HTML real e responsivo) ou Tela livre (os componentes ficam em posições absolutas).
Alternar entre os dois depois com Fluxo de página no menu de zoom do canvas.
Em Meus Designs, Novo design abre um diálogo mais curto: um nome e um tamanho, ou A partir de modelo.

Você não pode, e por quê

Obter um design em Fluxo de página a partir de um modelo ou de uma importação: os designs criados de modelos e os designs importados começam em tela livre.De propósito

Modelos

A partir de modelo (Escolha um modelo) oferece cinco modelos integrados. Todos têm 360×640 e começam em tela livre. Os nomes e as descrições deles ficam em inglês, seja qual for o idioma do app.

Modelo	Páginas	O que é
Landing Page	2: Hero, Features	Modern landing page with hero section and feature cards. 2 pages.
Login Form	1: Login	Clean login screen with email/password fields and social options.
Dashboard	2: Overview, Settings	Admin dashboard with stats cards, activity feed, and settings page.
Portfolio	3: About, Projects, Contact	Personal portfolio with about, projects, and contact pages.
E-Commerce	2: Products, Product Detail	Online store with product grid and detail views.

Você pode

Criar um design a partir de qualquer modelo e editá-lo como qualquer outro design.
No Free, manter até três designs criados de modelos ao mesmo tempo. Excluir um libera uma vaga (veja Free e Pro). Uma duplicação de um design de modelo, ou um .pcd dele importado de novo, também conta.

Você não pode, e por quê

Escolher aqui um modelo do Marketplace: o seletor lista só os cinco integrados. Os modelos de projeto do Marketplace criam um projeto de código, não um design.De propósito
Criar um quarto design a partir de um modelo no Free: isso abre o painel do Pro para modelos ilimitados.Pro

Importar

Os três botões de importação de Meus Designs abrem o seletor de arquivos do Android. Os designs importados recebem um id novo. As importações do Figma e de HTML nunca contam para o limite de modelos; um .pcd feito a partir de um design de modelo mantém a origem e conta.

Importação	O que ela lê
Importar design (.pcd)	Um arquivo `.pcd` feito pelo Designer, por exemplo um que você salvou em outro dispositivo. Um arquivo acima de 20 MB é recusado.
Importar do Figma (JSON)	Um arquivo JSON: a resposta da API REST do Figma ou uma exportação que você salvou à mão. Ela nunca se conecta a uma conta do Figma. Limites: 10 MB, 5.000 nós e profundidade 50.
Importar de HTML	Um arquivo HTML. Só div, section, h1 a h6, p, a, button, img e input viram componentes; as outras tags são percorridas; `<script>` é descartado. Os estilos vêm de atributos `style` inline e de seletores `<style>` simples (tag, classe, id). Limites: 10 MB e 5.000 nós.

Você pode

Importar um .pcd, um JSON do Figma ou um arquivo HTML; o app diz Design importado, Design importado do Figma ou Design importado de HTML.
Abrir um artefato HTML ou SVG do Chat com IA com Abrir no Designer.

Você não pode, e por quê

Importar de uma conta ou de um link do Figma: só funciona um arquivo JSON.De propósito
Manter tudo de um arquivo HTML: scripts, regras @media, pseudoclasses, seletores compostos e layouts complexos não são trazidos.De propósito
Importar um .pcd maior que 20 MB: o app o recusa com “Esse arquivo não é um design válido do PocketCode”.Dispositivo

O editor

Um design abre no editor: o canvas e os painéis que você usa para construir nele. O layout se adapta à tela, e cada painel abaixo tem os seus próprios limites.

Layout e barra superior

No tablet ou na horizontal, o editor acopla ao lado do canvas um painel com cinco abas de ícone: Componentes, Propriedades, Camadas, Tema e Ferramentas. No celular, mostra no lugar uma barra inferior: Páginas, Componentes, Estilo, Camadas e Ferramentas. Os painéis abrem como bottom sheets entre os quais você pode deslizar, e dá para reordená-los segurando e arrastando.

Você pode

Desfazer e refazer pela barra superior, até 200 passos.
Tocar em ✨ Melhorar com IA para melhorar o design aberto (veja Desenhar com IA).
Tocar em Salvar para salvar agora e em 🌐 Visualizar para pré-visualizar o design.
Gerenciar as páginas pelo seletor de página: trocar de página, Adicionar página, Renomear, Duplicar página e Excluir (com confirmação). Não há limite de páginas, mas a última página não pode ser excluída.
Ligar o chip Protótipo para desenhar setas entre componentes que têm interações. No tablet também existe Comparar, que mostra dois canvases lado a lado.
Recolher o painel acoplado com a aba na borda dele e, em Ferramentas, desligar ou ligar a barra flutuante de seleção ou ativar o modo canhoto, que muda a barra de lado. A altura de cada painel é lembrada.

Você não pode, e por quê

Usar Comparar no celular: o chip só existe no layout largo (tablet ou horizontal).Dispositivo
Manter o histórico de desfazer entre sessões: ele é esvaziado ao fechar um design e guarda no máximo 200 passos.De propósito

Canvas

O canvas é nativo, não uma WebView. A prancheta tem o tamanho que você escolheu e o fundo dela é a cor de fundo do tema. Três ferramentas ficam no canto inferior esquerdo, e uma pílula no canto inferior direito mostra o zoom e o número de componentes, por exemplo 100% · 28 comp.

Você pode

Alternar entre Ferramenta de seleção, Ferramenta de deslocamento e Ferramenta de seleção por área. Toque duas vezes na ferramenta de área para mantê-la ativa.
Abrir a pílula de zoom para Aproximar, Afastar, uma porcentagem exata (10 a 400), 50%, 100% e 200%, Ajustar ao ecrã, Zoom na seleção, 100% na seleção, Minimapa (desligado por padrão), Mostrar réguas, Fluxo de página e Redefinir vista.
Fazer pinça com dois dedos para dar zoom de 0,1× a 4×, ancorado sob os dedos, e arrastar com dois dedos para deslocar.
Tocar para selecionar o componente mais interno, tocar nele de novo para subir um nível, tocar no espaço vazio para desmarcar e manter pressionado um componente não selecionado para adicioná-lo à seleção.
Arrastar um componente selecionado para movê-lo. Solte-o sobre um contêiner para aninhá-lo; uma linha de inserção mostra onde ele vai cair. Arrastar um componente não selecionado ou o espaço vazio desloca o canvas.
Redimensionar com as quatro alças de canto e as quatro de borda (uma prévia ao vivo mostra largura × altura) e girar com a alça circular, que encaixa a cada 15°.
Tocar duas vezes no texto para abrir Editar texto. Tocar duas vezes num contêiner para isolá-lo; um breadcrumb com um botão de fechar (Sair do isolamento) permite sair.
Encaixar na grade de 16 px e nas bordas e centros dos componentes vizinhos, com rótulos de distância, e arrastar guias para fora das réguas.
Usar a barra flutuante sobre a seleção: duplicar, excluir, Editar texto ou Bloquear proporção, Mudar cor, Centralizar no pai, trazer para a frente, enviar para trás e Mais, que abre Propriedades.
Manter pressionado um componente selecionado para abrir o menu de contexto dele: Duplicar, Copiar seleção, Colar, Trazer para a frente, Enviar para trás, Bloquear ou Desbloquear, Ocultar ou Mostrar, Remover do contêiner, Converter em componente, Exportar como HTML (esse componente como arquivo) e Excluir.
Com dois ou mais componentes selecionados, uma barra de alinhamento oferece Alinhar à esquerda, Centralizar horizontalmente, Alinhar à direita, Alinhar ao topo, Centralizar verticalmente, Alinhar à parte inferior, Distribuir horizontalmente, Distribuir verticalmente, Agrupar e Desagrupar.

Você não pode, e por quê

Mudar o tamanho da grade. A grade tem 16 px fixos: você só pode mostrá-la ou ocultá-la e ligar ou desligar o Encaixe.De propósito
Selecionar os filhos de um contêiner com a Ferramenta de seleção por área: ela seleciona só os componentes de nível superior que o retângulo toca.De propósito
Mover, redimensionar ou girar um componente bloqueado.De propósito
Digitar no próprio canvas: o toque duplo abre o diálogo Editar texto.De propósito

Alças de espaçamento e guias de layout

Quando um contêiner com auto-layout está selecionado, as alças sobre ele permitem arrastar o padding e o gap direto no canvas.

Você pode

Arrastar uma alça de padding ou de gap para mudar o espaçamento do contêiner; os valores são arredondados para pixels inteiros.
Ligar Mostrar guias de layout (Ferramentas → Visualizar) para desenhar as faixas de padding e um rótulo com o nome e o gap de cada contêiner. Com a opção desligada, as guias aparecem só no contêiner selecionado.
Arrastar guias para fora das réguas (Mostrar réguas). As guias são salvas com o design e os componentes se encaixam nelas.

Você não pode, e por quê

Encaixar o espaçamento na escala de espaçamento do tema: as alças arredondam para pixels inteiros e não se encaixam em tokens. A Saúde do sistema de design pode apontar valores fora da escala e oferecer uma substituição.De propósito

Paleta de componentes

A aba Componentes tem quatro subabas: Componentes, Blocos, Baixados e Meus componentes. A paleta reúne 49 componentes em oito seções. Os nomes dos componentes ficam só em inglês dentro do app.

Seção	Componentes
Básicos (6)	Button, Link, Icon, Icon Button, Divider, Avatar
Texto (6)	Text, Heading, Quote, Code, Code Embed, Keyboard
Formulários (8)	Text Field, Text Area, Checkbox, Switch, Slider, Radio, Dropdown, Form
Contêineres (14)	Row, Column, Card, Box, Spacer, Grid, Section, Header, Footer, Main, Scroll View, List, Accordion, Link List
Navegação (4)	Navbar, Bottom Nav, Tab Bar, Breadcrumb
Mídia (3)	Image, Video, Carousel
Feedback (7)	Dialog, Snackbar, Progress Bar, Spinner, Badge, Chip, Rating
Dados (1)	Table

Você pode

Tocar num cartão para adicionar um componente, ou manter pressionado um cartão e arrastar para posicioná-lo com precisão; soltar sobre um contêiner o aninha.
Encontrar componentes com Buscar componentes…, filtrar por seção, reutilizar Recentes (os 8 últimos) e marcar Favoritos com a estrela.
Em Blocos, inserir um dos cinco blocos prontos: Hero, Feature strip, Pricing card, Contact form e Footer.
Em Baixados, inserir componentes que você baixou do Marketplace. Aplicar como kit (tokens, estilos, símbolos) copia os tokens, os estilos e os componentes reutilizáveis de um design baixado para o seu.
Em Meus componentes, inserir os seus próprios componentes reutilizáveis.
Escolher um ícone para Icon e Icon Button num conjunto de 176 ícones Material; os ícones são exportados como vetores.
Adicionar HTML, CSS e JS personalizados com Code Embed (HTML / CSS / JS personalizado). Ele sai como está na exportação, sem escape, então não cole código em que você não confia.

Você não pode, e por quê

Ver uma miniatura ao vivo de cada componente: os cartões mostram um ícone e o nome do componente em inglês, e a busca compara com esses nomes em inglês em todos os idiomas.De propósito
Inserir modelos do Marketplace aqui: Baixados lista só componentes baixados.De propósito

Designer editor on a tablet with the Components tab open: sub-tabs, search, Recent, section filters and component cards next to a landing page on the canvas — O editor num tablet com a aba Componentes aberta: as subabas, a busca, Recentes, os filtros de seção e os cartões de componentes. Os botões de ferramenta e a pílula de zoom ficam sobre o canvas, e as cinco abas do painel acoplado estão no canto superior direito.

Propriedades

Selecione um componente e abra Propriedades (Estilo na barra inferior do celular). O cabeçalho mostra o nome do componente com os botões de renomear e excluir, Converter em componente e Comentários. Buscar uma propriedade… leva à aba que contém a propriedade. Há 11 abas (10 para componentes que não são contêineres).

Aba	O que ela define
Design	Pai, posição e tamanho (X, Y, W, H) com Fixed, Hug ou Fill e mín./máx., bloqueio de proporção, redimensionar a partir do centro, constraints e rotação.
Conteúdo	As opções daquele tipo de componente: o texto, a imagem, o ícone, o link, as opções de entrada e assim por diante.
Estilo	Fundo (cor, imagem ou gradiente), padding, margin, borda e raio, sombras empilhadas, Estilos de efeito, Copiar estilo e Colar estilo. Um ponto ao lado de um campo mostra se o valor não está definido, está definido no componente ou está vinculado a um token.
Texto	Tipografia, com famílias de fonte de um catálogo de 50 web fonts.
Layout	Só contêineres: direção flex, gap, quebra de linha e alinhamento, ou um grid com trilhas como `1fr`, `200px` e `auto` e spans; um filho pode sair do fluxo e ser posicionado livremente.
FX	Transição, efeitos, filtros, transformação e CSS personalizado.
Responsive, Estados, Interações, Animação	Cada uma tem a sua seção abaixo.
Código	O HTML e o CSS que este componente exportaria, ao vivo (veja Inspetor de código).

Você pode

Editar vários componentes selecionados ao mesmo tempo: um campo mostra o valor comum ou um estado misto e vale para todos eles. A aba Design fica desativada e diz Selecione um único componente para editar isto.
Adicionar Comentários fixados num componente, resolvê-los e excluí-los. Os comentários acompanham o design e são gravados em comments.txt numa exportação ZIP.
Converter o componente em reutilizável, atualizar todas as instâncias dele ou desvincular uma (veja Componentes reutilizáveis).

Você não pode, e por quê

Ver web fonts no canvas: o HTML exportado vincula a fonte pelo Google Fonts, mas o canvas desenha a fonte do sistema mais próxima.De propósito
Ir da busca de propriedades direto ao campo exato: ela abre a aba certa, não o controle.De propósito

Designer Properties tab with nothing selected, asking to select a component — A aba Propriedades sem nada selecionado: ela pede que você selecione um componente.

Style tab of a selected button with Effect styles, Copy style, a background linked to var(--color-primary), padding, margin and border — A aba Estilo de um botão selecionado: Estilos de efeito, Copiar estilo e Colar estilo, um fundo vinculado a um token, padding, margin e borda. A barra flutuante e as guias de layout rosa ficam sobre o canvas.

Camadas

Camadas mostra a árvore real da página. Cada linha tem o nome, a ordem z (z: 3) e, nos contêineres, o número de filhos ([4]).

Você pode

Buscar camadas por nome ou por tipo com Pesquisar camadas.
Renomear uma camada tocando duas vezes nela, movê-la para cima ou para baixo com as setas, aninhá-la com Mover para, tirá-la com Remover do contêiner, ocultá-la com o olho e bloqueá-la com o cadeado. O menu ⋮ tem Renomear, Duplicar e Excluir.
Ligar o Modo de seleção para agir em várias camadas de uma vez: ocultar ou mostrar, bloquear, duplicar ou excluir, copiar e colar.
Encontrar componentes sem um pai válido: o painel diz quantos há e Reparar os move de volta para a raiz.

Você não pode, e por quê

—

Layers tab listing Footer, Pricing, Features and Hero with their z order, child count, move, hide, lock and menu buttons — A aba Camadas: cada camada com a sua ordem z e o número de filhos, uma caixa de busca e os botões de mover, ocultar, bloquear e ⋮.

Tema, tokens e estilos

Tema (uma aba nos tablets, Ferramentas → Editar tema nos celulares) guarda as variáveis CSS do design: Edite as variáveis CSS do código exportado.

Você pode

Editar o tema Claro e, depois de Criar tema escuro, o tema Escuro. Remover tema escuro o exclui.
Em Modo padrão ao exportar, escolher se a página exportada segue o Sistema, é Claro ou é Escuro.
Criar Tokens de oito tipos: cor, espaçamento, tipografia, sombra, raio de borda, opacidade, tamanho de fonte e altura de linha. Cada token mostra quantas vezes é usado, e renomear um token reescreve todas as referências a ele.
Salvar Estilos de texto e Estilos de efeito e aplicá-los com um toque.
Ver Kits se você aplicou um kit de design do Marketplace.

Você não pode, e por quê

Desfazer alterações de tokens: criar, renomear ou excluir tokens, estilos de texto e estilos de efeito não faz parte do histórico de desfazer. Aplicar um estilo a componentes faz.De propósito
Definir o fundo do canvas separadamente: a cor da prancheta é a cor de fundo do tema.De propósito

Componentes reutilizáveis

Qualquer seleção pode virar um componente reutilizável, como um símbolo.

Você pode

Selecionar componentes e escolher Converter em componente (ou Ctrl+Alt+K). Ele aparece em Meus componentes.
Inseri-lo a partir de Meus componentes; cada uso é uma instância (Instância de …).
Editar o original e escolher Atualizar todas as instâncias para levar a alteração às outras instâncias. Os campos que você mudou à mão numa instância são mantidos.
Escolher Desvincular para transformar uma instância de volta em componentes comuns.

Você não pode, e por quê

Fazer as instâncias seguirem o original automaticamente: as instâncias são cópias estáticas, e nada muda até você escolher Atualizar todas as instâncias.De propósito

Estados

A aba Estados define a aparência de um componente quando ele está com o ponteiro sobre ele, pressionado, em foco ou desativado.

Você pode

Escolher Hover, Ativo, Foco ou Desativado e alterar os estilos desse estado. Eles são exportados como regras :hover, :active, :focus e :disabled.
Usar Ver como para ver o componente selecionado num estado no canvas; a prévia vale só para esse componente. Redefina as substituições de um estado quando terminar.

Você não pode, e por quê

—

Responsive

O Responsive tem duas partes: pré-visualizar larguras e editar substituições de um breakpoint.

Você pode

Pré-visualizar o canvas em sete larguras em Ferramentas → Visualizar: Tamanho original, Mobile S (320), Mobile (375), Mobile L (428), Tablet (768), Desktop (1280) e Desktop L (1440). Um banner verde (por exemplo Responsive: Mobile S (320px)) diz onde você está, com Sair. O documento não muda.
Abrir a aba Responsive para editar substituições de um breakpoint. Os padrões são Tablet (até 900 px) e Mobile (até 480 px); você pode adicionar, editar e remover breakpoints entre 100 e 2000 px, e o Desktop é a base.
Por breakpoint e componente, mudar a posição, o tamanho, a visibilidade (Ocultar neste breakpoint), os estilos, inclusive de layout, e as colunas do grid e, nos componentes raiz em tela livre, um modo de empilhamento: Empilhar, Fluir, Manter ou Ocultar. As substituições são exportadas como regras @media reais.
Em tela livre, os componentes raiz são reorganizados automaticamente em larguras estreitas (agrupados em linhas, quebrados ou empilhados), no canvas e na exportação; as suas substituições têm prioridade sobre isso. Em Fluxo de página é o navegador que faz a reorganização.

Você não pode, e por quê

Pré-visualizar Mobile S, Mobile L e Desktop L no Free: essas três prévias exigem o Pro (elas compartilham a trava da exportação para React, Vue e Svelte). Original, Mobile, Tablet e Desktop são gratuitos, e editar breakpoints também.Pro

Tools tab on View with a green banner Responsive: Mobile S (320px) and the list Hide Grid, Snap ON, Show Rulers, selection bar, left-handed mode and the seven preview widths — Ferramentas, Visualizar: o banner verde diz que Mobile S (320px) está em pré-visualização, com Sair; a lista mostra Ocultar grade, Encaixe, Mostrar réguas, a barra de seleção, o modo canhoto e as sete larguras de pré-visualização.

Interações e protótipo

A aba Interações define o que um componente faz quando é acionado. As interações viram comportamento real no HTML exportado.

Você pode

Tocar em Adicionar interação e escolher um Gatilho: Toque, Passar o mouse, Ao entrar na tela, Ao carregar a página, Após um atraso (com Atraso (ms)) ou Enviar formulário.
Escolher uma Ação: Ir para página, Abrir overlay, Fechar overlay, Alternar visibilidade, Rolar até, Definir estado ou Abrir URL. Para mudanças de página, escolher uma Transição: Nenhuma (instantâneo), Esmaecer ou Deslizar.
Ligar o chip Protótipo para desenhar setas azuis de cada componente que tem uma interação até o componente de destino.
Executar o protótipo em Visualizar ou no HTML exportado aberto num navegador: as páginas navegam, os diálogos abrem e fecham, e Enviar formulário usa a validação de formulário do próprio navegador.

Você não pode, e por quê

Ver setas de protótipo até páginas: as setas são desenhadas só até componentes de destino, não até páginas.De propósito
Compartilhar um protótipo com um link: o Designer produz arquivos (HTML, ZIP) e uma captura em PNG, e não tem hospedagem.De propósito

Animação

A aba Animação adiciona uma animação por keyframes a um componente.

Você pode

Escolher um preset (fade in, fade out, slide in pela esquerda, direita, topo ou base, bounce, pulse ou shake) ou Personalizada, e editar as paradas dele com Adicionar parada.
Definir Duração (ms), Atraso (ms), Curva, Repetições (0 = loop), Direção e Ao terminar, e escolher quando ela Começa: Ao carregar a página ou Ao aparecer na tela.
Pressionar Reproduzir para pré-visualizá-la no canvas. Ela é exportada como uma regra @keyframes real.

Você não pode, e por quê

Dar mais de uma animação a um componente: há no máximo uma.De propósito

Histórico

Ferramentas → Histórico lista as suas edições em ordem cronológica, com a atual marcada como Aqui.

Você pode

Tocar numa entrada para desfazer ou refazer até aquele ponto.
Voltar até 200 passos.

Você não pode, e por quê

Ler as entradas do histórico no seu idioma: elas são escritas em espanhol, seja qual for o idioma do app, por exemplo “Mover Botón 2”.De propósito

Versões e Comparar

Ferramentas → Versões guarda cópias completas de um design às quais você pode voltar.

Você pode

Tocar em Salvar versão e dar um nome. As versões nomeadas nunca são apagadas.
Restaurar uma versão: o estado atual é salvo antes como um checkpoint automático, para você poder voltar. Excluir versão remove uma.
Comparar versões: escolher duas versões para ver quais componentes foram Adicionados, Removidos, Movidos ou tiveram o estilo alterado, além de Comentários novos e Comentários resolvidos, com uma Pré-visualização lado a lado das duas.
Os checkpoints automáticos (selo Automática) são feitos a cada 10 minutos enquanto um design está aberto, antes de uma proposta de IA ser aplicada e antes de uma restauração. Os 10 automáticos mais recentes são mantidos.

Você não pode, e por quê

Ler os nomes dos checkpoints automáticos no seu idioma: são nomes fixos em espanhol, como “Automático”, “Antes de aplicar IA” e “Antes de restaurar”.De propósito

Saúde do sistema de design

Ferramentas → Saúde do sistema de design audita o design inteiro. Ele nunca bloqueia nada: só avisa.

Você pode

Ver nove tipos de problemas: cores fora da paleta, espaçamentos fora da escala, tipografia sem estilo de texto, contraste baixo (abaixo do WCAG AA, 4,5:1), níveis de título pulados, imagens sem texto alternativo, fontes que a exportação não vincularia, componentes fora da prancheta e texto transbordando no mobile.
Tocar em Ir para o componente numa linha e, para cores e espaçamentos, em Substituir por … para corrigir.
A mesma verificação roda antes de uma exportação e mostra Exportar com avisos pendentes? (veja Exportar e compartilhar).

Você não pode, e por quê

Ler as mensagens dos problemas no seu idioma: elas são escritas em espanhol, seja qual for o idioma do app.De propósito

Inspetor de código e Ver código

Duas formas de ler o código de um design sem exportá-lo.

Você pode

Abrir a aba Código de um componente selecionado para ver, ao vivo, o HTML e o CSS que ele exportaria. Toque numa propriedade para copiar essa linha, ou em Copiar tudo.
Em Ferramentas → Copiar, usar Copiar HTML e Copiar CSS para o design inteiro, e Ver código para abrir o diálogo de HTML / CSS.
Editar o HTML em Ver código para substituir, uma única vez, o que você pré-visualiza ou exporta.

Você não pode, e por quê

Manter o HTML editado à mão: ele é apagado na sua próxima alteração do canvas ou do tema, então trate-o como uma substituição pontual.De propósito

Recuperação

Se um arquivo de design não puder ser lido, o editor oferece recuperá-lo. A recuperação começa quando você abre o design ou em Recuperar na linha danificada em Meus Designs.

Você pode

Escolher Backup automático, a cópia .bak guardada do seu salvamento anterior, ou Ou uma versão salva: qualquer versão ou checkpoint, não só o mais recente.

Você não pode, e por quê

—

Visualizar

O botão 🌐 da barra superior abre uma WebView em tela cheia do design, com uma aba por página quando há mais de uma.

Você pode

Escolher a largura 375, 768, 1280 ou Full, e Retrato ou Paisagem para 375 e 768.
Tocar em Capturar e compartilhar para capturar a prévia como PNG, com moldura de dispositivo em 375 e 768, e abrir a folha de compartilhamento.

Você não pode, e por quê

Navegar para outros sites ou abrir arquivos locais a partir da prévia: ela não navega, e file:// e content:// são bloqueados.Google Play
Executar scripts externos, chamar fetch ou WebSockets, usar iframes ou enviar formulários na prévia. Scripts inline, imagens, vídeo e Google Fonts por https são carregados.Google Play

Full-screen Preview with the 375, 768, 1280 and Full width chips and the share and close buttons — Visualizar: uma WebView em tela cheia com os chips 375, 768, 1280 e Full, e os botões de compartilhar e fechar.

Desenhar com IA

O Designer pode gerar um design a partir de um briefing escrito com o seu próprio provedor de IA: a chave é sua (veja Provedores de IA) e o PocketCode não fornece nenhum modelo. Há duas entradas. Design com IA na tela inicial (Pro) cria um design novo, e ✨ Melhorar com IA no editor trabalha no design que você tem aberto. As duas usam a mesma tela, Criar com IA.

Gerar um design

1Na tela inicial, toque em Design com IA. A tela se chama Criar com IA.
2Escreva o briefing na parte de baixo, ou toque numa das sugestões.
3Escolha um Tipo de página, um Estilo visual e um Sistema de design, e ajuste os controles se quiser.
4Confira o chip de provedor e modelo no canto superior direito. Ele começa no seu provedor preferido e no melhor modelo de design que ele oferece. Toque nele para abrir a lista de provedores, em que um provedor sem chave mostra Não configurado.
5Toque em Gerar Design (Melhorar Design ao melhorar). Um cartão de progresso acompanha as etapas e Cancelar interrompe.
6Se você ainda não aceitou esse provedor (aqui ou no Chat com IA), um diálogo pergunta Enviar para …?. Toque em Enviar e a geração recomeça.

O que você pode escolher

Opção	O que faz
Tipo de página	20 tipos: Landing Page, Dashboard, Blog, E-commerce, Portfólio, Painel Admin, App SaaS, Marketing, Formulário, Tela de Auth, Onboarding, Configurações, Preços, Visualização de dados, Documentação, Feed Social, Galeria, Email, Wireframe e Apresentação, ou um personalizado que você digita.
Estilo visual	10 estilos: Minimal, Ousado, Escuro, Editorial, Divertido, Corporativo, Técnico, Glassmorphism, Brutalista e Suave & Quente, ou um personalizado com três seletores de cor (Primária, Secundária e Fundo).
Sistema de design	Abre a folha Sistema de design: Estilo rápido, 14 sistemas integrados em Sistemas integrados (PocketCode, Material 3 Dark, Tech Utility, Warm Editorial, Material 3 Light, iOS / Apple HIG, Fluent Design, Glassmorphism, Ant Design, Nordic, Cyberpunk, Notion, Tailwind SaaS e Retro Terminal), Os meus sistemas, que você cria, edita e exclui, e Importar DESIGN.md, onde você cola uma especificação de pelo menos 40 caracteres.
Controles	Tipografia (Sans, Serif, Mono, Display), Movimento (Nenhuma, Subtil, Expressiva), Forma (Retas, Arredondadas, Pílula), densidade e uma cor de Destaque entre sete presets ou a sua própria.
Personalizar	Abre Refinar o briefing: para quem é, nível de acabamento, estilo de marca, tom e personalidade, densidade de conteúdo, dispositivo alvo (mobile, desktop, responsivo ou tablet), requisitos e restrições, e como você saberá que está pronto.
Anexos	Até 8 itens: Arquivos do dispositivo, Projeto do app (canvas) ou Design IA. Veja os limites abaixo: só os nomes deles chegam ao briefing.
Provedor e modelo	O chip no canto superior direito. Você também pode mudar o modelo padrão desta tarefa em Configurações, em Geração de design.

O que acontece ao gerar

A geração roda no seu provedor, nesta ordem:

1O PocketCode monta o prompt a partir do seu briefing, do tipo de página, do estilo, do sistema de design e, se o design não estiver vazio, de uma lista compacta dos componentes dele (até 80).
2Uma chamada ao seu provedor devolve a proposta: uma lista de ações de design (componentes novos e, ao melhorar, edições nos já existentes).
3O modelo dá nota ao próprio trabalho em cinco dimensões: filosofia, hierarquia, execução, especificidade e contenção. A menos que ele já tenha sinalizado uma nota fraca, uma segunda chamada com um contexto novo avalia de forma independente, e vale a pior nota.
4Se uma nota for baixa, roda uma passada de refinamento. O resultado dela só é mantido se a nota for pelo menos igual.
5A proposta é validada: no máximo 120 ações, 600 componentes depois de aplicada e 24.000 caracteres de CSS personalizado.

Quando termina

Se a proposta passa na validação, ela é aplicada para você, sem etapa de revisão. Design com IA cria um design novo de 1440×900 em tela livre, com o nome tirado dos primeiros 50 caracteres do seu briefing. Melhorar com IA aplica a proposta ao design aberto depois de um checkpoint automático (Antes de aplicar IA), e a proposta inteira é um único passo de desfazer.
Se a validação encontra problemas bloqueantes, abre-se Revisar proposta IA: a Autocrítica (uma média de 10 e cinco barras: Filosofia, Hierarquia, Execução, Especificidade e Contenção), os Problemas de validação e a lista de alterações em texto. Aplicar ao Canvas aplica a parte válida e diz quantas ações inválidas foram puladas; Descartar a descarta, depois de uma confirmação.
Para voltar atrás depois de uma alteração de IA, desfaça uma vez ou restaure o checkpoint automático em Versões.

Melhorar com IA

O botão ✨ da barra superior do editor abre o criador sobre o design que você tem aberto. O botão principal diz Melhorar Design.

Você pode

Descrever o que mudar. O gerador recebe uma lista compacta dos componentes do design (id, tipo, nome, posição, tamanho e pai) e pode adicionar componentes ou editar os existentes: remover, reestilizar, mover, redimensionar ou renomear.
Usar no Free: o botão não tem trava de plano própria, e exige a chave do seu próprio provedor.

Você não pode, e por quê

—

Construir com AI Office

Ferramentas → Construir com AI Office entrega o design aberto ao AI Office para que uma equipe de agentes o transforme num projeto de verdade.

Você pode

Abrir o AI Office com o lobby já preenchido: o nome do design como briefing, e o HTML, o CSS e o JS do design e as variáveis do tema dele como contexto.

Você não pode, e por quê

Usar no Free: o AI Office é Pro, então você vê o paywall no lugar.Pro

Você não pode, e por quê

Usar Design com IA da tela inicial no Free: o cartão abre um painel do Pro. O título dele aparece em espanhol (Diseñador con IA), seja qual for o idioma do app.Pro
Gerar sem internet, sem um provedor que tenha chave, ou antes de aceitar o diálogo de consentimento desse provedor.Precisa de rede
Revisar uma proposta visualmente antes de ela entrar: não há diff visual, e sem achados bloqueantes não existe nem tela de revisão. A tela de revisão lista as alterações em texto.De propósito
Obter várias propostas: Quantas propostas? (1, 2 ou 3) só acrescenta uma linha ao prompt, e uma única proposta é gerada.Ainda não
Direcionar o resultado com Profissionais B2B, Estudantes / aprendizes, Esboço lo-fi ou Pronto para produção: essas quatro opções de Refinar o briefing não mudam o prompt.Ainda não
Fazer a IA ler arquivos, projetos ou designs anexados: só os nomes deles são acrescentados ao briefing.Ainda não
Passar dos limites de validação: 120 ações, 600 componentes depois de aplicada e 24.000 caracteres de CSS personalizado.De propósito

Exportar e compartilhar

Tudo fica em Ferramentas → Exportar e Copiar. Cada exportação abre um diálogo com o nome do arquivo e dois botões: Salvar, que grava o arquivo com o seletor de arquivos do Android, e Compartilhar, que abre a folha de compartilhamento.

Formatos

Formato	Como e o que você recebe	Plano
HTML	Exportar HTML (`design.html`).	Free
CSS	Exportar CSS (`styles.css`).	Free
SVG	Exportar SVG (`design.svg`).	Free
ZIP	Exportar ZIP (com assets): `index.html`, `styles.css` e `script.js` quando o design os tem, uma pasta `assets/` com as imagens locais e `comments.txt` quando há comentários.	Free
.pcd	Compartilhar design (.pcd): o arquivo próprio do Designer, que você pode importar de novo.	Free
React	Exportar React (`Component.jsx`).	Pro
Vue	Exportar Vue (`Component.vue`).	Pro
Svelte	Exportar Svelte (`Component.svelte`).	Pro
Um componente	Menu de contexto → Exportar como HTML: esse componente e os filhos dele como um arquivo HTML.	Free
Área de transferência	Copiar → Copiar HTML ou Copiar CSS, do design inteiro.	Free
Projeto de código	Projeto PocketCode: cria um projeto de código de verdade entre os seus projetos a partir do design aberto.	Pro

Verificações antes de exportar

Antes de exportar HTML, CSS, React, Vue, Svelte, ZIP ou Projeto PocketCode, o Designer roda a verificação de Saúde. Se encontra problemas, pergunta Exportar com avisos pendentes? com Exportar mesmo assim ou Revisar avisos. Nada quebra se você exportar como está.
Se o design está em tela livre, ele também pergunta Exportar em tela livre?: Converter para fluxo primeiro ou Exportar como está.
SVG e .pcd pulam as duas verificações.

Salvar ou compartilhar

Salvar funciona para todos os formatos.
Compartilhar envia os formatos de texto (HTML, CSS, SVG, React, Vue, Svelte e o HTML de um componente) como texto simples: o código em si, não um arquivo.
Um ZIP ou um .pcd é compartilhado como arquivo: Compartilhar o grava no cache do app e abre a folha de compartilhamento do Android com o arquivo anexado. Salvar também vale para todos os formatos.

O que o código exportado contém

HTML semântico, com regras @media reais para os seus breakpoints, regras :hover, :active, :focus e :disabled para os estados, @keyframes para as animações e um pequeno script para navegação entre páginas, diálogos, validação de formulários e gatilhos de rolagem.
As variáveis dos seus temas claro e escuro. A página exportada segue o Modo padrão ao exportar que você escolheu: Sistema, Claro ou Escuro.
Um link para o Google Fonts para cada web font que você usou, então a página precisa de rede para exibi-las.

Você pode

Exportar o design inteiro como HTML, CSS, SVG, ZIP ou .pcd no Free, e como React, Vue ou Svelte com o Pro.
Compartilhar um ZIP ou um .pcd como arquivo com Compartilhar (os formatos de texto vão como texto simples).
Exportar um componente, copiar HTML ou CSS, ou salvar o design como projeto de código (Pro).

Você não pode, e por quê

Compartilhar HTML, CSS, SVG ou código como um arquivo tipado: os formatos de texto são enviados como texto simples, nunca como text/html ou image/svg+xml.De propósito
Exportar React, Vue, Svelte ou Projeto PocketCode no Free: eles abrem o painel do Pro.Pro
Ver as web fonts do HTML exportado sem rede: ele as vincula pelo Google Fonts. O catálogo tem 50 famílias.Precisa de rede

Caixa de ferramentas

A Caixa de ferramentas é um conjunto de onze pequenos utilitários para o trabalho de design. Abra-a pela tela inicial (Caixa de ferramentas) ou pela ação rápida Multimídia do Início. Ela funciona sozinha: você não precisa de um design aberto.

Grupo	Ferramenta	O que faz
Cores	Seletor de Cores	Conversor HEX · RGB · HSL.
Cores	Gerador de Gradiente	Cria gradientes CSS lineares, radiais e cônicos.
Cores	Gerador de Paleta	Harmonias de cores: complementar, análoga, tríade, complementar dividida e monocromática.
Cores	Verificador de Contraste	A razão de contraste WCAG de duas cores, para AA e AAA, texto normal e grande.
Geradores	Lorem Ipsum	Texto de preenchimento em palavras, frases ou parágrafos.
Geradores	Tamanhos de Ícones	Uma referência de 28 tamanhos de ícones para Android, iOS, Web e macOS.
Ferramentas CSS	Sombra de Caixa	Um construtor de sombras CSS.
Ferramentas CSS	Borda Arredondada	Um construtor de raio CSS.
Tipografia	Explorador de Fontes	Pré-visualize e compare 25 fontes.
Tipografia	Escala Tipográfica	Uma escala modular a partir de um tamanho base, com oito razões, de Minor Second (1,067) a Golden Ratio (1,618).
Conversores	Conversor de Unidades	Converte entre px, dp, sp, rem, em e pt.

Você pode

Buscar as ferramentas pelo nome e abrir qualquer uma das onze.
Usar a Caixa de ferramentas no Free: ela não tem trava de plano.

Você não pode, e por quê

Editar imagens: a Caixa de ferramentas não recorta, não aplica filtros nem exporta imagens, e não é um editor de imagens.De propósito

Gestos e atalhos

Os gestos de toque são a principal forma de trabalhar. Os atalhos de teclado funcionam com um teclado físico. Os dois estão listados no app em Ferramentas → Gestos e Atalhos (Ctrl+/). Uma introdução de cinco passos aparece na primeira vez que você abre o editor, e Repetir introdução em Gestos a mostra de novo.

Gestos de toque

Gesto	O que faz
Toque	Seleciona o componente mais interno. Toque nele de novo para subir um nível e toque no espaço vazio para desmarcar.
Manter pressionado um componente não selecionado	Adiciona-o à seleção.
Manter pressionado um componente selecionado	Abre o menu de contexto dele.
Toque duplo no texto	Abre Editar texto.
Toque duplo num contêiner	Isola-o.
Manter pressionado um cartão da paleta e arrastar	Coloca o componente exatamente onde você soltar.
Arrastar um componente selecionado	Move-o. Solte-o sobre um contêiner para aninhá-lo.
Arrastar o espaço vazio ou um componente não selecionado	Desloca o canvas.
Arrastar com a ferramenta de área	Seleciona todos os componentes de nível superior que o retângulo toca.
Arrastar com dois dedos ou pinça	Desloca e dá zoom, ancorado sob os dedos.
Arrastar a partir de uma régua	Cria uma guia.
Arrastar uma alça de canto	Redimensiona os dois eixos.
Arrastar uma alça de borda	Redimensiona um eixo.
Arrastar a alça de rotação	Gira; encaixa a cada 15°.
Arrastar uma alça de padding ou de gap	Edita o espaçamento do contêiner.

Atalhos de teclado

Os atalhos abaixo são os que o Designer trata. Ctrl é Cmd num teclado que o tenha.

Teclas	Ação
`↑` `↓` `←` `→`	Move a seleção 1 px; com `Shift`, 10 px.
`Ctrl+A` · `Esc`	Selecionar tudo · Desmarcar.
`Delete` ou `Backspace`	Exclui a seleção.
`Ctrl+Z` · `Ctrl+Shift+Z` ou `Ctrl+Y`	Desfazer · Refazer.
`Ctrl+C` · `Ctrl+X` · `Ctrl+V`	Copiar · Recortar · Colar.
`Ctrl+D`	Duplicar.
`Ctrl+E`	Editar texto.
`Ctrl+G` · `Ctrl+Shift+G`	Agrupar · Desagrupar.
`Ctrl+]` · `Ctrl+[`	Trazer para a frente · Enviar para trás um nível; adicione `Shift` para trazer ao topo ou enviar ao fundo.
`Ctrl+Shift+H` · `Ctrl+Shift+L`	Ocultar ou mostrar · Bloquear ou desbloquear.
`Ctrl+Alt+K`	Criar um componente reutilizável.
`+` · `-`	Aproximar · Afastar.
`0` · `1` · `2`	Ajustar ao ecrã · 100% · Zoom na seleção.
`Ctrl+/`	Abre o diálogo de atalhos.

Acessibilidade e uso com uma mão

Com o TalkBack, ações personalizadas movem o componente selecionado em passos de 8 dp e mudam a largura ou a altura dele.
O modo canhoto (Ferramentas → Ativar modo canhoto) muda de lado a barra flutuante de seleção, e a barra pode ser desligada com Desativar barra de seleção.
A altura de cada painel é lembrada, então um painel abre do jeito que você o deixou.

Você não pode, e por quê

Usar os atalhos com o teclado na tela: eles exigem um teclado físico. Clique com o botão direito, roda do mouse, Shift+clique, Alt+arrastar, Space+arrastar e letras de ferramentas não são compatíveis.Dispositivo
Remapeá-los: os atalhos do Designer são fixos e não fazem parte das configurações de atalhos do app.De propósito

Free e Pro

O Designer é quase todo gratuito. O Pro libera algumas coisas específicas, e o Free tem um único limite: três designs feitos a partir de modelos.

Recurso	Free	Pro
Canvas, 49 componentes, 5 blocos, layout, tokens, temas, componentes reutilizáveis, estados, interações e animação	Incluído	Incluído
Páginas, salvamento automático, desfazer (200 passos), histórico, versões, recuperação e Saúde	Incluído	Incluído
Designs em branco e importações do Figma ou de HTML	Sem limite de plano	Sem limite de plano
Designs criados a partir de modelos (as duplicações deles e os `.pcd` deles importados de novo também contam)	3 de cada vez	Sem limite
Exportar HTML, CSS, SVG, ZIP e `.pcd`; Copiar HTML e CSS; Ver código	Incluído	Incluído
Exportar React, Vue e Svelte	Indisponível	Incluído
Pré-visualização responsiva: Original, Mobile (375), Tablet (768) e Desktop (1280)	Incluído	Incluído
Pré-visualização responsiva: Mobile S (320), Mobile L (428) e Desktop L (1440)	Indisponível	Incluído
Projeto PocketCode (salvar o design como projeto de código)	Indisponível	Incluído
Design com IA (um design novo a partir de um briefing)	Indisponível	Incluído, com a chave do seu próprio provedor
✨ Melhorar com IA (no design aberto)	Sem trava de plano; exige a chave do seu próprio provedor	Incluído, com a chave do seu próprio provedor
Construir com AI Office	Indisponível (o AI Office é Pro)	Incluído
Caixa de ferramentas	Incluído	Incluído

Estas linhas seguem UserPlan e PlanFeature no app: maxDesignTemplates, UNLIMITED_TEMPLATES, EXPORT_FRAMEWORKS, AI_DESIGNER e AI_OFFICE. Os preços e a matriz completa de Free e Pro estão na página de Planos.

Privacidade

O Designer em si não envia os seus designs para lugar nenhum: eles ficam no armazenamento privado do app até você exportar, compartilhar ou enviar um para o AI Office.
A geração com IA envia ao provedor que você escolheu o seu briefing, o tipo de página, o estilo, os controles e o sistema de design que você escolheu e, quando o design não está vazio, uma lista compacta dos componentes dele (id, tipo, nome, posição, tamanho e pai). Os itens anexados acrescentam só os nomes.
Até você aceitar um provedor, o app pergunta Enviar para …? e explica que a sua mensagem e o que você anexa vão para um provedor de IA de terceiros pela internet. A escolha é lembrada por provedor e por conta. Evite colocar segredos ou dados pessoais num briefing.
A chave do provedor é sua e é configurada em Configurações. Veja Provedores de IA.
O HTML exportado vincula o Google Fonts para as web fonts que você usou, então quem o abre busca essas fontes no Google. As imagens e os vídeos são carregados dos próprios endereços https.
A prévia dentro do app executa o seu design numa WebView trancada: sem navegação para outros sites, sem arquivos locais, sem scripts externos, sem chamadas de rede a partir de scripts e sem envio de formulários.
Ao exportar, o app anuncia a exportação (id, nome e formato do design, nunca o conteúdo) no barramento de eventos interno dele, e um Workflow pode usá-la como gatilho.

Limitações

Os limites que mais importam, num só lugar. Cada um é explicado na seção em que se aplica.

Abrir um arquivo .html do editor ou do explorador de arquivos direto no Designer.De propósito
Renomear um design depois de criado.Ainda não
Mudar o tamanho da grade: ela é fixa em 16 px.De propósito
Manter o desfazer entre sessões: o histórico é esvaziado ao fechar um design e guarda 200 passos.De propósito
Usar Comparar no celular e os atalhos de teclado físico com o teclado na tela.Dispositivo
Ver miniaturas de componentes na paleta, ou buscá-la por um nome no seu idioma: os nomes são em inglês.De propósito
Ver web fonts no canvas: ele desenha a fonte do sistema mais próxima, e só o HTML exportado vincula a fonte.De propósito
Fazer as instâncias de um componente reutilizável seguirem o original automaticamente.De propósito
Manter o HTML editado à mão em Ver código: ele é apagado na sua próxima alteração do canvas ou do tema.De propósito
Compartilhar um protótipo com um link.De propósito
Navegar, executar scripts externos, chamar a rede ou enviar formulários na prévia.Google Play
Pré-visualizar Mobile S, Mobile L e Desktop L, exportar React, Vue e Svelte, salvar um Projeto PocketCode, usar Design com IA ou Construir com AI Office no Free.Pro
Fazer um quarto design a partir de um modelo no Free.Pro
Gerar com IA sem internet, sem a chave de um provedor ou sem o consentimento para esse provedor.Precisa de rede
Obter várias propostas de IA, ou direcionar a IA com as quatro opções de Refinar o briefing que não fazem nada.Ainda não
Importar de uma conta do Figma, ou manter scripts e CSS complexo de um arquivo HTML.De propósito
Importar um .pcd maior que 20 MB: o app o recusa.Dispositivo
Ler entradas do histórico, mensagens de Saúde e nomes de checkpoints automáticos no seu idioma: eles são fixos em espanhol.De propósito

Solução de problemas

Este design está danificado

Não foi possível ler o arquivo. Toque em Recuperar na linha dele, ou abra-o, e escolha Backup automático (a cópia guardada do seu salvamento anterior) ou Ou uma versão salva.

Não foi possível recuperar este design

Nem o backup automático nem nenhuma versão salva puderam ser restaurados. Se você exportou um .pcd antes, importe-o com Importar design (.pcd).

Esse arquivo não é um design válido do PocketCode

O arquivo que você escolheu com Importar design (.pcd) não é um design feito pelo Designer, está danificado ou é maior que 20 MB. Um arquivo do Figma vai em Importar do Figma (JSON) (senão o app diz “Esse ficheiro não é um JSON do Figma válido”), e um arquivo HTML em Importar de HTML (“Não foi possível ler esse ficheiro como HTML”).

Exportar com avisos pendentes?

A verificação de Saúde encontrou problemas. Nada quebra se você exportar como está: toque em Exportar mesmo assim, ou em Revisar avisos para abrir a Saúde do sistema de design.

Exportar em tela livre?

Um design em tela livre exporta posições absolutas. Converter para fluxo primeiro empilha os blocos para o HTML ficar responsivo; Exportar como está mantém as posições.

Não configurado

Na lista de provedores que abre a partir do chip de provedor de Criar com IA, um provedor sem chave mostra este selo. Adicione uma chave em Configurações (veja Provedores de IA) e depois escolha o provedor de novo.

A IA não retornou nenhuma ação de design.

O modelo respondeu sem uma lista utilizável de ações de design. Tente de novo, deixe o briefing mais específico ou escolha outro modelo no chip.

Alterações de IA aplicadas parcialmente (N ações inválidas descartadas)

Parte da proposta quebrou um limite (120 ações, 600 componentes, 24.000 caracteres de CSS personalizado) ou uma regra, como apontar para um componente que não existe, então só a parte válida foi aplicada. Um único desfazer reverte tudo.

Enviar para …?

O app pergunta antes de enviar o seu briefing a um provedor de terceiros que você ainda não aceitou. Toque em Enviar para continuar; a geração então recomeça.

Uma fonte parece diferente no HTML exportado

A exportação vincula pelo Google Fonts só as 50 famílias do catálogo. A Saúde do sistema de design sinaliza qualquer outra como Fontes que não seriam vinculadas na exportação, e a página precisa de rede para carregar as que ela vincula.

Uma largura de prévia pede que eu assine o Pro

Mobile S (320), Mobile L (428) e Desktop L (1440) são Pro. Original, Mobile, Tablet e Desktop são gratuitos, e você ainda pode editar qualquer breakpoint.

Próximos passos

Editor de códigoEdite o HTML, o CSS e o código de framework que você exporta AI ChatArtefatos no chat, onde começa o Abrir no Designer ProjetosProjetos, incluindo o que o Projeto PocketCode cria Planos e preçosO que o Pro acrescenta ao app inteiro