CommunityImagemgithub.com

Troca de Tela de Telefone

Transforme uma foto de telefone em um template reutilizável e coloque qualquer imagem em sua tela, por código, sem gerador de imagem. Use para uma nova foto de telefone, um novo template ou verificar um.

O que é Troca de Tela de Telefone?

Esta skill permite substituir programaticamente a tela de um telefone em uma foto por qualquer imagem, sem necessidade de geradores de imagem. Ela cria templates reutilizáveis a partir de fotos reais de iPhones, detectando com precisão os cantos, moldura preta, entalhe ou ilha dinâmica. Suporta a criação de novos templates seguindo um fluxo de 10 etapas que envolve corte, detecção de linhas, traçado de contorno e verificação de qualidade. A skill é útil para desenvolvedores que precisam gerar mockups de apps, criar screenshots personalizados ou automatizar a apresentação de interfaces em dispositivos reais. Ela opera inteiramente por código Python e ferramentas de linha de comando, garantindo que a imagem inserida se encaixe perfeitamente na geometria do telefone, considerando perspectiva, curvatura de lente e cantos arredondados do iOS.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/onemanylov/phone-screen-swap/tree/HEAD/.claude/skills/phone-screen

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Troca de Tela de Telefone faz?

Foto: $ARGUMENTS. Se não houver, peça uma, ou encontre alguma com find_photos.py. Toda a parte frontal do telefone é substituída por código: a tela, a moldura preta e o entalhe ou ilha. Fora do vidro a foto permanece intocada.

Para um template que já existe, esta skill não é necessária: python3 swap.py <imagem>.

Novo template

Pegue: uma foto real de um iPhone, com a tela voltada para a câmera. Pule: Android, uma inclinação acima de 25°, um lado mais de 1,2× o outro (o corte os recusa). Pule fotos com um dedo ou manga sobre a tela: sem moldura cinza, ela será pintada por cima. Todo o vidro é nosso, assim como reflexos. Apenas pele vindo de fora permanece da foto.

P=<nome, 8 caracteres, único>; D=templates/corners
mkdir -p out
# 1. Olhe a foto e leia os cantos aproximados da tela, SE,SD,IE,ID
python3 tools/slide_crop.py --q '<cantos>' <foto.jpg> templates/crop/$P.jpg       # imprime os cantos no corte
# 2. As bordas retas exatas. Se `live` estiver baixo: R=34
python3 tools/slide_lines.py $P '<cantos no corte>' out/l.jpg                    # cantos refinados no final da saída
# 3. O contorno: perspectiva, curvatura de lente, raio, contorno do vidro
python3 tools/slide_trace.py $P '<cantos>' out/t.jpg $D/$P.json
# 4. Prova do que o ajuste não viu. Sempre olhe a imagem
python3 tools/slide_proof.py $P $D/$P.json out/$P-proof.jpg
# 5. A pose, usada apenas pelo reflexo
python3 tools/slide_sheet.py $P $D/$P.pose.json init
# 6. Meça o entalhe ou ilha, os ícones de status, os pretos
python3 tools/slide_check.py $P measure
# Receita $D/$P.recipe.json: copie a841f108 (entalhe) ou f5dad639 (ilha), depois defina frame=$P, pose, cantos e as opções medidas
# 7. Hora e ícones para o local deste telefone
python3 tools/slide_status.py $P init <linha do measure>; python3 tools/slide_status.py $P build
# 8. Construção e teste vermelho
python3 tools/slide_check.py $P build
# 9. Mapa térmico de vazamentos
python3 tools/slide_check.py $P leak
# 10. Largura da moldura
python3 tools/slide_check.py $P frame

Depois disso é um template: python3 swap.py <imagem> -t $P.

