CommunityBildgithub.com

onemanylov/phone-screen

Verwandelt ein Foto eines Smartphones in eine wiederverwendbare Vorlage und platziert jedes Bild auf dessen Bildschirm – per Code, ohne Bildgenerator. Ideal für neue Handyfotos, neue Vorlagen oder zur Überprüfung.

Was ist phone-screen?

Dieses Skill ermöglicht es Entwicklern, ein Foto eines Telefons (derzeit iPhone) als Vorlage zu verwenden und jedes Bild programmatisch auf den Bildschirm einzufügen, ohne auf einen Bildgenerator angewiesen zu sein. Es ist nützlich für die Erstellung realistischer Mockups, das Testen von UI-Designs oder das Ersetzen von Bildschirminhalten in vorhandenen Fotos. Das Skill unterstützt die Arbeit mit iOS-Geräten (Notch- und Insel-Designs) und führt Benutzer durch einen mehrstufigen Prozess: Zuschneiden, Kantenerkennung, Konturerstellung, Nachweis sowie Messung von Notch/Insel und Statusleiste. Es enthält eingebaute Prüfungen (Rahmenprüfung, Leckerkennung) mit einem strengen Toleranzlimit von 4 Pixeln. Die generierte Vorlage kann dann mit einem einfachen Befehl (`python3 swap.py <image> -t <template>`) für jedes beliebige Bild wiederverwendet werden. Das Skill eignet sich am besten für Entwickler, die mit Command-Line-Tools und Computer-Vision-Konzepten vertraut sind und genaue, wiederholbare Ergebnisse ohne manuelle Bildbearbeitung benötigen.

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

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Bildschirmtausch bei Telefonen

Foto: $ARGUMENTS. Falls keines vorhanden ist, frage nach einem oder suche eines mit find_photos.py. Die gesamte Vorderseite des Telefons wird durch Code ersetzt: der Bildschirm, der schwarze Rahmen und die Notch oder Insel. Außerhalb des Glases bleibt das Foto unberührt.

Für eine bereits existierende Vorlage wird dieses Skill nicht benötigt: python3 swap.py <image>.

Neue Vorlage

Nimm: ein echtes Foto eines iPhones, den Bildschirm zur Kamera. Überspringe: Android, eine Neigung über 25°, eine Seite über 1,2× der anderen (der Zuschnitt lehnt sie ab). Überspringe Fotos mit einem Finger oder Ärmel über dem Bildschirm: ohne grauen Rahmen wird er übermalt. Das gesamte Glas gehört uns, auch eine Spiegelung darauf. Nur Haut, die von außen hereinkommt, bleibt vom Foto erhalten.

P=<Name, 8 Zeichen, eindeutig>; D=templates/corners
mkdir -p out
# 1. Betrachte das Foto und lese die groben Ecken des Bildschirms, TL,TR,BR,BL
python3 tools/slide_crop.py --q '<Ecken>' <foto.jpg> templates/crop/$P.jpg       # gibt die Ecken auf dem Zuschnitt aus
# 2. Die exakten geraden Kanten. Wenn `live` niedrig ist: R=34
python3 tools/slide_lines.py $P '<Ecken auf dem Zuschnitt>' out/l.jpg                    # verfeinerte Ecken am Ende der Ausgabe
# 3. Die Kontur: Perspektive, Linsenverzerrung, Radius, Glasumriss
python3 tools/slide_trace.py $P '<Ecken>' out/t.jpg $D/$P.json
# 4. Nachweis dessen, was die Anpassung nicht gesehen hat. Sieh dir immer das Bild an
python3 tools/slide_proof.py $P $D/$P.json out/$P-proof.jpg
# 5. Die Pose, die nur für die Reflexion verwendet wird
python3 tools/slide_sheet.py $P $D/$P.pose.json init
# 6. Miss die Notch oder Insel, die Statussymbole, die Schwarztöne
python3 tools/slide_check.py $P measure
# Rezept $D/$P.recipe.json: kopiere a841f108 (Notch) oder f5dad639 (Insel), setze dann frame=$P, pose, corners und die gemessenen Optionen
# 7. Uhrzeit und Symbole an die Stelle dieses Telefons
python3 tools/slide_status.py $P init <Zeile aus measure>; python3 tools/slide_status.py $P build
# 8. Erstellen und Rot-Test
python3 tools/slide_check.py $P build
# 9. Wärmekarte der Lecks
python3 tools/slide_check.py $P leak
# 10. Rahmenbreite
python3 tools/slide_check.py $P frame

Danach ist es eine Vorlage: python3 swap.py <image> -t $P.

