Frontend e UI
design-skills · Brutalism
Layout ispirati al cemento grezzo, titoli Darker Grotesque, rosso e ocra.
Che cos’è
Una skill di linee guida per UI brutalista, ispirata all’architettura in cemento grezzo degli anni ’50: spoglia, funzionale, volutamente stridente. Titoli Darker Grotesque, rosso #DD614C e ocra #DAA144 su bianco.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Perché conta per il design
- Elementi marcati e spogli eliminano la decorazione, così a reggere il peso sono struttura e testo.
- Due accenti forti, rosso e ocra, sostituiscono del tutto gradienti e ombre.
- L’asticella minima di accessibilità vale comunque, così i layout stridenti mantengono contrasto e focus visibile.
Cosa copre
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
Come installarlo
design-skills · Brutalism
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/brutalism/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Comunica a Codex che il tono è marcato e spoglio prima che scelga i componenti.
-
Ancora ogni regola a un token o a una soglia, come richiedono i controlli di qualità.
-
Abbina a ogni regola di cosa fare un esempio concreto di cosa non fare quando rivedi l’output.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.