Skip to main content
📝 Diseño con IA

Impeccable Skill para Claude Code: lo probé en mi sitio

Ejecuté el Impeccable Claude Code Skill en mi propio sitio: puntuación, anti-patterns detectados y dónde live mode brilla o tropieza.

26 min

Tiempo de lectura

5,133

Palabras

Apr 29, 2026

Publicado

Engr Mejba Ahmed

Escrito por

Engr Mejba Ahmed

Compartir Artículo

Impeccable Skill para Claude Code: lo probé en mi sitio

Impeccable Skill para Claude Code: lo probé en mi sitio

Casi no lo instalo. Otra habilidad Claude Code de código abierto, otro martes, otro repositorio de GitHub que promete solucionar el problema "AI se parece a AI". Había visto esta película antes. Así que lo marqué como favorito y volví al envío.

Luego ejecuté un comando en mi propia cartera.

impeccable critique devolvió un número que no quería ver: 25 de 40. AI está en el límite. La habilidad apuntaba a cinco cosas específicas: tres de ellas eran decisiones que había tomado personalmente, defendido en revisiones de diseño y enviado con confianza. Los otros dos eran valores predeterminados vagos que nunca había notado porque miro el mismo sitio todos los días.

Ese fue el momento en que dejé de tratar a Impeccable como una habilidad más en el directorio y comencé a tratarlo como un segundo par de ojos. Durante la semana siguiente, reconstruí secciones de dos proyectos con él, ejecuté la entrevista craft desde cero en una página de destino SaaS falsa y rompí el modo alfa en vivo de seis maneras diferentes. Esta publicación es el informe honesto. Lo que funcionó. ¿Qué no? Lo que cambié en mi propio sitio después de que la puntuación volvió a ser fea.

Si envía código de interfaz de usuario con Claude Code en 2026 y alguna vez miró una página de destino recién generada y pensó "¿por qué se ve igual que cualquier otra salida de AI?", la respuesta está en las siguientes 4000 palabras.

Qué es realmente Impeccable (sin el giro de marketing)

Elimine la copia del sitio web y la Impeccable Skill Claude Code es una cosa: una carpeta de archivos Markdown que se carga en su contexto Claude Code y cambia la forma en que el modelo piensa sobre el código de front-end.

Eso suena aburrido hasta que lees lo que hay en la rebaja.

Veintitrés comandos. Siete archivos de referencia de dominios específicos: tipografía, color, diseño espacial, capacidad de respuesta, interacciones, movimiento y escritura UX. Una lista de reglas explícitas de "no hacer" integradas en la memoria de trabajo del modelo. Todo se instala con un comando y funciona dentro de Claude Code, Cursor, Gemini CLI y Codex CLI. A partir de la versión 1.5.1 (enviada el 17 de marzo de 2026, actualmente con más de 10,000 estrellas de GitHub), cubre la mayor parte del proceso de diseño de front-end que tocaría un constructor en solitario o un pequeño equipo de producto.

El autor es Paul Bakaus. El sitio adjunto en impeccable.style alberga galerías, documentos, una extensión de Chrome y una CLI independiente de before/after para escanear archivos fuera de un arnés AI. Existe una infraestructura de marketing en torno al proyecto, pero el valor central reside en la habilidad misma. Si sólo instalas la habilidad e ignoras todo lo demás, seguirás obteniendo la mayor parte del beneficio.

Esto es lo que nadie más dice claramente: esta habilidad es fundamentalmente una mejora del vocabulario. La habilidad frontend-design propia de Anthropic (la que se envía con Claude Code) le da al modelo cierta dirección de diseño. Impeccable va más allá al darle palabras. Palabras específicas. "Más tranquilo." "Más audaz". "Destilar." "Polaco." "Adaptar." Cada uno es un comando que el modelo puede ejecutar contra un componente, con reglas documentadas sobre lo que significa visualmente cada palabra.

La mayoría de los resultados de diseño de AI tienen el mismo aspecto porque el modelo no tiene vocabulario para la dirección del diseño. Puede describir: "usar una fuente de 16 píxeles con una altura de línea de 1,5", pero no puede dirigir: "hacer que esta sección sea más silenciosa para que la CTA llame la atención". Impeccable instala esa capa de dirección. Esa es la verdadera innovación técnica.

La lista de antipatrones que me hizo callar durante diez minutos

