Claude Code · Codex · Cursor · OpenCode
Claude Code, Codex ve Ajanınız için Tasarım Becerileri.
PPT ve slayt sunumları, frontend ve UI tasarımı, marka sistemleri, hareket ve tasarım incelemesi için gerçek SKILL.md dosyalarından kataloglanmış 138 açık kaynak skill. Bir skill adından veya bitirmeniz gereken işten başlayın.
İşi biliyor ama beceri adını bilmiyor musunuz? Kataloğu göreve göre filtrele
01 Tüm beceriler
Göreve göre 138 Tasarım Becerisinin tamamı.
PPT ve slayt sunumları, frontend ve UI, mobil, marka sistemleri, hareket ve video, tasarım incelemesi. Her kart skill'in SKILL.md dosyasına bağlanır.
-
algorithmic-art
yazan Anthropic · anthropics/skills
p5.js ile üretken sanat: seed'li partiküller, akış alanları ve ayarlanabilir parametreler.
Gereksinimler: p5.js
-
brand-guidelines
yazan Anthropic · anthropics/skills
Anthropic'in resmi marka renklerini ve tipografisini herhangi bir ürüne uygular. Yalnızca Anthropic markası.
-
canvas-design
yazan Anthropic · anthropics/skills
PNG veya PDF olarak teslim edilen orijinal posterler ve statik görsel çalışmalar.
-
frontend-design
yazan Anthropic · anthropics/skills
Yeni veya mevcut web arayüzleri için belirgin bir görsel yön, tipografi ve düzen belirler.
-
slack-gif-creator
yazan Anthropic · anthropics/skills
Slack'in boyut ve ölçü limitlerini karşılayan animasyonlu GIF'ler.
-
theme-factory
yazan Anthropic · anthropics/skills
Sayfalar, slaytlar ve belgeler için renk ve tipografi temaları uygular veya oluşturur.
-
web-artifacts-builder
yazan Anthropic · anthropics/skills
React, Tailwind ve shadcn/ui ile çoklu bileşenli etkileşimli HTML yapıtları.
-
design-consultation
yazan Garry Tan · garrytan/gstack
Tam bir tasarım sistemi öneren ürün tasarımı danışmanlığı: estetik, tipografi, renk, yerleşim, hareket.
-
design-html
yazan Garry Tan · garrytan/gstack
Üzerinde anlaşılmış bir tasarım yönünden üretime hazır HTML/CSS üretir.
-
design-review
yazan Garry Tan · garrytan/gstack
Oluşturulmuş bir sayfanın tasarımcı gözüyle QA'si: tutarsızlık, boşluk, hiyerarşi, özensizlik kalıpları; ardından bunları düzeltir.
-
design-shotgun
yazan Garry Tan · garrytan/gstack
Paralel olarak birkaç tasarım varyantı oluşturur ve geri bildirim için bir karşılaştırma panosu açar.
-
diagram
yazan Garry Tan · garrytan/gstack
Bir açıklamayı veya Mermaid kaynağını düzenlenebilir Excalidraw dosyasına ve render edilmiş SVG ve PNG'ye dönüştürür.
Gereksinim: Excalidraw
-
ios-design-review
yazan Garry Tan · garrytan/gstack
Gerçek donanımda iOS uygulamalarının görsel tasarım denetimi.
-
plan-design-review
yazan Garry Tan · garrytan/gstack
Uygulama öncesinde tasarım planını tamlık ve deneyim riski açısından inceler.
-
banner-design
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Sosyal medya, reklamlar, web sitesi hero'ları ve baskı için banner'lar.
-
brand
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Marka sesi, görsel kimlik, mesajlaşma çerçeveleri ve marka tutarlılığı.
-
design
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Marka kimliği, tasarım token'ları, UI stillendirme, logo oluşturma ve kurumsal kimlik programları.
Gereksinim: Görsel oluşturma servisi (Gemini, Atlas Cloud veya MuAPI)
-
design-system
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Üç katmanlı tasarım token'ları, bileşen özellikleri ve slayt oluşturma.
-
slides
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Chart.js, tasarım token'ları ve duyarlı yerleşimlerle stratejik HTML slayt sunumları.
Gereksinimler: Chart.js
-
ui-styling
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
shadcn/ui, Tailwind CSS ve canvas tabanlı görsellerle erişilebilir kullanıcı arayüzü stillendirme.
Gereksinimler: shadcn/ui, Tailwind CSS
-
ui-ux-pro-max
yazan nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill
Web, mobil ve masaüstü için UI/UX tasarım zekası: yerleşim, renk, tipografi ve UX kuralları.
-
shadcn
yazan shadcn · shadcn-ui/ui
Projede shadcn bileşenlerini ekler, arar, düzeltir, stillendirir ve oluşturur.
Gereksinimler: shadcn/ui
-
frontend-ui-engineering
yazan Addy Osmani · addyosmani/agent-skills
Üretim kalitesinde, erişilebilir, duyarlı kullanıcı arayüzleri oluşturur.
-
brandkit
yazan Leonxlnx · Leonxlnx/taste-skill
Görsel üretimi ile premium marka kılavuz panoları, logo sistemleri ve kimlik sunumları.
Gereksinimler: Görüntü oluşturma servisi
-
design-taste-frontend
yazan Leonxlnx · Leonxlnx/taste-skill
Açılış sayfaları, portföyler ve yeniden tasarımlar için anti-slop frontend tasarım.
-
gpt-taste
yazan Leonxlnx · Leonxlnx/taste-skill
Tek bir arayüz skill'inde editoryal düzenler, düzen çeşitliliği ve GSAP hareketi.
Gereksinimler: GSAP
-
high-end-visual-design
yazan Leonxlnx · Leonxlnx/taste-skill
Üst düzey ajans detayı öğretir: tipografi, aralık, gölgeler, kartlar ve hareket.
-
image-to-code
yazan Leonxlnx · Leonxlnx/taste-skill
Önce bir tasarım görseli üretir ve analiz eder, ardından eşleşen sayfayı uygular.
Gereksinimler: Görüntü oluşturma servisi
-
imagegen-frontend-mobile
yazan Leonxlnx · Leonxlnx/taste-skill
Görsel oluşturma ile yüksek kaliteli mobil ekran konseptleri ve akışları.
Gereksinimler: Görüntü oluşturma servisi
-
imagegen-frontend-web
yazan Leonxlnx · Leonxlnx/taste-skill
Görsel üretimi ile bölüm bölüm web sitesi tasarım referansları.
Gereksinimler: Görüntü oluşturma servisi
-
industrial-brutalist-ui
yazan Leonxlnx · Leonxlnx/taste-skill
İsviçre tipografisini terminal estetiğiyle birleştiren brütalist arayüzler.
-
minimalist-ui
yazan Leonxlnx · Leonxlnx/taste-skill
Sade, tek renkli, editoryal tarzda arayüzler.
-
redesign-existing-projects
yazan Leonxlnx · Leonxlnx/taste-skill
Mevcut bir web sitesini veya uygulamayı denetler ve premium görsel kaliteye yükseltir.
-
stitch-design-taste
yazan Leonxlnx · Leonxlnx/taste-skill
Görsel ayırt ediciliğe vurgu yaparak Google Stitch için bir DESIGN.md yazar.
Gereksinim: Google Stitch
-
impeccable
yazan Paul Bakaus · pbakaus/impeccable
Arayüzleri tasarlamak, eleştirmek, denetlemek, cilalamak, canlandırmak ve iyileştirmek için tek bir skill.
-
faceless-explainer
yazan HeyGen · heygen-com/hyperframes
Metin, not veya makaleyi, icat edilmiş sahne görselleri ile yüzsüz bir açıklayıcı videoya dönüştürür.
Gereksinim: HyperFrames
-
figma
yazan HeyGen · heygen-com/hyperframes
Figma varlıklarını, marka token'larını ve storyboard'ları bir HyperFrames kompozisyonuna aktarır.
Gereksinim: HyperFrames, Figma
-
general-video
yazan HeyGen · heygen-com/hyperframes
Hiçbir şablon uygun olmadığında özel çok sahneli HyperFrames videosu yazar veya düzenler.
Gereksinim: HyperFrames
-
hyperframes-animation
yazan HeyGen · heygen-com/hyperframes
HyperFrames için animasyon kuralları, sahne taslakları, geçişler ve çalışma zamanı adaptörleri.
Gereksinim: HyperFrames
-
hyperframes-creative
yazan HeyGen · heygen-com/hyperframes
HyperFrames videoları için yaratıcı yönetim: palet, tipografi, kompozisyon, seslendirme, ritim.
Gereksinim: HyperFrames
-
hyperframes-keyframes
yazan HeyGen · heygen-com/hyperframes
HyperFrames için yakın çekimler, zoomlar, yeniden çerçevelemeler, Ken Burns hareketleri ve 2D/3D anahtar kareler.
Gereksinim: HyperFrames
-
motion-graphics
yazan HeyGen · heygen-com/hyperframes
Kısa tasarım odaklı hareketli grafikler: kinetik tipografi, istatistik sayaçları, logo animasyonları, alt üçüncüler.
Gereksinim: HyperFrames
-
product-launch-video
yazan HeyGen · heygen-com/hyperframes
Bir ürün URL'si, senaryo veya brief'i ürün tanıtım veya promosyon videosuna dönüştürür.
Gereksinim: HyperFrames
-
slideshow
yazan HeyGen · heygen-com/hyperframes
Fragmanlar, dallanma ve sunucu moduyla etkileşimli HyperFrames slayt gösterileri.
Gereksinim: HyperFrames
-
slidev
yazan Slidev · slidevjs/slidev
Markdown, Vue bileşenleri, kod vurgulama ve animasyonla geliştirici slayt sunumları.
Gereksinim: Slidev
-
accessibility-compliance
yazan Seth Hobson · wshobson/agents
Mobil erişilebilirlik ve yardımcı teknoloji desteği ile WCAG 2.2 uyumlu arayüzler.
-
brand-landingpage
yazan Seth Hobson · wshobson/agents
Önce marka kimliği görüşmesi, ardından Stitch üzerinden açılış sayfası oluşturur ve geliştirir.
Gereksinim: Google Stitch
-
design-system-patterns
yazan Seth Hobson · wshobson/agents
Ölçeklenebilir tasarım sistemleri: token'lar, tema altyapısı, bileşen mimarisi.
-
interaction-design
yazan Seth Hobson · wshobson/agents
Mikroetkileşimler, hareket, geçişler ve kullanıcı geri bildirim desenleri.
-
kpi-dashboard-design
yazan Seth Hobson · wshobson/agents
KPI panoları: metrik seçimi, grafik tercihi, düzen ve gerçek zamanlı kalıplar.
-
mobile-android-design
yazan Seth Hobson · wshobson/agents
Material Design 3 ve Jetpack Compose ile yerel Android UI.
-
mobile-ios-design
yazan Seth Hobson · wshobson/agents
SwiftUI ile Apple'ın Human Interface Guidelines kurallarını izleyen yerel iOS UI.
-
pptx-quality-gates
yazan Seth Hobson · wshobson/agents
Geometri, erişilebilirlik ve paket bütünlüğü için düzenlenebilir PPTX sunumlarını doğrular ve onarır.
-
pptx-reference-deck-analysis
yazan Seth Hobson · wshobson/agents
Referans bir PPTX dosyasını tema, tipografi, düzen ritmi ve tanılama açısından analiz eder.
-
pptx-slide-specification
yazan Seth Hobson · wshobson/agents
Düzenlenebilir PPTX sunumları için koordinat-açık JSON spesifikasyonları yazar.
-
pptx-visual-assets
yazan Seth Hobson · wshobson/agents
Onaylanmış simgeleri, görselleri, SVG'leri ve infografikleri bir PPTX sunumunda seçer ve yerleştirir.
-
react-native-design
yazan Seth Hobson · wshobson/agents
React Native stil, navigasyon ve Reanimated animasyonları.
Gereksinimler: React Native
-
responsive-design
yazan Seth Hobson · wshobson/agents
Container query, fluid tipografi, CSS Grid ve mobil öncelikli breakpoint'lerle duyarlı düzenler.
-
screen-reader-testing
yazan Seth Hobson · wshobson/agents
Web uygulamalarını VoiceOver, NVDA ve JAWS ekran okuyucularıyla test eder.
-
tailwind-design-system
yazan Seth Hobson · wshobson/agents
Tailwind CSS v4 ile tasarım sistemleri: token'lar, bileşen kütüphaneleri, duyarlı kalıplar.
Gerekli: Tailwind CSS
-
visual-design-foundations
yazan Seth Hobson · wshobson/agents
Uyumlu görseller için tipografi, renk teorisi, boşluk sistemleri ve ikonografi.
-
wcag-audit-patterns
yazan Seth Hobson · wshobson/agents
Otomatik testler, manuel kontroller ve düzeltme kılavuzuyla WCAG 2.2 denetimleri.
-
web-component-design
yazan Seth Hobson · wshobson/agents
Yeniden kullanılabilir React, Vue ve Svelte bileşen desenleri ve kompozisyon stratejileri.
-
draw-io-diagram-generator
yazan GitHub · github/awesome-copilot
draw.io diyagram dosyaları oluşturur ve düzenler (.drawio, .drawio.svg, .drawio.png).
Gerekli: draw.io
-
excalidraw-diagram-generator
yazan GitHub · github/awesome-copilot
Doğal dilden Excalidraw diyagramları ve zihin haritaları üretir.
Gereksinim: Excalidraw
-
gsap-framer-scroll-animation
yazan GitHub · github/awesome-copilot
Paralaks, sabitlenmiş bölümler, yatay kaydırma ve metin kaydırma animasyonları.
Gereksinimler: GSAP
-
penpot-uiux-design
yazan GitHub · github/awesome-copilot
MCP araçları ile Penpot'ta profesyonel UI/UX tasarım, bileşenler ve tasarım sistemleri.
Gerekli: Penpot MCP
-
power-bi-report-design-consultation
yazan GitHub · github/awesome-copilot
Power BI rapor tasarımı: grafik seçimi, düzen, okunabilirlik, erişilebilirlik.
Gerekli: Power BI
-
web-design-reviewer
yazan GitHub · github/awesome-copilot
Çalışan bir web sitesini görsel olarak inceler, düzen sorunlarını tespit eder ve düzeltir.
-
animate
yazan Emil Kowalski · emilkowalski/skills
Amaç, araç, özellikler, eğri ve süreyi sırayla belirleyerek sıfırdan animasyon oluşturur.
-
animate-expo
yazan Emil Kowalski · emilkowalski/skills
React Native ve Expo için jestler, yaylar ve geçişler.
Gereksinim: React Native / Expo
-
animation-vocabulary
yazan Emil Kowalski · emilkowalski/skills
Belirsiz bir hareket tanımını tam terimine dönüştüren ters arama sözlüğü.
-
apple-design
yazan Emil Kowalski · emilkowalski/skills
Apple'ın jestleri, fiziksel hareketi ve uzaysal hiyerarşisi web için çevrildi.
-
emil-design-eng
yazan Emil Kowalski · emilkowalski/skills
Emil Kowalski'nin UI cilası, bileşen tasarımı ve animasyon kararları üzerine felsefesi.
-
find-animation-opportunities
yazan Emil Kowalski · emilkowalski/skills
Bir arayüzde canlandırılması gereken yerleri parametre önerileriyle bulur ve geri kalanını reddeder.
-
improve-animations
yazan Emil Kowalski · emilkowalski/skills
Mevcut hareket kodunu denetler ve önceliklendirilmiş, bağımsız uygulama planları üretir.
-
prototype
yazan Emil Kowalski · emilkowalski/skills
Canlı bir görsel seçici arkasında bir kullanıcı arayüzü parçasının gerçekten farklı birkaç versiyonunu oluşturur.
-
review-animations
yazan Emil Kowalski · emilkowalski/skills
Animasyon kodunu zamanlama, etkileşim ve bitiş açısından yüksek işçilik standardına göre inceler.
-
vercel-react-view-transitions
yazan Vercel Labs · vercel-labs/agent-skills
React'in View Transition API'si ile doğal hissettiren sayfa geçişleri.
Gereksinim: React
-
frontend-slides
yazan Zara Zhang · zarazhangrui/frontend-slides
Sıfırdan veya PowerPoint (PPT) dosyalarından dönüştürülmüş animasyon açısından zengin HTML slaytlar.
-
ink
yazan Google Labs · google-labs-code/design.md
JSON spesifikasyonlarını Ink ile etkileşimli terminal kullanıcı arayüzlerine dönüştürür.
Gereksinim: Ink
-
imagegen
yazan OpenAI · openai/skills
Raster görseller üretir veya düzenler: illüstrasyonlar, fotoğraflar, dokular, sprite'lar, mockup'lar.
Gereksinimler: Görüntü oluşturma servisi
-
guizang-ppt-skill
yazan op7418 · op7418/guizang-ppt-skill
Tek dosyalı yatay HTML PPT sunumları, dergi veya İsviçre tarzında, konuşmacı görünümü ve senkronizasyonla.
-
brand-guidelines
yazan Alireza Rezvani · alirezarezvani/claude-skills
Herhangi bir ürün için marka kılavuzlarını tanımlar veya uygular: renk, tipografi, logo ve ses tonu.
-
design-system
yazan Alireza Rezvani · alirezarezvani/claude-skills
Sonraki belgeler ve sunumlar için 10 soruluk bir sihirbazla marka kimliğini bir kez yakalar.
-
md-slides
yazan Alireza Rezvani · alirezarezvani/claude-skills
Bir Markdown sunumu markalı slaytlara dönüştürür.
-
ui-design-system
yazan Alireza Rezvani · alirezarezvani/claude-skills
Tasarım token'ları, bileşen dokümantasyonu, duyarlı hesaplamalar ve geliştirici teslimi.
-
ux-researcher-designer
yazan Alireza Rezvani · alirezarezvani/claude-skills
Veriye dayalı kişilikler, yolculuk haritaları, kullanılabilirlik test çerçeveleri ve araştırma sentezi.
-
huashu-design
yazan alchaincyf · alchaincyf/huashu-design
Yüksek kaliteli HTML prototipler, slaytlar, animasyon ve görselleştirmeler; üç taslaktan başlar.
-
accessibility-review
yazan Anthropic · anthropics/knowledge-work-plugins
Bir tasarım veya sayfanın WCAG 2.1 AA denetimi: kontrast, klavye, dokunma hedefleri.
-
design-critique
yazan Anthropic · anthropics/knowledge-work-plugins
Kullanılabilirlik, hiyerarşi ve tutarlılık üzerine yapılandırılmış tasarım geri bildirimi.
-
design-handoff
yazan Anthropic · anthropics/knowledge-work-plugins
Bir tasarımdan geliştirici teslim özellikleri: düzen, token'lar, bileşen durumları, kırılma noktaları.
-
design-system
yazan Anthropic · anthropics/knowledge-work-plugins
Mevcut bir tasarım sistemini denetler, belgeler veya genişletir.
-
research-synthesis
yazan Anthropic · anthropics/knowledge-work-plugins
Görüşmeleri, anketleri ve test notlarını temalar ve öneriler halinde sentezler.
-
user-research
yazan Anthropic · anthropics/knowledge-work-plugins
Kullanıcı görüşmelerini, anketleri ve kullanılabilirlik testlerini planlar, yürütür ve sentezler.
-
ux-copy
yazan Anthropic · anthropics/knowledge-work-plugins
UX metni yazar veya inceler: mikro metin, hata mesajları, boş durumlar, CTA'lar.
-
gsap-core
yazan GreenSock · greensock/gsap-skills
GSAP temel API: to/from/fromTo, easing, stagger, matchMedia, azaltılmış hareket.
Gereksinimler: GSAP
-
gsap-frameworks
yazan GreenSock · greensock/gsap-skills
Vue, Svelte ve diğer React olmayan framework'lerde GSAP: yaşam döngüsü, kapsam belirleme, temizlik.
Gereksinimler: GSAP
-
gsap-performance
yazan GreenSock · greensock/gsap-skills
GSAP performansı: dönüşümler, düzen bozulmalarından kaçınma, will-change, toplu işleme.
Gereksinimler: GSAP
-
gsap-plugins
yazan GreenSock · greensock/gsap-skills
GSAP eklentileri: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG ve fizik.
Gereksinimler: GSAP
-
gsap-react
yazan GreenSock · greensock/gsap-skills
useGSAP hook, refs, context ve temizlik ile React ve Next.js'te GSAP.
Gereksinimler: GSAP
-
gsap-scrolltrigger
yazan GreenSock · greensock/gsap-skills
ScrollTrigger ile kaydırma bağlantılı animasyon: sabitleme, scrub, tetikleyiciler, parallax.
Gereksinimler: GSAP
-
gsap-timeline
yazan GreenSock · greensock/gsap-skills
GSAP zaman çizelgeleri: konum parametresi, iç içe geçme ve oynatma kontrolü.
Gereksinimler: GSAP
-
gsap-utils
yazan GreenSock · greensock/gsap-skills
gsap.utils yardımcıları: clamp, mapRange, interpolate, snap, wrap, pipe.
Gereksinimler: GSAP
-
color-font-skill
yazan MiniMax · MiniMax-AI/skills
PPT ve tasarım görevleri için sunuma hazır renk paletleri ve yazı tipi eşleştirmeleri.
-
design-style-skill
yazan MiniMax · MiniMax-AI/skills
Yarıçap ve boşluk tariflerinden PPT slaytları için tutarlı bir görsel sistem.
-
gif-sticker-maker
yazan MiniMax · MiniMax-AI/skills
İnsan, evcil hayvan, nesne veya logo fotoğraflarını altyazılı dört GIF çıkartmaya dönüştürür.
-
pptx-generator
yazan MiniMax · MiniMax-AI/skills
Düzenlenebilir PowerPoint (PPTX) slayt destelerini oluşturur, düzenler ve okur.
-
shader-dev
yazan MiniMax · MiniMax-AI/skills
GLSL shader'lar: ray marching, SDF'ler, akışkanlar, parçacıklar, prosedürel görseller.
Gereksinim: GLSL / WebGL
-
slide-making-skill
yazan MiniMax · MiniMax-AI/skills
PptxGenJS ile tek PowerPoint slaytları uygular.
Gereksinim: PptxGenJS
-
baseline-ui
yazan Julien Thibeaut · ibelick/ui-skills
Boşluk, hiyerarşi, tipografi ve küçük yerleşim sorunlarını düzelterek UI kodunu hızlıca temizler.
-
create-design-md
yazan Julien Thibeaut · ibelick/ui-skills
Mevcut bir ürün deposundan veya herkese açık web sitesinden DESIGN.md oluşturur veya günceller.
-
fixing-accessibility
yazan Julien Thibeaut · ibelick/ui-skills
ARIA, klavye, odak, kontrast ve form hatalarını denetler ve düzeltir.
-
fixing-motion-performance
yazan Julien Thibeaut · ibelick/ui-skills
Sarsıntılı CSS/JS animasyonlarını ve kaydırma bağlantılı hareketi bulur ve düzeltir.
-
improve-ui
yazan Julien Thibeaut · ibelick/ui-skills
Bir ürün yüzeyini kendi tasarım kanıtlarına göre denetler ve uygulama planları yazar.
-
design-md
yazan Google Labs · google-labs-code/stitch-skills
Stitch projelerini analiz eder ve anlamsal bir DESIGN.md yazar.
Gereksinim: Google Stitch
-
enhance-prompt
yazan Google Labs · google-labs-code/stitch-skills
Belirsiz UI fikirlerini, Stitch için optimize edilmiş cilalı promptlara dönüştürür.
Gereksinim: Google Stitch
-
react-vite-dashboard
yazan Google Labs · google-labs-code/stitch-skills
Stitch tasarımlarını TanStack Query ile React + Vite panolarına dönüştürür.
Gereksinim: Google Stitch
-
remotion
yazan Google Labs · google-labs-code/stitch-skills
Stitch projelerinden Remotion geçişleri ve yakınlaştırmalarıyla tanıtım videoları oluşturur.
Gereksinimler: Google Stitch, Remotion
-
shadcn-ui
yazan Google Labs · google-labs-code/stitch-skills
shadcn/ui bileşenlerini entegre etme ve özelleştirme: keşif, kurulum, en iyi uygulamalar.
Gereksinimler: shadcn/ui
-
stitch::code-to-design
yazan Google Labs · google-labs-code/stitch-skills
Frontend kodunu statik HTML ve tasarım sistemi çıkarımı yoluyla Stitch tasarımına dönüştürür.
Gereksinim: Google Stitch
-
stitch::extract-design-md
yazan Google Labs · google-labs-code/stitch-skills
Herhangi bir framework'teki frontend kaynak kodundan eksiksiz bir DESIGN.md çıkarır.
-
stitch::extract-static-html
yazan Google Labs · google-labs-code/stitch-skills
Gömülü CSS ve görsellerle bağımsız statik HTML anlık görüntüleri çıkarır.
-
stitch::generate-design
yazan Google Labs · google-labs-code/stitch-skills
Stitch'te metin veya referans görselden ekran oluşturur, düzenler ve varyasyon yapar.
Gereksinim: Google Stitch
-
stitch::manage-design-system
yazan Google Labs · google-labs-code/stitch-skills
MCP araçları aracılığıyla Stitch'te tasarım sistemleri oluşturur, günceller ve uygular.
Gereksinim: Google Stitch
-
stitch::react-components
yazan Google Labs · google-labs-code/stitch-skills
Stitch tasarımlarını modüler React + Vite bileşenlerine dönüştürür veya senkronize eder.
Gereksinim: Google Stitch
-
stitch::react-native
yazan Google Labs · google-labs-code/stitch-skills
Stitch HTML tasarımlarını React Native bileşenlerine dönüştürür veya senkronize eder.
Gereksinimler: Google Stitch, React Native
-
interface-design
yazan Dammyjay93 · Dammyjay93/interface-design
Panolar, yönetim panelleri, SaaS araçları ve ayarlar sayfaları için zanaat odaklı arayüz tasarımı.
-
make-interfaces-feel-better
yazan Jakub Krehel · jakubkrehel/make-interfaces-feel-better
Hover, gölge, kenarlık, ikon, tipografi ve mikroetkileşim cilası için tasarım mühendisliği prensipleri.
-
accessibility
yazan Addy Osmani · addyosmani/web-quality-skills
WCAG 2.2'yi takip ederek web erişilebilirliğini denetler ve geliştirir.
-
motion-design
yazan LottieFiles · LottieFiles/motion-design-skill
Hareket tasarımı ilkelerini uygular: zamanlama, easing, koreografi ve animasyon temelleri.
-
user-research-cookiy
yazan Cookiy · cookiy-ai/user-research-skill
Uçtan uca kullanıcı araştırması asistanı: nitel ve nicel, rehberler ve planlar.
-
material-3
yazan hamen · hamen/material-3-skill
Material Design 3 token'larını, bileşenlerini ve uyarlanabilir düzenlerini uygular.
-
design-motion-principles
yazan Kyle Zantos · kylezantos/design-motion-principles
Kowalski, Krehel ve Tompkins'e göre amaçlı etkileşim hareketi veya mevcut animasyonun incelemesi.
-
color-expert
yazan David Aerne · meodai/skill.color-expert
Renk adlandırma, teori, uzaylar, paletler, rampalar, gradyanlar, dönüşümler ve kontrast.
-
chart-visualization
yazan AntV · antvis/chart-visualization-skills
AntV API aracılığıyla verileri çubuk, çizgi, pasta, radar, Sankey, zihin haritası ve akış şemaları olarak işler.
Gereksinimler: AntV API
-
infographic-creator
yazan AntV · antvis/chart-visualization-skills
Verilen metinden infografikler oluşturur.
Gereksinimler: AntV API
-
ux-writing
yazan content-designer · content-designer/ux-writing-skill
Kullanıcı merkezli, erişilebilir mikro metin: düğmeler, etiketler, hatalar, formlar, başlangıç.
Eşleşen beceri yok.
02 Nasıl seçilir ve başlatılır
Bir Design Skill Nasıl Seçilir ve Claude Code veya Codex'te Çalıştırılır.
Göreve ve çıktıya göre seçin, skill'in neye ihtiyacı olduğunu kontrol edin, ardından ajanınıza kurun ve gerçek bir görev çalıştırın. Aynı üç adım Claude Code, Codex, Cursor ve OpenCode'da çalışır.
- 1
Skill Adını Değil, Görevi Seçin
Yapmanız gerekene göre filtreleyin — bir açılış sayfası, bir sunum, bir marka sistemi, bir inceleme. Yıldızları karşılaştırmadan önce tek satırlık kullanımı ve çıktı türünü karşılaştırın.
KontrolÇıktısı gerçekten ihtiyacınız olan dosyayla eşleşen iki veya üç aday.
- 2
Skill'in Neye İhtiyacı Olduğunu Kontrol Edin
Kaynağı açın ve gereksinimleri okuyun. Bazı skill'ler yalnızca Google Stitch, HyperFrames veya GSAP gibi belirli bir araçla çalışır; bazılarının bir görsel oluşturma servisine ihtiyacı vardır. Katalog, SKILL.md bunları belirttiğinde İhtiyaçlar altında listeler.
KontrolSkill'in adını verdiği araç veya servisin kurmadan önce projenizde mevcut olduğunu.
- 3
Ajanınıza Kurun ve Gerçek Bir Görev Çalıştırın
Skill'i yazarının belgelediği şekilde kurun — çoğu depo için bu tek bir
npx skills addkomutu — ardından Claude Code, Codex veya ajanınızda kendi içeriğinizle gerçek bir görev çalıştırın. Bir komutu kopyalamak, ajan skill'i adıyla tanıyıp kullanana kadar başarılı bir kurulum sayılmaz.KontrolAjanın skill'i adıyla listelediğini ve onu çağırdığınızda çıktısının değiştiğini.
03 OpenDesign'da çalıştırın
Bunlardan 38 Tanesi OpenDesign İçinde Gelir. Kalanını Linkten İçe Aktarın.
OpenDesign, Claude Code'un kullandığı SKILL.md formatını okur, dolayısıyla bu katalogdaki her beceri içinde çalışır — Claude Code, Codex, Cursor veya OpenCode motor olarak.
- 38
Zaten Dahil
frontend-design, ui-ux-pro-max, impeccable, guizang-ppt-skill, sekiz GSAP becerisi ve daha fazlası kurulumda Plugins → Skills içinde bulunur. Yukarıdaki katalogda In OpenDesign etiketini taşırlar.
- ↗
Bağlantısından Başka Bir Skill İçe Aktarın
Plugins → Add → Skill → Import from link, skill klasörünün GitHub bağlantısını yapıştırın — her karttaki Source ile aynı bağlantı — ve kişisel skill'lerinize eklenir. Yerel klasör yüklemesi de çalışır.
- ›_
Zaten Kullandığınız Ajanla Çalışır
Üst çubuktan beceriyi seçin ve SKILL.md dosyası DESIGN.md dosyanızla birlikte prompt'a eklenir. Claude Code, Codex, Cursor veya OpenCode işi yapar; önizleme ve dışa aktarımlar OpenDesign'a aittir.
OpenDesign
Tasarım Becerilerini Zaten Kullandığınız Kodlama Ajanlarıyla Çalıştırın.
OpenDesign açık kaynaklı, yerel öncelikli bir tasarım çalışma alanıdır. Kodlama ajanlarını prototip, web sayfası, slayt ve HTML video için bir tasarım motoruna dönüştürür — kendi makinenizde, kendi anahtarlarınızla çalıştırılabilir gerçek dosyalar.
Bu katalogdaki skill'ler bağımsız açık kaynak projelerdir. 38 tanesi OpenDesign ile birlikte gelir; geri kalanlar depo bağlantılarından içe aktarılır. Her skill'in kendi kılavuzu geçerli olmaya devam eder.
