Qué es flawless-ui-ux?
flawless-ui-ux es una habilidad de diseño UI/UX y una CLI de inspección local para asistentes de codificación. Ayuda a los agentes a crear, rediseñar, refinar y revisar interfaces en torno a la audiencia, el contenido y la identidad del producto.
La habilidad guía decisiones sobre diseño, tipografía, color e interacción para interfaces web, móviles nativas y de escritorio. La CLI inspecciona archivos fuente seleccionados e interfaces del navegador, proporcionando observaciones que el agente puede usar para encontrar problemas y verificar correcciones. Tú describes la tarea; tu asistente de codificación aplica la guía en tu proyecto existente.
Sin habilidad vs. con habilidad
Creado en Codex con GPT 6.1 Sol (bajo), luego refinado con flawless-ui-ux usando el mismo modelo y configuración de razonamiento.
Instalación
Desde el directorio de tu proyecto, ejecuta un comando con tu gestor de paquetes preferido:
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
Requiere Node 22.12+. En una terminal, elige ámbito de proyecto o global, selecciona uno o más agentes, y confirma los destinos antes de copiar. Usa Espacio para seleccionar y Enter para continuar. Ctrl+C cancela antes de que se escriban los archivos de instalación.
Las banderas explícitas se ejecutan directamente:
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes omite el menú y usa los valores predeterminados cuando no se proporcionan otras banderas: todos los agentes compatibles en el proyecto actual. La salida JSON, CI y la ejecución en terminal no interactiva permanecen sin interacción. Usa --format json para una salida legible por máquina.
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
Esto instala la habilidad a través de Skills CLI. Sus requisitos de tiempo de ejecución y selección de agente siguen a ese instalador. La CLI de inspección está disponible por separado a través de los comandos npm en esta guía.
bash /ruta/absoluta/flawless-ui-ux/install.sh --codex --project
La alternativa Bash requiere --project para la instalación local; su valor predeterminado es global. Los usuarios de Windows necesitan Git Bash o WSL.
Usar la habilidad
Describe la interfaz que necesitas y nombra la habilidad:
Usa la habilidad flawless-ui-ux para construir un tablero financiero para freelancers.
En Codex, invoca $flawless-ui-ux. Los anfitriones con comandos de barra usan /flawless-ui-ux; Pi usa /skill:flawless-ui-ux. También puedes solicitar la habilidad por nombre a través del mecanismo de habilidades de tu anfitrión. Inicia una nueva sesión después de la instalación si el descubrimiento necesita actualizarse.
Continúa en la misma conversación a medida que se desarrolla la interfaz:
| Tarea | Solicitud de ejemplo |
|---|---|
| Crear | Construye una página de aterrizaje para una aplicación que coordina despliegues y traspasos de incidentes. |
| Rediseñar | Rediseña esta pantalla de cuenta para móvil usando la paleta de marca proporcionada. Conserva su contenido y comportamiento. |
| Refinar | Dale más presencia a la acción principal mientras conservas el carácter visual de la página. |
| Enfocar | Mejora la tipografía y el espaciado. Conserva el texto, los colores y la funcionalidad. |
| Revisar | Revisa este tablero en cuanto a legibilidad, navegación, accesibilidad y patrones genéricos repetidos. Reporta hallazgos sin editar archivos. |
Cómo funciona
La habilidad guía el diseño y la implementación. Conecta el contexto del producto con la composición, tipografía, color, densidad, imágenes e interacción. Las referencias enfocadas apoyan la creación, rediseño, refinamiento y revisión en tu pila tecnológica existente.
Para interfaces nuevas y rediseños amplios, el agente considera al menos tres composiciones significativamente diferentes internamente antes de la implementación, luego elige un enfoque para el producto y la tarea. Los refinamientos enfocados preservan el alcance autorizado y las decisiones establecidas.
La guía de diseño se aplica a interfaces web, móviles nativas y de escritorio. Las comprobaciones renderizadas de la CLI cubren interfaces de navegador; la verificación nativa utiliza las herramientas de plataforma y proyecto apropiadas.
El refinamiento desarrolla el carácter previsto. Una interfaz puede necesitar más presencia, menos énfasis competitivo o un acabado más consistente. La intervención correcta depende del contenido y la tarea. El texto genérico, la decoración repetitiva y los patrones familiares se revisan en contexto, junto con la usabilidad y la accesibilidad.
La CLI verifica la implementación. Recopila contexto del proyecto, inspecciona archivos fuente seleccionados o una interfaz en ejecución, y compara el resultado después de las correcciones. Tu agente realiza los cambios; la CLI proporciona observaciones y registra lo que realmente se verificó.
Contexto del producto y flujos de trabajo
Mantén los hechos del producto y las decisiones de diseño en tus documentos Markdown existentes. El agente los reutiliza entre tareas; los archivos de contexto son opcionales. Usa context --source docs/brief.md para seleccionar un documento fuera de las ubicaciones convencionales.
Para preparar registros faltantes, ejecuta:
npx flawless-ui-ux init
La CLI crea plantillas Markdown de producto/diseño o reutiliza documentos existentes compatibles, preservando su contenido. Tu agente completa los registros a partir del proyecto y tus decisiones. Lée los más tarde con context; la inicialización no genera un resumen ni elige un estilo visual.
Inspecciona pantallas relacionadas con entradas --url repetidas y --consistency para un inventario de estilos contextual. Agrega --flow flows/edit-member.json para ejercitar acciones de UI definidas explícitamente, expectativas y estados nombrados en un entorno de prueba permitido. La verificación requiere que el archivo de flujo sin cambios sea seleccionado nuevamente. Consulta ejemplos y límites de flujos de trabajo.
Inspeccionar y verificar
Usa la CLI directamente, o pide a tu agente que incluya estas comprobaciones en su trabajo. Reemplaza npx con pnpm dlx o bunx en todas partes.
Comenzar con contexto y fuente
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
Verificar la interfaz en ejecución
Inicia tu aplicación y prepara el navegador una vez:
npx [email protected] install chromium
# o: pnpm dlx [email protected] install chromium
# o: bunx [email protected] install chromium
Inspecciona la URL real del servidor de desarrollo y guarda una línea base:
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
Después de las correcciones, repite el alcance guardado:
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
La comparación separa hallazgos persistentes, nuevos y ya no observados. Los objetivos confirmados faltantes y las condiciones cambiadas permanecen sin verificar.
| Área | Evidencia recopilada |
|---|---|
| Accesibilidad | Reglas seleccionadas de contraste axe y nombres accesibles, incluyendo resultados incompletos para revisión |
| Texto y diseño | Tamaños de fuente calculados y desbordamiento horizontal en los anchos muestreados |
| Activos y tiempo de ejecución | Imágenes rotas visibles y errores de la consola del navegador |
...