Claude Code, Codex ve Ajanınız için Tasarım Becerileri.

Mevcut arayüzü gerçekçi uç verilerle ve yalnızca geliştirmede kullanılan bir karşılaştırma anahtarıyla stres testine tabi tutun; hataları düzeltmeden önce raporlayın.

Bileşen kaynağı, mevcut demo verileri ve alan sınırları; görsel doğrulama için çalışan bir uygulama ve tarayıcı.

• Arayüz Stres Testi
• Uç Durum Test Verileri
• İnceleme Raporu

Web animasyonlarında kaçan kareleri teşhis edin: işleme maliyeti, ana iş parçacığı çekişmesi, kare başına React güncellemeleri ve miras alınan CSS değişkenleri.

Animasyon kaynağı ve yeniden üretilebilir bir etkileşim; performansı doğrulamak için tarayıcı profilleme ve gerçek bir hedef cihaz.

• Web Animasyonu
• Kare Performansı
• Teşhis İncelemesi

Sağlanan bir ekran görüntüsünü mevcut uygulamada yeniden oluşturun, ardından referans görünüm alanında render alıp görünen farkları düzeltin.

Okunabilir bir referans görsel, hedef görünüm alanı, proje erişimi ve mevcut varlıkları sağlayın. Görsel eşleşmeyi doğrulamak için tarayıcıda render gerekir. UIZZE hesabı veya MCP bağlantısı gerekmez.

• Ekran Görüntüsünden Koda
• Referans Eşleştirme
• Arayüz Uygulaması

Video isteklerini doğru iş akışına yönlendirin, mevcut projelere devam edin ve HTML kompozisyonunu, medyayı, önizlemeyi ve render işlemini koordine edin.

CLI, Node.js 22+ ve FFmpeg gerektirir. Çekirdek becerilerle başlayın; oluşturma iş akışları ihtiyaç halinde kurulur. Medya hizmetleri ve bulut render ek gereksinimler getirebilir.

• HTML'den Videoya
• İş Akışı Yönlendirme
• Video Prodüksiyonu

Teknik fikirleri özenle hazırlanmış izometrik SVG mekanizmaları ve modele dayalı etkileşimle açıklayın.

Kit, kontroller için Node.js 20.10+ ve Chrome veya Chromium gerektirir. skills CLI'ın kendi Node gereksinimi vardır; README, CLI 1.7.1 için 22.20+ sürümünü belirtir.

• İzometrik SVG
• Teknik Anlatımlar
• Etkileşimli Şekiller

p5.js ile üretken sanat: seed'li partiküller, akış alanları ve ayarlanabilir parametreler.

Gereksinimler: p5.js

• Görseller ve Üretken Sanat
• Generative art
• OpenDesign'da

Anthropic'in resmi marka renklerini ve tipografisini herhangi bir ürüne uygular. Yalnızca Anthropic markası.

• Marka ve Tasarım Sistemleri
• OpenDesign'da

PNG veya PDF olarak teslim edilen orijinal posterler ve statik görsel çalışmalar.

• Görseller ve Üretken Sanat
• PNG / PDF
• OpenDesign'da

Yeni veya mevcut web arayüzleri için belirgin bir görsel yön, tipografi ve düzen belirler.

• Web ve Arayüz
• Arayüz kodu
• OpenDesign'da

Slack'in boyut ve ölçü limitlerini karşılayan animasyonlu GIF'ler.

• Hareketli Grafik ve Video
• GIF
• OpenDesign'da

Sayfalar, slaytlar ve belgeler için renk ve tipografi temaları uygular veya oluşturur.

• Marka ve Tasarım Sistemleri
• OpenDesign'da

React, Tailwind ve shadcn/ui ile çoklu bileşenli etkileşimli HTML yapıtları.

• Web ve Arayüz
• HTML
• OpenDesign'da

Tam bir tasarım sistemi öneren ürün tasarımı danışmanlığı: estetik, tipografi, renk, yerleşim, hareket.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi
• OpenDesign'da

Üzerinde anlaşılmış bir tasarım yönünden üretime hazır HTML/CSS üretir.

• Web ve Arayüz
• HTML

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.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu
• OpenDesign'da

Paralel olarak birkaç tasarım varyantı oluşturur ve geri bildirim için bir karşılaştırma panosu açar.

• Web ve Arayüz
• Arayüz kodu

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

• Diyagramlar ve Veri Görselleştirme
• Diagram

Gerçek donanımda iOS uygulamalarının görsel tasarım denetimi.

• Mobil Uygulamalar
• İnceleme raporu

Uygulama öncesinde tasarım planını tamlık ve deneyim riski açısından inceler.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu
• OpenDesign'da

Sosyal medya, reklamlar, web sitesi hero'ları ve baskı için banner'lar.

• Görseller ve Üretken Sanat
• Image

Marka sesi, görsel kimlik, mesajlaşma çerçeveleri ve marka tutarlılığı.

• Marka ve Tasarım Sistemleri

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)

• Marka ve Tasarım Sistemleri

Üç katmanlı tasarım token'ları, bileşen özellikleri ve slayt oluşturma.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Chart.js, tasarım token'ları ve duyarlı yerleşimlerle stratejik HTML slayt sunumları.

Gereksinimler: Chart.js

• Presentations
• HTML slaytlar
• OpenDesign'da

shadcn/ui, Tailwind CSS ve canvas tabanlı görsellerle erişilebilir kullanıcı arayüzü stillendirme.

Gereksinimler: shadcn/ui, Tailwind CSS

• Web ve Arayüz
• Arayüz kodu

Web, mobil ve masaüstü için UI/UX tasarım zekası: yerleşim, renk, tipografi ve UX kuralları.

• Web ve Arayüz
• Arayüz kodu
• OpenDesign'da

Projede shadcn bileşenlerini ekler, arar, düzeltir, stillendirir ve oluşturur.

Gereksinimler: shadcn/ui

• Web ve Arayüz
• Arayüz kodu

Üretim kalitesinde, erişilebilir, duyarlı kullanıcı arayüzleri oluşturur.

• Web ve Arayüz
• Arayüz kodu

Görsel üretimi ile premium marka kılavuz panoları, logo sistemleri ve kimlik sunumları.

Gereksinimler: Görüntü oluşturma servisi

• Marka ve Tasarım Sistemleri
• Image
• OpenDesign'da

Açılış sayfaları, portföyler ve yeniden tasarımlar için anti-slop frontend tasarım.

• Web ve Arayüz
• Arayüz kodu
• OpenDesign'da

Tek bir arayüz skill'inde editoryal düzenler, düzen çeşitliliği ve GSAP hareketi.

Gereksinimler: GSAP

• Web ve Arayüz
• Arayüz kodu

Üst düzey ajans detayı öğretir: tipografi, aralık, gölgeler, kartlar ve hareket.

• Web ve Arayüz

Önce bir tasarım görseli üretir ve analiz eder, ardından eşleşen sayfayı uygular.

Gereksinimler: Görüntü oluşturma servisi

• Web ve Arayüz
• Arayüz kodu

Görsel oluşturma ile yüksek kaliteli mobil ekran konseptleri ve akışları.

Gereksinimler: Görüntü oluşturma servisi

• Mobil Uygulamalar
• Image
• OpenDesign'da

Görsel üretimi ile bölüm bölüm web sitesi tasarım referansları.

Gereksinimler: Görüntü oluşturma servisi

• Web ve Arayüz
• Image
• OpenDesign'da

İsviçre tipografisini terminal estetiğiyle birleştiren brütalist arayüzler.

• Web ve Arayüz
• Arayüz kodu

Sade, tek renkli, editoryal tarzda arayüzler.

• Web ve Arayüz
• Arayüz kodu

