Frontend & Arayüz
design-skills · Terracotta
Krem üzerine kil vurgusu, DM Serif Display başlıklar, uzun biçimli okuma.
Nedir
Güneşte pişmiş bir editoryal arayüz için bir kılavuz skill’i: krem #F3E9D8 yüzeyler, tek bir terracotta #C56A3C vurgu, DM Serif Display başlıklar, JetBrains Mono. Bloglar ve hikâye anlatımı için ayarlanmış.
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.
Tasarım için neden önemli
- Yalnızca tek bir vurgu rengi; böylece vurgu az kalır ve hiyerarşiyi başlıklar taşır.
- Sıcak krem yüzeyler, saf beyaz sayfalara kıyasla uzun makalelerde parlamayı azaltır.
- Mürekkep kahvesi gövde metni üzerindeki serif başlıklar, net bir editoryal ritim kurar.
Neleri kapsıyor
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Nasıl kurulur
design-skills · Terracotta
-
Depoyu klonlayın.
git clone https://github.com/bergside/awesome-design-skills -
Codex’i skill dosyasına yönlendirin.
skills/terracotta/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Herhangi bir bileşen yazmadan önce Codex’i terracotta ve krem token’larına yönlendirin.
-
Bileşen başına anatomi, varyantlar ve durumları, boşluk token’ları açıkça adlandırılmış olarak isteyin.
-
Var olan tutarsız arayüzü yenilerken anti-desenleri ve geçiş notlarını isteyin.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.