---
title: "Craft Anything: cómo comprobar una web reconstruida"
canonical: https://wavect.io/es/blog/craft-anything-website-rebuild-verification/
language: es
description: "Comprueba una web reconstruida con Craft Anything: prueba de capturas y clics, límites de las métricas visuales y evidencias para aceptar el resultado."
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: cómo comprobar una web reconstruida

[**Volver**](/es/blog/overview/)

[![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/)

[Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt

12 min de lectura · 3 nov 2026 Última revisión 3 de noviembre de 2026

[**Siguiente**](/es/blog/claude-code-design-system-files/)

Resumen

Para comprobar una web reconstruida con Craft Anything, revisa los resultados visuales y prueba las interacciones necesarias. En una prueba propia con la CLI v0.3.0, una página con un botón sin función obtuvo métricas de imagen redondeadas al 100% en tres anchos. Comparamos PNG creados con Playwright y comprobamos el clic por separado; no ejecutamos la reconstrucción completa. Revisa también las afirmaciones, los aspectos sin comprobar y la versión evaluada antes de aceptar el resultado.

Nuestra página de prueba tenía un botón que no funcionaba, pero su captura coincidía exactamente con la referencia funcional. Las métricas de imagen de Craft Anything se redondearon al 100%.

**Para comprobar una web reconstruida con Craft Anything, combina la evidencia visual con pruebas del comportamiento que necesitas.** Revisa los resultados de cada tamaño de pantalla, las afirmaciones que no se cumplen y lo que ha quedado sin comprobar. Después ejecuta la interacción requerida. Si no pruebas un resultado, seguirá sin verificar aunque las capturas coincidan. Guarda también la revisión del código evaluado.

**Investigación realizada el 3 de noviembre de 2026.** Ejecutamos la CLI oficial para Linux x86_64 de [Craft Anything v0.3.0](https://github.com/storytold/craft-anything/releases/tag/v0.3.0), verificamos la suma de comprobación del archivo descargado e inspeccionamos el código fuente de esa versión. Playwright tomó las capturas y comprobó el botón por separado. No ejecutamos el agente constructor de IA ni el flujo completo de reconstrucción.

## ¿Qué hace Craft Anything?

Craft Anything es un conjunto de herramientas de código abierto, escrito en Rust, que permite a los agentes de programación inspeccionar software y comparar una nueva implementación. El [README de la versión publicada](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/README.md) describe un flujo Study, Build y Check para sitios web, aplicaciones y juegos. El proyecto se presenta como una versión alfa inicial.

El [catálogo oficial de aplicaciones de ArtCraft](https://getartcraft.com/apps) incluye Craft Anything junto a sus herramientas creativas, entre ellas PhotoCraft y FilmCraft.

| Interfaz | Función en el flujo | Qué debes comprobar |
| --- | --- | --- |
| Aplicación de escritorio | Revisar el objetivo y seguir la reconstrucción. | El objetivo capturado y los informes finales de comprobación. |
| CLI | Ejecutar herramientas concretas o una reconstrucción desde la terminal. | La versión, la salida de la herramienta y el resultado real de cada comprobación. |
| Servidor MCP | Dar al agente acceso a herramientas de inspección y reconstrucción. | El agente, el modo de inspección y el alcance de los permisos. |

El número de herramientas necesita una fecha. El [README del lanzamiento del 31 de octubre](https://github.com/storytold/craft-anything/blob/f64ae3bf3c8863a982af1304e06de20653803968/README.md) anunciaba 284. El de v0.3.0 indica 314. Nuestro ejecutable de Linux devolvió **315 identificadores de herramientas registrados, todos distintos**, mediante `commands`. Que una herramienta esté registrada no significa que puedas usarla con cualquier modo, objetivo o conjunto de dependencias instalado.

## ¿Craft Anything permite evitar un rechazo de Claude?

Craft Anything no documenta ningún mecanismo para eliminar los rechazos de Claude. Su [guía de integración con Claude Code](https://github.com/storytold/craft-anything/blob/2e0d0813e0b46b1f5ef73b51d501c9f1309dff36/docs/claude-code.md) indica que inicia tu programa local `claude` sin modificarlo y con tu propia sesión. Cambiar la interfaz de las herramientas no demuestra que el proveedor vaya a aceptar una solicitud concreta de recreación.

Las fuentes primarias que encontramos no confirman que un bloqueo de Anthropic motivara este proyecto. La [incidencia 21](https://github.com/storytold/craft-anything/issues/21) recoge un problema para detectar Claude y un reporte de rechazo. Un comentario que reproduce el ticket distingue entre no encontrar Claude en PATH y rechazar la recreación de Titanfall 2. Es un caso concreto; no acredita un bloqueo general del proveedor.

[Reverse Engineer Anything, o REA](https://github.com/morluto/rea), es otro proyecto. Para elegir entre ambos, compara qué tipos de software admiten y qué evidencia devuelve cada uno.

## ¿Qué mostró nuestra prueba del comparador de Craft Anything?

El comparador de capturas de Craft Anything detectó imágenes idénticas de nuestra página deliberadamente defectuosa y de la referencia funcional en los tres anchos: 1.440, 768 y 390 píxeles CSS. La comprobación independiente del clic falló en la versión defectuosa en todos ellos. Cada área de visualización tenía 900 píxeles de alto.

La página de referencia cambia un mensaje de estado al pulsar *Reserve a demo seat*. La versión defectuosa omite el manejador de ese clic. Una tercera versión, de control, conserva el manejador y cambia los colores. El botón solo modifica el estado local de la página; no hay un sistema de reservas detrás.

| Ancho, píxeles CSS | Versión frente a la referencia | Métrica de disposición | Métrica de detalle | Prueba de clic independiente |
| --- | --- | --- | --- | --- |
| 1.440 | Sin respuesta al clic, mismo aspecto | 100% | 100,00% | Falló |
| 768 | Sin respuesta al clic, mismo aspecto | 100% | 100,00% | Falló |
| 390 | Sin respuesta al clic, mismo aspecto | 100% | 100,00% | Falló |
| 1.440 | Colores distintos, clic funcional | 0% | 96,87% | Pasó |
| 768 | Colores distintos, clic funcional | 0% | 97,03% | Pasó |
| 390 | Colores distintos, clic funcional | 0% | 96,43% | Pasó |

**Alcance de la medición:** seis llamadas al comparador, todas con código de salida 0, y nueve pruebas de interacción independientes entre los tres modos y anchos. Los hashes de los PNG de referencia y de la versión defectuosa coincidieron en cada ancho; el comparador no detectó ningún píxel distinto. La tabla redondea los valores de detalle a dos decimales. El JSON original conserva los valores de coma flotante.

`web-pixels-compare` no pulsó el botón y, por tanto, no obtuvo evidencia sobre su manejador. El flujo completo de Craft Anything incorpora otras comprobaciones de los estados observados. Este experimento no demuestra que ese flujo aceptaría la página defectuosa.

[Descarga el caso reproducible de comparación con Craft Anything](/downloads/craft-anything-website-rebuild-verification-fixture.zip): incluye nuestro HTML, el programa que genera las capturas, los resultados registrados, el inventario de herramientas y los detalles del entorno. Instala la CLI y el navegador por separado. Todo el contenido del caso es nuestro.

## ¿Cómo puedes reproducir la comparación de capturas?

Para reproducir esta comprobación de Craft Anything, ejecuta `web-pixels-compare` con la CLI publicada y dos archivos PNG. Usa rutas absolutas y registra la versión del ejecutable. El programa incluido vuelve a generar las capturas de nuestro caso local y registra, por separado, las comprobaciones del clic.

```
craft-anything-cli --version
craft-anything-cli commands
craft-anything-cli --clean-room web-pixels-compare @compare.json
```

Crea `compare.json` con esta estructura y sustituye las dos rutas por las de tus archivos:

```
{
  "before": { "path": "/absolute/reference.png" },
  "after": { "path": "/absolute/candidate.png" },
  "common_area": true,
  "tolerance": 24
}
```

La [implementación publicada de la herramienta de capturas](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/tools/browser_tools.rs) calcula los resultados a partir de los PNG. Nuestra ejecución no llamó a ningún modelo ni utilizó una máscara de ruido. La descarga incluye los hashes del ejecutable y las versiones del entorno. Cambiar el navegador o las fuentes puede alterar las capturas regeneradas.

## ¿Qué miden las puntuaciones de similitud de Craft Anything?

La métrica de disposición de Craft Anything compara los colores medios de bloques de 16 píxeles; la de detalle mide la estructura del brillo mediante SSIM. El valor cero de disposición en nuestro control de colores refleja diferencias de color, no un desplazamiento de los elementos. Revisa ambas métricas junto con las imágenes y sus dimensiones.

| Campo o ajuste | Qué describe | Consecuencia para la revisión |
| --- | --- | --- |
| `layout_similarity` | Proporción de bloques con un color medio suficientemente parecido. | Un cambio de color puede reducirla sin mover los elementos. |
| `perceptual_similarity` | SSIM aplicado al brillo de la imagen. | Revísala junto con la métrica sensible al color y las imágenes reales. |
| `common_area` | Compara la zona común desde la esquina superior izquierda cuando las dimensiones difieren. | Comprueba las dimensiones originales y el contenido que queda fuera de esa zona. |
| `tolerance: 24` | Umbral para contar cambios en cada canal de los píxeles. | No equivale a tolerar un 24% de comportamiento incorrecto. |
| `coverage: complete, 1/1` | Se examinó la única comparación de capturas solicitada. | La cobertura se limita a esa operación sobre las imágenes de entrada. |

El [comprobador de reconstrucciones web](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/kinds/website.rs) combina ambas métricas con `(layout_similarity + perceptual_similarity) × 50` y calcula la media entre los anchos y las páginas capturados. También evalúa otras observaciones y afirmaciones. No todas esas comprobaciones aportan un peso al porcentaje de la captura.

Si aplicas esa fórmula a nuestro control de color de 1.440 píxeles, la puntuación de imagen sería `(0 + 0.9687234879) × 50 = 48.44%`. Es un cálculo a partir de la salida del comparador, no una puntuación observada en una reconstrucción completa. El botón seguía funcionando. Decide por separado si aceptas el cambio de color y si está presente el comportamiento requerido.

## ¿Ready significa que la reconstrucción superó todos los controles?

En v0.3.0, Craft Anything puede mostrar Ready tras agotar las rondas de ajuste aunque alguna comprobación no alcance lo exigido. Es una conclusión del análisis del código fuente; nuestro experimento no ejecutó el ciclo de reconstrucción. Antes de aceptar el resultado, revisa las afirmaciones y las incógnitas de cada comprobación de la última ronda.

La [definición del resultado de las comprobaciones](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/workspace.rs) y el [ciclo que finaliza la reconstrucción](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/mod.rs) permiten distinguir estas señales:

| Señal | Significado en la versión inspeccionada | Qué falta comprobar |
| --- | --- | --- |
| `passed` | La compilación terminó correctamente, o el sitio se sirvió y se comparó. | La similitud, las afirmaciones y las incógnitas de esa comprobación. |
| `good(threshold)` | La comprobación pasó, no hay incógnitas, todas las afirmaciones se cumplen y la similitud es suficiente cuando existe. | Que las afirmaciones medidas cubran los resultados que necesitas. |
| `Ready` | La ejecución llegó a su ruta de finalización, que puede alcanzarse tras agotar las rondas de ajuste y comprobar el campo `passed` del último control. | Todos los controles de la última ronda, incluidas las afirmaciones incumplidas y las incógnitas pendientes. |
| Salida correcta del proceso | El comando terminó sin error a nivel de proceso. | Una decisión explícita de aceptación del software recreado. |

Cuando la CLI termine correctamente, recoge los archivos generados y evalúa los criterios de aceptación. Si un formulario debe mostrar un error o un menú debe abrirse, conserva evidencia de esa transición. Rechaza la entrega si falta el estado requerido.

## ¿Cómo comprobar una web reconstruida con Craft Anything?

Revisa la referencia capturada por Craft Anything y todas las comprobaciones de la última ronda. Después prueba las interacciones necesarias sobre la implementación exacta que piensas conservar. Define los resultados esperados antes de ejecutar las pruebas; así la aceptación no dependerá de lo convincentes que parezcan las capturas.

| Archivo o registro | Pregunta que debes resolver | Evidencia que debes conservar |
| --- | --- | --- |
| `craft.json` y notas de ejecución | ¿Qué objetivo, agente, modo y versión produjeron este resultado? | La configuración, el alcance de la referencia y la versión de la herramienta. |
| `capture/` | ¿La referencia incluía las rutas y los estados que te interesan? | Tamaños de pantalla, imágenes, texto visible e interacciones observadas. |
| `app/` | ¿Qué implementación evaluaste? | La revisión exacta y el comando de compilación o previsualización. |
| `checks/` | ¿Qué pasó, qué falló y qué quedó sin comprobar en la última ronda? | Todos los resultados relevantes, puntuaciones, afirmaciones e incógnitas. |
| Tu registro de interacciones | ¿La acción requerida produjo el resultado esperado? | La acción, el estado esperado, el observado y un veredicto independiente. |

Empieza por una ruta y un resultado observable, como el texto exacto que aparece después de un clic. Si un formulario debe guardar un registro, comprueba que persista y que aparezca el mensaje de confirmación. Mantén como pendiente aquello para lo que no tengas evidencia.

Cuando apruebes una observación como regla de implementación, incorpórala al contexto del repositorio. Nuestra [guía de sistemas de diseño para Claude Code](/es/blog/claude-code-design-system-files/) explica ese paso. Si el flujo también pasa por aplicaciones nativas, utiliza el [protocolo de QA con Cua entre navegador y escritorio](/es/blog/cua-desktop-qa-browser-native-workflow/). Este caso de navegador no evalúa esos límites.

## ¿Cuándo usaríamos Craft Anything?

Evaluaríamos Craft Anything para una reconstrucción autorizada en la que el equipo pueda contrastar el proyecto generado con una referencia acordada y con pruebas de interacción explícitas. Separa la aprobación de la entrega y aplícale esos criterios, especialmente mientras el proyecto siga en alfa inicial.

Empieza con un sitio propio. Si la recreación debe convertirse en un sistema que mantendrás en producción, consulta la [guía para decidir el paso de prototipo a producción](/es/blog/lovable-cursor-prototype-to-production/) y evalúa el trabajo que queda más allá de la aceptación visual.

## Preguntas frecuentes sobre la verificación con Craft Anything

### ¿Craft Anything es un fork de REA o un cambio de nombre?

Las fuentes inspeccionadas presentan Craft Anything y morluto/rea como proyectos distintos. No encontramos evidencia primaria que confirme un fork de REA o un cambio de nombre. Compáralos para una tarea concreta de inspección, con las entradas y salidas que documenta cada uno. Compartir casos de uso no demuestra que compartan código ni que ofrezcan la misma cobertura.

### ¿Todas las herramientas registradas funcionan en modo Clean room?

No. El inventario incluye herramientas con distintos requisitos de objetivo, dependencias e inspección. Clean room es el modo de observación predeterminado; Deep permite inspeccionar más elementos internos. Las 315 herramientas que contamos corresponden al inventario de Linux v0.3.0, no a 315 herramientas disponibles en cualquier sesión. Comprueba el modo elegido y los requisitos de cada herramienta.

### ¿Craft Anything puede funcionar completamente sin conexión?

La comparación de PNG de este experimento se ejecutó localmente y sin llamar a un modelo. Un flujo completo puede utilizar una web activa, un agente de programación conectado a la nube, un proveedor de API o generación externa de recursos. Revisa por dónde pasan los datos antes de describir el flujo como desconectado. Una interfaz de escritorio no determina dónde se ejecuta cada operación del modelo.

### ¿Esta prueba evaluó una web reconstruida por IA?

No. Creamos un caso local, capturamos las imágenes con Playwright, ejecutamos el comparador de capturas de la versión publicada de Craft Anything y comprobamos el botón por separado. Así aislamos qué demuestran las métricas de imagen. No medimos la calidad de reconstrucción de un agente, el ciclo completo de comprobación, los ajustes automáticos, las aplicaciones nativas, los juegos ni la corrección de un backend.

### ¿La cobertura completa significa que se probó toda la web?

En nuestros resultados originales, la cobertura completa era 1 de 1: una comparación de imágenes solicitada. La referencia y la página defectuosa eran visualmente idénticas, por lo que esa operación terminó correctamente. Otros estados del navegador y la persistencia en el backend quedan fuera de su alcance. Interpreta la cobertura junto con el nombre de la operación y sus entradas.

### ¿El umbral documentado del 90% de similitud basta para publicar?

El umbral documentado para sitios web orienta los ajustes de la similitud medida. No significa que funcione el 90% de las características del producto. Define criterios de aceptación para la tarea real, revisa afirmaciones e incógnitas y ejecuta las interacciones necesarias. Si una acción crítica falla, un porcentaje visual alto no aporta el comportamiento que falta ni justifica aprobar la entrega.

Arquitectura y plataformas

## Qué leer después

Decisiones de frameworks, plataformas y sistemas con impacto a largo plazo.

[Empieza aquí**Arquitectura Smart City: MQTT, LoRaWAN, Kubernetes y Terraform**](/es/blog/smart-city-architecture-best-practices-2026/)

- [Figma Weave y Figma Design: elige cómo conectarlos](/es/blog/figma-weave-design-workflow/)
- [OpenMontage: crea un flujo de vídeo con tu agente de programación](/es/blog/openmontage-ai-video-production-review/)
- [Mireye Land Search y Enrich API: MCP, precios y parcelas](/es/blog/mireye-land-search-enrich-api-mcp/)
- [git-ai: fusiones concurrentes de agentes y verificación](/es/blog/git-ai-concurrent-agents-merge-verification/)
- [PHP2Shell: ¿Actualizar PHP antiguo o migrar a Node.js?](/es/blog/php2shell-legacy-php-upgrade-migration/)

[Artículo anterior**Figma Weave y Figma Design: elige cómo conectarlos**](/es/blog/figma-weave-design-workflow/) [Artículo siguiente**OpenMontage: crea un flujo de vídeo con tu agente de programación**](/es/blog/openmontage-ai-video-production-review/)

[**Volver**](/es/blog/overview/)

[![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/)

[Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt

12 min de lectura · 3 nov 2026 Última revisión 3 de noviembre de 2026

[**Siguiente**](/es/blog/claude-code-design-system-files/)