Projeto pessoal • Editor visualDo visual ao código.Camadas e
propriedadesTemas e
componentesPreview
responsivo

Design e código,no mesmo fluxo.

Canvas, componentes e prototipagem para construir interfaces.

Um editor visual que roda no navegador: a tela se monta arrastando blocos e sai como código em 5 formatos e 6 bibliotecas.Monte telas arrastando blocos e saia com o código pronto.

FerramentaProjeto pessoalNo navegador

Next.js 14.2
React 18.3
TypeScript 5.9
Tailwind CSS 3.4
Zustand 4.5
Babel Parser 7.28
JSZip 3.10

Projeto pessoal • Editor visualDo visual ao código.Camadas e
propriedadesTemas e
componentesPreview
responsivo

Design e código,no mesmo fluxo.

Canvas, componentes e prototipagem 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

Um editor visual que roda no navegador: a tela se monta arrastando blocos e sai como código em 5 formatos e 6 bibliotecas.Monte telas arrastando blocos e saia com o código pronto.

FerramentaProjeto pessoalNo navegador

Next.js 14.2
React 18.3
TypeScript 5.9
Tailwind CSS 3.4
Zustand 4.5
Babel Parser 7.28
JSZip 3.10

PortfólioUIForge

O editor

Arraste, solte e ajuste.

Montar uma tela costuma ser um vai e vem entre o programa de desenho e o código. No UIForge a tela se monta como num editor de imagem: cada bloco vai para o lugar com o mouse e tudo encaixa numa grade. Este aqui funciona, mexa à vontade.

Camadas

Arraste um bloco para mover; o tamanho muda nos botões − e + das propriedades. No teclado, as setas também movem.

Propriedades

Botão

Tipo: Botão
X: 48
Y: 248
L: 136
A: 40

Tudo encaixa de 8 em 8 pontos; perto do centro, o bloco gruda na guia.

O código

Do desenho ao código, na hora.

O desenho pronto ainda precisa virar código, e cada equipe usa um jeito. O UIForge escreve a mesma tela em 5 formatos e em 6 bibliotecas de componentes. Troque abaixo: o código é escrito de novo, na sua frente.

5 formatos

6 bibliotecas

Na tela

Trilha da Serra

Três dias de caminhada, com guia e pousada inclusos.

Reservar

Card.tsx

1export function Card() {2  return (3    <div className="flex flex-col gap-3 rounded-xl bg-white p-6 shadow-lg">4      <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-500" />5      <h3 className="text-xl font-extrabold text-slate-900">Trilha da Serra</h3>6      <p className="text-sm text-slate-600">Três dias de caminhada, com guia e pousada inclusos.</p>7      <button className="self-start rounded-lg bg-blue-500 px-4 py-2 font-bold text-white">8        Reservar9      </button>10    </div>11  );12}

Exemplo do tipo de código que o editor gera, com nomes claros e as etiquetas certas (título, texto, botão) em vez de caixas sem nome.

Três janelas do editor flutuando num cenário azul: importar código, importar do Figma e exportar imagem

Importe. Crie. Exporte.

React, HTML e Figma como ponto de partida para suas interfaces.

React e HTMLImportação do FigmaExportação de imagemEdição visual e geração de código no mesmo ambiente.

Quase ninguém começa uma tela do zero: já existe um componente, uma página pronta ou um arquivo no Figma. O UIForge lê o que já existe, monta a árvore de blocos e põe tudo no quadro, pronto para mexer. Escolha uma porta e toque ou passe o mouse nos nós da árvore.

1A fonteCard.tsx

function Card() {  return (    <div className="card p-6">      <h3 className="text-xl">Trilha da Serra</h3>      <p className="text-sm">Três dias de caminhada…</p>      <button className="btn">Reservar</button>    </div>  );}

2A árvore

3No quadro

A imagem

Leve a tela como imagem.

Às vezes o que se precisa é só de uma imagem da tela, para mostrar ao cliente, pôr numa apresentação ou numa loja de aplicativos. A janela de exportar do UIForge faz a conta sozinha. Escolha e veja o tamanho final mudar; na lupa, a borda de um círculo de perto.

Formato

Escala

Fundo

Tamanho final2.880 × 1.800 px

2x · PNG

Cada pixel de 1x vira 4 em 2x e 9 em 3x, a borda fica mais lisa.

O quadro exportado: 1.440 × 900

O responsivo

Uma tela, quatro larguras.

Um site é visto num monitor grande, num notebook, num tablet e num celular. O UIForge mostra a mesma tela nas quatro larguras de uma vez, para ver onde o menu vira botão e as colunas viram pilha. Desça, ou escolha uma largura.

Largura: 1440 px · aqui em 60%

As cores

Troque a paleta, a tela inteira acompanha.

Mudar a cor de um site à mão é caçar o mesmo tom em cem lugares. No UIForge as cores moram numa paleta: troca-se a paleta e todos os botões, fundos e textos acompanham. São 10 prontas; clique numa e veja a tinta cair.

10 paletas

variaveis.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;}

As tecnologias

Do que é feito, peça por peça

Um editor visual que roda inteiro no navegador, sem servidor e sem banco: o desenho mora na memória da página e sai como código ou imagem. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.

12tecnologias, em 4 camadas

Tela

Estado

Leitura

Saída

1Nx14.2

Camada: Tela

Next.js 14.2

Sustenta a página única do editor, que abre e funciona toda no navegador.

Onde está no código

next.config.mjs

Camada: Tela

React 18.3

Monta o quadro, os painéis e as janelas: são 30 peças de tela.

Onde está no código

src/components/canvas/Canvas.tsx

Camada: Tela

TypeScript 5.9

Descreve cada bloco do desenho, para o leitor e o gerador falarem a mesma língua.

Onde está no código

src/types/uiforge.ts

Camada: Tela

Tailwind CSS 3.4

O visual escuro do editor, e uma das saídas do código gerado.

Onde está no código

tailwind.config.ts

Camada: Tela

Lucide 0.424

Os ícones das ferramentas e dos painéis.

Onde está no código

src/components/layout/Header.tsx

Camada: Estado

Zustand 4.5

Guarda o desenho, a seleção, o zoom e o desfazer/refazer num lugar só.

Onde está no código

src/store/editor.ts

Camada: Estado

nanoid 5.1

Dá um nome único a cada bloco criado ou importado.

Onde está no código

src/store/editor.ts

Camada: Leitura

Babel Parser 7.28

Lê um componente React e transforma o código numa árvore de blocos.

Onde está no código

src/lib/react-parser.ts

Camada: Leitura

htmlparser2 9.1

Lê HTML comum e reconhece as classes do Tailwind e do Bootstrap.

Onde está no código

src/lib/html-parser.ts

Camada: Leitura

JSZip 3.10

Abre um projeto inteiro em .zip e escolhe as telas para importar.

Onde está no código

src/lib/project-import.ts

Camada: Leitura

Figma REST API v1

Busca os quadros de um arquivo do Figma com a chave da pessoa, que não fica guardada.

Onde está no código

src/lib/figma-client.ts

Camada: Saída

Canvas 2D HTML5

Exporta a tela como PNG, JPEG ou WebP, em 1x, 2x ou 3x; o SVG sai como vetor.

Onde está no código

src/lib/image-export.ts

As telas

Camada por camada.

O editor por dentro, como ele é: escuro, com o quadro branco no meio. Cada tela é uma camada da lista, toque ou passe o mouse para trazê-la à frente e clique para ver grande.

Camadas 13