Mevcut bir web sitesini veya uygulamayı denetler ve premium görsel kaliteye yükseltir.

• Tasarım İncelemesi ve Erişilebilirlik
• Arayüz kodu

Görsel ayırt ediciliğe vurgu yaparak Google Stitch için bir DESIGN.md yazar.

Gereksinim: Google Stitch

• Marka ve Tasarım Sistemleri
• DESIGN.md

Arayüzleri tasarlamak, eleştirmek, denetlemek, cilalamak, canlandırmak ve iyileştirmek için tek bir skill.

• Tasarım İncelemesi ve Erişilebilirlik
• Arayüz kodu
• OpenDesign'da

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

• Hareketli Grafik ve Video
• Video

Figma varlıklarını, marka token'larını ve storyboard'ları bir HyperFrames kompozisyonuna aktarır.

Gereksinim: HyperFrames, Figma

• Hareketli Grafik ve Video
• Video

Hiçbir şablon uygun olmadığında özel çok sahneli HyperFrames videosu yazar veya düzenler.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

HyperFrames için animasyon kuralları, sahne taslakları, geçişler ve çalışma zamanı adaptörleri.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

HyperFrames videoları için yaratıcı yönetim: palet, tipografi, kompozisyon, seslendirme, ritim.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

HyperFrames için yakın çekimler, zoomlar, yeniden çerçevelemeler, Ken Burns hareketleri ve 2D/3D anahtar kareler.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

Kısa tasarım odaklı hareketli grafikler: kinetik tipografi, istatistik sayaçları, logo animasyonları, alt üçüncüler.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

Bir ürün URL'si, senaryo veya brief'i ürün tanıtım veya promosyon videosuna dönüştürür.

Gereksinim: HyperFrames

• Hareketli Grafik ve Video
• Video

Fragmanlar, dallanma ve sunucu moduyla etkileşimli HyperFrames slayt gösterileri.

Gereksinim: HyperFrames

• Presentations
• HTML slaytlar

Markdown, Vue bileşenleri, kod vurgulama ve animasyonla geliştirici slayt sunumları.

Gereksinim: Slidev

• Presentations
• HTML slaytlar

Mobil erişilebilirlik ve yardımcı teknoloji desteği ile WCAG 2.2 uyumlu arayüzler.

• Tasarım İncelemesi ve Erişilebilirlik
• Arayüz kodu

Önce marka kimliği görüşmesi, ardından Stitch üzerinden açılış sayfası oluşturur ve geliştirir.

Gereksinim: Google Stitch

• Web ve Arayüz
• Arayüz kodu

Ölçeklenebilir tasarım sistemleri: token'lar, tema altyapısı, bileşen mimarisi.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Mikroetkileşimler, hareket, geçişler ve kullanıcı geri bildirim desenleri.

• Hareketli Grafik ve Video
• Arayüz kodu

KPI panoları: metrik seçimi, grafik tercihi, düzen ve gerçek zamanlı kalıplar.

• Diyagramlar ve Veri Görselleştirme
• Dashboard

Material Design 3 ve Jetpack Compose ile yerel Android UI.

• Mobil Uygulamalar
• Arayüz kodu

SwiftUI ile Apple'ın Human Interface Guidelines kurallarını izleyen yerel iOS UI.

• Mobil Uygulamalar
• Arayüz kodu

Geometri, erişilebilirlik ve paket bütünlüğü için düzenlenebilir PPTX sunumlarını doğrular ve onarır.

• Presentations
• PPTX

Referans bir PPTX dosyasını tema, tipografi, düzen ritmi ve tanılama açısından analiz eder.

• Presentations
• İnceleme raporu

Düzenlenebilir PPTX sunumları için koordinat-açık JSON spesifikasyonları yazar.

• Presentations
• PPTX

Onaylanmış simgeleri, görselleri, SVG'leri ve infografikleri bir PPTX sunumunda seçer ve yerleştirir.

• Presentations
• PPTX

React Native stil, navigasyon ve Reanimated animasyonları.

Gereksinimler: React Native

• Mobil Uygulamalar
• Arayüz kodu

Container query, fluid tipografi, CSS Grid ve mobil öncelikli breakpoint'lerle duyarlı düzenler.

• Web ve Arayüz
• Arayüz kodu

Web uygulamalarını VoiceOver, NVDA ve JAWS ekran okuyucularıyla test eder.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Tailwind CSS v4 ile tasarım sistemleri: token'lar, bileşen kütüphaneleri, duyarlı kalıplar.

Gerekli: Tailwind CSS

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Uyumlu görseller için tipografi, renk teorisi, boşluk sistemleri ve ikonografi.

• Marka ve Tasarım Sistemleri

Otomatik testler, manuel kontroller ve düzeltme kılavuzuyla WCAG 2.2 denetimleri.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Yeniden kullanılabilir React, Vue ve Svelte bileşen desenleri ve kompozisyon stratejileri.

• Web ve Arayüz
• Arayüz kodu

draw.io diyagram dosyaları oluşturur ve düzenler (.drawio, .drawio.svg, .drawio.png).

Gerekli: draw.io

• Diyagramlar ve Veri Görselleştirme
• Diagram

Doğal dilden Excalidraw diyagramları ve zihin haritaları üretir.

Gereksinim: Excalidraw

• Diyagramlar ve Veri Görselleştirme
• Diagram

Paralaks, sabitlenmiş bölümler, yatay kaydırma ve metin kaydırma animasyonları.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu

MCP araçları ile Penpot'ta profesyonel UI/UX tasarım, bileşenler ve tasarım sistemleri.

Gerekli: Penpot MCP

• Web ve Arayüz
• Tasarım dosyası

Power BI rapor tasarımı: grafik seçimi, düzen, okunabilirlik, erişilebilirlik.

Gerekli: Power BI

• Diyagramlar ve Veri Görselleştirme
• Dashboard

Çalışan bir web sitesini görsel olarak inceler, düzen sorunlarını tespit eder ve düzeltir.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Amaç, araç, özellikler, eğri ve süreyi sırayla belirleyerek sıfırdan animasyon oluşturur.

• Hareketli Grafik ve Video
• Arayüz kodu

React Native ve Expo için jestler, yaylar ve geçişler.

Gereksinim: React Native / Expo

• Mobil Uygulamalar
• Arayüz kodu

Belirsiz bir hareket tanımını tam terimine dönüştüren ters arama sözlüğü.

• Hareketli Grafik ve Video

Apple'ın jestleri, fiziksel hareketi ve uzaysal hiyerarşisi web için çevrildi.

• Web ve Arayüz
• Arayüz kodu

Emil Kowalski'nin UI cilası, bileşen tasarımı ve animasyon kararları üzerine felsefesi.

• Web ve Arayüz
• OpenDesign'da

Bir arayüzde canlandırılması gereken yerleri parametre önerileriyle bulur ve geri kalanını reddeder.

• Hareketli Grafik ve Video
• İnceleme raporu

Mevcut hareket kodunu denetler ve önceliklendirilmiş, bağımsız uygulama planları üretir.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Canlı bir görsel seçici arkasında bir kullanıcı arayüzü parçasının gerçekten farklı birkaç versiyonunu oluşturur.

• Web ve Arayüz
• Arayüz kodu

Animasyon kodunu zamanlama, etkileşim ve bitiş açısından yüksek işçilik standardına göre inceler.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu
• OpenDesign'da

React'in View Transition API'si ile doğal hissettiren sayfa geçişleri.

Gereksinim: React

• Hareketli Grafik ve Video
• Arayüz kodu

Sıfırdan veya PowerPoint (PPT) dosyalarından dönüştürülmüş animasyon açısından zengin HTML slaytlar.

• Presentations
• HTML slaytlar
• OpenDesign'da

