Claude Code Tasarımcılar İçin: Çalışan Bir Tasarımcının Çalışma Ortamı

Geçen ay birlikte çalıştığım tasarımcı, üç gün içinde tam bir tasarım sistemi yeniden yapılandırması gerçekleştirdi. Kendisi mühendis değil. Bash bilmiyor. Hayatında hiç regex yazmamıştı. Elinde Claude Code, bir CLAUDE.md dosyası ve kendi kötü kararlarını eleştirme zevki vardı.

Kimsenin bahsetmediği araç işte bu. Her Claude Code gönderisi kıdemli mühendisler tarafından, kıdemli mühendisler için yazılıyor. Agent yolları, hook komut dosyaları ve anlaşılması güç bayraklarla dolu. Tasarımcılar okuyor, kendileri için olmadığını düşünüyor ve sekmeyi kapatıyorlar.

Ama bu sizin için. Dürüst olmak gerekirse, çoğu mühendisten daha çok sizin için. Çünkü tasarımcıların zorlandığı şey kod yazmak değil. Ekip sürekli özellik eklerken on farklı depoda tasarım sistemi'ı sürdürmek. İşte Claude Code'ün kahvaltıda yediği sorun tam olarak bu.

Claude Code bir ajandır, otomatik tamamlama değildir

Claude Code, GitHub Copilot klonu değildir. Kod temalı bir sohbet penceresi de değildir. Terminalinizde yaşayan, tüm deponuzu okuyan, dosyaları düzenleyen, testleri çalıştıran, PR'ları açan ve kafası karışınca geri bildirim veren uzun süreli çalışan bir ajandır.

Önemli değişiklik: Hangi satırı düzenleyeceğini söylemenizi beklemez. Ona bir hedef verirsiniz. Hangi dosyaları açacağını, neyi değiştireceğini, yeni bir bileşen ekleyip eklemeyeceğini veya mevcut bir bileşeni değiştirip değiştirmeyeceğini ve bunu yaparken kodun geri kalanının nasıl çalışmaya devam edeceğini kendisi belirler.

Tasarımcı için her şeyi değiştiren kısım işte burasıdır. Belirli satırlara işaret etmeyi bırakırsınız. Sonuçları tanımlamaya başlarsınız. Sonuçları iyi tanımlamak, tasarımcılar için hızlı mühendislik'de ele alınan kendi başına bir disiplindir. "Eski devre dışı bırakılmış varyant da dahil olmak üzere her Düğme bileşenini yeni odak halkası belirteciyle güncelleyin ve Storybook hikayelerinin hala geçerli olduğundan emin olun." Bu bir cümle. Ayrıca dört dakikada bir günlük tasarım operasyonları çalışması da boşa gitti.

Bir tasarımcının işi her zaman zevk olmuştur, söz dizimi değil. Claude Code, zevki gerçek ürün haline getiriyor.

On dakikada kurun

Üç şeye ihtiyacınız var: Node.js, bir terminal ve bir Claude hesabı.

1. Terminali açın (Mac: Cmd+Space, Terminal yazın). İki komut yazacaksınız. Tüm kurulum bu kadar.

2. Eğer yoksa Node'u kurun. nodejs.org adresine gidin, LTS indirme bağlantısına tıklayın, çalıştırın. Bu kısım çift tıklamayla çalışan normal bir yükleyici.

3. Terminale şunu yapıştırın: npm install -g @anthropic-ai/claude-code

4. Tasarım deponuza gidin: cd ~/path/to/your/repo

5. Şunu çalıştırın: claude

İlk çalıştırmada, oturum açma adımlarını size gösterecektir. İşlem tamamlandı.

Depo herhangi bir şey olabilir: bir tasarım sistemi paketi, bir Next.js pazarlama sitesi, bir Storybook, bir Figma token dışa aktarımı, bir Tailwind yapılandırması, üzerinde çalıştığınız her şey. Dosyalar içeren bir klasör ise, Claude Code onu okuyabilir.

| Adım | Nasıl görünüyor | Ne kadar sürüyor |

|------|-------------------|----------|

| Node Kurulumu | Standart Mac/Windows yükleyicisi | 2 dk |

| Claude Code'i Yükle | Tek bir npm komutu | 1 dk |

| Giriş Yap | Tarayıcı yönlendirmesi | 1 dk |

| İlk oturum | claude herhangi bir klasörde | Anında |

CLAUDE.md'yi bir tasarım özeti gibi yazın, bir readme dosyası gibi değil

CLAUDE.md, Claude Code'un bir depoyu her açtığında ilk okuduğu dosyadır. Mühendisler bunu derleme komutları ve test yolları için kullanır. Bu sorun değil. Ancak bu, gerçek değerin yüzde doksanını da göz ardı etmek anlamına gelir.

CLAUDE.md'yi yepyeni bir tasarımcıya verdiğiniz bir tasarım özeti gibi ele alın. Ses tonu, marka kuralları, bu ürünün ne olduğu, asla yapmadığımız şeyler, temiz çalışmanın burada nasıl göründüğü. CLAUDE.md'ye yazdığınız her cümle, sohbette asla tekrarlamanız gerekmeyen bir cümledir.

