Image to UIpor UIZZE

Image to UI Skill.

Implemente a interface que você já consegue ver. O Image to UI trata uma captura de tela ou mockup como a especificação visual, mantém a stack existente do projeto e pede que seu agente renderize e compare antes de afirmar que o resultado é igual.

Captura de tela para código
Correspondência com a referência
Implementação de UI

Baixar OpenDesign Ver guia de uso

Revisão da fonte · image-to-uiSKILL.md

Tarefa Implementação de UI a partir de captura de tela Produz • Código de interface no projeto existente • Texto e controles reais, não uma captura de tela achatada • Um resumo da comparação com as diferenças restantes Antes de começar Forneça uma imagem de referência legível, a viewport de destino, acesso ao projeto e os assets disponíveis. A renderização no navegador é necessária para verificar a correspondência visual. Não é necessário ter conta no UIZZE nem conexão com MCP.

Resumo editorial · fonte revisada em 2026-10-12 · não é um exemplo gerado

01 O que ele faz

Use a imagem como especificação

Esta skill enxuta se concentra em reproduzir uma decisão visual já existente, não em encontrar uma nova direção de arte. O fluxo abaixo descreve a fonte; não é uma reconstrução concluída.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

O agente começa pela imagem real: dimensões, texto visível, hierarquia, proporções e assets. Também lê o projeto de destino para que a implementação se encaixe no framework e na tela existentes. Uma captura recortada define apenas a área visível; não é permissão para inventar o restante da página.

A implementação usa layout, texto e controles reais. Depois de igualar a viewport de referência, o agente verifica os outros tamanhos solicitados. A etapa final é renderizar nas dimensões da referência, aguardar fontes e imagens, comparar o resultado e corrigir as diferenças visíveis. Assets ausentes e renderização não verificada devem ficar explícitos.

Entregas esperadas

Código de interface editável, usando a stack do projeto de destino e componentes reutilizáveis adequados
Controles solicitados conectados ao comportamento existente, sem funcionalidades de backend inventadas
Um breve relato das comparações visuais realmente feitas, das diferenças restantes e dos assets ausentes

Ver o briefing de exemplo

Da referência à comparação

01
Inspecione a imagem real
Leia a própria imagem, não apenas o nome do arquivo ou o texto extraído. Identifique dimensões, região visível, alinhamento, tipografia e assets antes de editar o código.
02
Construa no tamanho da referência
Iguale hierarquia, quebras de linha, espaçamento e recortes na stack existente. Reutilize componentes quando eles reproduzirem a referência; não a force para padrões não relacionados.
03
Renderize e corrija
Capture a tela em execução na mesma viewport. Compare primeiro as grandes diferenças de layout e proporção, depois tipografia, cor e pequenos detalhes; renderize novamente após as mudanças.
04
Verifique as variações solicitadas
Depois de estabelecer o tamanho da referência, teste os tamanhos responsivos solicitados e os controles em funcionamento. Informe as diferenças restantes em vez de prometer fidelidade pixel a pixel.

02 Quando usar

Quando usar

Escolha o Image to UI quando a direção visual já estiver definida e você precisar implementá-la com fidelidade.

Bom encaixe

Um mockup de tela aprovadoTransforme uma imagem de design fornecida em uma tela de um app existente, mantendo a hierarquia e o conteúdo visíveis.
Uma reconstrução a partir de captura de telaRecrie uma referência cujo arquivo de design original não está disponível, deixando explícitas quaisquer fontes ou imagens ausentes.
Uma correção visual pontualAproxime uma implementação de uma referência conhecida usando capturas na mesma viewport e uma lista das diferenças restantes.

Limites a verificar

Uma captura de tela não define comportamento ocultoSeções não visíveis, respostas de backend e telas adicionais ficam fora da referência. Forneça requisitos para elas em vez de esperar que a skill deduza um produto.
Os assets exatos podem estar ausentesA skill pede que fontes, ícones ou imagens ausentes sejam informados. Ela não consegue garantir uma correspondência visual exata quando os assets necessários não estão disponíveis.
A fidelidade exige evidência renderizadaUma implementação plausível ou um build bem-sucedido não comprova a semelhança. Se o ambiente não conseguir renderizar a tela, a correspondência visual continua não verificada.

Traga estas entradas

Uma referência legível e a viewportAnexe a imagem real e especifique as dimensões pretendidas do navegador. Indique se a imagem é um recorte e qual região deve ser implementada.
O projeto existente e os assetsIdentifique a rota ou o componente de destino, o framework, as fontes, os ícones e os arquivos de imagem. Aponte componentes ou comportamentos existentes que devem ser mantidos.
Requisitos de interação e responsividadeNomeie os controles a conectar e as larguras adicionais a suportar. Diga o que a captura de tela não mostra e o que deve ficar fora do escopo.