Déjame mostrarte lo que me rompió el cerebro cuando leí por primera vez los archivos de habilidades.

Dentro del repositorio, hay una lista de reglas explícitas de "NO HACER". Cosas como: no uses texto gris sobre fondos de colores. No utilice la paleta AI (degradados de cian sobre oscuro, de púrpura a azul). No utilice negro puro o blanco puro sin un ligero tinte. No cargue tres familias de fuentes y envíe solo dos. No decores con maquetas de teléfonos prediseñadas. No entierres la CTA principal dentro de una tarjeta con el mismo fondo que la sección circundante.

Me senté allí leyendo y pensé: He enviado todos y cada uno de estos en los últimos seis meses.

No porque no lo sepa mejor. Porque cuando le pregunto a Claude Code a las 11 p.m. y le digo que "construya una sección de héroe", el modelo me da cómo sus datos de entrenamiento dicen que se ve una sección de héroe. Los datos de entrenamiento son la Internet pública. La Internet pública, a partir de 2026, se compone principalmente de interfaz de usuario Tailwind, plantillas de Vercel y páginas de destino generadas por AI. El centro estadístico de esa distribución es exactamente el aspecto que describen los antipatrones de Impeccable.

Anthropic tiene un nombre para esto: convergencia distributiva. Los modelos reproducen el centro estadístico de decisiones de diseño porque fueron entrenados en el centro estadístico de decisiones de diseño. La contribución de Impeccable no es que haga que el modelo sea "más inteligente". Es que desvía el modelo del centro al inyectar restricciones obstinadas que ningún comité de diseño en la Internet pública ha acordado jamás.

Esa es una contribución más importante de lo que parece. La mayoría de las herramientas "anti-slop" intentan detectar resultados incorrectos después del hecho. Impeccable evita que se produzca la salida en primer lugar dándole al modelo una distribución de referencia diferente. Es la diferencia entre editar un borrador y cambiar lo que se redacta.

Lo guiaré a través de los siete pilares del diseño en un momento, pero quiero plantar una bandera aquí: la lista de antipatrones por sí sola vale la pena instalar la habilidad. Incluso si nunca usa un solo comando, tener esas reglas en su contexto Claude Code cambiará considerablemente lo que incluye el modelo.

Los siete pilares (y por qué importan más que los comandos)

Los 23 comandos reciben la mayor parte de la prensa, pero la estructura de carga de la habilidad son los siete archivos de referencia. Cada uno es una inmersión profunda en un único dominio de diseño, y Claude extrae de ellos cada vez que toca esa área del código.

Tipografía. No "usar Inter": reglas reales. Dimensionamiento óptico a través de puntos de interrupción. La relación entre la altura de la línea del cuerpo y el espaciado del párrafo circundante. Cuándo utilizar fuentes de visualización versus cuándo ampliar la fuente del cuerpo. Las anti-referencias de la habilidad señalan explícitamente el uso excesivo de Inter, lo cual aprecié porque fui culpable de ello en tres de mis cuatro proyectos.

Color. Aquí es donde la mayor parte de la salida de AI se ahoga. El archivo de referencia apuesta por la moderación, la disciplina del acento y los tonos neutros sobre el negro puro y el blanco puro. Hay una sección específica sobre lo que la habilidad llama "decoration discipline": color usado para jerarquía, no para emoción. Después de ejecutar esto en mi sitio, eliminé dos fondos degradados y la página se volvió mucho más segura.

Diseño espacial. Relleno, márgenes y ritmo entre secciones. El archivo de referencia tiene opiniones sobre el ritmo vertical consistente entre los puntos de interrupción, algo que los diseños generados por AI casi nunca funcionan bien porque los datos de entrenamiento están llenos de espacios inconsistentes.

Capacidad de respuesta. Reglas específicas sobre cómo los diseños deben cambiar, no solo cambiar el tamaño, entre puntos de interrupción. Este es uno de los pilares donde la salida de Impeccable difiere notablemente de la generación predeterminada de Claude Code.

Interacciones. Estados de desplazamiento, anillos de enfoque y lo que la habilidad llama "superficies con estado". Hay una regla silenciosa pero importante acerca de que los estados flotantes necesitan hacer algo significativo, no solo oscurecerse ligeramente. Después de leerlo, revisé mi propio sitio y me di cuenta de que siete de mis botones tenían estados de desplazamiento que básicamente no hacían nada.

