{
 "id": 3334,
 "status": "publish",
 "lang": "es",
 "slug": "diseno-web-ia-impeccable",
 "url": "https://soymarketingultra.com/diseno-web-ia-impeccable/",
 "title": "Impeccable: 61 reglas de diseño gratis para tu agente de IA",
 "excerpt": "Impeccable instala criterio de diseño en tu agente de IA con 61 reglas deterministas. Gratuito, código abierto y compatible con +15 herramientas. Así se usa en marketing.",
 "date_gmt": "2026-08-07T07:00:00Z",
 "modified_gmt": "2026-09-18T23:21:22Z",
 "categories": [
  {
   "slug": "ia-aplicada-es",
   "name": "IA Aplicada",
   "url": "https://soymarketingultra.com/category/ia-aplicada-es/"
  }
 ],
 "tags": [
  {
   "slug": "automatizacion-ia",
   "name": "automatización IA"
  },
  {
   "slug": "claude-code",
   "name": "claude-code"
  },
  {
   "slug": "inteligencia-artificial-es",
   "name": "Inteligencia artificial"
  }
 ],
 "featured_image": {
  "url": "https://soymarketingultra.com/wp-content/uploads/impeccable-cover-es.png",
  "alt": "Mascota ordenador de Marketing Ultra revisando una interfaz con Impeccable",
  "width": 1536,
  "height": 864
 },
 "translation": {
  "lang": "en",
  "url": "https://soymarketingultra.com/en/impeccable-40-design-worlds-ai-coding-agents/",
  "id": 3337
 },
 "seo": {
  "title": "Impeccable: 61 reglas de diseño gratis para tu agente de IA",
  "description": "Impeccable añade criterio de diseño a Claude Code, Codex, Cursor y otros agentes: 23 comandos, 61 reglas deterministas y un límite importante. No fabrica gusto.",
  "focus_keyword": "impeccable"
 },
 "html": "<p>Dale a un agente de IA la orden de diseñar una landing. Cambia el modelo, cambia la herramienta y, demasiadas veces, sale la misma criatura: Inter para todo, gradiente morado, tarjetas dentro de tarjetas y una jerarquía que parece decidida por una ruleta. <strong>Impeccable intenta cortar ese patrón antes de que llegue a producción.</strong> Es un skill de código abierto que añade un vocabulario de diseño, 23 comandos y un detector con 61 reglas deterministas.</p>\n<div class=\"mu-tldr\">\n      <div class=\"mu-tldr__header\">\n        <img src=\"https://soymarketingultra.com/wp-content/themes/astra-child/assets/brand/despiram-sorprendido.png\" alt=\"Mascota Marketing Ultra\" class=\"mu-tldr__mascot\">\n        <p class=\"mu-tldr__title\">TL;DR: El resumen sin rodeos</p>\n      </div>\n      <div class=\"mu-tldr__body\">\n        <ul>\n          <li><strong>Qué es</strong>: un skill de código abierto que da a Claude Code, Codex, Cursor y otros agentes un vocabulario de diseño y un proceso más ordenado para mejorar interfaces.</li>\n          <li><strong>Qué aporta</strong>: 23 comandos y un detector con 61 reglas deterministas para localizar patrones repetitivos de las webs hechas por IA, sin API key ni otra llamada a un modelo.</li>\n          <li><strong>Cómo se aprovecha</strong>: funciona mejor cuando separas el trabajo en forma, crítica, auditoría y pulido, y cuando das al agente instrucciones concretas.</li>\n          <li><strong>La nota</strong>: 8,8/10. Es útil, gratuito y encaja en el trabajo real, pero pierde puntos porque todavía obliga a insistir demasiado.</li>\n        </ul>\n      </div>\n      <div class=\"mu-tldr__footer\">\n        <div class=\"mu-tldr__photo\"><img src=\"https://soymarketingultra.com/wp-content/themes/astra-child/assets/brand/cara-daniel.png\" alt=\"Daniel Espinosa Ramos\"></div>\n        <div><span class=\"mu-tldr__kick\">LA EXPERIENCIA DE DANIEL ESPINOSA RAMOS</span><p>Impeccable es genial. Consigue que el diseño con Claude Code y Codex sea mucho mejor y que salga del aspecto genérico de web hecha por IA. Pero a veces tengo que repetir el prompt un par de veces y ser muy específico, sobre todo cuando lo combino con otros skills. A la IA le cuesta seguir las órdenes a la primera. Aun así, lo uso en mi día a día y es uno de mis preferidos.</p><span class=\"mu-tldr__sig\">Dani</span></div>\n      </div>\n    </div>\n<table>\n<thead>\n<tr>\n<th>Ficha</th>\n<th>Dato</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Web</td>\n<td><a href=\"https://impeccable.style/\">impeccable.style</a></td>\n</tr>\n<tr>\n<td>Código</td>\n<td><a href=\"https://github.com/pbakaus/impeccable\">pbakaus/impeccable</a></td>\n</tr>\n<tr>\n<td>Licencia</td>\n<td>Apache-2.0</td>\n</tr>\n<tr>\n<td>Estado revisado</td>\n<td>67.757 estrellas; versión 4.3.1; revisión del 13 de septiembre de 2026</td>\n</tr>\n<tr>\n<td>Qué incluye</td>\n<td>1 skill, 23 comandos, iteración visual en navegador y 61 reglas deterministas</td>\n</tr>\n<tr>\n<td>Agentes</td>\n<td>Claude Code, Codex, Cursor, Copilot, Gemini CLI, Grok Build, Hermes, OpenCode y otros</td>\n</tr>\n</tbody>\n</table>\n<div class=\"mku-caja-roundup\"><p>Esta herramienta forma parte de estos recopilatorios: <a href=\"https://soymarketingultra.com/skills-claude-code-codex-agentes-codigo/\">Skills para Claude Code, Codex y otros agentes de código</a> · <a href=\"https://soymarketingultra.com/skills-diseno-agentes-ia/\">Recursos de diseño para agentes de código</a></p></div><h2 id=\"el-problema-que-resuelve\">El problema que resuelve</h2>\n<p>Paul Bakaus partió del skill <code>frontend-design</code> de Anthropic y lo convirtió en algo más operativo. No se limita a decirle al modelo “hazlo bonito”. Le da contexto persistente del producto, comandos con una intención concreta y dos tipos de control: crítica basada en el modelo y detección programática de patrones conocidos.</p>\n<figure class=\"mu-captura wp-block-image\"><a href=\"https://impeccable.style/\" target=\"_blank\" rel=\"noopener\"><img src=\"https://soymarketingultra.com/wp-content/uploads/impeccable-official-home-20260913.png\" alt=\"Web oficial de Impeccable con un comparador antes y después de una interfaz\" loading=\"lazy\" width=\"1400\" height=\"920\" style=\"max-width:100%;height:auto\"></a><figcaption>Captura propia de la <a href=\"https://impeccable.style/\" target=\"_blank\" rel=\"noopener\">web oficial de Impeccable</a>, el 13 de septiembre de 2026. El comparador muestra los patrones visuales que el proyecto intenta corregir; es una demostración del autor, no una prueba de conversión.</figcaption></figure>\n<p>Ese último matiz importa. El detector puede marcar texto gris sobre fondos coloreados, tipografías comodín, tarjetas anidadas, iconos decorativos repetidos o animaciones que hacen ruido. Lo hace sin gastar otra llamada de IA. Para un equipo de marketing que produce páginas de campaña con agentes, esto sirve como una primera barrera de calidad: reduce defectos repetibles antes de que alguien revise la propuesta.</p>\n<p>No demuestra por sí solo que una landing vaya a convertir más. Tampoco puntúa la estrategia, la oferta o la claridad del mensaje. Si el brief es mediocre, Impeccable puede dejarlo más limpio y seguir siendo mediocre.</p>\n<h2 id=\"como-se-pone-en-marcha\">Cómo se pone en marcha</h2>\n<p>La instalación recomendada por el proyecto es esta:</p>\n<pre><code class=\"language-bash\">npx impeccable install\n</code></pre>\n<p>El instalador detecta los agentes disponibles y permite elegir proveedores y alcance. Después hay que recargar el agente. En Codex, conviene abrir <code>/hooks</code> y aprobar el hook del proyecto cuando lo pida; si una actualización cambia su definición, puede pedir aprobación otra vez.</p>\n<p>El primer comando de un proyecto debería ser:</p>\n<pre><code class=\"language-text\">/impeccable init\n</code></pre>\n<p><code>init</code> inspecciona el proyecto y escribe la verdad duradera del producto en <code>PRODUCT.md</code>: audiencia, propósito, contexto, restricciones, voz y evidencia. La dirección visual queda separada en <code>DESIGN.md</code>. Es una decisión sensata: evita confundir “quién compra y por qué” con “qué estética tendrá esta página”.</p>\n<div class=\"mu-prompt-box\">\n  <div class=\"mu-prompt-bar\"><span class=\"mu-prompt-bar__icon\">&gt;_</span><span class=\"mu-prompt-bar__title\">Bloque listo para copiar al agente</span></div>\n  <div class=\"mu-prompt-body\"><p>Pégalo en <strong>Codex, Claude Code, Cursor</strong> o tu agente preferido:</p></div>\n  <div class=\"mu-prompt-code-wrap\"><pre class=\"mu-prompt-code\">Instala Impeccable en este proyecto con npx impeccable install. Ejecuta /impeccable init para fijar el contexto del producto. Después ejecuta /impeccable audit sobre la página principal y corrige los problemas encontrados sin cambiar la oferta ni inventar datos.</pre></div>\n  <div class=\"mu-prompt-foot\"><p><strong>Sin promesas falsas:</strong> el agente instala y audita; tú sigues validando la dirección.</p></div>\n</div>\n<h2 id=\"usandolo-en-marketing-real\">Usándolo en marketing real</h2>\n<p>Imagina un equipo pequeño sin diseñador interno que produce landings en Codex, Cursor o Claude Code. El flujo útil no es pulsar un botón y esperar una obra maestra. Es dividir la decisión:</p>\n<ol>\n<li><code>/impeccable shape landing</code> para ordenar la experiencia antes de escribir código.</li>\n<li><code>/impeccable critique landing</code> para revisar jerarquía, claridad y resonancia.</li>\n<li><code>/impeccable audit landing</code> para accesibilidad, responsive, rendimiento y reglas deterministas.</li>\n<li><code>/impeccable polish landing</code> para alinear el acabado con el sistema y dejarla lista para publicar.</li>\n</ol>\n<p>También hay comandos más quirúrgicos: <code>typeset</code>, <code>layout</code>, <code>colorize</code>, <code>quieter</code>, <code>bolder</code>, <code>clarify</code>, <code>harden</code> o <code>adapt</code>. La ventaja no es memorizar 23 nombres. Es poder decir qué tipo de mejora buscas sin volver a redactar un tratado de diseño en cada prompt.</p>\n<p>La versión actual añade iteración visual en navegador con <code>/impeccable live</code>. Está pensada para un servidor local de desarrollo. Para una web ya publicada, el detector por URL o la extensión de Chrome son rutas más apropiadas.</p>\n<figure class=\"mu-captura wp-block-image\"><a href=\"https://impeccable.style/live-mode/\" target=\"_blank\" rel=\"noopener\"><img src=\"https://soymarketingultra.com/wp-content/uploads/impeccable-live-mode-20260913.png\" alt=\"Interfaz oficial de Live Mode con el comando de inicio y la vista previa\" loading=\"lazy\" width=\"1400\" height=\"920\" style=\"max-width:100%;height:auto\"></a><figcaption>Captura propia de la <a href=\"https://impeccable.style/live-mode/\" target=\"_blank\" rel=\"noopener\">página oficial de Live Mode</a>, el 13 de septiembre de 2026. Muestra el comando, la selección de agente y la vista previa; documenta la interfaz del producto, no garantiza compatibilidad con cualquier proyecto.</figcaption></figure>\n<p><strong>Vídeo oficial pertinente:</strong> en esta charla de 15:59, Bakaus explica el razonamiento del sistema. La parte decisiva llega al final: una etiqueta bonita sin significado concreto sigue siendo un prompt bonito; no hay modo automático que fabrique criterio.</p>\n<p><a href=\"https://www.youtube.com/watch?v=v42opQpCy60\">Ver “Design at the Speed of Adjectives”, de Paul Bakaus en AI Engineer</a></p>\n<figure class=\"mu-video-embed\"><div class=\"mu-video-embed__frame\"><iframe src=\"https://www.youtube-nocookie.com/embed/v42opQpCy60\" title=\"Design at the Speed of Adjectives, Paul Bakaus\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe></div><figcaption>Charla oficial de Paul Bakaus en AI Engineer · 15:59 · audio en inglés.</figcaption></figure>\n<h2 id=\"lo-que-no-te-cuentan\">Lo que no te cuentan</h2>\n<p>La cifra “61 reglas” suena a red de seguridad total, pero no lo es. Detecta patrones catalogados. Un diseño nuevo puede cumplir todas las reglas y seguir teniendo una composición pobre, una promesa confusa o una personalidad prestada. Además, parte de la crítica sigue dependiendo del modelo que estés usando.</p>\n<p>El propio autor lo dice con más precisión que cualquier titular: <strong>no existe el botón automático y no pretende que exista</strong>. El gusto puede afinarse y amplificarse, pero nace del contexto, la cultura y las decisiones acumuladas. Impeccable te da palancas; todavía tienes que decidir hacia dónde moverlas.</p>\n<p>Hay otros dos límites prácticos:</p>\n<ul>\n<li>Los hooks ejecutan comprobaciones cuando el agente toca archivos de interfaz. Hay que revisar y aprobar lo que instalas, especialmente en repos compartidos.</li>\n<li>El flujo de composición visual previa necesita que tu entorno tenga generación de imagen. Sin esa capacidad, se conserva el flujo basado en código, pero no esa rama visual.</li>\n</ul>\n<h2 id=\"que-dice-la-gente\">Qué dice la gente</h2>\n<p>La búsqueda social de los últimos 30 días encontró material suficiente y variado. Estas son las publicaciones originales, no una paráfrasis escondida detrás de un enlace.</p>\n<figure class=\"mu-social-embed\"><blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">“it's never gonna be a tool that one shot design”<br><br>im on point with <a href=\"https://x.com/pbakaus\">@pbakaus</a> (builder of impeccable design tool/skill)<br><br>watch this one guys if you're design eng or not</p><footer>Aditya (@adityawaslost) · <a href=\"https://x.com/adityawaslost/status/2098792613101060456\">Ver publicación original en X</a></footer></blockquote><figcaption>Aditya destaca el límite central: Impeccable no resuelve el diseño de una sola vez. Coincide con la charla de Bakaus y con mi experiencia.</figcaption></figure>\n<p>En <a href=\"https://www.reddit.com/r/ClaudeCode/comments/1s2cgdo/what_do_you_guys_use_in_promptsskills_to_get_less/\">este hilo de Reddit</a>, un usuario cuenta que lo usa mucho para limpiar el aspecto generado por IA y recomienda empezar por <code>/audit</code>.</p>\n<figure class=\"mu-social-embed\"><blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">web design with AI is mostly solved.<br><br>not by openai, anthropic, or google.<br><br>but by a guy. i'm talking about <a href=\"https://x.com/pbakaus\">@pbakaus</a>.<br><br>i've been using his tool/skill <a href=\"https://x.com/impeccable_ai\">@impeccable_ai</a> for last couple of months. and the slop has significantly left the chat.</p><footer>@till (@tillgpt) · <a href=\"https://x.com/tillgpt/status/2089697083821326562\">Ver publicación original en X</a></footer></blockquote><figcaption>Till cuenta que lleva meses usándolo y que ha reducido de forma apreciable ese aspecto genérico de web hecha por IA.</figcaption></figure>\n<p>También aparece la postura contraria: en debates de <a href=\"https://www.reddit.com/r/ClaudeAI/comments/1vkxzef/is_claude_code_just_bad_at_design_or_am_i_doing/\">ClaudeAI</a> y <a href=\"https://www.reddit.com/r/ClaudeCode/comments/1u8c5qi/design_skills/\">ClaudeCode</a> hay usuarios que probaron skills de diseño y siguen sin ver una sustitución real del criterio humano. No contradice la propuesta de Impeccable; la coloca en su sitio.</p>\n<h2 id=\"veredicto\">Veredicto</h2>\n<p>Impeccable es de esas herramientas que mejoran el proceso precisamente porque no prometen magia. Convierte muchos fallos visuales repetibles en comprobaciones, guarda contexto que el agente suele olvidar y ofrece un lenguaje común para pedir cambios con intención.</p>\n<p>Por eso conserva el 8,8/10. Mejora mucho el resultado, cuesta cero y encaja en el trabajo real. No tiene una nota más alta porque todavía obliga a insistir demasiado para que el agente aplique bien sus reglas, especialmente cuando comparte el proyecto con otros skills.</p>\n<hr class=\"mu-faq-sep\" /><section class=\"mu-faq\"><h2>Preguntas frecuentes sobre Impeccable</h2><h3>¿Impeccable sustituye a un diseñador?</h3><p>No. Detecta patrones, estructura revisiones y ayuda al agente a tomar mejores decisiones. La estrategia, la personalidad visual y la decisión final siguen siendo humanas.</p><h3>¿Por qué a veces tengo que repetirle las órdenes?</h3><p>Porque Impeccable orienta al agente, pero no controla por completo cómo interpreta cada modelo las instrucciones. Funciona mejor cuando defines bien el contexto, pides una acción concreta y revisas el resultado, sobre todo si lo combinas con otros skills.</p><h3>¿Necesita API key o pagar otro modelo?</h3><p>El detector de 61 reglas no necesita un modelo de lenguaje ni una API key. Los comandos que piden crítica o generación usan el agente que ya tengas; el flujo de composición previa sí requiere generación de imagen.</p><h3>¿Funciona con Codex?</h3><p>Sí. El instalador soporta Codex. Tras instalarlo, abre <code>/hooks</code> y aprueba el hook del proyecto cuando lo solicite.</p><h3>¿Puede revisar una web en producción?</h3><p>El modo <code>live</code> está pensado para un servidor local. Para una URL pública, usa <code>npx impeccable detect https://tu-web.com</code> o la extensión de Chrome.</p></section>",
 "markdown_url": "https://soymarketingultra.com/diseno-web-ia-impeccable.md"
}