98.8K+İndir
Kullanım kılavuzuna geç
penpot-uiux-designyazan GitHub

Penpot UI/UX Design Skill.

Claude Code ve Codex için UI tasarım skill'i: Penpot'ta MCP araçları aracılığıyla profesyonel UI/UX tasarımı, bileşenler ve tasarım sistemleri.

  • Web & UI
  • Tasarım dosyası
OpenDesign İndirKullanım kılavuzunu görüntüle
github/awesome-copilot · skills/penpot-uiux-design/SKILL.mdSKILL.md
--- name: penpot-uiux-design description: Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material … --- ## Available MCP Tools ## MCP Server Setup ## Core Design Principles ## Design Workflow ## Design System Handling ## Key Penpot API Gotchas
Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 12.103 karakter

01 Ne yapar

penpot-uiux-design Skill Claude Code ve Codex İçinde Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

penpot/penpot-mcp sunucusu üzerinden Penpot'ta gerçek arayüzler tasarlamak için, ajanı Penpot eklenti API'sini yöneten tasarımcılar ve geliştiriciler için yazılmış bir kılavuz. Genel tavsiyeler vermek yerine, çalışan bir sıra belirtir: MCP sunucusunun zaten çalışıp çalışmadığını kontrol et, dosyanın mevcut renklerini, metin stillerini ve bileşenlerini keşfet, penpotUtils.shapeStructure ile hiyerarşiyi incele, ardından board'lar, dikdörtgenler ve metin oluştur ve addFlexLayout kapsayıcılarını uygula.

Yedek 8px boşluk ve tipografi ölçeklerini, 375x812 mobil ve 1440x900 gösterge paneli düzenini, butonlar, formlar ve gezinme için kontrol listelerini, WCAG kontrast ve dokunma hedefi sınırlarını, board yerleşim boşluğunu, salt okunur genişlik ve yükseklik gibi Penpot API tuzaklarını ve analyzeDescendants, fontSize filtreleme ve export_shape üzerinden doğrulamayı sağlar.

Neler üretir

  • Eklenti bağlamında çalıştırılan JavaScript ile oluşturulan yeni veya değiştirilmiş Penpot tasarımları.
  • Seçili şekillerin PNG veya SVG çıktıları; tasarımı tahmin etmek yerine bakmak için kullanılır.
  • Devir teslim için bir seçimden, alt öğeler dahil, çıkarılan CSS.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Sunucunun Çalıştığını Doğrulayın

    İlk adım penpot_api_info'ya deneme çağrısı yapmaktır, böylece bağlantı zaten çalışıyorken kimse kurulum adımlarından geçirilmez.

  2. 02
    Mevcut Tasarım Sistemini Bulun

    Çizime başlamadan önce marka kılavuzlarını sorar ve mevcut dosyayı zaten kullanılan bileşenler, renkler ve desenler açısından okur.

  3. 03
    Sayfa Yapısını İnceleyin

    shapeStructure, yeni öğelerin tuval üzerinde zaten var olanlara göre yerleştirilebilmesi için mevcut hiyerarşiyi döndürür.

  4. 04
    Öğeleri Oluşturun

    Board'lar, dikdörtgenler ve metin, düz metinle anlatılmak yerine Penpot eklenti bağlamında eklenti çağrılarıyla oluşturulur.

  5. 05
    Dışa Aktararak Doğrulayın

    Her değişiklik bir dışa aktarma ile sona erer, böylece sonuç sadece koddan güvenilmek yerine bir görüntü olarak incelenir.

02 Uyumunuzu bulun

penpot-uiux-design Skill Ne Zaman Kullanılır

Bu tür bir UI tasarımı işi söz konusu olduğunda Claude Code veya Codex'te penpot-uiux-design becerisini kullanın. Uygunluk ve sınırlar aşağıda becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • Yeni bir web, mobil veya masaüstü arayüzüne başlayıp bunun gerçek bir Penpot dosyası olarak oluşturulmasını isteyen biri.
  • Tüm ürünün yeniden kullanacağı bir bileşen kitaplığı ve tasarım token'ları kurmak.
  • Gösterge panelleri, formlar, gezinme ve açılış sayfaları gibi yaygın ürün ekranları üretmek.
  • Baştan başlamak yerine, zaten var olan bir Penpot dosyasını denetlemek veya iyileştirmek.
  • iOS, Android veya Material Design kurallarına uyması gereken çalışmalar.