Movimiento. Un archivo de referencia con opiniones sólidas sobre curvas de relajación, rangos de duración y cuándo es apropiado el movimiento. Los avisos anti-patrón son claros aquí: el rebote disminuye en productos serios, el paralaje en páginas de contenido denso y la animación que existe por sí misma.

Escritura UX. Este me sorprendió. La habilidad incluye orientación sobre cómo deben sonar las etiquetas de los botones, los mensajes de error y los titulares. No sólo gramática: voz. Hay una regla para evitar "Haga clic aquí" y "Más información" como texto de enlace que envié a Claude Code como regla decoration discipline y ahora me niego a fusionar código que la viole.

Los pilares importan más que los comandos porque los comandos son una forma abreviada de invocar las reglas en los pilares. Cuando escribe impeccable polish, el modelo lee los pilares de tipografía, color, espacial e interacciones a la vez y los aplica al componente seleccionado. Sin los pilares, las órdenes serían sólo verbos.

El flujo de trabajo Greenfield: ejecutar impeccable craft desde cero

Probé esto en un producto SaaS falso llamado Lighthouse, una herramienta de agregación de comentarios de los clientes. Nuevo repositorio, nueva sesión Claude Code, sin contexto de diseño previo. Quería ver qué haría impeccable craft sin ninguna entrada previa que dé forma a la salida.

El comando inicia una entrevista. Alrededor de 13 preguntas, dependiendo de cómo respondas a las que se ramifican. La estructura de la entrevista es la parte de la que nadie habla, así que permítanme explicar lo que realmente pregunta:

  1. Tipo de producto. Interfaz de usuario de la aplicación, sitio de marketing, panel de control, editorial. La respuesta determina si la habilidad se ejecuta en modo "marca" (el diseño ES el producto) o en modo "producto" (el diseño SIRVE al producto). 2. Audiencia. Quién usará esto. No "todos": una persona específica con un trabajo específico y un nivel específico de conocimientos de diseño. 3. Voz y tono. Seguro, juguetón, comedido, técnico. Con subpreguntas sobre si la voz cambia entre diferentes contextos (marketing vs. mensajes de error, por ejemplo). 4. CTA principal. ¿Cuál es la acción más importante que realiza el usuario? La entrevista lucha fuertemente contra las respuestas vagas: "regístrese" recibe un seguimiento de "para qué específicamente".
  2. Alcance visual. Claro, oscuro o ambos. Colores de la marca si existen. Preferencias tipográficas con advertencias explícitas contra opciones genéricas. 6.

Anti-referencias. Cómo NO quieres que se vea. Esta fue la pregunta más inteligente. La habilidad le pide que nombre tres sitios de la competencia o direcciones estéticas que desee evitar activamente. 7. Dimensiones de personalidad. Deslizadores a lo largo de ejes como "juguetón ↔ serio", "mínimo ↔ máximo", "suave ↔ agudo". La composición de la salida cambia según el lugar donde aterrice.

La entrevista dura entre 5 y 8 minutos si respondes pensativamente. Al final, la habilidad escribe dos archivos en su repositorio: product.markdown y design.md.

product.markdown lleva la capa estratégica: registro, audiencia, voz, antirreferencias, principios de diseño. El "quién, qué, por qué" del producto. design.md incluye la capa visual: colores, tipografía, elevación, componentes, lo que se debe y no se debe hacer, formateado en la misma estructura de seis secciones que Google Stitch popularizó en 2025.

Una vez que esos dos archivos existen, cada interacción futura Claude Code los lee como contexto. Ahí es donde se agrava el verdadero apalancamiento. No le estás pidiendo al modelo que diseñe desde cero cada vez, sino que le estás pidiendo que amplíe un sistema que ya está documentado.

La demostración de Lighthouse: primer paso, luego tres variantes

Después de la entrevista, le pedí a Claude Code (con la Impeccable Skill cargada y los dos archivos nuevos en contexto) que creara una página de destino para Lighthouse. Un mensaje. Sin seguimientos.

El primer pase fue limpio. No es emocionante, pero está limpio. Un héroe con un título enfocado, una única llamada a la acción principal en la mitad superior de la página, una cuadrícula de funciones silenciosa y una sección de testimonios que no grita. Sin morfismo de vidrio. Sin degradado morado. El Inter no estaba en ninguna parte del expediente. La fuente era una pantalla serif combinada con un humanista sans, ambas opciones surgieron de las respuestas de la entrevista sobre la voz.