JSON spesifikasyonlarını Ink ile etkileşimli terminal kullanıcı arayüzlerine dönüştürür.

Gereksinim: Ink

• Web ve Arayüz
• Terminal arayüzü

Raster görseller üretir veya düzenler: illüstrasyonlar, fotoğraflar, dokular, sprite'lar, mockup'lar.

Gereksinimler: Görüntü oluşturma servisi

• Görseller ve Üretken Sanat
• Image
• OpenDesign'da

Tek dosyalı yatay HTML PPT sunumları, dergi veya İsviçre tarzında, konuşmacı görünümü ve senkronizasyonla.

• Presentations
• HTML slaytlar
• OpenDesign'da

Herhangi bir ürün için marka kılavuzlarını tanımlar veya uygular: renk, tipografi, logo ve ses tonu.

• Marka ve Tasarım Sistemleri

Sonraki belgeler ve sunumlar için 10 soruluk bir sihirbazla marka kimliğini bir kez yakalar.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Bir Markdown sunumu markalı slaytlara dönüştürür.

• Presentations
• HTML slaytlar

Tasarım token'ları, bileşen dokümantasyonu, duyarlı hesaplamalar ve geliştirici teslimi.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Veriye dayalı kişilikler, yolculuk haritaları, kullanılabilirlik test çerçeveleri ve araştırma sentezi.

• UX & Araştırma
• Araştırma dokümanı

Yüksek kaliteli HTML prototipler, slaytlar, animasyon ve görselleştirmeler; üç taslaktan başlar.

• Web ve Arayüz
• HTML

Bir tasarım veya sayfanın WCAG 2.1 AA denetimi: kontrast, klavye, dokunma hedefleri.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Kullanılabilirlik, hiyerarşi ve tutarlılık üzerine yapılandırılmış tasarım geri bildirimi.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Bir tasarımdan geliştirici teslim özellikleri: düzen, token'lar, bileşen durumları, kırılma noktaları.

• Marka ve Tasarım Sistemleri
• Aktarım dokümanı

Mevcut bir tasarım sistemini denetler, belgeler veya genişletir.

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Görüşmeleri, anketleri ve test notlarını temalar ve öneriler halinde sentezler.

• UX & Araştırma
• Araştırma dokümanı

Kullanıcı görüşmelerini, anketleri ve kullanılabilirlik testlerini planlar, yürütür ve sentezler.

• UX & Araştırma
• Araştırma dokümanı

UX metni yazar veya inceler: mikro metin, hata mesajları, boş durumlar, CTA'lar.

• UX & Araştırma

GSAP temel API: to/from/fromTo, easing, stagger, matchMedia, azaltılmış hareket.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

Vue, Svelte ve diğer React olmayan framework'lerde GSAP: yaşam döngüsü, kapsam belirleme, temizlik.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

GSAP performansı: dönüşümler, düzen bozulmalarından kaçınma, will-change, toplu işleme.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

GSAP eklentileri: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG ve fizik.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

useGSAP hook, refs, context ve temizlik ile React ve Next.js'te GSAP.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

ScrollTrigger ile kaydırma bağlantılı animasyon: sabitleme, scrub, tetikleyiciler, parallax.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

GSAP zaman çizelgeleri: konum parametresi, iç içe geçme ve oynatma kontrolü.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

gsap.utils yardımcıları: clamp, mapRange, interpolate, snap, wrap, pipe.

Gereksinimler: GSAP

• Hareketli Grafik ve Video
• Arayüz kodu
• OpenDesign'da

PPT ve tasarım görevleri için sunuma hazır renk paletleri ve yazı tipi eşleştirmeleri.

• Marka ve Tasarım Sistemleri

Yarıçap ve boşluk tariflerinden PPT slaytları için tutarlı bir görsel sistem.

• Presentations

İnsan, evcil hayvan, nesne veya logo fotoğraflarını altyazılı dört GIF çıkartmaya dönüştürür.

• Hareketli Grafik ve Video
• GIF
• OpenDesign'da

Düzenlenebilir PowerPoint (PPTX) slayt destelerini oluşturur, düzenler ve okur.

• Presentations
• PPTX
• OpenDesign'da

GLSL shader'lar: ray marching, SDF'ler, akışkanlar, parçacıklar, prosedürel görseller.

Gereksinim: GLSL / WebGL

• Görseller ve Üretken Sanat
• Generative art
• OpenDesign'da

PptxGenJS ile tek PowerPoint slaytları uygular.

Gereksinim: PptxGenJS

• Presentations
• PPTX

Boşluk, hiyerarşi, tipografi ve küçük yerleşim sorunlarını düzelterek UI kodunu hızlıca temizler.

• Tasarım İncelemesi ve Erişilebilirlik
• Arayüz kodu

Mevcut bir ürün deposundan veya herkese açık web sitesinden DESIGN.md oluşturur veya günceller.

• Marka ve Tasarım Sistemleri
• DESIGN.md

ARIA, klavye, odak, kontrast ve form hatalarını denetler ve düzeltir.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Sarsıntılı CSS/JS animasyonlarını ve kaydırma bağlantılı hareketi bulur ve düzeltir.

• Hareketli Grafik ve Video
• İnceleme raporu

Bir ürün yüzeyini kendi tasarım kanıtlarına göre denetler ve uygulama planları yazar.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Stitch projelerini analiz eder ve anlamsal bir DESIGN.md yazar.

Gereksinim: Google Stitch

• Marka ve Tasarım Sistemleri
• DESIGN.md
• OpenDesign'da

Belirsiz UI fikirlerini, Stitch için optimize edilmiş cilalı promptlara dönüştürür.

Gereksinim: Google Stitch

• Web ve Arayüz
• OpenDesign'da

Stitch tasarımlarını TanStack Query ile React + Vite panolarına dönüştürür.

Gereksinim: Google Stitch

• Web ve Arayüz
• Arayüz kodu

Stitch projelerinden Remotion geçişleri ve yakınlaştırmalarıyla tanıtım videoları oluşturur.

Gereksinimler: Google Stitch, Remotion

• Hareketli Grafik ve Video
• Video
• OpenDesign'da

shadcn/ui bileşenlerini entegre etme ve özelleştirme: keşif, kurulum, en iyi uygulamalar.

Gereksinimler: shadcn/ui

• Web ve Arayüz
• Arayüz kodu
• OpenDesign'da

Frontend kodunu statik HTML ve tasarım sistemi çıkarımı yoluyla Stitch tasarımına dönüştürür.

Gereksinim: Google Stitch

• Web ve Arayüz
• Tasarım dosyası

Herhangi bir framework'teki frontend kaynak kodundan eksiksiz bir DESIGN.md çıkarır.

• Marka ve Tasarım Sistemleri
• DESIGN.md

Gömülü CSS ve görsellerle bağımsız statik HTML anlık görüntüleri çıkarır.

• Web ve Arayüz
• HTML

Stitch'te metin veya referans görselden ekran oluşturur, düzenler ve varyasyon yapar.

Gereksinim: Google Stitch

• Web ve Arayüz
• Tasarım dosyası

MCP araçları aracılığıyla Stitch'te tasarım sistemleri oluşturur, günceller ve uygular.

Gereksinim: Google Stitch

• Marka ve Tasarım Sistemleri
• Tasarım sistemi

Stitch tasarımlarını modüler React + Vite bileşenlerine dönüştürür veya senkronize eder.

Gereksinim: Google Stitch

• Web ve Arayüz
• Arayüz kodu

Stitch HTML tasarımlarını React Native bileşenlerine dönüştürür veya senkronize eder.

Gereksinimler: Google Stitch, React Native

• Mobil Uygulamalar
• Arayüz kodu

