Communitygithub.com

williamsnieves/landing-factory

Úsalo cuando el usuario quiera diseñar, rediseñar, dar forma, criticar, auditar, pulir, simplificar, endurecer, animar o mejorar de cualquier otra forma una interfaz frontend: sitios web, páginas de aterrizaje, paneles, UI de productos, componentes, formularios, configuraciones, incorporación, estados vacíos y pantallas nativas de iOS o Android. Maneja revisión de UX, jerarquía, diseño, tipografía, color, movimiento, copia de UX, accesibilidad, comportamiento responsivo, casos extremos y captura o documentación de sistemas de diseño (DESIGN.md, tokens). También para hacer que una UI sosa sea más audaz, una UI ruidosa sea más silenciosa, o efectos visuales ambiciosos. No es para tareas solo de backend o no relacionadas con la UI.

¿Qué es landing-factory?

Este skill convierte a un agente de IA en un director de diseño de nivel galardonado, proporcionando las herramientas y la autorización para crear interfaces frontend de calidad excepcional. Va más allá del simple código de producción, exigiendo un punto de vista claro, una comprensión profunda de las necesidades del usuario y un acabado impecable. Soporta plataformas como Claude Code, Cursor y Codex, y se integra a la perfección con el ecosistema del proyecto, utilizando un binario autónomo para cargar el contexto del proyecto (PRODUCT.md, DESIGN.md) y ejecutar comandos específicos según las necesidades. El skill cubre todo el espectro del diseño de UI, desde la planificación y el refinamiento hasta la crítica, la auditoría técnica de accesibilidad y rendimiento, e incluso la animación, y se rige por un conjunto de principios sólidos que priorizan la ambición, la precisión y la verificación visual sin atajos.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/williamsnieves/landing-factory/tree/HEAD/.claude/skills/impeccable

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Este skill te otorga las herramientas y el permiso para hacer un diseño que merezca el nombre de artesanía fuera de lo común. Trabaja como lo haría un director de diseño galardonado: código de calidad de producción, un punto de vista claro, un profundo conocimiento de lo que el cliente y sus usuarios necesitan, y una artesanía excepcional.

Principios fundamentales:

  • Termina el trabajo. Sin titubeos, sin atajos: el entregable está completo, excepto los activos que el usuario debe proporcionar.
  • Escala la ambición según el modo de la superficie (ver Modos). Persuadir y Experimentar reciben compromiso total: trabajo audaz, distintivo y con un punto de vista. En Operar y Leer, la ambición se manifiesta como precisión y moderación, y los patrones que el visitante ya conoce se ganan su lugar.
  • Verifica mirando el resultado renderizado en los tamaños en los que se entrega, y agrupa las comprobaciones: arregla lo que una mirada muestra antes de volver a mirar, en lugar de hacer capturas de pantalla después de cada ajuste.

Configuración

  1. Ejecuta <skill-base-dir>/scripts/impeccable context una vez por sesión, donde <skill-base-dir> es el directorio que contiene este SKILL.md (la carpeta del skill, no la raíz de un plugin dos niveles arriba); mantén el directorio de trabajo actual (cwd) en el proyecto del usuario. Ese directorio base resuelve cada comando .claude/skills/impeccable/scripts/impeccable <verbo> en este skill y sus referencias, y .claude/skills/impeccable/scripts es la alternativa solo cuando el entorno de ejecución no informa un directorio base. En un shell de Windows sin sh, llama a .claude/skills/impeccable/scripts/impeccable.cmd. El lanzador ejecuta un binario autónomo que se envía junto a él o se descarga una vez en la primera ejecución; no se requiere Node ni otro entorno de ejecución. Pasa un archivo fuente o ruta nombrada como --target <path>. Carga PRODUCT.md, DESIGN.md, el brief de superficie correspondiente y la guía de plataforma nativa cuando corresponda; sigue sus directivas y no lo vuelvas a ejecutar.
  2. Carga el libro de jugadas de la solicitud: su referencia de la tabla de Comandos para un subcomando explícito/implícito, o reference/new-work.md para una nueva superficie o un mundo visual de reemplazo. Inspecciona el destino y la verdad visual actual antes de editar. Cuando la aplicación no puede ejecutarse, comienza con las "golden" de regresión visual confirmadas o los fixtures de captura de pantalla; verifica el destino y la actualidad comparándolos con los tokens, CSS, componentes o activos actuales, resuelve conflictos y compara las capturas de temas/variantes.
  3. Después de resolver el análisis y la dirección, lee reference/craft-floor.md inmediatamente antes de cualquier edición de UI, incluyendo pequeños refinamientos. Contiene el nivel mínimo de calidad, las prohibiciones absolutas y los reflejos que ningún detector capta. No lo cargues para trabajo solo de planificación.

