clone-app-pat-pro: Pixelgenaues Klonen von Web-Apps mit Claude Code

Repositoryper-simmons/clone-app-pat-pro-publicTool

clone-app-pat-pro ist ein Skill für Claude Code, der Web-Apps anhand einer URL exakt nachbaut. Statt Layouts anhand von Screenshots zu schätzen, analysiert das Tool den realen gerenderten Code, extrahiert Design-Tokens, lädt Assets herunter und prüft die Kopie automatisiert über berechnete CSS-Werte.

Das Wichtigste

  1. Interaktive Erkundung: Nutzt die Claude Chrome Extension, um Seitenansichten auf Desktop, Tablet und Mobilgeräten zu öffnen und Klickpfade, Menüs sowie Editor-Zustände systematisch durchzugehen.
  2. Vollständige Extraktion: Liest berechnete CSS-Stile aus, sichert Farbverläufe, Abstände, Schatten sowie Interaktionszustände und lädt Original-Schriften und Bild-Assets herunter.
  3. Automatisiertes Design-System: Fasst die extrahierten Messwerte in einer DESIGN.md zusammen und definiert einheitliche Tokens für Farben, Typografie und Abstände.
  4. Parallele Entwicklung und Qualitätssicherung: Sub-Agents erstellen Komponenten und Unterseiten; anschliessend vergleicht ein QA-Skript die berechneten Werte der Kopie mit den Vorgaben und korrigiert Abweichungen in einer Regelschleife.

Warum das relevant ist

Viele KI-gestützte Ansätze zur Frontend-Generierung beruhen auf Screenshots und erzeugen ungenaue Näherungswerte. Die Kombination aus realem DOM-Inspektieren, automatischer Interaktion und nachgelagertem CSS-Soll-Ist-Abgleich ermöglicht originalgetreue Nachbauten ganzer Benutzeroberflächen.

Einordnung

Das Repository zeigt ein workflow-getriebenes Agenten-Setup innerhalb von Claude Code. Anstelle eines eigenständigen Dienstes steuert Claude Unteragenten und die Chrome-Erweiterung, um Browserinteraktionen mit parallelen Programmierphasen zu verknüpfen. Mit 245 Stars und 54 Forks erregt das Projekt Interesse, befindet sich mangels formeller Lizenz und tiefergehender Release-Struktur aber im experimentellen Stadium für Entwickler, die Claude Code und Browserautomatisierung einsetzen.

Erwähnte Links

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Repository:amaancoderx/npxskillui

    SkillUI: Design-Systeme analysieren und für Claude Code aufbereiten

    SkillUI ist ein Node.js-Kommandozeilenwerkzeug, das Design-Systeme aus Webseiten, lokalen Projekten oder Git-Repositories extrahiert. Ohne KI-Modelle oder API-Schlüssel sammelt es Farben, Schriften, Abstände, Komponenten und Screenshots und bereitet diese als Kontextdateien für Claude Code auf.

    2020SterneTypeScript

    KI & AI· Tool

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • Repository:sethjenks/weirdness-engine

    Weirdness Engine: Claude-Skill für kontrolliert unkonventionelles Webdesign

    Die Weirdness Engine ist ein Skill für Claude Code und Cowork, der Webdesigns gezielt aus durchschnittlichen Gestaltungsmustern herauslösen soll. Statt zufälligem Chaos bricht das Werkzeug systematisch einzelne Konventionen auf, während der Rest der Struktur stabil bleibt.

    6Sterne

    KI & AI· Tool

  • Repository:Nutlope/hallmark

    Hallmark: Design-Skill gegen generische KI-Benutzeroberflächen

    Hallmark ist ein von Together AI entwickeltes Open-Source-Skill für Claude Code, Cursor und Codex. Das Werkzeug verhindert typische, austauschbare KI-Designs («AI-Slop») durch Makrostrukturen, 21 Themes, 57 Testregeln und automatisierte Selbstkritik vor der Ausgabe.

    28.417SterneCSS

    KI & AI· Tool

  • Repository:display-dev/visualize

    visualize: Markenkonforme HTML-Artefakte für KI-Coding-Agenten

    visualize ist ein Open-Source-Skill für KI-Coding-Assistenten wie Claude Code, Cursor oder Codex, um typische KI-Standard-Designs bei generierten HTML-Dokumenten durch markenkonforme Vorlagen und definierte Überarbeitungsbefehle zu ersetzen.

    67SterneHTML

    KI & AI· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.