design-handoffyazan Anthropic

Design Handoff Skill.

Claude Code ve Codex için marka ve tasarım sistemi çalışmalarına yönelik bir skill: tasarımdan geliştirici teslim spesifikasyonları: düzen, tokenlar, bileşen durumları, kırılma noktaları.

Brand & Design Systems
Teslim spesifikasyonu

OpenDesign İndir Kullanım kılavuzunu görüntüle

anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md

--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available

Üst bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 3.939 karakter

01 Ne yapar

design-handoff Skill'i 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

Bir tasarımdan geliştirici teslim dokümantasyonu oluşturur; tasarımı mühendisliğe hazır olan ve bir spesifikasyon sayfasına ihtiyaç duyan ekiplere yöneliktir. Bir Figma URL'sine yönlendirin, ya da bir açıklama veya ekran görüntüsüne başvurun; görsel spesifikasyonlar, etkileşim spesifikasyonları, içerik spesifikasyonları, uç durumlar ve erişilebilirlik üzerinden çalışır.

Çıktı; genel bakış, düzen, kullanılan tasarım token'ları, bileşenler, durumlar ve etkileşimler, duyarlı davranış, uç durumlar, animasyon ve hareket ile erişilebilirlik notları bölümlerini içeren bir Markdown Teslim Spesifikasyonu'dur. Belirtilen dört ilkesi; varsaymak yerine her şeyi belirtmek, ham değerler yerine token'ları referans göstermek, her durumu göstermek ve bir davranışın ardındaki nedeni açıklamaktır.

Neler üretir

Her token'ı, değerini ve kullanımını listeleyen bir tasarım token'ları tablosu.
Her bileşenin varyantını, prop'larını ve özel davranış notlarını veren bir bileşenler tablosu.
Öğe, tetikleyici, animasyon, süre ve easing'i kaydeden bir animasyon ve hareket tablosu.

Örnek istemi görün ↗

Nasıl Çalışır

01
Tasarım Kaynağını Belirleyin
Bir Figma URL'si, tasarımın Figma'dan çekildiği anlamına gelir; URL yoksa skill yazılı bir açıklama veya bir ekran görüntüsü üzerinden çalışır.
02
Görselleri Belirtin
Tam padding, margin ve genişlik değerleri; renkler, tipografi ve boşluklar için tasarım token referansları; duyarlı breakpoint'ler; ve bileşen varyantları ve durumları.
03
Etkileşimleri Belirtin
Tıklama ve dokunma davranışı, hover durumları, gesture desteği ve süre ile easing bilgisiyle kaydedilen geçişler.
04
İçerik ve Uç Durumları Kapsayın
Karakter sınırları, kısaltma, boş durumlar, yükleme ve hata durumları; ayrıca minimum ve maksimum içerik, daha uzun uluslararası dize'ler, yavaş bağlantılar ve eksik veriler.
05
Erişilebilirlik Detayı Ekleyin
Odak sırası, ARIA etiketleri ve rolleri, klavye etkileşimleri ve ekran okuyucu duyuruları.
06
Spesifikasyonu Şablonda Üretin
Sonuç, dosyanın bölüm ve tablo yapısı kullanılarak bir Markdown Teslim Spesifikasyonu olarak yazılır.

02 Uyumunuzu bulun

design-handoff Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde Claude Code veya Codex'te design-handoff skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Bir tasarım tamamlanmış ve mühendisliğe hazır durumdadır, ekibin düzen, token'lar, bileşen prop'ları, durumlar, breakpoint'ler, uç durumlar ve animasyonu kapsayan bir spesifikasyon sayfasına ihtiyacı vardır.
Bir proje takip sistemi bağlıdır ve teslimin uygulama bileti ile ilişkilendirilmesini istersiniz.

Sınırları Bilin

Figma'dan türetilen tam ölçümler, token değerleri, dışa aktarılan varlıklar ve eksiksiz bir spesifikasyon sayfası, yalnızca bir tasarım aracı bağlandığında elde edilir.
Her spesifikasyon bölümü için alt görevler oluşturmak, bir proje takip sisteminin bağlı olmasına bağlıdır.