Panolar, yönetim panelleri, SaaS araçları ve ayarlar sayfaları için zanaat odaklı arayüz tasarımı.

• Web ve Arayüz
• Arayüz kodu

Hover, gölge, kenarlık, ikon, tipografi ve mikroetkileşim cilası için tasarım mühendisliği prensipleri.

• Web ve Arayüz

WCAG 2.2'yi takip ederek web erişilebilirliğini denetler ve geliştirir.

• Tasarım İncelemesi ve Erişilebilirlik
• İnceleme raporu

Hareket tasarımı ilkelerini uygular: zamanlama, easing, koreografi ve animasyon temelleri.

• Hareketli Grafik ve Video

Uçtan uca kullanıcı araştırması asistanı: nitel ve nicel, rehberler ve planlar.

• UX & Araştırma
• Araştırma dokümanı

Material Design 3 token'larını, bileşenlerini ve uyarlanabilir düzenlerini uygular.

• Mobil Uygulamalar
• Arayüz kodu

Kowalski, Krehel ve Tompkins'e göre amaçlı etkileşim hareketi veya mevcut animasyonun incelemesi.

• Hareketli Grafik ve Video

Renk adlandırma, teori, uzaylar, paletler, rampalar, gradyanlar, dönüşümler ve kontrast.

• Marka ve Tasarım Sistemleri
• OpenDesign'da

AntV API aracılığıyla verileri çubuk, çizgi, pasta, radar, Sankey, zihin haritası ve akış şemaları olarak işler.

Gereksinimler: AntV API

• Diyagramlar ve Veri Görselleştirme
• Grafik görseli

Verilen metinden infografikler oluşturur.

Gereksinimler: AntV API

• Diyagramlar ve Veri Görselleştirme
• Image

Kullanıcı merkezli, erişilebilir mikro metin: düğmeler, etiketler, hatalar, formlar, başlangıç.

• UX & Araştırma

Her erişilebilirlik bulgusunu etkilenen öğeye, önerilen düzeltmeye ve doğrulama sonucuna bağlı tutun.

Paketle gelen araçlar için Python, kaynağa erişim ve bağlamsal doğrulama için bir tarayıcı veya yardımcı teknoloji ortamı.

• Erişilebilirlik
• Tasarım İncelemesi
• Frontend

Akademik bir sunumu argümanı, kanıtı ve slayt başlıkları etrafında planlayın; PPTX dosyasını ayrı bir araç oluşturur.

Ayrı bir PPTX Skill'i gerektirir. Kayıtta markitdown, PptxGenJS, LibreOffice ve Poppler uygulamayla ilgili bağımlılıklar olarak listelenmiştir.

• Sunumlar
• Akademik Araştırma
• PowerPoint

Illustrator belgelerini, çizimlerini ve dışa aktarımlarını oluşturmak ve düzenlemek için ExtendScript betikleri yazın.

Adobe Illustrator CC veya üstü; üretilen betikler onun ExtendScript ortamında çalışır.

• Vektör Tasarım
• Otomasyon
• Illustrator

Araştırma gözlemlerini, özgün kanıtlarla bağlantılarını koruyarak temalar altında gruplayın.

Sağlanan transkriptleri veya notları okuyabilen bir ajan kullanın. Katılımcı kimliklerini ve tasarım sorusunu verin; skill görüşme toplamaz, mevcut kanıtları sentezler.

• UX Araştırması
• Sentez

Tek bir geçişe net bir amaç ve arayüzün durum değişikliğini destekleyen bir hareket profili kazandırın.

Arayüzün önceki ve sonraki durumlarını, tetikleyiciyi ve hedef cihazları belirtin. Zamanlamayı, kesintiye uğramayı ve azaltılmış hareket davranışını denetlemek için çalıştırılabilir bir önizleme kullanın.

• UI Hareketi
• Tasarım Rehberi

Görsel bir yaklaşım seçmeden önce ürünün gerçek nesnelerinden ve kısıtlarından başlayın.

Proje dosyalarını okuyabilen bir ajan; görsel kontroller için render desteği. Ücretli UIZZE MCP isteğe bağlıdır.

• Arayüz Tasarımı
• Tasarım İncelemesi

Mark'larını, kodlamalarını, ölçeklerini ve etkileşimlerini kullanarak AntV G2 v5 ile grafikler oluşturun.

@antv/g2 v5 veya belgelenmiş tarayıcı paketi gerekir. İsteğe bağlı referans alımı harici AntV bağlam hizmetini kullanır.

• Data Visualization
• Grafikler
• JavaScript

AntV G6 v5 ile ağ verilerini görselleştirin; graf yerleşimleri ve etkileşimli keşif dahil.

@antv/g6 v5 kullanan bir uygulama, tarayıcıda bir graf kapsayıcısı ve belgelenmiş referans alma servisi gerekiyorsa ağ erişimi. API'leri kurulu sürümle doğrulayın.

• Graf Görselleştirme
• Ağlar
• AntV

AntV X6 ile bağlantıları, düzenleme davranışını ve gerekli eklentileri içeren bir düğüm-kenar diyagram editörü oluşturun.

Bir tarayıcı tuvali ve gerekli eklentilerle birlikte belgelenmiş @antv/x6 v3 API kullanın. Ek referansları almak için ağ erişimi gerekir. Örnekleri kurulu sürümünüzle karşılaştırın.

• Diyagram Editörleri
• Düğüm Arayüzleri
• AntV

Anlatım ve bilinçli şekilde tutarlı bir görsel dille, özgün ve kaynaklara dayalı bir açıklayıcı video oluşturun.

Sağlanan Remotion/Node projesi, Python yardımcı betikleri, render yeteneği ve uygun bir TTS yolu gerekir. Belgelenen Çince ve İngilizce varsayılanlar farklı ses motorları kullanır; çoklu ajanla yapım, tanımlanan iş akışının bir parçasıdır.

• Hareketli Grafik
• Video
• Remotion

Ekran görüntülerinden, alt yazılardan ve görsel varlıklardan uyumlu bir uygulama mağazası sayfası görselleri seti oluşturun.

Paketlenmiş Next.js editörü, desteklenen bir Node/package-manager ortamı ve bir tarayıcı gerekir. PNG dışa aktarma html-to-image kullanır; kaynak ekran görüntüleri, fontlar ve diğer varlıklar için uygun kullanım hakları gerekir.

• Uygulama Pazarlaması
• Ekran Görüntüleri
• Yerelleştirme

Apple platformu arayüzlerini platforma özgü tasarım ve erişilebilirlik rehberliğine göre inceleyin.

Kontrol aracı için Python 3 (yalnızca standart kütüphaneyi kullanır); güncel Apple Human Interface Guidelines (HIG); davranış kontrolleri için cihaz veya simülatör erişimi.

• Yerel Arayüz
• Erişilebilirlik
• Tasarım İncelemesi

Makalenin ilgili noktalarında temel fikirleri açıklayan illüstrasyonları planlayın ve oluşturun.

Kullanılabilir bir raster görsel üretim arka ucu ve Skill'in referans/yapılandırma dosyaları gerekir; arka uca erişim ve maliyet ayrıdır.

• Editoryal İllüstrasyon
• İçerik Tasarımı

Çizgi roman sayfalarını oluşturmadan önce her karenin ne öğrettiğini planlayın.

Kullanılabilir bir görsel arka ucu; sağlanan PDF birleştirme betiği için Bun veya npx tabanlı bir Bun çalışma ortamı.

• Çizgi Romanlar
• Eğitim Tasarımı
• Hikâye Anlatımı

Tek bir merkezi fikir etrafında, tanımlı bir kompozisyon ve görsel stille makale kapağı üretin.

