Frontend y UI
Details that make interfaces feel better
Dieciséis reglas concretas de acabado de UI con una lista de revisión.
Qué es
Un conjunto de principios de ingeniería de diseño para el acabado de interfaz: radios concéntricos, alineación óptica, sombras en capas, animaciones de entrada escalonadas, números tabulares, áreas de pulsación y especificidad de transición.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Por qué importa para el diseño
- Nombra valores exactos, así la escala al pulsar es siempre 0.96, nunca al tanteo.
- Corrige el desajuste de radios anidados que hace que la mayoría de componentes se vean raros.
- Caza el salto de maquetación por números cambiantes antes de que llegue a los usuarios.
Qué cubre
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Cómo instalarlo
Details that make interfaces feel better
-
Clona el repositorio.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Señálale a Codex el archivo de la skill.
skills/make-interfaces-feel-better/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Apunta a Codex a un componente y pídele que aplique los principios.
-
Pide una revisión; los hallazgos vuelven como tablas de Antes y Después.
-
Ejecuta la lista de catorce puntos antes de fusionar cualquier cambio de frontend.
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.