Responsive Design Spec

Amaç

Eyleme dönüştürülebilir, ölçülebilir sonuçlar sunan kapsamlı bir responsive design spec oluşturun. Bu beceri, her seferinde profesyonel düzeyde çıktı sağlayan, kalite doğrulamalı yapılandırılmış bir süreç sunar.

Kategori: Tasarım ve Yaratıcılık & Creative

Girdiler

Zorunlu

• Hedef: Bu çıktı ile neyi başarmak istiyorsunuz
• Bağlam: İlgili arka plan bilgileri

İsteğe Bağlı

• Kısıtlamalar: Dikkate alınması gereken sınırlamalar veya gereksinimler
• Mevcut Çalışma: Üzerine inşa edilecek önceki belgeler veya veriler

Sistem Bağlamı

Başlamadan önce:

• Mevcut proje bağlamı ve öncelikleri için

  memory.md

  'yi oku
• İlgili öğrenilmiş kurallar veya kısıtlamalar için

  knowledge-base.md

  'yi kontrol et
• Projedeki mevcut ilgili belgeleri gözden geçir
• Bu çıktı ile ilgili

  .claude/workspace/TaskBoard.md

  'deki aktif görevleri not et

Süreç

Adım 1: Bağlam ve Araştırma

• Projedeki mevcut responsive design spec belgelerini gözden geçir
• İlgili öğrenilmiş kurallar veya kısıtlamalar için

  knowledge-base.md

  'yi kontrol et
• Mevcut proje bağlamı ve öncelikleri için

  memory.md

  'yi kontrol et
• Kilit paydaşları ve gereksinimlerini belirle
• En uygun çerçeveyi seç: Design Thinking (5 stages), Double Diamond, Atomic Design

Adım 2: Analiz ve Çerçeve Uygulaması

• responsive design spec yapılandırmak için seçilen çerçeveyi uygula
• Boşlukları, fırsatları ve riskleri belirle
• Başarı metriklerini tanımla: Task Completion Rate, Time on Task, Error Rate, System Usability Scale (SUS)
• Varsayımları ve bağımlılıkları belgele
• Yaklaşımı sektör en iyi uygulamalarına göre doğrula

Adım 3: Çıktıyı Oluştur

• responsive design spec aşağıdaki çıktı formatını kullanarak yapılandır
• Genel tavsiyeler değil, spesifik ve eyleme dönüştürülebilir öneriler ekle
• Uygulanabilir yerlerde somut rakamlar, zaman çizelgeleri ve kıyaslamalar ekle
• Tutarlılık için mevcut proje belgeleriyle çapraz referans yap
• Her bölümün değer kattığından emin ol — dolgu içeriği çıkar

Adım 4: Kalite Doğrulama

• Tüm zorunlu girdiler ele alındı
• Öneriler spesifik ve eyleme dönüştürülebilir (belirsiz değil)
• Rakamlar ve kıyaslamalar gerçekçi ve kaynaklı
• Çıktı formatı aşağıdaki spesifikasyona uyuyor
• Bilgi tabanı kurallarıyla çelişki yok
• En iyi pratiği izliyor: Start with user research, not aesthetics

Çıktı Formatı

# Responsive Design Spec

## Yönetici Özeti
[Çıktının ve temel önerilerin 2-3 cümlelik özeti]

## Bağlam ve Hedefler
- **Hedef**: [Bunun neyi başardığı]
- **Hedef Kitle**: [Bunun kimin için olduğu]
- **Zaman Çizelgesi**: [Bunun ne zaman geçerli olduğu]

## Analiz
[Seçilen çerçeve kullanılarak yapılandırılmış analiz]

## Öneriler
1. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
2. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
3. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]

## Uygulama
| Eylem | Sorumlu | Zaman Çizelgesi | Öncelik |
|--------|-------|----------|----------|
| [Eylem maddesi] | [Kim] | [Ne zaman] | [Yüksek/Orta/Düşük] |

## Başarı Metrikleri
| Metrik | Mevcut | Hedef | Ölçüm Yöntemi |
|--------|---------|--------|-------------------|
| [KPI] | [Başlangıç] | [Hedef] | [Nasıl ölçülür] |

## Riskler ve Azaltmalar
| Risk | Olasılık | Etki | Azaltma |
|------|-----------|--------|------------|
| [Risk] | [Y/O/D] | [Y/O/D] | [Eylem] |

## Sonraki Adımlar
- [ ] [Hemen yapılacak eylem]
- [ ] [Takip eylemi]
- [ ] [Gözden geçirme tarihi]

Uygulanabilir Çerçeveler

• Design Thinking (5 stages)
• Double Diamond
• Atomic Design
• Design Sprint
• Material Design / Human Interface Guidelines
• WCAG 2.1 AA

Temel Metrikler

• Task Completion Rate
• Time on Task
• Error Rate
• System Usability Scale (SUS)
• Accessibility Score
• Design System Adoption Rate

En İyi Pratikler

• Start with user research, not aesthetics
• Maintain a living design system
• Test with 5 users to find 85% of usability issues
• Accessibility is not optional — design for it from day one
• Document design decisions and rationale

Tamamlandıktan Sonra

• Bu çıktı proje bağlamını veya önceliklerini değiştiriyorsa

  memory.md

  'yi güncelle
• Yeniden kullanılabilir öğrenmeleri

  knowledge-nominations.md

  'ye ekle
• Takip eylemleri belirlendiyse bunları

  .claude/workspace/TaskBoard.md

  'ye ekle
• Ek çalışma gerekiyorsa ilgili skill'leri öner