İGA Art web sitesini, rakip analizinden design system'e kadar her adımda yapay zekâyı sürecin merkezine alarak; Claude Code'u Figma'ya MCP ile bağlayıp uçtan uca bir AI-first metodolojiyle tasarladım.
>Bu projedeki temel amacım yalnızca bir web sitesi tasarlamak değildi; yapay zekâyı sürecin her aşamasına entegre eden AI-first bir çalışma metodolojisi kurmaktı. Klasik süreçte haftalar süren araştırma ve design system kurulumu adımlarını, Claude Code'u Figma'ya MCP ile bağlayarak insan kürasyonundan ödün vermeden çok daha hızlı bir akışa dönüştürdüm.
Bu projede tasarım sürecinin klasik adımlarını (rakip analizi, moodboard, design system, tasarım sunumu) yapay zekâ ile birlikte yürüttüm; Claude Code'u Model Context Protocol (MCP) ile doğrudan Figma dosyama bağlayarak araştırma çıktılarının, tasarım token'larının ve bileşenlerin büyük kısmını AI'a çizdirdim, ardından kendi manuel müdahalelerimle nihai kaliteye taşıdım.
Projenin temel odağı; geleneksel bir tasarım sürecinin kalitesiyle birebir yarışabilecek bir web sitesini, yapay zekâ öncelikli (AI-first) bir çalışma düzeniyle üretmekti — çalışma hızını, Figma Variables ile kurulan ölçeklenebilir design system altyapısını ve insan-AI iş birliğini öne çıkaran bir vaka çalışması.
Claude Code + Figma MCP entegrasyonu: Tasarım sürecini uçtan uca yapay zekâ ile yürütürken, Claude Code'u Model Context Protocol (MCP) üzerinden doğrudan Figma dosyama bağladım. Bu sayede design token'larını, renk/tipografi değişkenlerini (Figma Variables) ve bileşen kütüphanesinin büyük kısmını AI ile birlikte ürettim; çıktıları manuel revizyonlarla nihai kaliteye taşıdım.
AI Rakip Analizi
Sektördeki sanat/kültür mekânı siteleri Claude ile analiz edilip fırsat alanları özetlendi.
AI Moodboard
Görsel yön ve trend taraması yapay zekâ ile üretilip küratörlük yapıldı.
UX Tasarımı
AI önerileri temel alınarak bilgi mimarisi insan gözetiminde kurgulandı.
Wireframe
Düşük detaylı iskeletler AI ile hızlıca üretilip elle revize edildi.
MCP + Design System
Claude Code, MCP ile Figma'ya bağlanarak token'ları ve Figma Variables'ı kurdu.
Tasarım Sunumu
Yüksek çözünürlüklü ekranların büyük kısmı AI ile üretilip sunuma hazırlandı.
Tasarım Teslimi
Manuel revizyonlarla cilalanan tasarım, geliştirme ekibine eksiksiz teslim edildi.
Araştırma ve Keşif
İGA Art projesinde araştırma sürecini, çalışma düzenimin en belirgin farkı olan AI-first metodolojiyle yürüttüm: rakip analizi, pazar taraması ve kullanıcı davranışı sentezini Claude ile birlikte gerçekleştirdim.
- AI Destekli Rakip Analizi: Claude'a sektördeki sanat/kültür mekânı sitelerini analiz ettirerek fırsat alanlarını ve kullanıcı beklentilerini hızlıca çıkardım; bu çıktıları kendi editoryal değerlendirmemle doğruladım.
- Yapay Zekâ ile Moodboard & Trend Sentezi: Görsel yön arayışını AI'nın ürettiği trend ve renk önerileriyle hızlandırdım, nihai yönü kendi küratörlüğümle netleştirdim.
Tasarım Sistemi ve Mimari
Sürecin en yoğun AI kullanımı design system aşamasında oldu: Claude Code'u Model Context Protocol (MCP) ile doğrudan Figma dosyama bağlayarak, renk token'larından bileşen kütüphanesine kadar sistemin büyük kısmını yapay zekâya kurdurdum.
- MCP ile Figma Entegrasyonu: Claude Code, MCP protokolü üzerinden Figma dosyama bağlanarak design token'larını ve bileşenleri doğrudan üretti; bu çıktıları küratörlük ederek son haline getirdim.
- Figma Variables ile Token Yönetimi: Renk, tipografi ve boşluklama değerlerini Figma Variables olarak AI ile birlikte tanımladım; tek kaynaktan yönetilen, ölçeklenebilir bir altyapı oluştu.
- AI-Generated Bileşen Kütüphanesi: Header, footer, kart ve içerik bloklarının büyük çoğunluğunu yapay zekâya çizdirdim; kendi müdahalemi yalnızca marka tutarlılığı ve mikro detaylar için kullandım.
Kullanıcı Arayüzü ve Etkileşim
İGA Art gibi bir sanat/kültür mekânı için arayüz davetkâr ve görsel açıdan zengin olmalı; bu doğrultuda ekranların büyük kısmını yapay zekâya çizdirip, etkileşim detaylarını ve marka tutarlılığını manuel olarak inceden inceye işledim.
- AI ile Üretilen Ekranlar: Anasayfa, etkinlik ve haber sayfalarının ilk tasarımlarını Claude'a ürettirdim; kompozisyon ve içerik hiyerarşisini bu çıktılar üzerinden hızlı iterasyonla geliştirdim.
- Manuel Kürasyon ve İnce Ayar: AI çıktılarındaki görsel dengesizlikleri, boşluklama ve marka renk kullanımını elle revize ederek nihai kaliteye taşıdım.
- Kart Tabanlı İçerik Yapısı: Etkinlikler, haberler ve sanatçı profilleri; tutarlı, tekrar kullanılabilir kart bileşenleriyle sunularak sayfa genelinde görsel bir düzen sağlandı.
- Davetkâr Görsel Dil: Kırmızı vurgu rengi ve galeri fotoğrafçılığı, sanat mekânının enerjisini dijital deneyime taşımak için kullanıldı.
- Mikro Etkileşimler: Hover durumları ve geçiş animasyonları, AI'nın önerdiği taslaklar üzerinden elle cilalandı.
Sonuç ve Kazanımlar
İGA Art için AI-first bir metodolojiyle yürütülen bu süreç, geleneksel bir tasarım sürecinin kalitesinden ödün vermeden çalışma hızını katlayan bir vaka çalışması oldu. Claude Code'un Figma'ya MCP ile bağlanmasıyla kurulan design system, gelecekteki tüm dijital yüzeylere taşınabilecek; AI ile insan kürasyonunun dengeli birlikteliğini gösteren bir referans altyapı haline geldi.
Ekranlar
İGA Art Web Sitesi (AI-Workflow) projesinden öne çıkan ekranlar — yapay zekâ ile üretilip elle cilalanan tasarımlar, masaüstü ve mobil görünümleriyle.
