Saltar al contenido

Probada en una tarea realComunidad, verificadaDiseño y front end

Impeccable

Una crítica de tu página con puntaje y respaldada por evidencia, y luego un rediseño con un look propio.

Instala Impeccable gratis

Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.

Sin spam. Te das de baja con un clic. Usamos tu correo para enviarte el curso y consejos de IA.

Nuestra nota
7/10
Funciona en
Claude, ChatGPT+7 más

Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.

¿Hace falta programar?
No
Tiempo hasta el resultado
55 min
Creado por
Paul Bakaus
Probada
19 oct 2026
Sin la skillCon la skillCon la skill
Ambos corrigieron los datos y agregaron la foto de la taza; Claude sin la skill fue por una tienda cálida crema, serifa y terracota, mientras que Impeccable eligió piedra fría, tipografía grotesca gruesa, grandes azulejos de esmalte y un medidor de envío gratis bajo un botón de compra oscuro.

La respuesta corta

Impeccable es una skill de diseño para Claude Code que critica y mejora interfaces como páginas de producto, landing pages, dashboards y pantallas de app, con comandos como critique, polish, bolder y harden. Le sirve a cualquiera con una página que se siente genérica y quiere una lista ordenada y medida de problemas más una versión corregida. Nuestro veredicto es 7/10: con el mismo prompt Claude sin la skill también hizo una página limpia y honesta en la mitad del tiempo, pero Impeccable agregó una crítica con puntaje y evidencia concreta y un diseño más audaz hecho para el taller.

Ideal para: Dueños de una página existente que se siente genérica y quieren una lista ordenada y medida de lo que está mal y un rediseño con identidad propia.

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Impeccable en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Sin spam. Te das de baja con un clic. Usamos tu correo para enviarte el curso y consejos de IA.

Cuándo vale la pena usarla

Critica y rediseña una página de producto

Tu página de producto se ve como cualquier otra plantilla. En nuestra prueba, la dueña de un taller de cerámica obtuvo un informe que le dio a la página vieja 11 de 36, y luego una página rehecha con grandes muestras de esmalte, un botón de carrito que funciona y un medidor que muestra cuánto falta para el envío gratis.

Pulido final antes del lanzamiento

Una página o pantalla de app funciona pero se siente tosca. El comando polish hace una pasada final de calidad que conserva tu look actual y arregla espaciado, alineación, consistencia y estados faltantes como carga, vacío y error.

Documenta tu sistema de diseño

Quieres que las páginas futuras, hechas por ti o por IA, combinen con tu sitio. Escribe un archivo DESIGN.md con tus colores, fuentes, espaciados y componentes; nuestra prueba produjo uno automáticamente al final del rediseño.

Cómo conseguir un gran resultado

  1. Instálala y deja que se configure

    Instálala (pasos abajo). En la primera ejecución descarga un pequeño motor auxiliar para su escaneo de diseño automático; si eso falla, Claude lo dice y lee tus archivos directamente, que es lo que pasó en nuestra prueba y aun así dio una crítica completa.

  2. Pide una crítica y luego un arreglo

    Apúntala a tu archivo de página y pídele que critique el diseño y luego lo arregle. Escribe /impeccable solo si quieres que te sugiera dos o tres próximos pasos.

  3. Lee el informe con puntaje

    Recibes un puntaje de usabilidad sobre 40 (o menos cuando algunas reglas no aplican), un veredicto sobre si el diseño podría ser de cualquier tienda y de tres a cinco problemas ordenados de P0 (lo más urgente) a P2 o P3, cada uno con el comando que lo arregla.

  4. Responde sus preguntas

    Siempre termina la crítica preguntando qué arreglar primero, cuánto abarcar y qué dirección tomar. Di qué debe quedarse, como el color de tu marca, y da tus datos reales; en nuestra prueba se ciñó a los datos dados y marcó cada dato desconocido como placeholder.

  5. Revisa el rediseño y sus notas

    Para un rediseño escribe un brief corto, arma la página, la revisa en tamaños de escritorio y teléfono y revisa su propio trabajo antes de terminar. Abre la página en tu teléfono, completa los placeholders y guarda el DESIGN.md que deja para páginas futuras.

Este es el prompt exacto con el que empezamos nuestra prueba:

El prompt que usamos
Esta es mi página de producto actual: input/product.html. Critica su diseño y luego arréglalo, para que se vea profesional y venda mejor. Guarda la página mejorada como out/product.html (que siga siendo un solo archivo HTML).