Ne Sağlamalısınız

Bir Figma URL'si veya bir tasarım açıklamasıBu, komutun beklediği argümandır ve spesifikasyon bundan üretilir.

03 Skill'in içinde

design-handoff Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

Her Şeyi Belirtin
İlk ilke, varsaymamaktır: bir şey belirtilmemişse geliştirici tahmin eder, dolayısıyla teslim bunu kapsamalıdır.
Ham Değerler Değil, Token Referansı Kullanın
Değerler piksel sayıları olarak değil, spacing-md gibi token adları olarak yazılır.
Tüm Durumları Gösterin
Şu durumların tümü görünmelidir: default, hover, active, disabled, loading, error ve empty.
Nedenini Açıklayın
Davranışın yanında gerekçe de belirtilir, böylece geliştiriciler örneğin bir şeyin mobilde neden daraldığını açıklayarak iyi kararlar verebilir.
Uç Durumları Açıkça Sorun
100 öğe olduğunda ne olacağı gibi sınır durumları adlandırmak, bu sınır koşullarının belirlenmesini sağlar.
Teknoloji Yığınını Belirtin
Örneğin React ve Tailwind gibi yığını belirtmek, o yığına özgü uygulama notları üretir.
Figma Bağlantısını Paylaşın
Tam ölçümlerin, token'ların ve bileşen bilgilerinin tahmin edilmek yerine doğrudan alınmasını sağlayan şey bu bağlantıdır.

04 İşe koyun

Claude Code veya Codex'e design-handoff Yükleyin

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

Claude Code, Codex veya Ajanınıza design-handoff Ekleyin

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

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

design/skills/design-handoff/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

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

Starter prompt

Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

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:

Duyarlı davranış tablosunda 768px altındaki mobil için boş bir yer tutucu değil, doldurulmuş bir satır bulunur.
Uç durumlar, veri olmadığında ne gösterileceğini; kısaltma, yükleme ve hata davranışıyla birlikte belirtir.
Erişilebilirlik notları, gereken odak sırasını ve ARIA etiketlerini belirtir.

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

OpenDesign İndir Hı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: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Skill dosyası: design/skills/design-handoff/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 8f877b6
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 24.012 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm anthropics/knowledge-work-plugins deposu için alındı, bu katalogda 7 skill içerir. design-handoff 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

Kullanım/design-handoff çağrısını ve $ARGUMENTS ile @$1 yer tutucularını gösterir.
Neler Dahil EdilmeliKapsanacak kategorileri listeler: görsel, etkileşim, içerik, uç durumlar ve erişilebilirlik özellikleri.
İlkelerDört kural: tahmin etme, token kullan, tüm durumları göster, nedenini açıkla.
ÇıktıBaşlıkları ve tablolarıyla birlikte Markdown Teslim Özeti şablonunu sağlar.
Bağlayıcılar MevcutsaBağlı bir tasarım aracı ve proje takip sistemi için koşullu ekler.
İpuçlarıÜç ipucu: Figma bağlantısını paylaşın, uç durumları belirtin, teknoloji yığınını tanımlayın.

Skill'in Kendi Açıklaması

"Bir tasarımdan geliştirici teslim spesifikasyonları oluşturun. Tasarım mühendislik için hazır olduğunda ve düzen, tasarım token'ları, bileşen prop'ları, etkileşim durumları, duyarlı kırılma noktaları, uç durumlar ve animasyon detaylarını kapsayan bir spesifikasyon sayfasına ihtiyaç duyulduğunda kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 3.939 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

design-handoff 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.

Bir tasarım aracı bağlıysa ne değişir?

Tam ölçüleri, token'ları ve bileşen özelliklerini doğrudan Figma'dan çeker; varlıkları dışa aktarabilir ve eksiksiz bir özellik dokümanı üretebilir.

Design Handoff

design-handoff'u gerçek bir marka ve design-system iş görevi üzerinde çalıştırın.

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

OpenDesign'ı İndirin Tüm skill'lere göz atın