skyzizhu/sky-html-to-ios

Was macht sky-html-to-ios?

Codex-Skill zum Umwandeln lauffähiger mobiler HTML-Prototypen in native iOS-Oberflächen mit SwiftUI oder UIKit, einschließlich Komponentenzuordnung, Navigation, Auto Layout, Simulator-Screenshots und visueller Validierung.

Übersicht

Dieser Skill automatisiert die Konvertierung von HTML-Prototypen in native iOS-Code. Er erkennt HTML-Elemente (z. B. <div>, <button>, <form>, <nav>) und führt eine 1:1-Zuordnung zu entsprechenden iOS-Komponenten durch. Dabei wird entweder SwiftUI (für deklarative UI) oder UIKit (für imperative Steuerung) verwendet.

Unterstützte Konvertierungen

HTML-Element	SwiftUI-Komponente	UIKit-Komponente
<div> mit class="container"	VStack / HStack	UIView mit Autolayout-Constraints
<button>	Button	UIButton
<a>	NavigationLink	UINavigationController + UIViewController
<ul> / <li>	List	UITableView
<form>	Form	UIStackView mit Textfeldern
<img>	Image	UIImageView
<input>	TextField / SecureField	UITextField
<nav>	TabView	UITabBarController
<p> / <h1>-<h6>	Text	UILabel

Navigation

Der Skill analysiert die Navigationslogik im HTML-Prototypen:

• Links zwischen HTML-Seiten werden als NavigationLink (SwiftUI) oder UINavigationController (UIKit) umgesetzt.
• Tab-Leisten (<nav> mit mehreren <a>) werden zu TabView (SwiftUI) oder UITabBarController (UIKit).
• Verschachtelte Navigation wird automatisch erkannt und mit NavigationStack (iOS 16+ SwiftUI) oder UINavigationController + pushViewController abgebildet.

Auto Layout

Für UIKit wird das Auto-Layout am Ende der View-Einrichtung generiert:

• Zentrieren, Anordnen in Reihen/Spalten, Ausrichtung an Safe Area.
• Aber es kann auch komplett auf Constraints verzichtet werden, falls gewünscht.
• Für SwiftUI werden .frame(), .padding(), .position() und ZStack verwendet.

Simulator-Screenshots

Nach der Code-Generierung kann der Skill automatisch Screenshots im iOS-Simulator erstellen, um die visuelle Übereinstimmung mit dem HTML-Prototypen zu überprüfen.

Visuelle Validierung

Der Skill vergleicht optional den generierten iOS-Screenshot mit dem Original-HTML-Screenshot und meldet Abweichungen.

Voraussetzungen

• Codex CLI oder eine kompatible KI-Plattform
• macOS mit Xcode 15+ (für SwiftUI und Simulator)
• iOS 17+ Zielplattform (empfohlen)

Verwendung

1. Starte Codex CLI mit diesem Skill.
2. Gib den Pfad zur HTML-Datei oder zum HTML-Verzeichnis an.
3. Wähle das Ziel-Framework: --swiftui (Standard) oder --uikit.
4. Optional: Aktiviere Simulator-Screenshots mit --screenshots.
5. Der Skill generiert das iOS-Projekt und öffnet es bei Bedarf in Xcode.

Beispielbefehl

codex --skill skyzizhu/sky-html-to-ios --input ./prototype/index.html --swiftui --screenshots

Fehlerbehandlung

• Unbekannte HTML-Elemente: Werden als Text oder UILabel mit einer Warnung ausgegeben.
• Fehlende Assets: Platzhalter-Bilder werden verwendet.
• Komplexe CSS-Selektoren: Werden vereinfacht oder durch Swift-Modifikatoren ersetzt.

Lizenz

MIT