Luego ejecuté el segundo comando, impeccable variants, y pedí tres direcciones de diseño: editorial, empapado y brutalista.

La variante editorial parecía un artículo de revista extenso: fotografía a sangrado completo, letras mayúsculas en el título, un diseño de cita en la barra lateral. La variante empapada hizo que el color de la marca ocupara el 70% del campo visual con letras blancas de alto contraste. La variante brutalista eliminó la decoración por completo: bordes negros pesados, estética HTML cruda, tipografía monoespaciada.

Lo que me sorprendió no fue que las variantes fueran diferentes. Era que eran legiblemente diferentes. Las variantes generadas por AI normalmente parecen el mismo diseño con tres paletas de colores diferentes. En realidad, estos se comprometieron con distintas direcciones estéticas, de la misma manera que lo haría un diseñador senior al esbozar opciones para un cliente.

La comparación más cercana que tengo es la generación variante de Google Stitch, pero Stitch opera dentro de su propio lienzo. Impeccable genera el mismo rango de direcciones distintas pero las envía como código de producción real en su flujo de trabajo Claude Code. Esa diferencia es importante cuando el siguiente paso es "enviar", no "captura de pantalla".

Elegí la variante empapada para Lighthouse y pasé al modo en vivo.

Live Mode — Dónde brilla y dónde tropieza

impeccable live es la característica alfa y la etiqueta alfa está funcionando. Permítanme ser honesto acerca de ambas mitades.

El brillo primero. El modo en vivo abre una sesión del navegador, carga su servidor de desarrollo local y le permite seleccionar componentes directamente en la salida renderizada. Haz clic en un héroe. Ejecute bolder. El héroe se vuelve visualmente más pesado: más peso en el tipo, composición más densa, contraste más profundo. Haga clic en quieter. Lo contrario. Haga clic en distill. El componente pierde ornamentación y se reduce a sus elementos centrales. Haga clic en polish. El modelo atraviesa y aprieta el espacio, la alineación y los pequeños problemas de ritmo visual sin cambiar la estructura.

Hay un modo micro-variations que genera cuatro o cinco pequeñas variaciones del componente seleccionado una al lado de la otra. Acepta el que desea, rechaza los demás y la variante elegida se vuelve a escribir en el archivo. Este bucle (seleccionar, variar, aceptar) es lo más parecido que he usado a la iteración de diseño en tiempo real con un socio AI. Cuando funciona, es realmente divertido.

El comando detect ejecuta el escáner antipatrón en la página activa y muestra los problemas en línea. En la demostración de Lighthouse, detectó una tarjeta de función con un tamaño de objetivo táctil insuficiente en dispositivos móviles, un salto de encabezado de h1 a h3 y una CTA en la que técnicamente se podía hacer clic pero visualmente sin énfasis debajo de un elemento de la competencia. Los tres eran problemas reales. Ninguno de ellos habría sido atrapado por un linter estándar.

Ahora los tropiezos. El modo en vivo es alfa y actúa como tal.

La sesión del navegador ocasionalmente pierde la conexión con el proceso Claude Code y es necesario reiniciar ambos. La selección de componentes es complicada en páginas con DOM profundamente anidado: a veces seleccionas un elemento contenedor cuando quieres que la tarjeta sea visible. El comando adapt (que se supone que traduce un componente a un registro visual diferente) produjo dos resultados que rompieron el diseño existente, lo que requirió una reversión manual. Y en una sesión particularmente larga, al aceptar una variante, escribí el cambio en el archivo incorrecto en un monorepo y perdí unos diez minutos recuperándome.

Si trata el modo en vivo como una herramienta de boceto funcional (iteración rápida, espera roturas, compromisos frecuentes), es poderoso. Si lo trata como una función terminada, le frustrará. El autor ha estado enviando correcciones semanalmente y la trayectoria parece correcta, pero a finales de abril de 2026 todavía es alfa.

La trampa Mood-Board: por qué los prompts detallados superan a la inspiración visual

Aquí hay un hallazgo que no esperaba. Impeccable acepta entradas del panel de estado de ánimo: puede colocar imágenes de referencia y pedirle a la habilidad que extraiga una dirección visual de ellas. Probé esto con indicaciones de texto detalladas en el mismo proyecto, dos veces.