Yeni işe aldığım her tasarımcıya verdiğim şablon:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Her depo için bir kez yazın. Ajanın kod tabanınızda nasıl hata yaptığını öğrendiğinizde güncelleyin. Bu, zamanla birikir.

Önemli beş iş akışı

Çoğu Claude Code eğitiminde yirmi özellik listelenir. Bunlardan beşi, bir tasarımcının değerinin yüzde doksanının ortaya çıktığı yerlerdir.

Tasarım sistemi bakımı. "Eski aralık değerlerini (8px, 16px, 24px) hala kullandığımız her yeri bulun ve bunları belirteçlerle (--space-2, --space-4, --space-6) değiştirin. Bileşenleri güncelleyin. Hikayelerin sorunsuz bir şekilde ilerlemesini sağlayın." İki dakika. Geçmişte bir hafta sürerdi.

Bileşen yeniden düzenlemesi. "Düğmemiz on iki varyanta ulaştı. Bunları denetleyin. Hangilerinin gerçekten kullanıldığını ve hangi dokuzunun ölü olduğunu söyleyin. Ardından birleştirilmiş bir API önerin ve bunu bir özellik bayrağının arkasına uygulayın." Teklifi incelersiniz. Evet dersiniz. Gönderim yapılır.

Figma-sayfaya. Bir Figma ekran görüntüsü yapıştırın veya daha iyisi, ⟦MARKA0⟧ ⟦MARKA1⟧'ü bağlayın. "Bu kahraman bölümünü mevcut bileşenlerimizi ve token'larımızı kullanarak oluşturun, yenilerini değil." deyin. Bu, bir veya iki tur geri bildirim içinde tasarıma uyan bir PR (Pull Request) oluşturur.

Token yayılımı. Marka bir rengi günceller. "Tüm monorepo genelinde --color-accent'i değiştirin ve typecheck çalıştırın." İş yazmak değil, cesarettir. Claude Code sınırsız cesarete ve sıfır egoya sahiptir.

Görsel inceleme. "Geliştirme sunucusunu çalıştırın, her sayfanın ekran görüntüsünü alın ve son dağıtıma kıyasla hangilerinin bozuk boşluk veya taşma sorunu olduğunu bana bildirin." Deponuzda Playwright veya benzer bir kurulum varsa bu sihirli bir şeydir. Gözünüzün kaçırdığı şeyleri yakalar.

| İş Akışı | Claude Code Öncesi | Claude Code ile |

|----------|-------------------|------------------|

| Tasarım sistemi taraması | 2 ila 5 gün, 1 tasarımcı + 1 mühendis | 20 dakika, 1 tasarımcı |

| Bileşen denetimi + yeniden düzenleme | 1 sprint | 1 öğleden sonra |

| Figma'den sayfaya | 1 ila 3 gün | 1 ila 3 saat |

| Token yayılımı | Hafta, hataya açık | Dakikalar, güvenilir |

| Görsel regresyon testi | Genellikle asla olmaz | Her PR'da |

Ekran görüntüsünü değil, Figma'ü verin

Sadece PNG dosyanız varsa, PNG'yi yapıştırın. Claude Code görselleri işler. Boşluk hassasiyetini ve bazı tipografik incelikleri kaçırabilir, ancak yapı yine de ortaya çıkacaktır.

Eğer Figma'e sahipseniz, Figma MCP sunucusunu bağlayın. Bu, Claude Code'e Figma çerçevelerinize doğrudan okuma erişimi sağlayan beş dakikalık bir kurulumdur. Çerçeve kimlikleri, katman adları, boşluk değerleri, belirteç bağlantıları, tüm yapı. Çıktı kalitesi önemli ölçüde artar. Model artık tahmin etmeyi bırakır.

Her iki durumda da tek bir kural var: ona her zaman mevcut tasarım sisteminizi verin, boş bir tuval değil. "Bunu bileşenlerimizle oluşturun" her zaman "bunu oluşturun"dan daha iyidir. Tuvali boş bırakırsanız, Claude Code zaten sahip olduğunuz bileşenleri icat edecektir. Bu boşa harcanan bir iştir.

Claude Code'nin güveninizi kazanmayı bıraktığı yer

Kendinize karşı dürüst olun. Bu araç bugün burada başarısız oluyor.

Gerçek marka illüstrasyonu. Belirli bir sanatsal stil, elle çizilmiş karakter çalışması veya markanıza benzemesi gereken marka maskotları gerektiren her şey. Claude Code jeneratörleri çağırır, zevki yoktur. Bunun için hala Prismlight, Runesmith veya bir insan illüstratöre talimat vermeniz gerekir.

Öznel sayfa düzeni zevki. Bir sayfayı doğru şekilde düzenleyebilir. Sayfanın duygusal olarak sıkıcı olduğunu söyleyemez. Kahramanın daha fazla havaya ihtiyacı olduğunu söyleyemez. Ağırlık kararının yanlış olduğunu hissedemez. Bu hala sizin kararınız.

