In diesem Beitrag
Craft Anything: So prüfst du einen Website-Nachbau
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 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 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 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 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 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 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, 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. 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.jsonVerwende 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 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 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 und die Abschlusslogik des Rebuilds 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 erklärt diese Übergabe. Führt der Workflow durch native Anwendungen, nutze das separate Cua-Testprotokoll für Browser und Desktop. 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, die Arbeit über die visuelle Abnahme hinaus zu bewerten.