Kullanılabilir bir raster görsel arka ucu ile Skill'in yapılandırma ve sanat yönetimi referansları.

• Editoryal Tasarım
• Kapak Görselleri

Prototipler, sunum konseptleri ve yeniden kullanılabilir görsel sistemler için dosya tabanlı bir tasarım iş akışı kullanın.

Dosya işleyebilen bir ajan ile deponun metodolojisi, yerleşik rehberleri, referans belgeleri ve betikleri gerekir. Dışa ve içe aktarma yollarının kendi ön koşulları vardır.

• Prototipleme
• Tasarım Sistemleri
• Sunumlar

İlişkileri, etiketleri ve bağlantı yollarını incelenebilir bir vektör dosyasında açık tutun.

SVG için bir metin/kod ortamı; sağlanan PNG dönüştürme betiği için Bun veya npx tabanlı Bun.

• Diyagramlar
• SVG
• Bilgi Tasarımı

Toplu iş akışları dahil, desteklenen sağlayıcılar üzerinden görsel üretim ve düzenleme işleri çalıştırın.

Bun veya npx tabanlı bir Bun çalışma ortamı, eksiksiz sağlayıcı adaptörleri ve seçilen desteklenen yol için kimlik bilgileri veya oturum açma.

• Görsel Üretimi
• Toplu İş Akışları
• Görsel Varlıklar

İçeriği, materyale uygun karşılaştırma, hiyerarşi, süreç veya genel bakış yerleşimiyle infografiğe dönüştürün.

Kullanılabilir bir raster görsel arka ucu ile yerleşim, stil ve yapılandırma referansları.

• İnfografikler
• Bilgi Tasarımı

Resimli slaytlar üretin ve paylaşım için görsel tabanlı bir deste oluşturun; tek tek slayt nesneleri düzenlenebilir değildir.

PPTX/PDF birleştirme betikleri için bir raster üretim arka ucu ile Bun veya npx tabanlı Bun gerekir.

• Sunumlar
• Editoryal Tasarım

Her kartta tek bir ana fikir bulunan, görsel olarak tutarlı bir Xiaohongshu görsel kartı serisi oluşturun.

Uygun referans desteği olan kullanılabilir bir raster arka uç, ayrıca yapılandırma ve kart yerleşimi referansları.

• Sosyal Medya Grafikleri
• İçerik Tasarımı
• Görsel Kartlar

Kaynak materyali; editoryal tipografi, yerleşim ve illüstrasyonlarla okunabilir bir HTML makalesine dönüştürün.

Belgelenmiş derleme Node/npm, Vite, React, TypeScript ve Reacticle kullanır. Belge çıkarma ve isteğe bağlı PDF çıktısı ek araçlar gerektirebilir; üretilen görseller ayrıca erişilebilir bir arka uç gerektirir.

• Editoryal Tasarım
• HTML
• Uzun Biçimli İçerik

Gezinme kategorileri önermek ve belirsiz öğeleri belirlemek için katılımcıların kart gruplamalarını analiz edin.

Her katılımcının yerleştirmeleri, etiketleri ve çalışma yöntemi dahil, tamamlanmış kart sıralama sonuçlarını sağlayın. Skill, sağlanan kanıtı analiz eder; katılımcı bulma ve veri toplama ayrı süreçlerdir.

• UX Araştırması
• Sentez

İnsanların bir göreve nereden başlayacaklarını belirleyip belirleyemediğini kontrol etmek için ilk tıklama testi planlayın.

Ekranı veya prototipi, kullanıcı hedefini ve katılımcı seçim ölçütlerini sağlayın. Skill bir test planı oluşturur; oturumların yürütülmesi ve tıklamaların toplanması ayrı bir çalışma kurulumu gerektirir.

• UX
• Tasarım Rehberliği

Kaynak materyali illüstrasyonlu slaytlara dönüştürün ve slayt içeriği tek tek düzenlenebilir değil, görsel tabanlı olan bir PPTX oluşturun.

Python 3, kullanılabilir bir görsel üretim arka ucu ve deponun birleştirme ile durum kaydetme betikleri. Gerçek çalıştırma için başvurulan iş akışı belgeleri gereklidir.

• Sunumlar
• Görsel Üretimi

Bir marka rengini, kullanılabilir bir arayüz rolleri ve ön plan-arka plan kombinasyonları setine dönüştürün.

Marka renklerini, arayüz rollerini ve erişilebilirlik hedeflerini sağlayın. Önerilen renk kombinasyonlarını değerlendirmek için gerçek bileşen durumlarını ve bir kontrast denetim aracını kullanın.

• Renk Tasarımı
• Tasarım Rehberi

Bir bileşeni, görünümü kadar davranışını da dikkatle açıklayarak uygulanabilir hale getirin.

Bileşenin amacını, görsel varyantlarını ve hedef platformu belirtin. Çıktı, uygulama ve test için bir spesifikasyondur; uygulanmış bir bileşen değildir.

• Tasarım Sistemleri
• Spesifikasyonlar

Sistemin ne söyleyeceğini, karşılığında ne beklediğini ve ikisi uyuşmadığında nasıl toparlanacağını tasarlayın.

Desteklenen görevleri, kanal kısıtlarını ve onay gereksinimlerini sağlayın. Sesli akışlar ayrıca cihaz ve konuşma tanıma testi gerektirir; yazılı bir diyalog tek başına tanıma kalitesini belirleyemez.

• UX
• Tasarım Rehberi

Arayüz hiyerarşisini renkleri tersine çevirmek yerine karanlık yüzeylere aktarın.

Mevcut bir açık mod paleti, bileşen örnekleri ve medya varlıklarıyla başlayın. Karanlık mod kontrastını, tema geçişini ve görsel işlemeyi kontrol etmek için işlenmiş bir arayüz kullanın.

• Renk Tasarımı
• Tasarım Rehberi

Tek bir içerik kaynağından alternatif slayt yerleşimleri üretin, ardından önizlemek ve dışa aktarmak için yerel editörü kullanın.

Paketlenmiş üreteçle birlikte Node.js 20+ ve npm gerekir. Düzenleme ve dışa aktarma özellikleri için yerel önizleme hizmetini kullanın; genel bir statik sunucu bu API'leri sağlamaz.

• Sunumlar
• HTML Slaytları
• PPTX

En karmaşık görünen grafiği değil, karşılaştırmayı anlaşılır kılan grafiği seçin.

Gerçek veriyi, alan tanımlarını, okurun sorusunu ve görüntüleme kısıtlarını sağlayın. Skill grafik tasarımına yol gösterir; veri doğrulama ve grafik uygulaması ayrı görevlerdir.

• Data Visualization
• Tasarım Rehberi

Görsel kararlara, bileşenlerin yeniden kullanabileceği adlar ve ilişkiler verin.

Mevcut görsel değerleri, bileşen örneklerini ve adlandırma kısıtlarını sağlayın. Skill, token adlarını ve ilişkilerini tanımlar; dışa aktarma araçları ve framework entegrasyonu ayrı bir kurulum gerektirir.

• Tasarım Sistemleri
• Teknik Özellikler

Oturumlar arasında gelişen deneyimleri, tek bir görüşmede yeniden kurmaya çalışmak yerine yakalayın.

Araştırma hedefini, katılımcı kriterlerini, zaman aralığını ve uygulanabilir kayıt araçlarını sağlayın. Çıktı bir çalışma planıdır; katılımcı bulma, ara görüşmeler ve katılımcı verilerinin toplanması yine de yürütülmelidir.

• UX Araştırması
• Çalışma Planlama

Önce istenen ekran görüntüsünü oluşturun, ardından uygulama için hedef olarak kullanın.