Olhe antes de confiar

  1. out/$P-split.jpg: foto, vermelho, resultado. O vermelho se encaixa, a moldura termina na carcaça, tudo do corpo para dentro é nosso.
  2. out/$P-leak.jpg: a moldura sobre uma tela preta, brilho em escala logarítmica. Qualquer coisa acesa veio da foto: uma linha ao redor de um recorte, manchas, reflexos. Apenas um alto-falante e o que realmente está na frente podem aparecer.
  3. out/$P-top.jpg: o contorno verde do recorte na foto, os ícones no lugar.
  4. out/$P-zoom.jpg: cantos e moldura, ampliados, ao lado da foto.
  5. O template com uma imagem branca através do swap.py: uma página escura esconde cantos e bordas ruins.
  6. out/$P-frame.jpg: os quatro cantos em uma tela branca. Um template não está pronto até que a verificação da moldura abaixo passe.

Verificação da moldura

A moldura preta é hardware, uma largura em toda a volta. slide_check.py $P frame constrói sobre uma tela branca, endireita e mede o preto no meio de cada lado, em pixels de screenshot (591 de largura). Ele imprime ours e photo por lado, a variação e um veredito: até 4 px é OK, mais é FIX. O limite de 4 px foi escolhido a partir destes telefones: uma variação de 7,5 px era claramente visível, e 4 px não era. Se disser FIX em um novo template:

  1. Execute slide_trace.py novamente: ele lê o preto visível e dá a cada lado a mediana (a linha frame:).
  2. Reconstrua, depois execute frame novamente.
  3. Ainda FIX: compare ours com photo. Se coincidirem, um reflexo, case ou mão esconde a moldura naquele lado da foto. Se não coincidirem, o contorno está errado: olhe para -frame.jpg e -split.jpg.
  4. Se não convergir, não considere o template pronto. Diga qual lado está errado e por quantos px. Verifique -frame.jpg visualmente também: os lados superior e lateral devem coincidir. Os templates enviados: f38fe44a 2.2, 79186658 3.2 e 895d3ee8 3.8 passam. f5dad639 5.8, a841f108 6.2 e 14278a0b 8.5 não passam: suas molduras foram mantidas como construídas inicialmente.

Configurações

  • Preto: floor, para que a moldura e o recorte coincidam com a foto. Comece em .003 e abaixe se a foto for mais escura. build imprime ambos.
  • Entalhe: valores de measure. Ajuste cr pelo contorno verde, measure lê baixo.
  • Alto-falante acima de um entalhe: grille=45. Se uma linha fina da página antiga aparecer ao redor do entalhe: gband=1.
  • Ilha: seu centro é hardware, 295.5 de 591. Se measure disser mais de 1 px de diferença, algo brilhante comeu uma borda: pegue a borda limpa e espelhe através do centro. Em uma tela de bloqueio, pegue x de um telefone com ilha (hora 111, ícones 479) e y de measure.
  • Alto-falante acima de uma ilha: se estiver dentro do contorno do vidro, grille=45 traz de volta apenas seu relevo.
  • Manga sobre o vidro: sleeve=1, apenas com uma moldura cinza real em templates/grey/ (f38fe44a).
  • Escuro sobre escuro: slide_trace.py alterna sozinho quando menos de 400 de 720 pontos sobem. Verifique -split com cuidado extra.

Como funciona

Um telefone é rígido, então a tela é um retângulo com cantos contínuos do iOS, vistos através de uma perspectiva e uma curvatura radial de lente. As bordas são encontradas no brilho logarítmico, para que escuro sobre escuro funcione, e colocadas no ponto médio em luz linear. A imagem é desenhada na foto endireitada e depois curvada de volta com o vidro.

Armadilhas conhecidas

  • Julgar apenas por uma página escura.
  • Ajustar de um jeito e verificar de outro: a verificação é o ajuste, a prova é o que foi deixado de fora.
  • Linhas retas diretamente na foto: ela é curvada. Elas existem apenas na foto endireitada.
  • Procurar pela borda da carcaça de fora para dentro em uma tela brilhante: uma dobra de pano parece uma carcaça. Vá da tela para fora.

Habilidades Relacionadas