Las indicaciones de texto detalladas ganaron en ambas ocasiones.

La razón es mecánica. Cuando la habilidad ingiere un panel de estado de ánimo, tiene que interpretar las imágenes y traducirlas al mismo vocabulario que utiliza el resto de la habilidad. Ese paso de interpretación añade ruido. Cuando escribes la respuesta en palabras ("Quiero una tipografía silenciosa, espacio generoso, un solo color de acento, sin decoración"), te saltas la interpretación y el modelo se ejecuta en contra de tu intención directa.

Los paneles de tendencias todavía funcionan. No son inútiles. Pero las personas que obtienen el mejor rendimiento de esta habilidad son las que pueden describir lo que quieren con palabras. Si su vocabulario de diseño es débil, los paneles de estado de ánimo llenarán el vacío. Si su vocabulario de diseño es sólido, las palabras serán más rápidas y precisas.

Esa compensación tiene una implicación útil: esta habilidad es un entrenador de vocabulario. Cuanto más lo uses, mejor describirás el diseño con palabras y mejores serán tus resultados. No es sólo una herramienta, es una práctica.

Edición de sitios existentes: dónde obtuve la puntuación 25/40

Ahora déjame llegar a la parte que lastimó mi ego. Ejecuté impeccable document en mi propio portafolio en mejba.me. Este comando realiza ingeniería inversa en un design.md a partir de una base de código existente, leyendo los estilos, componentes y patrones reales para producir un documento que describe lo que es el sitio actualmente, no lo que usted desearía que fuera.

Ese documento es brutal. Es un espejo honesto.

Luego ejecuté impeccable critique. La habilidad arrojó una puntuación de salud de diseño de 25 sobre 40. El límite para "desagüe AI límite" es 26. Estaba un punto por debajo.

Problemas específicos que marcó:

  • Carga cognitiva en la página de inicio. Tres énfasis visuales en competencia en la mitad superior de la página. El ojo no sabía adónde ir primero. Lo defendí en revisiones de diseño como "rico"; la habilidad lo llamó "disperso".
  • Jerarquía visual en el índice del blog. Los títulos de las publicaciones y la metainformación tenían un contraste de tamaño insuficiente. Envié esto con CSS personalizado del que estaba orgulloso. La habilidad identificó correctamente que el orgullo de la autoría primaba sobre la claridad. - CTA ambiguos. Tres botones en el encabezado, ninguno de ellos claramente es la acción principal. El modelo señaló esto y recomendó degradar dos a enlaces de texto. - Uso excesivo del morfismo de vidrio. Dos tarjetas en la página del proyecto usaban efectos de desenfoque de fondo sin ningún motivo funcional. Los agregué porque "parecían modernos". Parecían modernos en 2022. - Fuentes no utilizadas cargadas. La página cargó tres familias de fuentes. Se utilizaron dos.

Uno era un resto de una iteración anterior que nunca eliminé. Puro desperdicio, tanto visualmente como en peso de página.

No arreglé los cinco a la vez. Elegí los dos que más importaban (el problema de la carga cognitiva y los CTA ambiguos) y reconstruí el héroe de la página de inicio con impeccable craft ejecutándose en un nuevo conjunto de respuestas de entrevista. Vuelva a ejecutar critique. La nueva puntuación fue 32 sobre 40. Sólida, no perfecta.

La conclusión honesta: el puntaje no es el punto. El punto es que la habilidad identifica cuestiones específicas y procesables con un razonamiento adjunto, y las cuestiones suelen ser correctas. Dejé de confiar en mi propio gusto en diseños que había estado mirando durante demasiado tiempo. En su lugar, ejecuto critique.

decoration discipline y delight: los dos comandos de los que nadie habla

Los comandos ampliamente discutidos son craft, polish, live y critique. Los dos que cambiaron silenciosamente la forma en que escribo CSS son decoration discipline y delight.

decoration discipline audita un componente o página en busca de decoración visual innecesaria. Cada sombra, degradado, borde, esquina redondeada y floritura de color se evalúa frente a la pregunta: "¿Esto se gana su lugar?". Cosas que no se eliminan. La salida suele ser entre un 30 y un 40 % más pobre que la entrada. Seguro. Contenido. El tipo de diseño que hace que el usuario piense "esta es la mejor versión de este producto" en lugar de "este es un producto sofisticado".

