Frontend e UI
design-skills · Claymorphism
Forme 3D gonfie e arrotondate, titoli Poppins, blu su bianco.
Che cos’è
Una skill di linee guida per UI claymorfica: forme morbide, arrotondate e gonfie che imitano l’argilla malleabile. Titoli Poppins, corpo Montserrat, un accento blu #3B82F6 e testo blu profondo su bianco.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Perché conta per il design
- Le forme gonfie e arrotondate danno ai bottoni un’ovvia affordance premibile senza etichette in più.
- Il testo blu profondo #1C398E su bianco regge il contrasto mentre la palette resta giocosa.
- Le regole vietano di mescolare metafore, così la profondità argilla non si combina mai con vetro o flat.
Cosa copre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Come installarlo
design-skills · Claymorphism
-
Clona il repository.
git clone https://github.com/bergside/awesome-design-skills -
Punta Codex sul file della skill.
skills/claymorphism/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi prima a Codex i token di raggio e ombra, dato che definiscono il look argilla.
-
Abbina i titoli Poppins al corpo Montserrat come specificato, non due sans simili.
-
Controlla che gli stati focus-visible e disabled sopravvivano al trattamento a forme morbide.
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.