Frontend y UI
Impeccable
Dos docenas de comandos para construir, criticar y refinar interfaces frontend.
Qué es
Una skill de diseño frontend con comandos agrupados en build, evaluate, refine, enhance, fix e iterate. Lee el contexto del proyecto y una referencia de registro, y luego escribe código de nivel de producción.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Por qué importa para el diseño
- La división por registro lleva las páginas de marketing y la UI de producto por reglas de diseño distintas.
- Las prohibiciones absolutas rechazan el texto con degradado, los bordes de raya lateral y las etiquetas eyebrow encima de cada sección.
- Los mínimos de contraste son explícitos: 4.5:1 para el cuerpo de texto, 3:1 para el texto grande.
Qué cubre
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
Cómo instalarlo
Impeccable
-
Clona el repositorio.
git clone https://github.com/pbakaus/impeccable -
Señálale a Codex el archivo de la skill.
plugin/skills/impeccable/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Ejecuta context.mjs una vez por sesión para que la skill cargue PRODUCT.md y DESIGN.md.
-
Invoca un comando como critique, polish o animate con un archivo de destino.
-
Usa el modo live con un servidor de desarrollo en marcha para generar variantes en el navegador.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.