Frontend y UI
design-skills · Brutalism
Maquetaciones inspiradas en hormigón visto, display Darker Grotesque, rojo y ocre.
Qué es
Una skill de guía para UI brutalista extraída de la arquitectura de hormigón visto de los años 50: sin adornos, funcional, deliberadamente chocante. Tipo de display Darker Grotesque, rojo #DD614C y ocre #DAA144 sobre blanco.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Por qué importa para el diseño
- Los elementos contundentes y sin adornos prescinden de la decoración, así la estructura y el texto llevan el peso.
- Dos acentos fuertes, rojo y ocre, sustituyen por completo los degradados y las sombras.
- El mínimo de accesibilidad sigue aplicándose, así las maquetaciones chocantes conservan contraste y foco visible.
Qué cubre
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
Cómo instalarlo
design-skills · Brutalism
-
Clona el repositorio.
git clone https://github.com/bergside/awesome-design-skills -
Señálale a Codex el archivo de la skill.
skills/brutalism/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Dile a Codex que el tono es contundente y sin adornos antes de que elija componentes.
-
Ancla cada regla a un token o un umbral, como exigen las puertas de calidad.
-
Empareja cada regla de qué hacer con un ejemplo concreto de qué no hacer al revisar el resultado.
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.