Frontend y UI
design-skills · Claymorphism
Formas 3D redondeadas y mullidas, titulares en Poppins, azul sobre blanco.
Qué es
Una skill de guía para UI claymórfica: formas suaves, redondeadas y mullidas que imitan la arcilla maleable. Display en Poppins, cuerpo en Montserrat, un acento azul #3B82F6 y texto azul intenso sobre blanco.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Por qué importa para el diseño
- Las formas redondeadas y mullidas dan a los botones una evidente sensación de pulsable sin etiquetas extra.
- El texto azul intenso #1C398E sobre blanco mantiene el contraste mientras la paleta sigue siendo desenfadada.
- Las reglas prohíben mezclar metáforas, así la profundidad de arcilla nunca se combina con glass ni con flat.
Qué cubre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Cómo instalarlo
design-skills · Claymorphism
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/claymorphism/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pídele a Codex primero los tokens de radio y sombra, ya que definen el look de arcilla.
-
Empareja el display Poppins con el cuerpo Montserrat como se especifica, no dos tipos sans parecidos.
-
Comprueba que los estados focus-visible y disabled sobreviven al tratamiento de formas suaves.
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.