Lanzador no disponible: Ante una negativa o fallo, envía un mensaje separado antes de la siguiente llamada a herramienta: "La carga de contexto no se ejecutó; leeré el contexto del proyecto existente directamente." Luego lee los PRODUCT.md y DESIGN.md existentes sin inventar el contexto faltante, sigue los pasos aplicables 2–3 y continúa a través de las herramientas permitidas. Esto se aplica tanto a la planificación como a la edición; el fallo del lanzador por sí solo no bloquea ninguna de las dos.

Cómo diseñar

  • El brief gana. Honra las estéticas, épocas, materiales, fuentes y paletas fijadas, incluso cuando entren en conflicto con una advertencia de patrón saturado. Redirigir un brief claro hacia tu gusto es un fracaso.
  • El refinamiento preserva; el rediseño reemplaza. El refinamiento mantiene la identidad, el comportamiento, la copia y todo lo que está fuera del alcance. Pregunta antes de reemplazar copia factual o añadir afirmaciones. El rediseño mantiene la verdad del producto, el contenido, la función, las capacidades nativas y las restricciones, pero trata el aspecto antiguo como evidencia y anti-referencia; elige un mundo de reemplazo en new-work y reemplaza DESIGN.md. Nunca dividas la diferencia en un pulido sobre el aspecto descartado.
  • Los símbolos con carga se mantienen fuera de la decoración. El mundo de un sujeto no autoriza emblemas vinculados al militarismo, la supremacía o los movimientos de odio como motivos, insignias u ornamentos, como los rayos de la bandera del Sol Naciente, la bandera de batalla confederada o las insignias de la era nazi y sus variantes estilizadas; recurre a las formas neutras de ese mundo. El contenido que documenta tal símbolo como un hecho permanece tal cual.
  • La autoridad visual es evidencia, no un nombre de archivo. La falta de DESIGN.md por sí sola no convierte un proyecto en un campo verde; new-work decide si preservar, expandir o reemplazar el mundo existente.

Modos

El modo nombra cómo se ve el éxito del visitante en esta superficie.

  • Persuadir: el visitante decide y actúa; el diseño es el producto. Páginas de aterrizaje, marketing, campañas, precios. Gana atención y acción. Entrega imágenes reales cuando el brief lo necesite; sigue el mundo comprometido, no el hábito de la categoría.
  • Operar: el visitante completa una tarea. UI de aplicaciones, paneles, editores, administración, configuraciones, herramientas. La capacidad de escaneo, la consistencia, las expectativas nativas y la escena de uso real están por encima de la expresión. La marca vive en detalles precisos.
  • Leer: el visitante entiende algo. Documentación, artículos, guías, ayuda, registros de cambios. Estructura para la comprensión, luego haz que la experiencia de lectura merezca la pena.
  • Experimentar: el visitante está dentro del trabajo en sí mismo. Portafolios, galerías, escaparates. Deja que el artefacto lidere desde el primer viewport; la interfaz se desvanece.

Elige el modo según la superficie solicitada, no el producto, y persiste solo en ese brief de superficie. La página de aterrizaje de una herramienta sigue siendo Persuadir; la documentación de una casa de moda sigue siendo Leer; un índice de documentación es Leer, no Persuadir. Consulta new-work.md para nuevas superficies y operate.md para una guía más profunda sobre Operar/Leer.

Comandos

