--- title: "Craft Anything: Website-Nachbau prüfen" canonical: https://wavect.io/de/blog/craft-anything-website-rebuild-verification/ language: de description: "Website-Nachbau mit Craft Anything prüfen: ausgeführter Screenshot-Test, Rohdaten, Grenzen des Ready-Status und separate Checks für wichtige Interaktionen." image: "https://wavect.io/img/blog/headers/header_craft-anything-website-rebuild-verification.png" author: ["Kevin Riedl"] published: "2026-11-03" updated: "2026-11-03" reviewed: "2026-11-03" --- # Craft Anything: So prüfst du einen Website-Nachbau [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 min Lesezeit · 3. November 2026 Zuletzt geprüft 3. November 2026 [**Weiter**](/de/blog/claude-code-design-system-files/) TL;DR Craft Anything gibt Coding-Agenten Werkzeuge zum Untersuchen von Software und zum Vergleichen eines Nachbaus. In unserem Test mit der veröffentlichten CLI erreichte eine Seite mit defektem Button an drei Breiten gerundet 100 % Screenshot-Ähnlichkeit. Ein separater Klicktest erkannte den Fehler. Den vollständigen Rebuild-Workflow haben wir nicht getestet. Prüfe Umfang, Aussagen und offene Fragen jedes Vergleichs der letzten Runde sowie die erforderlichen Interaktionen. Ready und ein erfolgreicher Prozessabschluss belegen nicht sämtliche Abnahmekriterien. Unsere defekte Testseite sah auf dem Screenshot exakt so aus wie die funktionierende Referenz. Craft Anything meldete gerundet 100 % Bildähnlichkeit. Der Button tat trotzdem nichts. **Wenn du einen Website-Nachbau mit Craft Anything prüfst, brauchst du Bildvergleiche und Nachweise für das erwartete Verhalten.** Lies die Ergebnisse für jede Fensterbreite sowie fehlgeschlagene Prüfaussagen und offene Fragen. Führe danach die erforderliche Interaktion aus. Ein ungetestetes Ergebnis bleibt unbelegt, auch wenn die Screenshots übereinstimmen. Halte zusammen mit den Ergebnissen die geprüfte Code-Revision fest. **Recherchestand: 3. November 2026.** Wir haben die offizielle Linux-x86_64-CLI von [Craft Anything v0.3.0](https://github.com/storytold/craft-anything/releases/tag/v0.3.0) ausgeführt, die Prüfsumme des Archivs verifiziert und den Quellcode dieses Releases geprüft. Playwright erstellte unsere Screenshots und testete den Button separat. Den KI-Builder und den vollständigen Rebuild-Workflow haben wir nicht ausgeführt. ## Was kann Craft Anything? Craft Anything ist ein Open-Source-Toolkit in Rust. Es gibt Coding-Agenten Werkzeuge, um Software zu untersuchen und eine neue Implementierung mit ihr zu vergleichen. Die [README des Releases](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/README.md) beschreibt dafür den Ablauf Study, Build und Check für Websites, Apps und Spiele. Das Projekt bezeichnet seinen Stand als frühe Alpha. Der [offizielle App-Katalog von ArtCraft](https://getartcraft.com/apps) führt Craft Anything neben Kreativanwendungen wie PhotoCraft und FilmCraft auf. | Zugang | Aufgabe im Workflow | Was du prüfen solltest | | --- | --- | --- | | Desktop-Anwendung | Eine Zielanwendung untersuchen und den Nachbau verfolgen. | Die erfasste Vorlage und die abschließenden Prüfberichte. | | CLI | Benannte Tools oder einen Rebuild im Terminal ausführen. | Version, Tool-Ausgaben und das tatsächliche Ergebnis jeder Prüfung. | | MCP-Server | Einem Agenten Werkzeuge zum Untersuchen und Nachbauen bereitstellen. | Agent, Untersuchungsmodus und Berechtigungen. | Die Tool-Anzahl braucht einen Versionsstand. Die [Launch-README vom 31. Oktober](https://github.com/storytold/craft-anything/blob/f64ae3bf3c8863a982af1304e06de20653803968/README.md) nannte 284 Tools. In der README von v0.3.0 stehen 314. Die von uns getestete Linux-Binärdatei des Releases lieferte über `commands` dagegen **315 eindeutige registrierte Tool-IDs**. Ein registriertes Tool ist nicht automatisch mit deinem Modus, Ziel und den installierten Abhängigkeiten nutzbar. ## Umgeht Craft Anything eine Ablehnung durch Claude? Craft Anything dokumentiert keinen Weg, Claudes Ablehnungen aufzuheben. Laut [Anleitung zur Claude-Code-Integration](https://github.com/storytold/craft-anything/blob/2e0d0813e0b46b1f5ef73b51d501c9f1309dff36/docs/claude-code.md) startet es dein unverändertes lokales `claude`-Programm mit deiner eigenen Anmeldung. Eine andere Tool-Schnittstelle belegt nicht, dass ein Anbieter eine bestimmte Anfrage zum Nachbauen akzeptiert. Die Behauptung, eine Sperre durch Anthropic habe dieses Projekt ausgelöst, ist durch die gefundenen Primärquellen nicht belegt. [Issue 21](https://github.com/storytold/craft-anything/issues/21) enthält ein Problem bei der Erkennung von Claude und einen Bericht über eine Ablehnung. Ein Kommentar, der die Ticketangaben weitergibt, trennt zwei Fälle: Claude wurde nicht über PATH gefunden, und Claude lehnte es ab, Titanfall 2 nachzubauen. Das ist ein einzelner Bericht, kein Beleg für eine allgemeine Sperre durch den Anbieter. [Reverse Engineer Anything, kurz REA](https://github.com/morluto/rea), ist ein separates Projekt. Vergleiche bei der Auswahl, welche Zielanwendungen beide unterstützen und welche Nachweise sie jeweils liefern. ## Was zeigte unser Vergleichstest mit Craft Anything? Der Screenshot-Vergleich von Craft Anything erkannte bei unserer absichtlich defekten Seite an allen drei Breiten dieselbe Darstellung wie bei der funktionierenden Referenz: 1.440, 768 und 390 CSS-Pixel. Der separate Klicktest schlug bei der defekten Variante an jeder Breite fehl. Jeder Viewport war 900 Pixel hoch. Auf unserer Referenzseite ändert ein Klick auf *Reserve a demo seat* die Statusmeldung. Der defekten Variante fehlt der zugehörige Event-Handler. Eine Kontrollvariante behält den Handler, ändert aber die Farben. Der Button verändert nur den lokalen Seitenzustand. Ein Backend für Reservierungen gibt es nicht. | Breite in CSS-Pixeln | Variante gegenüber der Referenz | Layout-Metrik | Detail-Metrik | Separater Klicktest | | --- | --- | --- | --- | --- | | 1.440 | Handler fehlt, gleiches Aussehen | 100 % | 100,00 % | Fehlgeschlagen | | 768 | Handler fehlt, gleiches Aussehen | 100 % | 100,00 % | Fehlgeschlagen | | 390 | Handler fehlt, gleiches Aussehen | 100 % | 100,00 % | Fehlgeschlagen | | 1.440 | Farben geändert, Handler funktioniert | 0 % | 96,87 % | Bestanden | | 768 | Farben geändert, Handler funktioniert | 0 % | 97,03 % | Bestanden | | 390 | Farben geändert, Handler funktioniert | 0 % | 96,43 % | Bestanden | **Messumfang:** sechs Aufrufe des Vergleichstools, alle mit Exit-Code 0, sowie neun unabhängige Interaktionstests für die drei Varianten und Breiten. Die PNG-Hashes von Referenz und defekter Variante stimmten bei jeder Breite überein. Das Vergleichstool meldete null abweichende Pixel. Die Detailwerte oben sind auf zwei Nachkommastellen gerundet. Die JSON-Rohdaten enthalten die Fließkommawerte. `web-pixels-compare` hat den Button nie angeklickt und hatte deshalb keine Erkenntnisse über den Handler. Der vollständige Craft-Anything-Workflow prüft zusätzlich beobachtete Zustände. Unser Experiment zeigt nicht, dass dieser Workflow die defekte Seite akzeptieren würde. [Lade das reproduzierbare Testpaket zum Craft-Anything-Vergleich herunter.](/downloads/craft-anything-website-rebuild-verification-fixture.zip) Es enthält unser HTML, den Runner zur Screenshot-Erstellung, aufgezeichnete Ergebnisse, die Tool-Liste und Angaben zur Laufzeitumgebung. CLI und Browser installierst du separat. Die Testseite verwendet eigene Inhalte von uns. ## Wie wiederholst du den Screenshot-Vergleich? Führe die veröffentlichte CLI mit `web-pixels-compare` für zwei PNG-Dateien aus. Verwende absolute Bildpfade und halte die Version der Binärdatei fest. Der mitgelieferte Runner erzeugt die Screenshots unserer lokalen Testseite erneut und protokolliert die separaten Klickprüfungen. ``` craft-anything-cli --version craft-anything-cli commands craft-anything-cli --clean-room web-pixels-compare @compare.json ``` Verwende für `compare.json` diese Struktur und ersetze beide Pfade durch deine eigenen Dateien: ``` { "before": { "path": "/absolute/reference.png" }, "after": { "path": "/absolute/candidate.png" }, "common_area": true, "tolerance": 24 } ``` Die [Screenshot-Tool-Implementierung des Releases](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/tools/browser_tools.rs) berechnet die Ergebnisse aus den PNGs. Unser Lauf verwendete weder einen Modellaufruf noch eine Rauschmaske. Das Testpaket dokumentiert Binärdatei-Hashes und Laufzeitversionen. Änderungen am Browser oder an Schriftarten können neu erzeugte Screenshots verändern. ## Was messen die Ähnlichkeitswerte von Craft Anything? Die Layout-Metrik von Craft Anything vergleicht mittlere Farben in 16-Pixel-Kacheln. Die Detail-Metrik bewertet die Helligkeitsstruktur mit SSIM. Der Layout-Wert von null bei unserer umgefärbten Kontrollvariante beschreibt die abweichenden Farben. Die Seitenelemente haben sich dabei nicht verschoben. Prüfe beide Metriken zusammen mit den Bildern und ihren Abmessungen. | Feld oder Einstellung | Was es beschreibt | Folge für deine Prüfung | | --- | --- | --- | | `layout_similarity` | Anteil der Kacheln mit ausreichend ähnlicher mittlerer Farbe. | Eine Farbänderung kann den Wert senken, ohne das Layout zu verschieben. | | `perceptual_similarity` | SSIM über die Bildhelligkeit. | Lies den Wert zusammen mit der farbempfindlichen Metrik und den tatsächlichen Bildern. | | `common_area` | Vergleicht bei abweichenden Abmessungen den gemeinsamen Bereich ab der linken oberen Ecke. | Prüfe beide Originalabmessungen und Inhalte außerhalb dieses Bereichs. | | `tolerance: 24` | Schwelle zum Zählen von Pixeländerungen pro Farbkanal. | Die Einstellung erlaubt nicht 24 % fehlerhaftes Verhalten. | | `coverage: complete, 1/1` | Der eine angeforderte Screenshot-Vergleich wurde geprüft. | Die Abdeckung gilt nur für diese Operation auf den übergebenen Bildern. | Der [Website-Rebuild-Checker](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/kinds/website.rs) verbindet die beiden Bildmetriken mit `(layout_similarity + perceptual_similarity) × 50`. Anschließend bildet er den Mittelwert über die erfassten Breiten und Seiten. Er bewertet außerdem weitere Beobachtungen und Prüfaussagen. Diese Prüfungen gehen nicht sämtlich als Gewichtung in den Screenshot-Prozentwert ein. Wendest du die Formel auf unsere Farbkontrolle mit 1.440 Pixeln Breite an, ergibt sich ein Bildwert von `(0 + 0,9687234879) × 50 = 48,44 %`. Das ist eine Berechnung aus der Ausgabe des einzelnen Vergleichstools, kein beobachteter Wert eines vollständigen Rebuilds. Der Button funktionierte weiterhin. Entscheide separat, ob die Farbänderung akzeptabel ist und ob das erforderliche Verhalten vorhanden ist. ## Bedeutet Ready, dass der Nachbau alle Prüfungen bestanden hat? In v0.3.0 kann Craft Anything nach Erreichen des Nachbesserungslimits Ready anzeigen, obwohl eine Prüfung ihr Ziel verfehlt. Das ergibt sich aus dem Quellcode. Unser Experiment hat die Rebuild-Schleife nicht ausgeführt. Prüfe vor der Abnahme die Aussagen und offenen Fragen jeder Prüfung aus der letzten Runde. Die [Definition des Prüfergebnisses](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/workspace.rs) und die [Abschlusslogik des Rebuilds](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/mod.rs) zeigen den Unterschied: | Signal | Bedeutung im geprüften Release | Was du zusätzlich brauchst | | --- | --- | --- | | `passed` | Der Build war erfolgreich, oder die Website wurde bereitgestellt und verglichen. | Ähnlichkeit, Prüfaussagen und offene Fragen dieses Checks. | | `good(threshold)` | Bestanden, keine offenen Fragen, alle Prüfaussagen erfüllt und ausreichend hohe Ähnlichkeit, sofern vorhanden. | Die Bestätigung, dass die geprüften Aussagen deine erforderlichen Ergebnisse abdecken. | | `Ready` | Der Lauf hat seinen Abschlusspfad erreicht. Das kann nach dem Nachbesserungslimit anhand des Felds `passed` der letzten Prüfung geschehen. | Jede Prüfung der letzten Runde, einschließlich fehlgeschlagener Aussagen und ungeklärter Punkte. | | Erfolgreicher Prozessabschluss | Der Befehl wurde auf Prozessebene erfolgreich beendet. | Eine ausdrückliche Abnahmeentscheidung für die nachgebaute Software. | Nutze den erfolgreichen CLI-Abschluss, um die Artefakte einzusammeln. Prüfe anschließend die Abnahmekriterien. Muss ein Formular einen Fehler anzeigen oder ein Menü aufgehen, bewahre den Nachweis dieses Zustandswechsels auf. Fehlt der erforderliche Zustand, muss die Abnahme scheitern. ## Wie prüfst du einen Website-Nachbau mit Craft Anything? Prüfe die von Craft Anything erfasste Referenz und jeden Check der letzten Runde, bevor du den Nachbau akzeptierst. Führe dann die erforderlichen Interaktionen mit genau der Implementierung aus, die du behalten willst. Halte die erwarteten Ergebnisse vor dem Test fest. So hängt die Abnahme nicht davon ab, wie überzeugend die Screenshots wirken. | Artefakt | Zu klärende Frage | Aufzubewahrende Nachweise | | --- | --- | --- | | `craft.json` und Laufnotizen | Mit welchem Ziel, Agenten, Modus und Versionsstand entstand dieses Ergebnis? | Konfiguration, Umfang der Referenz und Tool-Version. | | `capture/` | Enthält die Referenz die wichtigen Routen und Zustände? | Viewport-Abmessungen, Bilder, sichtbarer Text und beobachtete Interaktionen. | | `app/` | Welche Implementierung hast du geprüft? | Die genaue Revision und den Befehl für Build oder Vorschau. | | `checks/` | Was war in der letzten Runde bestanden, fehlgeschlagen oder ungeklärt? | Alle relevanten Ergebnisse, Werte, Prüfaussagen und offenen Fragen. | | Dein Interaktionsprotokoll | Hat die erforderliche Aktion das erwartete Ergebnis erzeugt? | Aktion, Sollzustand, Istzustand und eine unabhängige Entscheidung über Bestehen oder Fehlschlag. | Beginne mit einer Route und einem beobachtbaren Ergebnis, etwa dem genauen Statustext nach einem Klick. Soll ein Formular einen Datensatz speichern, prüfe auch die Speicherung und nicht allein die Bestätigungsmeldung. Kennzeichne fehlende Nachweise weiterhin als ungeklärt. Wird eine Beobachtung zur freigegebenen Umsetzungsregel, gehört sie in den Repository-Kontext. Unser [Leitfaden zum Claude-Code-Designsystem](/de/blog/claude-code-design-system-files/) erklärt diese Übergabe. Führt der Workflow durch native Anwendungen, nutze das separate [Cua-Testprotokoll für Browser und Desktop](/de/blog/cua-desktop-qa-browser-native-workflow/). Unsere Browser-Testseite liefert keine Erkenntnisse zu diesen Übergängen. ## Wann würden wir Craft Anything einsetzen? Wir würden Craft Anything für einen erlaubten Nachbau evaluieren, bei dem das Team das erzeugte Projekt gegen eine vereinbarte Referenz und klare Interaktionstests prüfen kann. Trenne die Release-Freigabe von der Ausführung und entscheide anhand dieser Kriterien, besonders solange das Projekt in einer frühen Alpha ist. Beginne mit einer eigenen Website. Soll aus dem Nachbau ein dauerhaft betreutes Produktivsystem werden, hilft der umfassendere [Leitfaden vom Prototyp zur Produktion](/de/blog/lovable-cursor-prototype-to-production/), die Arbeit über die visuelle Abnahme hinaus zu bewerten. ## Fragen zur Prüfung mit Craft Anything ### Ist Craft Anything ein Fork oder ein neuer Name für REA? Die geprüften Quellen führen Craft Anything und morluto/rea als separate Projekte. Wir fanden keinen Primärbeleg für einen REA-Fork oder eine Umbenennung. Vergleiche beide anhand einer konkreten Untersuchungsaufgabe und ihrer dokumentierten Ein- und Ausgaben. Überschneidungen bei den Anwendungsfällen belegen weder gemeinsamen Code noch denselben Prüfumfang. ### Funktioniert jedes registrierte Tool im Clean-room-Modus? Nein. Die registrierten Tools haben unterschiedliche Anforderungen an Zielanwendungen, Abhängigkeiten und Untersuchungstiefe. Clean room ist der voreingestellte Beobachtungsmodus. Deep erlaubt zusätzliche Einblicke in interne Strukturen. Unsere Zahl von 315 Tools beschreibt das Verzeichnis der veröffentlichten Linux-Version v0.3.0. Das bedeutet nicht, dass in jeder Sitzung 315 Tools verfügbar sind. Prüfe den gewählten Modus und die Voraussetzungen des einzelnen Tools. ### Kann Craft Anything vollständig offline laufen? Der PNG-Vergleich in unserem Experiment lief lokal ohne Modellaufruf. Ein vollständiger Workflow kann eine Live-Website, einen Coding-Agenten mit Cloud-Anbindung, einen API-Anbieter oder die optionale externe Asset-Generierung einbeziehen. Prüfe den Datenweg des gewählten Workflows, bevor du ihn als offline bezeichnest. Eine native Desktop-Oberfläche belegt nicht, wo jede Modelloperation ausgeführt wird. ### Habt ihr einen von KI erstellten Website-Nachbau getestet? Nein. Wir haben eine lokale Testseite selbst geschrieben, Screenshots mit Playwright erfasst, den veröffentlichten Screenshot-Vergleicher von Craft Anything ausgeführt und den Button separat geprüft. Damit grenzen wir ab, was die Bildmetriken belegen. Der Test misst weder die Rekonstruktionsqualität eines Coding-Agenten noch die vollständige Prüfschleife, automatische Nachbesserung, native Apps, Spiele oder die Korrektheit eines Backends. ### Bedeutet vollständige Abdeckung, dass die ganze Website getestet wurde? In unseren rohen Vergleichsergebnissen stand vollständige Abdeckung für 1 von 1: einen angeforderten Bildvergleich. Referenz und defekte Seite waren visuell identisch, deshalb war diese Operation erfolgreich. Weitere Browserzustände und das dauerhafte Speichern im Backend liegen außerhalb dieser Operation. Lies die Abdeckung immer zusammen mit der benannten Operation und ihren Eingaben. ### Reicht die dokumentierte Ähnlichkeitsschwelle von 90 % für die Freigabe? Die dokumentierte Website-Schwelle steuert die Nachbesserung der gemessenen Ähnlichkeit. Das bedeutet nicht, dass 90 % der Produktfunktionen funktionieren. Lege Abnahmekriterien für die tatsächliche Aufgabe fest, prüfe Aussagen und offene Fragen und führe die erforderlichen Interaktionen aus. Scheitert eine kritische Aktion, kann ein hoher Screenshot-Prozentwert weder das fehlende Verhalten liefern noch eine Release-Freigabe begründen. Architektur und Plattformen ## Weiterlesen Framework-, Plattform- und Systementscheidungen mit langfristiger Delivery-Wirkung. [Hier starten**Smart-City-Architektur: MQTT, LoRaWAN, Kubernetes und Terraform**](/de/blog/smart-city-architecture-best-practices-2026/) - [Figma Weave und Figma Design: Welche Verbindung passt?](/de/blog/figma-weave-design-workflow/) - [OpenMontage: Videoproduktion mit deinem Coding-Agenten](/de/blog/openmontage-ai-video-production-review/) - [Mireye Land Search API: MCP, Preise und Grundstückssuche](/de/blog/mireye-land-search-enrich-api-mcp/) - [git-ai: Parallele Agenten-Merges und Verifikation](/de/blog/git-ai-concurrent-agents-merge-verification/) - [PHP2Shell: Altes PHP aktualisieren oder zu Node.js wechseln?](/de/blog/php2shell-legacy-php-upgrade-migration/) [Vorheriger Artikel**Figma Weave und Figma Design: Welche Verbindung passt?**](/de/blog/figma-weave-design-workflow/) [Nächster Artikel**OpenMontage: Videoproduktion mit deinem Coding-Agenten**](/de/blog/openmontage-ai-video-production-review/) [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 min Lesezeit · 3. November 2026 Zuletzt geprüft 3. November 2026 [**Weiter**](/de/blog/claude-code-design-system-files/)