Frontend y UI
Border Gradients
Añade un borde degradado refinado a tarjetas, modales y superficies de hero.
Qué es
Una receta CSS para bordes degradados sutiles usando el apilado de padding-box y border-box, más una variante de pseudoelemento enmascarado para superficies con fondos complejos.
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Por qué importa para el diseño
- Da una definición de borde premium sin el brillo estridente de los bordes de neón.
- La variante enmascarada preserva un fondo existente en lugar de sobrescribirlo.
- Los valores por defecto mantienen los stops por debajo de 0.4 de opacidad, así los bordes enmarcan en vez de competir.
Qué cubre
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
Cómo instalarlo
Border Gradients
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/css-border-gradient/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Apunta a Codex a una tarjeta o un panel de precios que necesite un mejor borde.
-
Elige el patrón simple para rellenos sólidos, el enmascarado para fondos complejos.
-
Comprueba los temas claro y oscuro por separado, ya que el alpha rara vez se traslada bien.
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.