Temel prensiplere dayalı ürün kararları. İstediğiniz her şeyi uygulayabilir. Bunu isteyip istememeniz gerektiğini söyleyemez. Bu hala tasarımcının işidir ve asıl parayı o kazanır.

Deponun dağınık olduğu her şey. Kod tabanınızda tutarlı bir sistem, CLAUDE.md dosyası, isimlendirme kuralı veya token'lar yoksa, Claude Code işleri daha da kötüleştirecek ve daha hızlı bir şekilde düzeltecektir. Önce temeli temizlemeniz gerekiyor. Bu sinir bozucu ama aynı zamanda adil.

Daha fazla yapay zeka iş akışı açıklaması istiyorsanız, Brainy Kağıtlar'ün geri kalanına göz atın. Bunu tasarım ekibinize düzgün bir şekilde kurmak istiyorsanız, Brainy'ı işe alın'e tıklayın ve kurulumu ve ilk gerçek iş akışını biz halledeceğiz.

Tasarımcının başlangıç ​​kontrol listesi

Birinci gün, işte gerçek liste.

• Claude Code'yi kurun (npm komutu, bir dakika)

• Oturum açın ve oturumun çalıştığını doğrulayın

• Bir depo seçin. Sadece bir tane. Küçük başlayın.

• Yukarıdaki şablonu kullanarak CLAUDE.md dosyasını yazın. Bir saat ayırın.

• Beş iş akışından birini seçin. Baştan sona yapın.

• Farkı dikkatlice inceleyin. Onay damgası vurmayın. Siz sanat yönetmenisiniz.

• Claude'a nerede yanlış gittiğini söyleyin. CLAUDE.md dosyasını öğrendiğiniz bilgilerle güncelleyin.

• Başka bir iş akışı yapın. Bunu yarın yapın.

Bunu bir hafta boyunca yapın ve farkı hissedeceksiniz. Bir ay sonra geri dönmek istemeyeceksiniz.

SSS

Claude Code'i kullanmak için kod yazmayı bilmem gerekiyor mu?

Hayır. Ne istediğinizi, nasıl tanımlayacağınızı ve "bu doğru" veya "bu yanlış" diyebilecek kadar farkı nasıl okuyacağınızı bilmeniz gerekiyor. Daha önce bir genç tasarımcıya geri bildirim verdiyseniz, bu beceriye sahipsiniz demektir.

Claude Code üretim deposunda güvenli mi?

Evet, bir dal kullanıyorsanız. Asla ana depoda çalıştırmayın. Bir dal oluşturun, Claude Code'ün orada çalışmasına izin verin, PR'ı diğer PR'lar gibi inceleyin, uygun olduğunda birleştirin. Git sizi korur. PR'ların testlerden geçmesini gerektirmek de aynı şekilde koruma sağlar.

Claude Code, Cursor, v0 ve Lovable arasındaki fark nedir?

Cursor, Claude'ın yerleşik olduğu tam bir editördür. v0 ve Lovable, istemlerden kullanıcı arayüzü oluşturur ancak uzun vadede deponuzda kalmazlar. Claude Code başsızdır, herhangi bir depoda yaşar ve mevcut kod tabanları için en güçlüsüdür. Yepyeni prototipler için v0 veya Lovable daha hızlıdır. Gerçek ürün çalışmaları için Claude Code kazanır.

Claude Code ne kadar maliyetlidir?

Claude Max aboneliği bunu kapsar ve çoğu tasarımcının bununla başlaması gerekir. Daha büyük ekipler API fiyatlandırmasına geçiyor. Her iki durumda da, yukarıdaki iş akışlarında sağladığı zaman tasarrufuna kıyasla ucuz.

Claude Code'i asla ne için kullanmamalıyım?

Marka illüstrasyonu, öznel zevk kararları, ürün stratejisi, kullanıcının özelliği neden istediğini bilmeyi gerektiren her şey. Bunları kendi elinizde tutun. Tekrarlayan işlemleri araca bırakın.

Artık junior değilsiniz

Uzun bir süre boyunca tasarımcılar vizyonu çizen ve onu gerçekten inşa eden mühendislere teslim eden kişilerdi. Bu, tasarımcıların beklemesi anlamına geliyordu. Sprint kapasitesi için. Arka uç çalışmaları için. Başka birinin yazmasını beklemek için.

Bu dönem sona erdi.

Junior artık bir kişi değil. Junior bir model. Siz sanat yönetmenisiniz.

CLAUDE.md'yi bir tasarım özeti gibi yazın. Çalışmayı ajana teslim edin. Farkı, bir junior'ın maketini incelediğiniz gibi, standartlarla inceleyin. Yanlışsa geri gönderin. Doğruysa teslim edin.

Tasarım sistemi yeniden yapılandırması üç gün sürüyor, üç sprint değil. Pazarlama sitesi bu hafta yayınlanacak, gelecek çeyrekte değil. Token güncellemesi dakikalar içinde yayılıyor, günlerce kovalamaya gerek yok.

Kurulumu yapın. Özeti yazın. İşi teslim edin.