Frontend e UI
design-skills · Terracotta
Accento argilla su crema, titoli DM Serif Display, lettura long-form.
Che cos’è
Una skill di linee guida per un’interfaccia editoriale color terra: superfici crema #F3E9D8, un unico accento terracotta #C56A3C, titoli DM Serif Display, JetBrains Mono. Tarata per blog e storytelling.
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
Perché conta per il design
- Un solo colore d’accento, così l’enfasi resta rara e sono i titoli a reggere la gerarchia.
- Le calde superfici crema riducono l’abbagliamento negli articoli lunghi rispetto alle pagine bianco puro.
- I titoli serif sopra un corpo testo bruno inchiostro danno un chiaro ritmo editoriale.
Cosa copre
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Come installarlo
design-skills · Terracotta
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/terracotta/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Punta Codex sui token terracotta e crema prima che scriva qualsiasi componente.
-
Chiedi anatomia, varianti e stati per ogni componente, con i token di spaziatura nominati esplicitamente.
-
Richiedi anti-pattern e note di migrazione quando riadatti una UI esistente incoerente.
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.