Bir hedef görsel gerekir; sağlanmamışsa görsel üretimi erişimi gerekir. Ayrıntılı araç gereksinimleri seçilen başvuru iş akışına bağlıdır ve yalnızca giriş dosyasından belirlenemedi.

• Görsel İterasyon
• Oyun Tasarımı
• Prototipleme

Bir kullanıcının bakış açısını paylaşırken doğrudan kanıtı yorumdan ayrı tutun.

Araştırma notlarınızı okuyabilen bir ajan, tanımlı bir kullanıcı veya segment ve haritanın yol göstermesi gereken tasarım kararı.

• UX Araştırması
• Sentez

Hataların ne olduğunu açıklamasını ve insanlara çalışmalarını kaybetmeden ilerleyecek bir yol sunmasını sağlayın.

Etkilenen akışları, bilinen hata durumlarını ve ürününüzün gerçekten desteklediği kurtarma eylemlerini okuyabilen bir ajan.

• UX
• Tasarım Rehberi

Yayımlanmış Figma bileşenlerini Code Connect ile eşleşen kod bileşenlerine eşleyin.

Bağlı Figma MCP, yayımlanmış bileşenlere ve kod tabanına erişim ile güncel Code Connect yetkisi ve düzenleme izinleri.

• Figma
• Tasarım Sistemleri
• Geliştirici Devri

Bir ajanın Figma tasarımlarını uygulamak için kullanması gereken depo yollarını, bileşenleri ve kuralları belgeleyin.

Figma MCP bağlantısı ve hedef kod tabanına erişim gerekir; hedef kural biçimi kodlama ortamına bağlıdır.

• Figma
• Tasarım Sistemleri
• Ajan Kuralları

Tasarım sistemiyle bağlantısı korunan, düzenlenebilir bir Figma ekranı oluşturun.

Bağlı Figma MCP, hedef dosyaya erişim, yayımlanmış bir tasarım sistemi ve tuval işlemleri için yardımcı figma-use Skill'i.

• Figma
• Arayüz Tasarımı
• Tasarım Sistemleri

Önce tasarım token'larıyla başlayıp ardından bileşenler ekleyerek yeniden kullanılabilir bir Figma kütüphanesi oluşturun.

Figma MCP; düzenlenebilir dosya erişimi, depo erişimi ve eşlik eden figma-use Skill'i ile yardımcı referanslar gerekir.

• Figma
• Tasarım Sistemleri
• Bileşen Kütüphaneleri

Hedef deponun bileşenlerini ve kurallarını kullanarak bir Figma tasarımını uygulayın, ardından sonucu tasarımla karşılaştırın.

Bağlı bir Figma MCP, seçilen tasarıma ve hedef depoya erişim ve görsel doğrulama için çalıştırılabilir bir önizleme gerekir.

• Figma
• Frontend Tasarımı
• Geliştiriciye Devir

İlk alandan başarılı gönderime kadar olan yolu, düzeltmeler ve tekrar ziyaretler dahil olmak üzere belirleyin.

Form brifingini, zorunlu alanları ve doğrulama kurallarını ve varsa mevcut form ekranlarını okuyabilen bir ajan.

• UX
• Tasarım Rehberliği

Ölçülendirilmiş bir modelleme görevini, incelenebilir ve ayarlanabilir kalan FreeCAD nesnelerine dönüştürün.

Birlikte gelen Python'la FreeCAD; arayüz çalışmaları ayrıca birlikte gelen PySide'ı, sahne grafiği çalışmaları ise Pivy'yi kullanır.

• 3D Tasarım
• CAD
• Python

Projenin yapılandırılmış kimlik bilgilerini kullanarak desteklenen bir sağlayıcı aracılığıyla görsel varlıklar üretin ve kaydedin.

Desteklenen bir sağlayıcı API anahtarı ve ağ erişimi gerekir; model erişilebilirliği ve kullanım ücretleri ayrıca kontrol edilmelidir.

• Görsel Üretimi
• Görsel Varlıklar

Yalnızca son kaydırma eylemini değil, bir hareketten önce, hareket sırasında ve sonrasında olanları tasarlayın.

Etkileşim brifini, hedef platformları ve düğmeler veya menüler aracılığıyla kullanılabilen eylemleri okuyabilen bir ajan.

• UX
• Tasarım Rehberi

Görsel promptlarını hazırlayın; üretimi veya düzenlemeyi kullanılabilir yerel bir görsel aracı ya da yapılandırılmış yerel API iş akışı üzerinden çalıştırın.

Yerel API modu; Garden'ın açıkça etkinleştirilmesini, Node betiklerini ve yapılandırılmış kimlik bilgilerini gerektirir. Ana bilgisayarın yerel modu, ana bilgisayarın görsel aracına bağlıdır. Model erişimi, fiyatlandırma ve desteklenen parametreler o ortamda kontrol edilmelidir.

• Görsel Üretimi
• Prompt Tasarımı
• Görsel Düzenleme

Arayüzün kullanılabilirliğini inceleyin ve uzman yargısını katılımcı araştırması gibi sunmadan her bulgunun arkasındaki kanıtı belgeleyin.

Arayüzü inceleyebilen bir ajan, tanımlanmış bir kullanıcı görevleri kümesi ve ilgili alan kısıtları.

• UX
• Tasarım Rehberliği

Kartı oluşturmadan önce bir folyo efekti ya da tüm görseli kapsayan, açıya bağlı bir dönüşüm seçin.

Görsel üretimi, Python, Blender ve teslim edilen görüntüleyici için bir web çalışma ortamı gerekir. Kaynak, işlem hattı sırasında yerel bağımlılık kurulumundan söz eder.

• 3D Tasarım
• Koleksiyon Kartları
• Blender

Slayt geçişlerinden oluşan bir dizi yerine, bir sanat yönünden yola çıkarak kısa film oluşturun. Huashu Art Motion, yerel bir render iş akışında kodla çizilen sahneleri, karakter sprite'larını ve hareket incelemesini bir araya getirir.

Yerel render için uv, FFmpeg ve Playwright Chromium gerekir. İnsana benzeyen sprite'lar için mevcut karakter karelerini sağlayın veya ayrı bir görsel üretim iş akışı kullanın; ses ve yazı tipleri için ayrı varlıklar ve izinler gerekir.

• Sanat Animasyonu
• Canvas
• Kısa Filmler

Görsel referanslardan, tasarım kurallarından ve token'lardan yeniden kullanılabilir bir tasarım skill'i oluşturun.

Dosya erişimi, uygun referans inceleme araçları, validate.mjs için Node ve görsel güven için tarayıcıda inceleme gerekir. Araçların bulunabilirliği çıkarım doğruluğunu etkiler.

• Tasarım Sistemleri
• Skill Oluşturma
• Tasarım Token'ları

İlgisiz sembolleri bir araya toplamak yerine ikonlara tutarlı bir yapı ve adlandırma sistemi kazandırın.

Örnek ikonları, bunların hedeflenen boyutlarını ve gereken tasarım ile kod formatlarını inceleyebilen bir ajan.

• Tasarım Sistemleri
• Spesifikasyonlar

Sipariş edilen veya tekrar eden illüstrasyonlara ortak bir görsel dil ve arayüzde net bir görev kazandırın.

Görsel referansları, ürün renklerini ve illüstrasyonların görüneceği ekranları ve boyutları inceleyebilen bir ajan.

• UX
• Tasarım Rehberliği

Düzenlenebilir metnin arkasına ekran görüntüsü koymak yerine görsel slaytları yapılandırılmış bir sunuma dönüştürün.

editppt CLI'ı, uygun görsel üretim yetenekleri ve çok sayfalı çalıştırmalar için çoklu ajan yürütmesi gerekir. PaddleOCR isteğe bağlı, yapılandırılmış bir yardımcıdır; çevrimdışı ipuçlarının kalite profili farklıdır.

