Frontend & UI
design-skills · Terracotta
Terrakotta-Akzent auf Creme, DM-Serif-Display-Headlines, für Langtexte.
Worum es geht
Ein Richtlinien-Skill für ein sonnengebranntes Editorial-Interface: Creme-Flächen #F3E9D8, ein Terrakotta-Akzent #C56A3C, DM-Serif-Display-Headlines, JetBrains Mono. Abgestimmt auf Blogs und 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.
Warum das fürs Design zählt
- Nur eine Akzentfarbe, damit Betonung knapp bleibt und Headlines die Hierarchie tragen.
- Warme Creme-Flächen mindern das Blenden in langen Artikeln gegenüber reinweißen Seiten.
- Display-Serif-Headlines über tintenbraunem Fließtext setzen einen klaren Editorial-Rhythmus.
Was es abdeckt
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
So installierst du es
design-skills · Terracotta
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/terracotta/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Verweise Codex auf die Terrakotta- und Creme-Tokens, bevor er eine Komponente schreibt.
-
Verlange Anatomie, Varianten und States pro Komponente, mit explizit benannten Spacing-Tokens.
-
Verlange Anti-Patterns und Migrationshinweise, wenn du bestehende inkonsistente UI nachrüstest.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.