03 Decisões que importam

Decisões que importam

Iguale antes de redesenhar
A imagem define paleta, composição e conteúdo visível. Acréscimos decorativos ou outra direção de design exigem um pedido separado.
Reconstrua a interface, não o bitmap
Layouts normais com grid e flex, texto real e controles utilizáveis preservam uma UI editável. O posicionamento absoluto fica reservado para sobreposições reais, não para a tela inteira.
Compare coisas equivalentes
Dimensões de viewport iguais e assets carregados tornam a comparação significativa. A ordem de correção documentada começa por proporções e layout antes de polir pequenos detalhes.

04 Teste um briefing focado

Teste um briefing focado

O exemplo abaixo não foi executado. Anexe sua imagem de referência e adapte os detalhes do projeto antes de usá-lo.

Revise a configuração

O README do projeto original documenta o comando de instalação abaixo. Ele instala o pacote Image to UI nativo do GitHub; não instala o serviço opcional UIZZE MCP.

Comando de instalação documentado

npx skills add uizze/uizze --skill image-to-ui

Use um agente que consiga inspecionar imagens e editar seu projeto. Execute o projeto em um navegador para a verificação visual. A skill em si não exige conta no UIZZE nem conexão com MCP; seu projeto e seu agente mantêm os próprios requisitos de configuração.

Anexe uma tela

Mantenha a primeira tarefa limitada a uma tela ou recorte visível. Inclua a imagem, os assets exatos e as interações que o app já suporta.

Briefing de exemplo

Use o image-to-ui para implementar a referência anexada da tela de cobrança no app existente. Primeiro inspecione a imagem e o projeto e, se não estiverem claros, confirme comigo a rota de destino e a viewport de referência. Iguale o texto visível, a hierarquia, o espaçamento, as quebras de linha e os recortes de imagem em vez de redesenhá-los. Use as fontes e os assets fornecidos; liste o que estiver faltando em vez de substituir silenciosamente. Preserve o comportamento existente de pagamento e de faturas e não invente respostas de API nem seções não visíveis. Renderize na viewport de referência, aguarde fontes e imagens, compare com a imagem fornecida e corrija primeiro as maiores diferenças. Depois verifique as larguras de 390 px e 320 px sem alterar a identidade visual. Informe as capturas de tela efetivamente comparadas, os controles verificados e as diferenças restantes.

Revise o resultado renderizado

Compare a mesma viewport antes de avaliar as variações responsivas. Verifique tanto o design visível quanto os controles solicitados.

A referência e a captura renderizada usam a mesma viewport, com fontes e imagens carregadas.
O conteúdo visível e as proporções seguem a imagem; assets ausentes ou diferenças deliberadas são nomeados.
Os controles solicitados mantêm o comportamento real, e os layouts estreitos especificados continuam utilizáveis.

O OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Proprietário da fonte: UIZZE
Repositório: uizze/uizze
Arquivo da skill: skills/image-to-ui/SKILL.md
Licença: MIT · licença no nível da skill
Snapshot revisado: 2026-10-12 · 146928eb50bc

Resumo editorial da fonte

O Image to UI é um fluxo de trabalho enxuto de reconstrução a partir de captura de tela: inspecionar a imagem e o projeto, implementar a interface visível na stack existente e, depois, renderizar na viewport de referência e corrigir as diferenças. Este é um resumo editorial, não o relato de um teste executado.

Resumo original do OpenDesign, baseado na fonte vinculada. A licença MIT é específica do diretório desta skill; outros pacotes do repositório podem ter avisos diferentes. As estrelas do repositório não são contagens de instalações.

06 Dúvidas antes de começar

Dúvidas antes de começar

O Image to UI precisa do serviço pago UIZZE MCP?

Não. A skill e o README do projeto original dizem explicitamente que não é necessária conta nem conexão com MCP. O repositório também oferece um serviço pago opcional de busca de referências, mas ele é separado da implementação da imagem que você forneceu.

Ele consegue construir o restante de uma página a partir de uma captura recortada?

A fonte diz para reproduzir a região visível e não inventar seções não visíveis. Forneça imagens de referência adicionais ou requisitos explícitos para o que estiver além do recorte.

Ele garante um resultado pixel perfect?

Nenhuma garantia decorre das instruções. A skill busca uma reconstrução fiel e exige comparação renderizada. Assets ausentes e diferenças restantes devem ser informados; sem renderização, a fidelidade visual continua não verificada.

Image to UI

Construa a tela que você já escolheu

Traga a referência legível, o projeto de destino e seus assets. Iguale a viewport original, inspecione a interface em execução e deixe explícitas as diferenças restantes.

Baixar OpenDesign Ver skills de design