Frontend y UI
Skeuomorphic UI
Da a botones y paneles profundidad táctil con degradados y sombras en capas.
Qué es
Una receta de superficie para UI web táctil: rellenos de degradado vertical, un borde de degradado reflectante de 1px, sombras exteriores e inset apiladas. El texto en relieve, los iconos y la microtextura son opcionales.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Por qué importa para el diseño
- Los estados elevado y pulsado invierten la profundidad, así los controles se leen como físicos.
- La profundidad se mantiene direccional, con luz desde arriba y sombra debajo.
- Advierte contra mezclar glassmorphism, neumorphism y skeuomorphism en un mismo componente.
Qué cubre
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Cómo instalarlo
Skeuomorphic UI
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Fija los tokens base una vez, y luego ajústalos por marca y tema.
-
Aplica la superficie elevada a tarjetas, botones, pestañas y carcasas de control.
-
Añade la variante pulsada solo para toggles activos y pestañas seleccionadas.
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.