Sınırları Bilin

  • Kendi başına çalışamaz: yerel MCP sunucusu çalışır durumda olmalı ve Penpot eklenti arayüzü bağlı olarak görünmelidir, aksi halde çağrılar başarısız olur veya zaman aşımına uğrar.
  • Bu, penpot-mcp sunucusu üzerinden oluşturulan Penpot tasarımlarıyla sınırlıdır, diğer tasarım araçlarıyla değil.
  • Kontrol listelerini geçmek, tasarımın işe yaradığını kanıtlamakla aynı şey değildir; dosya yine de varsayımlarınızı gerçek kullanıcılarla test etmenizi ister.

Ne Sağlamalısınız

  • Elinizde varsa mevcut tasarım sistemi veya marka kılavuzlarıAjana token'larınızı ve spesifikasyonlarınızı bildirin veya çizmeye başlamadan önce bunları mevcut dosyadan keşfetmesine izin verin.
  • Simgeler, fotoğraflar veya logolarGörsel varlıklar, görsel içe aktarma aracı üzerinden tasarıma çekilir.

03 Skill'in içinde

penpot-uiux-design Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Herhangi Bir Şey Kurmadan Önce Sunucuyu Kontrol Edin

    Önce bir araç çağrısı deneyin ve kullanıcı sunucunun kurulu olmadığını onaylayana kadar kurulum sürecine girmeyin.

  2. Bir Panoyu Asla Başka Bir Panonun Üzerine Çizmeyin

    Yeni bir pano oluşturmadan önce mevcut panoları listeleyin ve yeni panoyu, aynı akıştaki ekranlar arasında 100px, farklı bölümler arasında 200px+ boşluk bırakarak en sağdaki kenarın ötesine yerleştirin.

  3. Boyutlandırmayı Özellikler Yerine Metotlar Üzerinden Yapın

    width ve height salt okunurdur, bu nedenle geometri değişiklikleri doğrudan atama yerine shape.resize(w, h) üzerinden yapılır.

  4. Katmanları insertChild ile İstifleyin

    Z-sıralaması insertChild(index, shape) kullanır; appendChild'ın katmanları sıralamanın yolu olmadığı açıkça belirtilir.

  5. Varsayılan Token'lar Sadece Bir Yedek Çözümdür

    Kullanıcının bir tasarım sistemi varsa, onun renkleri, boşlukları ve tipografisi öncelik kazanır; yerleşik ölçekler sadece hiçbiri yoksa uygulanır.

  6. Erişilebilirlik Alt Sınırını Koruyun

    Metin kontrastı gövde metni için 4.5:1, büyük metin için 3:1 seviyesinde tutulur ve dokunma hedefleri 44x44px'in altına asla düşmez.

  7. Paleti ve Yazı Tiplerini Sınırlayın

    1 birincil, 1 ikincil ve nötr renkler kullanın ve tasarım boyunca en fazla 1-2 yazı tipi kullanın.

  8. Yeniden Boyutlandırdıktan Sonra Metin Büyüme Tipini Sıfırlayın

    Penpot, yeniden boyutlandırmada metin boyutlandırma davranışını sıfırlar, bu nedenle growType'ın auto-width veya auto-height olarak geri ayarlanması gerekir.

04 İşe koyun

penpot-uiux-design'ı Claude Code veya Codex'e yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

penpot-uiux-design'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

skills/penpot-uiux-design/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Design a settings screen for [app name] in Penpot on a 375x812 board. Follow the Material Design guidelines and use our existing tokens if the file already has them, otherwise use the 8px spacing scale. It needs a header, a form with labels above the inputs plus error states, and a bottom CTA. Export the screen when you are done so I can check the contrast.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Her öğe, analyzeDescendants ile isContainedIn birleştirilerek doğrulanan şekilde kendi kapsayıcısının içinde yer alır.
  • Şekiller fontSize'a göre filtrelenerek bulunan hiçbir metin 12px'in altına düşmez.
  • Tasarım kesinleşmeden önce renk kontrastı WCAG AA seviyesine ulaşır.
  • İç içe geçme ve hiyerarşi shapeStructure ile incelenir.
  • Gövde tipografisi 16px veya daha büyük kalır.
  • Sadece ideal senaryo değil; yükleniyor, boş ve hata durumları da hesaba katılır.