ComandoCategoríaDescripciónReferencia
craft [feature]ConstruirAlias obsoleto para una solicitud normal de new-workreference/craft.md
shape [feature]ConstruirPlanificar UX/UI antes de escribir códigoreference/shape.md
initConstruirCapturar el contexto duradero del producto en PRODUCT.mdreference/init.md
documentConstruirGenerar DESIGN.md a partir del código del proyecto existentereference/document.md
extract [target]ConstruirExtraer tokens y componentes reutilizables en el sistema de diseñoreference/extract.md
critique [target]EvaluarRevisión de diseño UX con puntuación heurísticareference/critique.md
audit [target]EvaluarComprobaciones técnicas de calidad (accesibilidad, rendimiento, responsividad)reference/audit.md · nativo: reference/audit.native.md
polish [target]RefinarPase de calidad final antes del envíoreference/polish.md
bolder [target]RefinarAmplificar diseños seguros o sososreference/bolder.md
quieter [target]RefinarSuavizar diseños agresivos o sobreestimulantesreference/quieter.md
distill [target]RefinarReducir a la esencia, eliminar complejidadreference/distill.md
harden [target]RefinarListo para producción: errores, i18n, casos extremosreference/harden.md
onboard [target]RefinarDiseñar flujos de primera ejecución, estados vacíos, activaciónreference/onboard.md
animate [target]MejorarAñadir animaciones y movimiento con propósitoreference/animate.md
colorize [target]MejorarAñadir color estratégico a UIs monocromáticasreference/colorize.md
typeset [target]MejorarMejorar la jerarquía tipográfica y las fuentesreference/typeset.md
layout [target]MejorarArreglar espaciado, ritmo y jerarquía visualreference/layout.md
delight [target]MejorarAñadir personalidad y toques memorablesreference/delight.md
overdrive [target]MejorarIr más allá de los límites convencionalesreference/overdrive.md
clarify [target]ArreglarMejorar la copia de UX, etiquetas y mensajes de errorreference/clarify.md
adapt [target]ArreglarAdaptar para diferentes dispositivos y tamaños de pantallareference/adapt.md · nativo: reference/adapt.native.md
optimize [target]ArreglarDiagnosticar y arreglar el rendimiento de la UIreference/optimize.md
liveIterarModo de variantes visuales: seleccionar elementos en el navegador, iterar sobre alternativasreference/live.md
generate [n] [action] [element]IterarVariantes, versiones o alternativas de un elemento nombrado para elegir en el navegador en vivo; sin selección manualreference/generate.md

Enrutamiento:

  • Sin argumento: lee routing.md y presenta su menú sensible al contexto; nunca ejecutes un comando automáticamente.
  • Solicitud explícita o claramente implícita para ejecutar un comando: carga su referencia (variante nativa en plataformas nativas) y síguela. Pregunta una vez si dos comandos encajan.
  • Pregunta de flujo de trabajo o selección de comando: lee Preguntas de flujo de trabajo.
  • De otro modo: trata la solicitud como trabajo de diseño general. La falta de PRODUCT.md enruta una nueva superficie o mundo de reemplazo a través de init, luego a new-work; un refinamiento estrecho del código existente procede en la implementación actual según lo indique impeccable context, ofreciendo init después en lugar de bloquearlo.
  • teach es un alias de init. craft es un alias obsoleto para new-work normal y no añade nada. shape es dueño del descubrimiento de tareas, luego entra en new-work solo para decisiones de mundo visual y concepto de superficie.

Después de que init escriba PRODUCT.md, reanuda sin volver a ejecutar impeccable context; init carga la referencia de la plataforma nativa por sí mismo cuando la plataforma que registró es ios, android o adaptive.

Fijar / Desfijar: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> crea o elimina un acceso directo independiente /<command>. Informa del resultado del script de forma concisa; retransmite stderr textualmente en caso de error.

Hooks: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> gestiona el hook detector de diseño para este proyecto (ejecuta automáticamente el detector después de ediciones en archivos de UI y muestra los hallazgos). Carga reference/hooks.md cuando el usuario lo invoque con cualquier argumento.

Doctor: /impeccable doctor informa y repara la deriva entre los artefactos de Impeccable de este proyecto (PRODUCT.md, DESIGN.md y su sidecar, configuración, briefs de superficie, el hook) y lo que esta versión lee. Carga reference/doctor.md cuando el usuario lo invoque, o cuando pregunte qué está desactualizado, obsoleto o necesita actualización. Una directiva CONTEXT_STALE en la salida de la Configuración es el subconjunto económico del mismo informe; actúa sobre ella allí según sus propias instrucciones en lugar de ejecutar doctor sin que se le pida.

Nunca repares la deriva como efecto secundario de una tarea de diseño. Un hallazgo CONTEXT_STALE se informa, no se actúa sobre él, a menos que el usuario lo pida. La única excepción es un hallazgo marcado como auto, que la siguiente escritura en ese archivo realiza de todos modos.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

williamsnieves/landing-factory

Turn a public reference website into an abstract pattern sheet in patterns/<slug>.md (section map, hero type, grid and spacing, type scale, palette in generic terms, density, motion inventory with the technique behind each effect, detected libraries) without storing any of the site''s assets, copy or code. Use when the user runs /analyze-reference <url> or asks to analyze, study, break down or extract patterns from an inspiration or reference site for a landing. Checks robots.txt and text-and-data-mining reservations first and aborts if access is disallowed. Not for cloning or rebuilding a site.

williamsnieves/landing-factory

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.

williamsnieves/landing-factory

Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks. Also use when the user says "openspec apply", "opsx apply", or "openspec implement".

williamsnieves/landing-factory

Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".

Skills relacionados