Frontend e UI
design-skills · Editorial
Layout da rivista in serif Gelasio su una rigida griglia da 8pt.
Che cos’è
Una skill di linee guida di design system per un look editoriale moderno: serif Gelasio sia per il corpo che per i titoli, Ubuntu Mono, quasi nero #111111 su superfici bianche e una griglia di base da 8pt.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Perché conta per il design
- Titoli e corpo serif da un’unica famiglia mantengono i lunghi passaggi di lettura coerenti sul piano tipografico.
- Una griglia di base da 8pt impone un ritmo verticale tra titoli, corpo del testo e spaziatura.
- L’asticella di accessibilità include supporto reduced-motion, target touch da 44px e gestione dell’alto contrasto.
Cosa copre
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
Come installarlo
design-skills · Editorial
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/editorial/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi a Codex di riformulare l’intento di design, poi definisci i token prima di toccare i componenti.
-
Richiedi regole di componente che coprano anatomia, varianti, stati e comportamento responsive.
-
Chiudi con la checklist di QA così un revisore del codice può verificare 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.