• Sunumlar
• PowerPoint
• Yeniden oluşturma

Gezinmenin nasıl görüneceğine karar vermeden önce bilginin nereye ait olduğuna karar verin.

Ürün içeriği ve kullanıcı görevi kanıtları gerekir; kaynak belirli bir tasarım uygulaması gerektirmez.

• UX Stratejisi
• İçerik Yapısı

Araştırma hedeflerini, yanıtı yönlendirmek yerine kanıtı davet eden sorulara dönüştürün.

Başlıca girdiler araştırma hedefleri, katılımcı ölçütleri ve oturum kısıtlarıdır; kayıt veya katılımcı bulma hizmeti sağlanmaz.

• UX Araştırması
• Görüşmeler

Bir ürün kararını, kişinin neyi başarmaya çalıştığı etrafında yeniden çerçeveleyin.

Kullanıcı araştırması veya açıkça etiketlenmiş hipotezler gerektirir; görüşmeleri kendisi yapmaz.

• UX Araştırması
• Ürün Stratejisi

Tekil temas noktalarını, bir kişinin gerçekte yaşadığı deneyime bağlayın.

Mevcut persona, araştırma ve analitik verilerini kullanır; otomatik duygu ölçümü yapıldığı belirtilmemiştir.

• UX Araştırması
• Yolculuk Haritalama

Sayfanın argümanını ve görsel kurallarını tek bir hedeflenen dönüşüm etrafında birleştirin.

Tek bir uygulama çalışma ortamı gerekmez; uygulama örnekleri Tailwind değerlerine, IntersectionObserver'a ve isteğe bağlı hareket araçlarına başvurur.

• Açılış Sayfaları
• Metin Yazarlığı
• Web Tasarımı

Bileşenleri oluşturmadan önce gerçek bir ürün önermesini sayfa bölümleriyle ilişkilendirin.

Tailwind içeren uyumlu bir React veya Next.js projesi gerekir; başvurulan arayüz bileşenleri ve isteğe bağlı marka analizi araçları ayrı kurulum gerektirebilir.

• Açılış Sayfaları
• Metin Yazarlığı
• Frontend

İlişkili sayfa yerleşimleri için ortak sütunları, kenar boşluklarını ve duyarlı davranışı tanımlayın.

Adlandırılmış bir çalışma zamanı bağımlılığı yoktur; yararlı ızgara değerlerini seçmek için gerçek içerik kısıtları gerekir.

• UI Tasarımı
• Duyarlı Yerleşim

Bekleme sırasında neler olduğunu, ilerleme konusunda insanları yanıltmadan gösterin.

İşlem sürelerine ve ilerleme olanaklarına dair doğru bilgiler ürün veya uygulama ekibinden gelmelidir.

• Etkileşim Tasarımı
• Yükleme Deneyimi

Arayüzü yalnızca çevrilmiş metinlere değil, dil farklılıklarına da hazırlayın.

Hedef yerel ayara ait metin, yazı tipleri ile uygun dil veya kültür incelemesi gerekir; otomatik bir yerelleştirme platformu pakete dahil değildir.

• Tasarım Sistemleri
• Yerelleştirme

Tam bir marka kitine genişletmeden önce işareti oluşturun ve test edin.

Kaynak, bağımlılığı olmayan Python yardımcı betiklerini tanımlar; ancak gerçek görsel oluşturma için CairoSVG, Inkscape, Chrome veya desteklenen başka bir oluşturucu gerekir.

• Markalaşma
• Logo Design
• SVG

Mühendisliğe yalnızca bir animasyon referansı değil, küçük bir etkileşimin arkasındaki davranışı verin.

Belirli bir hareket kütüphanesi gerekmez; yine de hedef cihazda test yapmak gereklidir.

• Etkileşim Tasarımı
• UI Devir Teslimi

Animasyon kararlarını bileşenler ve ekipler arasında yeniden kullanılabilir hale getirin.

Bir token uygulaması veya platform karşılığı gerekir; kaynak belirli bir animasyon çerçevesi zorunlu kılmaz.

• Tasarım Sistemleri
• Hareket

Referans görseller ve birlikte gelen bir Python betiğiyle OpenRouter üzerinden görsel üretin veya düzenleyin.

uv, birlikte gelen Python betiği ve uygun model erişimi ile kredisi olan bir OPENROUTER_API_KEY.

• Görsel Düzenleme
• Kompozit Oluşturma

Bilgi hiyerarşisini tanınabilir gezinme kontrollerine ve hedefler arasında net yollara dönüştürün.

Bir bilgi hiyerarşisi ve görev öncelikleri gerekir; gezinme bileşeni paketi sağlanmaz.

• Etkileşim Tasarımı
• Gezinme

Yeni kullanıcılardan ürünün tamamını öğrenmelerini istemeden önce, yararlı bir sonuca ulaşmalarına yardımcı olun.

Ürüne özgü aktivasyon tanımları ve sonraki ölçümler için enstrümantasyon gerekir.

• Etkileşim Tasarımı
• Onboarding

Seçilen formata uygun yerleşim kurallarını kullanarak bir marka sistemini HTML sayfasına veya slayt sunumuna uygulayın.

URL tabanlı marka çıkarımı Firecrawl gerektirir. Varsayılan çıktılar harici JavaScript bağımlılıklarından kaçınır; ancak yazı tipleri veya görsel varlıklar yine de kendi kullanılabilirlik ve hak koşullarını gerektirebilir.

• Web Tasarımı
• Sunumlar
• Marka Sistemleri

Etkileyici açılış sayfaları, portfolyolar ve etkileşimli sunumlar için güçlü bir görüşe sahip ön yüz rehberi.

Bir ön yüz projesi ve bilinçli olarak seçilmiş animasyon kütüphaneleri; rehber tek bir çalışma ortamı gerektirmez.

• Ön Yüz Tasarımı
• Hareket
• Tipografi

Bir video zaman çizelgesinde biçimlendirmeden önce altyazı metnini ve zamanlamasını tanımlı bir veri yapısında tutun.

Bir Remotion projesi, @remotion/captions ve ilgili transkripsiyon, içe aktarma ve gösterim referans dosyaları.

• Video
• Altyazılar

Bir video brief'inden, geliştirme sırasında önizleme sunan bir Remotion projesi ve kompozisyonu kurun.

Node.js, Git, paket kurulumu, Remotion Studio ve ilgili kompozisyon ve yerleşim referansları.

• Video
• React

React kaynağının katmanları, zamanlamayı ve kontrolleri nasıl sunduğunu değiştirerek bir videoyu Studio'da düzenlenebilir hale getirin.

Belgelenmiş Interactive API'lerini destekleyen bir Remotion sürümü gerekir; açıklanan düzenlenebilir yol interpolasyonu için ayrıca @remotion/paths gerekir.

• Video
• React
• Etkileşim

Amaçlanan çekim için eşleme tekniğini, sağlayıcıyı ve veriyi seçerek Remotion ile animasyonlu haritalar oluşturun.

Remotion ile birlikte seçilen tekniğin kütüphaneleri ve verileri gerekir; alınan kaynağa göre Mapbox bir anahtar gerektirir.

• Video
• Haritalar

Bir web sayfasında CSS animasyonu kullanır gibi değil, bir video zaman çizelgesi gibi davranan React işaretlemesi yazın.

Proje sürümüyle eşleşen Remotion ve özelliğe özgü paketler; bağlantılı referanslar ek medya, efekt, yazı tipi veya dışa aktarma gereksinimlerini belirler.

• Video
• React
• Hareket

Komut dizisi için makro, modelleme görevi mantık gerektiriyorsa betik seçin.