delight hace lo contrario. Una vez que se ha disciplinado una sección, ejecuta delight para volver a agregarle personalidad, pero específicamente, solo en los momentos en que resulta útil para el usuario. Un estado flotante que hace algo inesperado. Un estado vacío con carácter. Un esqueleto de carga que no se disculpa por el tiempo de carga. Las reglas de la habilidad para delight son explícitas: nunca decorativas, siempre funcionales, siempre raras.

El orden importa. Disciplina primero, delight segundo. Si delight antes de disciplinar, la personalidad queda sepultada bajo el ruido. Si disciplinas sin delighting, el resultado es competente pero frío. Los dos comandos son un par y la mayoría de los tutoriales que he visto los tratan como separados.

Este es el tipo de matiz que me hace pensar que la habilidad fue desarrollada por alguien que realmente envió el producto, no solo escribió sobre diseño. Otras habilidades de Claude Code que vale la pena instalar tienden a centrarse en la velocidad del flujo de trabajo; Impeccable se centra en la artesanía.

Hallazgos comunes en cinco sitios que probé

Después de la demostración de Lighthouse y mi propio sitio, ejecuté la habilidad en cuatro bases de código más: dos proyectos de clientes (con permiso), un repositorio de código abierto en el que contribuyo y un iniciador derivado de una plantilla de Vercel. Cinco sitios en total, incluido el mío.

Algunos hallazgos se repiten en todos y cada uno de ellos:

  • Maquetas de imágenes prediseñadas de teléfonos o computadoras portátiles en la sección de héroes. Cuatro de cada cinco sitios tenían esto. La habilidad lo señala porque agrega complejidad visual sin comunicar nada sobre el producto real. - Uso excesivo del morfismo de vidrio. Tres de cada cinco. Fondo desenfocado en tarjetas, modales y superposiciones. La habilidad recomienda usar el morfismo de vidrio solo cuando sirve al significado de la superficie (una información sobre herramientas flotante, un panel flotante) y nunca como decoración. - Fuentes no utilizadas cargadas. Los cinco sitios tenían al menos una familia de fuentes cargada pero sin usar en la página renderizada. Este es un problema de peso de página y de coherencia visual al mismo tiempo. - Falta marca personal. Cuatro de cada cinco no tenían una firma visual distintiva. Podrían haber sido cualquier producto de su categoría.

El flujo de trabajo craft de la habilidad específicamente va en contra de esto al solicitar antirreferencias (lo que NO desea que se vea), lo que obliga a la diferenciación. - CTA que compiten entre sí. Cada sitio tenía al menos dos CTA de igual peso visual en la página de inicio. La habilidad señala esto constantemente y recomienda una jerarquía primaria, secundaria y terciaria clara.

Si está creando o manteniendo una base de código front-end en este momento y desea saber qué detectaría un revisor externo, esas son las cinco cosas que debe buscar primero. Ni siquiera necesitas la habilidad para encontrarlos; necesitas a alguien dispuesto a ser honesto contigo sobre lo que realmente hay en la página.

Las limitaciones sobre las que debería ser honesto

He sido positivo a lo largo de esta publicación y la habilidad se lo ganó. Pero existen límites reales.

Funciona mejor con las convenciones de diseño modernistas occidentales. Los datos de capacitación y los archivos de referencia se apoyan en gran medida en una tradición estética específica: tipografía limpia, espacio generoso, color sobrio, adornos mínimos. Si su proyecto requiere una tradición visual diferente (muy ornamental, culturalmente específica o deliberadamente maximalista), la habilidad retrocederá. A veces ese rechazo es correcto. A veces no lo es. Tienes que saber cuándo anularlo.

No puede reemplazar el juicio de diseño sobre decisiones novedosas. La habilidad es excelente para aplicar principios de diseño conocidos al trabajo ejecutado. Es menos bueno a la hora de generar una dirección visual que nadie haya probado antes. Si estás construyendo algo realmente nuevo, la habilidad te ayuda a enviar una versión limpia, pero la chispa tiene que venir de ti.

El modo en vivo es alfa. Ya hablé de esto anteriormente, pero merece replantearse. Si adoptas esta habilidad esperando que el modo en vivo funcione perfectamente, te toparás con paredes. Los comandos no activos son estables y excelentes. El modo en vivo es una vista previa de hacia dónde se dirige el proyecto.

