Frontend y UI
design-skills · Neumorphism
Superficies extruidas suaves en gris piedra con tipografía Space Mono.
Qué es
Una skill de guía para UI neumórfica: sombras interiores y exteriores sobre una superficie monocroma gris piedra #E7E5E4, un acento verde azulado #006666, Space Mono para display y cuerpo, espaciado de densidad compacta.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Por qué importa para el diseño
- Las superficies monocromas hacen que la profundidad venga de la sombra y no del contraste de color.
- El espaciado de densidad compacta encaja con paneles cargados de controles como dashboards y pantallas de ajustes.
- Las reglas prohíben mezclar metáforas visuales, así la extrusión suave se mantiene como único lenguaje de profundidad.
Qué cubre
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Cómo instalarlo
design-skills · Neumorphism
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/neumorphism/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Haz que Codex fije los tokens de superficie y sombra antes de dar estilo a cualquier control individual.
-
Pide estados de foco visibles, ya que las sombras suaves por sí solas fallan a los usuarios de teclado.
-
Exige HTML semántico antes que ARIA, como especifica esta skill.
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.