Rhino 7 veya üzeri; Rhino 8, kaynağın birleşik Script Editor için önerdiği ortamdır.

• 3B Tasarım
• CAD
• Otomasyon

Canlı bir 3B dünya değil, kaydırmayla kontrol edilen önceden render edilmiş bir kamera yolculuğu.

Belgelenen iş akışı Higgsfield ve bir Monid video yolunu, ayrıca ffmpeg/ffprobe ve bir tarayıcı ortamını kullanır. Sağlayıcı hesapları, krediler, model yetenekleri ve isteğe bağlı görsel rotaları yeniden doğrulanmalıdır.

• Kaydırma Animasyonu
• Video
• Açılış Sayfaları

Başarısız olan aramalar dahil, tüm bilgiye erişim deneyimini tasarlayın.

Arama hizmetleri ve sorgu izleme altyapısı bu rehberin kapsamı dışındadır.

• Etkileşim Tasarımı
• Arama

Müşterinin gördüğü şeyin arkasındaki operasyonel işi ortaya çıkarın.

Paydaş ve süreç kanıtı gerektirir; operasyonel sistemlere kendi başına erişmez.

• UX Stratejisi
• Hizmet Tasarımı

Slang shader'ları yazın ve girdilerinin, kaynaklarının ve çıktılarının renderer ile nasıl bağlandığını kontrol edin.

Hedef backend'e uygun bir Slang derleme ve renderer ortamı gerekir; entegrasyon iddiaları için host tarafı doğrulama gereklidir.

• Shader'lar
• GPU Grafikleri
• 3D Tasarım

Boşluğu, tek tek piksel ayarlarıyla değil, ilişkiye ve amaca göre seçin.

Belirli bir token aracı gerekmez; uygulama mevcut bileşen sistemine bağlıdır.

• Arayüz Tasarımı
• Tasarım Token'ları

Bir bileşenin her durumundan sonra neler olabileceğini tanımlayın.

Adı belirtilmiş bir state-machine paketi gerekmez; gerçek uygulama ve testler sonraki aşamanın işi olarak kalır.

• Etkileşim Tasarımı
• Davranış Modelleme

Tek bir bileşen kütüphanesinin yapısını çoğaltmadan görünümünü değiştirmesini sağlayın.

Uygulama, projenin token sistemini veya platform karşılıklarını kullanır; çalışma zamanında geçiş ayrıca geliştirilmeli ve test edilmelidir.

• Tasarım Sistemleri
• Temalandırma

Mevcut bir marka işaretini veya hizmet ikonunu projenizin ihtiyaç duyduğu biçimde alın.

Kayıt defterine veya CDN'e ağ erişimi gerekir. React, CLI, Figma ve MCP entegrasyonları isteğe bağlı yüzeylerdir; basit URL alımı için ön koşul değildir.

• Marka Varlıkları
• SVG
• Bulut Diyagramları

Yüklenmiş bir karakter veya ürün modeline tanımlı bir oynatma ve harmanlama stratejisi kazandırın.

Çalışan bir Three.js projesi ve renderer; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Yüzey stili veya animasyon eklemeden önce bir şekil temsili seçin.

Çalışan bir Three.js projesi ve renderer; kaynaktaki örnekleri kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve loader'lar seçilen yola bağlıdır.

• 3D
• Three.js

Bir hareketi, canvas'ın ve kameranın gerçek koordinatlarını kullanarak amaçlanan 3D nesneye bağlayın.

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Gelişigüzel parlaklık yerine bilinçli bir aydınlatma kurulumuyla modeli okunabilir hale getirin.

Çalışan bir Three.js projesi ve renderer; kaynaktaki örnekleri kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Gölgelendirme modelini yüzeye uygun seçin, ardından hedeflenen aydınlatma altında inceleyin.

Çalışan bir Three.js projesi ve renderer; kaynaktaki örnekleri kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Ekran efektlerini birbirinden bağımsız filtreler olarak değil, sıralı bir render hattı olarak ele alın.

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Malzeme hazır ayarları efekti ifade edemediğinde özel vertex veya piksel davranışı kullanın.

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Gerilmiş veya soluk görünen bir yüzeyi teşhis etmeden önce her görsele doğru rolünü atayın.

Çalışan bir Three.js projesi ve oluşturucu (renderer); kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

• 3D
• Three.js

Belgelenmiş az sayıda metin stilinden okunabilir bir hiyerarşi oluşturun.

Anlamlı bir görsel doğrulama için gerçek yazı tipi dosyaları veya kullanılabilir platform yazı tipleri gerekir.

• Arayüz Tasarımı
• Tipografi

Oturumları planlamadan önce çalışmanın neyi öğrenmesi gerektiğine karar verin.

Kullanılabilir bir test materyali ve katılımcılara erişim gerekir; işe alım veya oturum platformu sağlanmaz.

• UX Araştırması
• Kullanılabilirlik Testi

Bir kullanıcının tek bir hedefi tamamlamak için izleyebileceği rotaları gösterin.

Kaynak herhangi bir diyagram uygulaması gerektirmez; seçilen çıktı biçimi net gösterimi korumalıdır.

• Prototipleme
• Kullanıcı Akışları

Uydurma bir müşteri hikâyesi kurmadan ürün kararlarına tutarlı bir kullanıcı referansı sağlayın.

Araştırmaya dayalı iddialar için gerçek kullanıcı kanıtı gerekir; sağlanan ürün URL'leri ayrıca incelenmeyi gerektirebilir.

• UX Araştırması
• Personalar

Arayüz yakalamalarından, çekim talimatlarından ve zamanlanmış bir kompozisyondan Remotion ürün videosu planlayın ve oluşturun.

Bir Remotion/Node ortamı, tarayıcı yakalama ve ffmpeg gerekir. Bazı bileşenler Three.js ile ilgili paketlere ihtiyaç duyar; isteğe bağlı müzik analizi ve Jianying dışa aktarımı ayrı bağımlılıklar ekler. Remotion için geçerli lisansı ayrıca inceleyin.

• Ürün Videosu
• Remotion
• Hareket Tasarımı

Önce nelerin fark edilmesi gerektiğini seçin, ardından kompozisyonun bu seçimi desteklemesini sağlayın.

Gerçek içerik ve işlenmiş (render edilmiş) görünüm üzerinden inceleme gerekir; görsel puanlama aracı dahil değildir.

• Arayüz Tasarımı
• Kompozisyon

Tasarımı genişletmeden önce görsel bir yön belirleyin, temsilî bir arayüz oluşturun ve tarayıcıda inceleyin.

Kod yazabilen bir ajan ve tarayıcıda işlenebilen bir ön yüz ortamı gerekir. Seçilen kalıplar React, Babel, grafikler veya başka kütüphaneler kullanabilir; tarayıcı kabulü için uygun bir tarayıcı aracı gerekir.

• Ön Yüz Tasarımı
• Prototipleme
• Tasarım Sistemleri

Zamanlanmış görsel sahneler ve isteğe bağlı anlatım içeren tarayıcı tabanlı sunumlar oluşturun; kayıt ayrı bir adımdır.

Vite, React, TypeScript ve Node araçlarını kullanır. İsteğe bağlı TTS, seçilen sağlayıcıya, kimlik bilgilerine ve adaptöre bağlıdır; son kayıt için tarayıcı ekran yakalama veya kayıt yazılımı gerekir.

• Sunumlar
• Hareket
• Anlatım

Düşük detay düzeyli bir ekranı, davranış ve içerik üzerine konuşmaya yetecek kadar net hale getirin.

Belirli bir tel kafes aracı gerekmez; kullanılabilir bir brief içerik ve durum bilgisini içermelidir.

• Prototipleme
• Tel Kafesler