Aumenta el uso del contexto. Cargar 23 comandos y 7 archivos de referencia en una sesión Claude Code utiliza más contexto que ejecutar sin la habilidad. En bases de código grandes, esto es importante. Comencé a usar impeccable de forma selectiva (cargado para sesiones centradas en el diseño, descargado para sesiones de refactorización) para mantener equilibrado el gasto en contexto.

La extensión de Chrome y la CLI son buenas pero opcionales. El sitio complementario en impeccable.style incluye herramientas de soporte, pero el valor principal es la habilidad en sí. No se distraiga con la infraestructura circundante. Instale la habilidad, ejecute craft, ejecute critique, envíe mejores interfaces. Todo lo demás es una ventaja.

Lo que recomendaría hacer en la próxima hora

Si ha leído hasta aquí, tiene suficiente contexto para tomar una decisión real. Esto es lo que haría si estuviera sentado a tu lado ahora mismo.

Abre tu terminal. Navegue hasta un proyecto paralelo, no el más importante, un proyecto en el que pueda experimentar sin consecuencias. Instale la habilidad con npx skills add pbakaus/impeccable. Ejecute impeccable document en el código base existente. Lea el resultado sin defenderse.

Luego ejecute impeccable critique. Consigue la puntuación.

Cualquiera que sea el puntaje, elija el problema de mayor impacto de la lista y solucionelo con la habilidad cargada en su sesión Claude Code. Un problema. No intentes arreglarlo todo. Envíe la solución, ejecute critique nuevamente y observe cómo se movió la partitura.

Ese es el bucle. La primera vez tarda una hora. Después de eso, se necesitan diez minutos. En una semana habrá internalizado suficiente vocabulario de la habilidad como para comenzar a escribir un mejor código de interfaz de usuario con o sin él cargado.

Ese es el beneficio de segundo orden que nadie menciona en el marketing: usar esta habilidad te convierte en un mejor diseñador, no sólo en un mejor apuntador. El vocabulario se transfiere. La conciencia anti-patrón se transfiere. El ritmo de la disciplina y luego delight se transfiere.

Empecé este post diciendo que casi no lo instalé. Termino diciendo que es la segunda habilidad que cargo en cualquier proyecto Claude Code nuevo, justo después de las definiciones de mis agentes. La primera vez que veas cómo la puntuación de una crítica pasa de 25 a 32 porque en realidad arreglaste las cosas correctas, entenderás por qué.

Si está creando un trabajo front-end con AI en 2026 y no está ejecutando detección antipatrón en su salida, está enviando la misma página de destino que todos los demás. La habilidad es gratuita. La instalación tarda treinta segundos. La hora que dedica a ejecutarlo a través de su código base existente es la hora de mayor apalancamiento que tendrá este mes.

Lo que hay en tu pantalla en este momento probablemente obtendría una puntuación inferior a 30. La mía lo hizo. El siguiente paso es tuyo.

Trabajemos juntos

¿Quiere crear sistemas AI, automatizar flujos de trabajo o ampliar su infraestructura tecnológica? Me encantaría ayudar.

Coffee cup

¿Te gustó este artículo?

Tu apoyo me ayuda a crear más contenido técnico detallado, herramientas de código abierto y recursos gratuitos para la comunidad de desarrolladores.

Temas Relacionados

Engr Mejba Ahmed

Sobre el Autor

Engr Mejba Ahmed

Engr. Mejba Ahmed builds AI-powered applications and secure cloud systems for businesses worldwide. With 10+ years shipping production software in Laravel, Python, and AWS, he's helped companies automate workflows, reduce infrastructure costs, and scale without security headaches. He writes about practical AI integration, cloud architecture, and developer productivity.

Discussion

Comments

0

No comments yet

Be the first to share your thoughts

Leave a Comment

Your email won't be published

7  x  7  =  ?

Seguir Aprendiendo

Artículos Relacionados

Ver Todos

Comments

Leave a Comment

Comments are moderated before appearing.

Learning Resources

Expand Your Knowledge

Accelerate your growth with structured courses, verified certificates, interactive flashcards, and production-ready AI agent skills.

Sample Certificate of Completion

Sample certificate — complete any course to earn yours

Engr Mejba Ahmed

Engr Mejba Ahmed

Claude Code Expert · Online

👋

Hey there!

Quick Actions

WhatsApp Instant reply

Chat on WhatsApp

+880 1723 741224 · Instant reply

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

[email protected]

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support