Todo lo que creó

Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.

Con la skill
Con la skill, en un teléfono
Con Impeccable la página se divide en secciones con bloques de color (una franja azul marino de reseñas, un bloque Ash Green de talleres, un bloque azul marino mayorista con las cuentas del pedido resueltas) y cada uno de los otros más vendidos tiene su propio botón de Agregar al carrito.
La página de la que partieron ambos
La página de producto que ambos recibieron para criticar y arreglar. (móvil)
La página de producto que ambos recibieron para criticar y arreglar.
Sin la skill
Sin la skill, en un teléfono
La página de Claude sin la skill es una tienda limpia y convencional con una barra de oferta arriba, pequeñas muestras de esmalte, acordeones para los detalles y un layout crema tranquilo que vende bien pero se parece a muchas tiendas artesanales.

Cómo fue la sesión

La conversación de nuestra prueba, resumida. Unos 55 minutos desde el primer prompt hasta el resultado final.

  1. Tú: Usa la skill impeccable para esto. Esta es mi página de producto actual: input/product.html. Critica su diseño y luego arréglalo, para que se vea profesional y venda mejor. Guarda la página mejorada como out/product.html (que siga siendo un solo archivo HTML). (Más la ficha de datos del taller y 8 fotos.)
  2. AI: La carga de contexto no corrió; leeré directamente el contexto existente del proyecto.
  3. AI: Crítica guardada en out/critique.md. Puntaje 11/36 (31%), Pobre. Veredicto: intercambiable con cualquier categoría, cambia "taza" por "vela" y nada cambia. P0: la página lleva datos de otra tienda (Yafo Mug, ₪120, un estudio en Jaffa, una etiqueta literal "(reviews)", una afirmación "Eco Friendly" sin respaldo) y no tiene foto del producto. P1: Add to Cart es un enlace muerto, la cantidad acepta 0 y negativos, no hay info de envío; no...
  4. AI: La skill pide que elijas prioridades aquí. No puedes responder en esta sesión, así que tomé las opciones recomendadas: arreglar todos los problemas, datos primero y un look nuevo propio de Clay & Co en vez de pulir la plantilla.
  5. AI: Listo. Dirección: fondo piedra de horno fría, Midnight para el texto y el botón de compra, una sección de talleres en Ash Green, esmaltes mostrados como azulejos planos, Bricolage Grotesque con Hanken Grotesk, esquinas de 3px, sin degradados ni emoji. Al elegir un esmalte su azulejo se eleva; un medidor de pedido en vivo muestra cuánto falta para el envío gratis (más de $75) y el 10% de descuento (4+ piezas); Agregar al carrito muestra el total en vivo y funciona....
  6. AI: Quedaron como [placeholders] visibles: fotos de los esmaltes, disponibilidad, dimensiones, cuidados, devoluciones, enlace de Etsy, fechas de talleres, fotos del taller, checkout. No pude correr el motor de impeccable (detector, superposición) ni generar imágenes. Tiempo: unos 55 minutos.

Qué funcionó y dónde se quedó corta

Qué funcionó

  • La crítica es un entregable real que Claude sin la skill no produjo: un informe con puntaje (11/36, Pobre) con evidencia medida, como 15 de 32 elementos de texto que no pasan el contraste, 72 píxeles de scroll lateral en un teléfono, 7 zonas táctiles de menos de 44 píxeles y 6 enlaces muertos, más en qué tropezarían tres tipos de compradores
  • Rechazó el look 'fondo crema, título con serifa, botón terracota' al que Claude sin la skill fue directo, y construyó un look propio: fondo piedra fría, texto y botones en azul Midnight oscuro, bloques de color Ash Green y azul marino, títulos grotescos gruesos
  • Los esmaltes se volvieron grandes azulejos de muestra para elegir, y un medidor en vivo bajo el botón muestra cuánto falta para el envío gratis y para el 10% de descuento por varias piezas; los otros más vendidos tienen sus propios botones de Agregar al carrito
  • Se ciñó estrictamente a los datos del taller, marcó cada dato desconocido como placeholder visible y dejó un DESIGN.md para que las páginas futuras combinen