OpenDesign'da penpot-uiux-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
GitHub
Repository
github.com/github/awesome-copilot Dal main
Skill dosyası
skills/penpot-uiux-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 1899b18
License
MIT LICENSE dosyasından.
Repository yıldızları
38.981 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm github/awesome-copilot deposu için alındı; bu katalogda 6 beceri içerir. penpot-uiux-design için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

  1. Kullanılabilir MCP AraçlarıAmaçları olan dört araç: kod çalıştırma, şekil dışa aktarma, görsel içe aktarma, Penpot API belgelerini getirme.
  2. MCP Sunucu KurulumuÖnce çalışıp çalışmadığını kontrol edin, ardından klonlayın, derleyin, eklenti URL'sini yükleyin, VS Code'u yapılandırın, sorun giderin.
  3. Temel Tasarım İlkeleriAçıklık ve tutarlılık için altın kurallar, ayrıca beş adımlı görsel hiyerarşi öncelik sırası.
  4. Tasarım İş AkışıTasarım sistemi kontrolünden inceleme, oluşturma, flex düzen ve görsel doğrulamaya kadar sıralı adımlar.
  5. Tasarım Sistemi İşlemeToken'lar, renkler, metin stilleri ve bileşenler hakkında sorun veya keşfedin, ardından yanıta göre dallanın.
  6. Önemli Penpot API TuzaklarıSalt okunur geometri, z-sırası için insertChild, ters çevrilmiş flex sırası, metin yeniden boyutlandırma sonrası growType sıfırlanması.
  7. Yeni Panoları KonumlandırmaMevcut panoları bulun, en sağdaki kenardan sonraki x'i hesaplayın, akışları görsel olarak gruplanmış tutun.
  8. Varsayılan Tasarım Token'larıSistemi olmayan tasarımlar için yedek 8px boşluk ölçeği, tipografi ölçeği ve anlamsal renk rolleri.
  9. Bileşen Kontrol ListesiDurumları, boyutlandırmayı ve etiketleri kapsayan, düğmeler, formlar ve navigasyon için onay kutusu gereksinimleri.
  10. Erişilebilirlik Hızlı KontrolleriAltı kontrol: kontrast, dokunma hedefleri, odak, alt metin, başlık hiyerarşisi, renk bağımsızlığı.
  11. Tasarım İnceleme Kontrol ListesiHiyerarşi, boşluk, tipografi, WCAG AA, durumlar ve sistem tutarlılığı üzerine kesinleşme öncesi kontroller.
  12. Tasarımları DoğrulamaDoğrulama yöntemleri tablosu ve generateStyle ile bir seçimden CSS dışa aktarma.
Skill'in Kendi Açıklaması
"MCP araçlarını kullanarak Penpot'ta profesyonel UI/UX tasarımları oluşturmak için kapsamlı kılavuz. Bu beceriyi şu durumlarda kullanın: (1) Web, mobil veya masaüstü uygulamaları için yeni UI/UX tasarımları oluşturma, (2) Bileşenler ve tokenlarla tasarım sistemleri oluşturma, (3) Kontrol panelleri, formlar, navigasyon veya açılış sayfaları tasarlama, (4) Erişilebilirlik standartları ve en iyi uygulamaları uygulama, (5) Platform kılavuzlarını takip etme (iOS, Android, Material Design), (6) Kullanılabilirlik için mevcut Penpot tasarımlarını gözden geçirme veya iyileştirme. Tetikleyiciler: "bir UI tasarla", "arayüz oluştur", "yerleşim oluştur", "kontrol paneli tasarla", "form oluştur", "açılış sayfası tasarla", "erişilebilir yap", "tasarım sistemi", "bileşen kütüphanesi"."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 12.103 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

penpot-uiux-design Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bunu kullanmadan önce Penpot MCP sunucusunu kurmam gerekiyor mu?

Hayır, ve skill penpot_api_info çağrısı yaparak önce bunu bilerek kontrol eder. Sunucunun kurulu olmadığını doğruladığınızda size kurulum adımlarını verir; ardından kurulum penpot-mcp'yi klonlar, npm install ve npm run bootstrap çalıştırır, sonra eklentiyi Penpot'ta http://localhost:4400/manifest.json adresinden yükler.

Hangi istemciyi yapılandırıyor?

Kurulum bölümü, http://localhost:4401/sse adresinde bir penpot sunucusu kaydeden bir VS Code settings.json parçacığını gösterir. Ayrıca yapılandırmayı değiştirdikten sonra VS Code'u veya Claude'u tamamen yeniden başlatana kadar araçların görünmeyebileceği konusunda uyarır.

Penpot UI/UX Design

penpot-uiux-design becerisini gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign indirin, penpot-uiux-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için