Prüfe, bevor du vertraust

  1. out/$P-split.jpg: Foto, Rot, Ergebnis. Das Rot passt, der Rahmen endet am Gehäuse, alles vom Körper nach innen gehört uns.
  2. out/$P-leak.jpg: der Rahmen auf einem schwarzen Bildschirm, Helligkeit auf einer logarithmischen Skala. Alles Leuchtende stammt aus dem Foto: eine Linie um einen Ausschnitt, Spritzer, Spiegelung. Nur ein Lautsprecher und was wirklich davor steht, darf erscheinen.
  3. out/$P-top.jpg: die grüne Kontur des Ausschnitts auf dem Foto, die Symbole an Ort und Stelle.
  4. out/$P-zoom.jpg: Ecken und Rahmen, groß, neben dem Foto.
  5. Die Vorlage mit einem weißen Bild durch swap.py: eine dunkle Seite verbirgt schlechte Ecken und Kanten.
  6. out/$P-frame.jpg: die vier Ecken auf einem weißen Bildschirm. Eine Vorlage ist nicht fertig, bis die Rahmenprüfung unten bestanden ist.

Rahmenprüfung

Der schwarze Rahmen ist Hardware, durchgehend eine Breite. slide_check.py $P frame erstellt auf einem weißen Bildschirm, richtet ihn aus und misst das Schwarz in der Mitte jeder Seite, in Bildschirmpixeln (591 breit). Es gibt ours und photo pro Seite aus, die Streuung und ein Urteil: bis zu 4 px ist OK, mehr ist FIX. Die 4-px-Grenze wurde von diesen Telefonen übernommen: eine Streuung von 7,5 px war deutlich sichtbar, und 4 px war es nicht. Wenn bei einer neuen Vorlage FIX ausgegeben wird:

  1. Führe slide_trace.py erneut aus: es liest das sichtbare Schwarz und gibt jeder Seite den Median (die Zeile frame:).
  2. Erstelle neu, führe dann erneut frame aus.
  3. Immer noch FIX: vergleiche ours mit photo. Wenn sie übereinstimmen, verdeckt eine Spiegelung, ein Gehäuse oder eine Hand den Rahmen auf dieser Seite im Foto. Wenn nicht, ist die Kontur falsch: sieh dir -frame.jpg und -split.jpg an.
  4. Wenn es nicht konvergiert, erkläre die Vorlage nicht für fertig. Gib an, welche Seite falsch ist und um wie viele px. Überprüfe auch -frame.jpg mit dem Auge: Oberseite und Seite sollten übereinstimmen. Die ausgelieferten Vorlagen: f38fe44a 2.2, 79186658 3.2 und 895d3ee8 3.8 bestehen. f5dad639 5.8, a841f108 6.2 und 14278a0b 8.5 bestehen nicht: ihre Rahmen wurden so belassen, wie sie zuerst erstellt wurden.

Einstellungen

  • Schwarz: floor, damit der Rahmen und der Ausschnitt zum Foto passen. Beginne bei .003 und senke es, wenn das Foto dunkler ist. build gibt beide aus.
  • Notch: Werte aus measure. Justiere cr anhand der grünen Kontur, measure liest es zu niedrig.
  • Lautsprecher über einer Notch: grille=45. Wenn eine dünne Linie der alten Seite um die Notch herum erscheint: gband=1.
  • Insel: ihr Mittelpunkt ist Hardware, 295,5 von 591. Wenn measure mehr als 1 px Abweichung angibt, hat etwas Helles eine Kante verschluckt: nimm die saubere Kante und spiegele sie durch den Mittelpunkt. Auf einem Sperrbildschirm nimm x von einem Telefon mit Insel (Zeit 111, Symbole 479) und y aus measure.
  • Lautsprecher über einer Insel: wenn er innerhalb der Glaskontur liegt, bringt grille=45 nur sein Relief zurück.
  • Ärmel über dem Glas: sleeve=1, nur mit einem echten grauen Rahmen in templates/grey/ (f38fe44a).
  • Dunkel auf Dunkel: slide_trace.py schaltet automatisch um, wenn weniger als 400 von 720 Punkten ansteigen. Überprüfe -split mit besonderer Sorgfalt.

Wie es funktioniert

Ein Telefon ist starr, also ist der Bildschirm ein Rechteck mit den kontinuierlichen Ecken von iOS, gesehen durch eine Perspektive und eine radiale Linsenverzerrung. Kanten werden in logarithmischer Helligkeit gefunden, sodass Dunkel auf Dunkel funktioniert, und am Halbpunkt in linearem Licht platziert. Das Bild wird auf das geradegerichtete Foto gezeichnet und dann mit dem Glas zurückgebogen.

Bekannte Fallstricke

  • Nur nach einer dunklen Seite beurteilen.
  • Auf eine Weise anpassen und mit einer anderen prüfen: Die Prüfung ist die Anpassung, der Nachweis ist das, was ausgelassen wurde.
  • Gerade Linien direkt auf dem Foto: Es ist verbogen. Sie existieren nur auf dem geradegerichteten.
  • Von außen nach innen nach einer Gehäusekante auf einem hellen Bildschirm suchen: Eine Stofffalte sieht aus wie ein Gehäuse. Gehe vom Bildschirm nach außen.

Verwandte Skills