Dónde se quedó corta

  • Su motor auxiliar (detector automático, superposición visual, historial de críticas guardado) no estaba instalado, así que esas partes no corrieron; igual la crítica quedó completa con las dos revisiones
  • Tomó unos 55 minutos, más del doble de los 25 minutos que necesitó Claude sin la skill para una página que vende igual de claro; Claude sin la skill también escribió una crítica sólida, solo que más corta y sin puntaje
  • El look más audaz es cuestión de gusto: la página de tienda clásica y cálida de Claude sin la skill es igual de profesional, así que la ganancia principal de la skill es lo distintivo y el rigor, no una página que funcione mejor

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Impeccable en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Sin spam. Te das de baja con un clic. Usamos tu correo para enviarte el curso y consejos de IA.

Prompts que funcionan

Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.

Critica y arregla una página
Usa la skill impeccable. Esta es mi página de producto actual: [nombre del archivo]. Critica su diseño y luego arréglalo, para que se vea profesional y venda mejor. Usa solo estos datos: [precios, envíos, reseñas, contacto]. Pon un [placeholder] claro en todo lo que no sepas.
Pulido antes del lanzamiento
/impeccable polish mi página de [checkout / registro / producto] antes del lanzamiento. Mantén el look, los colores y el texto actuales, y asegúrate de que funcione bien en un teléfono.
Haz más audaz una página sosa
/impeccable bolder: mi [landing page] se siente segura y olvidable. Dale más carácter, pero conserva mi logo, mi texto y el color de mi marca [código de color].
Documenta mi sistema de diseño
/impeccable document: captura el sistema de diseño de este sitio en un archivo DESIGN.md, para que las páginas nuevas que armes después combinen.

Lo que necesitas: Claude Code necesita Pro o superior. Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas, pero el uso de esta skill en la app de Claude no está documentado, Internet en la primera ejecución, para que descargue su motor auxiliar (nuestra prueba corrió sin él, usando la alternativa), Sub-agentes en Claude Code para la crítica en dos partes.

Cómo instalarla

Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.

Lo más fácil: pega esto en tu herramienta de IA
Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/pbakaus/impeccable/tree/main/.claude/skills/impeccable -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.

O hazlo tú mismo:

Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.

npx skills add https://github.com/pbakaus/impeccable/tree/main/.claude/skills/impeccable -g

Necesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.

Bueno saber: Después de agregar el marketplace también puedes elegir Impeccable en la lista de /plugin.

Desbloquea los pasos de instalación

Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.

Sin spam. Te das de baja con un clic. Usamos tu correo para enviarte el curso y consejos de IA.

Cómo lo verificamos

Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia (Apache-2.0) permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.

Preguntas frecuentes

¿Es mejor que simplemente pedírselo a Claude?

En nuestra prueba, en parte. Claude sin la skill, con el mismo prompt, también corrigió los datos erróneos, usó las fotos e hizo una página limpia y convincente en unos 25 minutos, con una crítica corta en sus notas. Impeccable tardó unos 55 minutos pero agregó una crítica con puntaje y evidencia medida (11/36, 15 fallos de contraste, 72 píxeles de scroll lateral en un teléfono) y rechazó el típico look de tienda artesanal crema, serifa y terracota por un diseño propio más audaz.

¿Qué encontró realmente la crítica?

Le dio a la página original 11 de 36, calificada como Pobre, y la llamó una plantilla que podría vender velas tan fácil como tazas. Los problemas principales fueron datos erróneos de otra tienda y la falta de foto del producto, luego un enlace de Agregar al carrito muerto, una casilla de cantidad que aceptaba números negativos, la falta de info de envío y un layout roto en teléfono, y después un look genérico con 15 de 32 elementos de texto que no pasaban el contraste.

¿Necesito programar para usar Impeccable?

No. Pides lo que quieres con palabras simples o escribes comandos como /impeccable critique, y Claude escribe el código. Sí necesitas el archivo de tu página en la carpeta en la que trabaja Claude para que pueda editarlo.

¿Qué plan necesito y funciona en la app de Claude?

Está hecha para Claude Code, que necesita Pro o superior, y funciona mejor con sub-agentes y acceso a internet en la primera ejecución para su motor auxiliar. Las skills de la app de Claude en general funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas, pero el uso de esta skill en la app de Claude no está documentado.

¿Qué significa el puntaje de Impeccable?

Califica diez reglas clásicas de usabilidad (las heurísticas de Nielsen) de 0 a 4 cada una, así que el máximo es 40, menos cuando una regla no aplica a la página. La skill dice que la mayoría de las interfaces reales sacan entre 20 y 32 de 40; nuestra página de prueba sacó 11 de 36.