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

Gefunden in

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:Motionsites-AI/claude-skill

    MotionSites Web Builder: Claude-Skill für hochwertige Landingpages

    Der kostenlose Claude-Skill von MotionSites hilft KI-Modellen, visuell anspruchsvolle Websites mit echten Medien und Animationen zu erstellen. Statt generischer Layouts nutzt Claude Design-Vorlagen, ein Media-Archiv und Playwright-Screenshots zur automatischen Selbstkorrektur.

    555SternePython

    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:superdesigndev/superdesign

    SuperDesign: KI-Agent für UI-Design in IDEs und Code-Assistenten

    SuperDesign ist ein KI-gestütztes Design-Tool, das direkt in Entwicklungsumgebungen wie VS Code, Cursor oder Windsurf UI-Mockups, Wireframes und Komponenten aus Text-Prompts generiert. Das ursprüngliche Open-Source-Repository der IDE-Extension dient als Archiv, während das Projekt zu einer Web-App mit Anbindung an Agenten wie Claude Code weiterentwickelt wurde.

    7312SterneTypeScript

    KI & AI· Tool

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.