AI konusunda bu rehber ne anlatıyor?

Claude Artifacts ile React/HTML canlı prototip oluşturma, iteratif geliştirme ve takımla paylaşım. Mobil geliştirme sürecinde kullanım ve best practices.

Bu AI rehberini kimler okumalı?

Bu yazı, AI alanında çalışan orta ve ileri seviye geliştiriciler için hazırlanmıştır. 14 dk okuma okuma süresi ile kapsamlı bilgi sunar.

AI için hangi ön bilgiler gerekli?

Bu rehberi takip etmek için temel AI bilgisi gereklidir. Claude, Artifacts, AI konularında deneyim faydalı olacaktır.

Claude Artifacts: Gerçek Zamanlı Kod ve Prototip Oluşturma

# Claude Artifacts: Gerçek Zamanlı Kod ve Prototip Oluşturma

Bir fikrin var, hemen prototiplemek istiyorsun ama Figma'yi açmak, React projesi kurmak, dependency'leri yüklemek derken saatler geçti. Claude Artifacts bu sorunu kokunden çözuyor: konuşma sırasında canlı, çalışan prototipler oluştur, anında görselleştir ve iteratif olarak geliştir. Ister bir Figma AI ile tasarim workflow'u kur, ister doğrudan Claude üzerinden prototiple — Artifacts'in teknik altyapısını, kullanım senaryolarını ve mobil geliştiriciler için sağladığı devrimsel avantajları burada derinlemesine keşfedeceksin.

Not: Bu rehber Claude.ai platformu ve API üzerinden Artifacts kullanımi için en güncel bilgileri içerir. Tum örnekler test edilmiş ve çalışır durum.

İçindekiler

Artifacts Nedir ve Nasıl Çalışır?
Desteklenen Artifact Türleri
React Artifact'lar ile Canlı Prototipleme
Iteratif Geliştirme Süreci
Mobil UI Prototipleme
Takım İşbirl ve Paylaşım
API Üzerinden Artifact Oluşturma
Best Practices ve Sınırlamalar
Sonuç ve Öneriler

1. Artifacts Nedir ve Nasıl Çalışır?

Claude Artifacts, yapay zekanin üretebildiği içerikleri canlı, interaktif bir onizleme panelinde göster bir özelliktir. Bir chatbot penceresinde kod görmek yerine, kodun çalıştığı, tiklanabilen, etkileşilebilen bir canlı onizleme elde edersin.

Teknik Altyapı

Artifacts, arka planda su bileşenlerden oluşur:

Sandbox Ortami: Güvenli bir iframe içinde çalışan izole bir çalışma alanı
React Runtime: Canlı React component rendering desteği
Anlık Derleme: Kod yazıldığı anda compile ve render
State Yönetimi: Artifact içinde kendi state'ini yönetebilme

swift

1Artifacts Çalışma Akışi:
2 
3Kullanıcı İsteği → Claude Cevabi → Artifact Oluşturma → Sandbox Render → Canlı Onizleme
4      ↑                                                                        |
5      └-------------- Iteratif Geri Bildirim ----------------------------------┘

Artifact Türleri ve Tetikleyiciler

Claude, belirli durum otomatik olarak artifact oluşturur:

Tür	Tetikleyici	Örnek
React Component	UI component isteği	"Bir login formu oluştur"
HTML/CSS	Statik sayfa isteği	"Bir landing page yap"
SVG	Görsel/diagram isteği	"Bir flowchart ciz"
Markdown	Dokuman isteği	"API dokümantasyonu yaz"
Kod	Çalışır kod isteği	"Python script yaz"
Mermaid	Diagram isteği	"ER diyagrami ciz"

💡 Pro Tip: "Bunu artifact olarak oluştur" demene gerek yok. Claude, içerik tipini otomatik algilar ve uygun artifact turunu seçer. Ancak spesifik olmak istersen "React artifact olarak oluştur" diyebilirsin.

2. Desteklenen Artifact Türleri

React Artifacts

En güçlü artifact turu. Tam React 18 desteği ile interaktif componentler oluşturabilirsin:

jsx

1// Claude'un oluşturduğu bir React Artifact örneği
2import { useState, useEffect } from 'react';
3 
4function TaskManager() {
5  const [tasks, setTasks] = useState([]);
6  const [newTask, setNewTask] = useState('');
7  const [filter, setFilter] = useState('all');
8 
9  const addTask = () => {
10    if (newTask.trim()) {
11      setTasks(prev => [...prev, {
12        id: Date.now(),
13        text: newTask,
14        completed: false,
15        createdAt: new Date().toISOString()
16      }]);
17      setNewTask('');
18    }
19  };
20 
21  const toggleTask = (id) => {
22    setTasks(prev => prev.map(task =>
23      task.id === id ? { ...task, completed: !task.completed } : task
24    ));
25  };
26 
27  const filteredTasks = tasks.filter(task => {
28    if (filter === 'active') return !task.completed;
29    if (filter === 'completed') return task.completed;
30    return true;
31  });
32 
33  return (
34    <div style={{ maxWidth: 480, margin: '0 auto', padding: 24 }}>
35      <h1>Görev Yönet</h1>
36      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
37        <input
38          value={newTask}
39          onChange={e => setNewTask(e.target.value)}
40          onKeyDown={e => e.key === 'Enter' && addTask()}
41          placeholder="Yeni görev ekle..."
42          style={{ flex: 1, padding: 8, borderRadius: 6 }}
43        />
44        <button onClick={addTask}>Ekle</button>
45      </div>
46      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
47        {['all', 'active', 'completed'].map(f => (
48          <button
49            key={f}
50            onClick={() => setFilter(f)}
51            style={{
52              background: filter === f ? '#3b82f6' : '#e5e7eb',
53              color: filter === f ? 'white' : 'black',
54              border: 'none', padding: '4px 12px', borderRadius: 4
55            }}
56          >
57            {f === 'all' ? 'Tumunu' : f === 'active' ? 'Aktif' : 'Tamamlanan'}
58          </button>
59        ))}
60      </div>
61      {filteredTasks.map(task => (
62        <div
63          key={task.id}
64          onClick={() => toggleTask(task.id)}
65          style={{
66            padding: 12, marginBottom: 8, borderRadius: 8,
67            background: task.completed ? '#dcfce7' : '#f3f4f6',
68            textDecoration: task.completed ? 'line-through' : 'none',
69            cursor: 'pointer'
70          }}
71        >
72          {task.text}
73        </div>
74      ))}
75      <p style={{ color: '#6b7280', fontSize: 14 }}>
76        {tasks.filter(t => !t.completed).length} görev kaldi
77      </p>
78    </div>
79  );
80}

HTML/CSS Artifacts

Statik sayfalar ve email şablonlari için idealdir:

html

1<!-- Claude'un oluşturduğu responsive email şablonu -->
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <style>
8    * { margin: 0; padding: 0; box-sizing: border-box; }
9    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
10    .container { max-width: 600px; margin: 0 auto; }
11    .header { background: linear-gradient(135deg, #667eea, #764ba2); padding: 40px 24px; text-align: center; }
12    .header h1 { color: white; font-size: 28px; }
13    .content { padding: 32px 24px; }
14    .button { display: inline-block; background: #667eea; color: white; padding: 14px 28px; border-radius: 8px; text-decoration: none; }
15    @media (max-width: 480px) {
16      .header h1 { font-size: 22px; }
17      .content { padding: 20px 16px; }
18    }
19  </style>
20</head>
21<body>
22  <div class="container">
23    <div class="header">
24      <h1>Hosgeldin!</h1>
25    </div>
26    <div class="content">
27      <p>Merhaba, uygulamaya katıldığın için tesekkurler.</p>
28      <a href="#" class="button">Başla</a>
29    </div>
30  </div>
31</body>
32</html>

SVG Artifacts

Diagram, ikon ve görsel içerikleri oluşturmak için SVG artifact'lar kullanılır. Özellikle teknik dokümantasyonda flowchart ve mimari diyagramlar için çok faydali.

3. React Artifact'lar ile Canlı Prototipleme

Artifacts'in en güçlü kullanım alanı, bir fikri saniyeler içinde canlı bir prototipe dönüştürmektir.

Prototipleme Süreci

swift

11. Fikir Tanımlama  → "Bir dark mode toggle component'i istiyorum"
22. İlk Artifact     → Claude canlı React component oluşturur
33. Geri Bildirim    → "Animasyon ekle, renkler soyle olsun"
44. Iterasyon        → Claude artifact'i günceller
55. Export           → Kodu kopyala, projeye entegre et

Diyelim bir iOS uygula için admin dashboard prototipi yapiyorsun. Claude'a soyle diyorsun:

"Kullanıcı istatistiklerini göster bir dashboard widget'i oluştur. Günlük aktif kullanıcı, gelir ve retention orani göstersin. Chart'lar olsun."

Claude, Recharts veya kendi chart implementasyonu ile canlı bir dashboard oluşturur. Bunu gördükten sonra:

"Renkleri mavi yerine mor yap"
"Bir tarih araligi seç ekle"
"Dark mode desteği ekle"

Her talep anında uygula ve canlı olarak görürsün.

💡 Pro Tip: Artifact'lari sadece UI için değil, veri görselleştirme, algoritma animasyonu ve interaktif öğretim materyalleri için de kullanabilirsin. Örneğin bir sorting algoritmasının adım adım çalışmasını görselleştirmek harika bir kullanım örneği.

Kullanilabilecek Kutuphaneler

React artifact'larda su kutuphaneler kullanılabilir:

Kutuphane	Versiyon	Kullanım Alanı
React	18.x	Temel rendering
Recharts	2.x	Grafikler
Lucide React	Latest	Ikonlar
Tailwind CSS	3.x (inline)	Stil
Lodash	4.x	Utility fonksiyonlar
date-fns	3.x	Tarih işlemleri
Framer Motion	Sınırli	Animasyonlar

4. Iteratif Geliştirme Süreci

Artifacts'in en büyük güçu, "oluştur ve unut" değil "oluştur, geri bildirim ver, iyileştir" döngüsü sunmasıdır.

Versiyon Yönetimi

Her artifact değişikliği yeni bir versiyon oluşturur. Önceki versiyonlara geri donebilirsin:

swift

1Versiyon 1: Temel login formu (email + şifre)
2    ↓ "Sosyal giriş butonları ekle"
3Versiyon 2: Login + Google/Apple Sign In butonları
4    ↓ "Form validasyonu ekle"
5Versiyon 3: Login + sosyal giriş + canlı validasyon
6    ↓ "Dark mode desteği ekle"
7Versiyon 4: Tam özellikli login sayfası

Iterasyonlar Arasi Bağlam

Claude, önceki artifact versiyonlarını hatirlar. Bu sayede:

"Önceki versiyondaki renk şemasını geri getir ama yeni butonları koru"
"3. versiyondaki animasyonu simdiki versiyona ekle"

gibi karmaşık talepler bile doğru şekilde uygula.

typescript

1// Artifact versiyonlama mantığı (kavramsal)
2interface ArtifactVersion {
3  id: string;
4  version: number;
5  content: string;
6  type: 'react' | 'html' | 'svg' | 'markdown' | 'code';
7  createdAt: Date;
8  parentVersion?: number;
9  changeDescription: string;
10}
11 
12// Her iterasyon bir önceki versiyonun uzerine insa edilir
13const versions: ArtifactVersion[] = [
14  { id: 'art_001', version: 1, content: '...', type: 'react',
15    createdAt: new Date(), changeDescription: 'Temel login formu' },
16  { id: 'art_001', version: 2, content: '...', type: 'react',
17    createdAt: new Date(), parentVersion: 1,
18    changeDescription: 'Sosyal giriş butonları eklendi' },
19];

5. Mobil UI Prototipleme

Artifacts, mobil uygula UI prototiplemesi için muhteşem bir araç. Figma'ya gerek kalmadan hızlı prototip oluşturabilirsin.

iOS Tarzi Component Oluşturma

Claude'a "iOS tarzi bir Settings sayfası prototipi yap" dediğinizde, Apple'in Human Interface Guidelines'a uygun bir React prototipi oluşturur:

jsx

1// iOS Settings tarzi prototip (Claude Artifact)
2function IOSSettings() {
3  const [darkMode, setDarkMode] = useState(false);
4  const [notifications, setNotifications] = useState(true);
5  const [volume, setVolume] = useState(75);
6 
7  const SettingsRow = ({ icon, label, children }) => (
8    <div style={{
9      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
10      padding: '12px 16px', borderBottom: '0.5px solid #c6c6c8',
11      background: darkMode ? '#1c1c1e' : 'white'
12    }}>
13      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
14        <span style={{ fontSize: 20 }}>{icon}</span>
15        <span style={{ color: darkMode ? 'white' : 'black' }}>{label}</span>
16      </div>
17      {children}
18    </div>
19  );
20 
21  const Toggle = ({ value, onChange }) => (
22    <div
23      onClick={() => onChange(!value)}
24      style={{
25        width: 51, height: 31, borderRadius: 16,
26        background: value ? '#34c759' : '#e9e9eb',
27        position: 'relative', cursor: 'pointer',
28        transition: 'background 0.2s'
29      }}
30    >
31      <div style={{
32        width: 27, height: 27, borderRadius: 14,
33        background: 'white', position: 'absolute',
34        top: 2, left: value ? 22 : 2,
35        transition: 'left 0.2s',
36        boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
37      }} />
38    </div>
39  );
40 
41  return (
42    <div style={{
43      maxWidth: 390, margin: '0 auto',
44      background: darkMode ? '#000' : '#f2f2f7',
45      minHeight: '100vh', fontFamily: '-apple-system, sans-serif'
46    }}>
47      <h1 style={{
48        padding: '60px 16px 8px', fontSize: 34, fontWeight: 700,
49        color: darkMode ? 'white' : 'black'
50      }}>
51        Ayarlar
52      </h1>
53      <div style={{ margin: '16px 0', borderRadius: 12, overflow: 'hidden' }}>
54        <SettingsRow icon="🌙" label="Karanlik Mod">
55          <Toggle value={darkMode} onChange={setDarkMode} />
56        </SettingsRow>
57        <SettingsRow icon="🔔" label="Bildirimler">
58          <Toggle value={notifications} onChange={setNotifications} />
59        </SettingsRow>
60        <SettingsRow icon="🔊" label={'Ses: ' + volume + '%'}>
61          <input
62            type="range" min="0" max="100"
63            value={volume}
64            onChange={e => setVolume(Number(e.target.value))}
65            style={{ width: 120 }}
66          />
67        </SettingsRow>
68      </div>
69    </div>
70  );
71}

Bu prototip, SwiftUI Custom Components yazımızda anlattığı mimari prensiplerle SwiftUI'a dönüştürülerek production'a alinabilir. Sora 2 ile video üretimi de benzer bir AI tabanli içerik oluşturma deneyimi sunuyor.

6. Takım İşbirl ve Paylaşım

Artifacts, takım üyelerinin fikirlerini hızla paylaşmasını sağlar.

Paylaşım Yöntemleri

Link ile paylaşım: Artifact'in benzersiz URL'ini paylaşarak herkesin görebilmesini sağla
Embed: Artifact'i baska bir sayfaya gömebilirsin
Export: Kodu indirip projeye entegre edebilirsin

Takım Prototipleme Workflow'u

swift

11. Product Owner: Fikri açıkla
22. Developer: Claude ile artifact oluşturur (2 dakika)
33. Takım: Canlı prototipi inceler
44. Geri bildirim: "Su butonu kirmizi yap, su bölüm asagiya taşı"
55. Developer: Claude'a geri bildirimi iletir (30 saniye)
66. Yeni versiyon: Takım tekrar inceler
77. Onay: Prototip development'a geçer

💡 Pro Tip: Artifacts'i sprint planning toplantısında kullan. Bir fikir tartisirken anında prototip oluştur, takım görenle karar versin. Bu yaklaşım, klasik "mockup sonra meeting" döngüsünü ortadan kaldırır.

Flutter vs React Native yazımızda cross-platform prototipleme stratejilerini detaylı ele aldık. Claude Code Plan Mode ile prototip öncesi mimari planlamaya da goz atabilirsin.

7. API Üzerinden Artifact Oluşturma

Claude API üzerinden programatik olarak artifact oluşturabilirsin. Bu, otomatik dokümantasyon, rapor oluşturma ve dinamik içerik üretimi için idealdir.

typescript

1// API ile artifact oluşturma
2const response = await anthropic.messages.create({
3  model: 'claude-sonnet-4-20250514',
4  max_tokens: 4096,
5  messages: [{
6    role: 'user',
7    content: 'Kullanıcı kayit formu için bir React component oluştur. Email, şifre, isim alanlari olsun. Validasyon ekle.'
8  }]
9});
10 
11// Response'daki artifact bloklarını işle
12for (const block of response.content) {
13  if (block.type === 'tool_use' && block.name === 'artifacts') {
14    const artifact = block.input;
15    console.log('Artifact turu:', artifact.type);
16    console.log('Artifact kodu:', artifact.content);
17    // Artifact'i render et veya dosyaya kaydet
18  }
19}

Otomatik Dokümantasyon Pipeline

typescript

1// CI/CD pipeline'da otomatik API dokümantasyonu
2async function generateAPIDocs(openAPISpec: string): Promise<string> {
3  const response = await anthropic.messages.create({
4    model: 'claude-sonnet-4-20250514',
5    max_tokens: 8192,
6    messages: [{
7      role: 'user',
8      content: `Bu OpenAPI spec'inden interaktif API dokümantasyonu oluştur.
9        Her endpoint için:
10        - Açıklama
11        - Request/Response örnekleri
12        - Canlı test butonu
13 
14        Spec:
15        ${openAPISpec}`
16    }]
17  });
18 
19  return extractArtifactContent(response);
20}

8. Best Practices ve Sınırlamalar

Sınırlamalar

Sınır	Değer	Not
Maks kod boyutu	~100KB	Çok büyük component'ler bölünmeli
Network istekleri	Yok	Sandbox dışına HTTP isteği yapilamaz
localStorage	Sınırli	Session içinde geçerli
Harici kutuphane	Whitelist	Sadece desteklenen kutuphaneler
Dosya sistemi	Yok	Dosya okuma/yazma yapilamaz

Do's and Don'ts

swift

1✅ YAP:
2- Prototipleme için kullan
3- UI component dene
4- Algoritmayi görselleştir
5- Takimla paylaş
6- Iteratif geliştir
7 
8❌ YAPMA:
9- Production kodu olarak kullanma
10- API key artifact'a koyma
11- Hassas veri gösterme
12- Çok büyük uygulamalar yapma
13- Backend logic ekleme

💡 Pro Tip: Artifact'lari başlangıç noktasi olarak kullan. Prototipi onayladiktan sonra, GraphQL Mobile yazımızda anlattığı mimari ile production-ready versiyonunu geliştir. Cursor AI IDE ve Claude Code MCP yazılarinda da artifacts benzeri deneyimleri karşılaştırdık.

Sonuç ve Öneriler

Claude Artifacts, fikir-prototip-ürün döngüsünü radikal olarak hızlandırıyor. Geleneksel olarak saatler süren prototipleme süreci dakikalara iniyor. Özellikle mobil geliştiriciler için UI denemeleri, takıma sunum ve hızlı iterasyon açısından vazgecilmez bir araç haline geldi.

Temel çıkarımlar:

Prototipleme için Figma'dan önce Artifacts'i dene
Iteratif geliştirme ile her adım iyileştir
Takım işbirl için artifact link'lerini paylaş
Sınırlamalari bil — network, dosya sistemi ve kutuphane kısıtlamaları var
Production için başlangıç noktasi olarak kullan, doğrudan deploy etme

Resmi Kaynaklar:

ALTIN İPUCU

Bu yazının en değerli bilgisi

Bu ipucu, yazının en önemli çıkarımını içeriyor.

Easter Egg

Gizli bir bilgi buldun!

Bu bölümde gizli bir bilgi var. Keşfetmek ister misin?

Okuyucu Ödülü

🎉 **Sonuna Kadar Okuyan Kahraman!** Tebrikler! İşte sana özel bir kaynak: Claude Artifacts ile oluşturulmus [örnek prototip galerisini](https://claude.site) incele. Burada topluluk tarafından oluşturulmus yuzlerce interaktif prototip var. Kendi Artifacts projelerini paylaşmak için de bu platformu kullanabilirsin.

Etiketler

#Claude#Artifacts#AI#Prototyping#React#Code Generation#Anthropic

Muhittin Çamdalı

Senior iOS Developer

12+ yıllık deneyime sahip iOS Developer. Swift, SwiftUI ve modern iOS mimarileri konusunda uzman. Apple platformlarında performanslı ve kullanıcı dostu uygulamalar geliştiriyorum.

GitHub LinkedIn Twitter

iOS Geliştirme Haberleri

Haftalık Swift tips, SwiftUI tricks ve iOS best practices. Spam yok, sadece değerli içerik.

Gizliliğinize saygı duyuyoruz. İstediğiniz zaman abonelikten çıkabilirsiniz.

Paylaş

# Claude Artifacts: Gerçek Zamanlı Kod ve Prototip Oluşturma

Not: Bu rehber Claude.ai platformu ve API üzerinden Artifacts kullanımi için en güncel bilgileri içerir. Tum örnekler test edilmiş ve çalışır durum.

İçindekiler

Artifacts Nedir ve Nasıl Çalışır?
Desteklenen Artifact Türleri
React Artifact'lar ile Canlı Prototipleme
Iteratif Geliştirme Süreci
Mobil UI Prototipleme
Takım İşbirl ve Paylaşım
API Üzerinden Artifact Oluşturma
Best Practices ve Sınırlamalar
Sonuç ve Öneriler

1. Artifacts Nedir ve Nasıl Çalışır?

Teknik Altyapı

Artifacts, arka planda su bileşenlerden oluşur:

Sandbox Ortami: Güvenli bir iframe içinde çalışan izole bir çalışma alanı
React Runtime: Canlı React component rendering desteği
Anlık Derleme: Kod yazıldığı anda compile ve render
State Yönetimi: Artifact içinde kendi state'ini yönetebilme

swift

1Artifacts Çalışma Akışi:
2 
3Kullanıcı İsteği → Claude Cevabi → Artifact Oluşturma → Sandbox Render → Canlı Onizleme
4      ↑                                                                        |
5      └-------------- Iteratif Geri Bildirim ----------------------------------┘

Artifact Türleri ve Tetikleyiciler

Claude, belirli durum otomatik olarak artifact oluşturur:

Tür	Tetikleyici	Örnek
React Component	UI component isteği	"Bir login formu oluştur"
HTML/CSS	Statik sayfa isteği	"Bir landing page yap"
SVG	Görsel/diagram isteği	"Bir flowchart ciz"
Markdown	Dokuman isteği	"API dokümantasyonu yaz"
Kod	Çalışır kod isteği	"Python script yaz"
Mermaid	Diagram isteği	"ER diyagrami ciz"

💡 Pro Tip: "Bunu artifact olarak oluştur" demene gerek yok. Claude, içerik tipini otomatik algilar ve uygun artifact turunu seçer. Ancak spesifik olmak istersen "React artifact olarak oluştur" diyebilirsin.

2. Desteklenen Artifact Türleri

React Artifacts

En güçlü artifact turu. Tam React 18 desteği ile interaktif componentler oluşturabilirsin:

jsx

1// Claude'un oluşturduğu bir React Artifact örneği
2import { useState, useEffect } from 'react';
3 
4function TaskManager() {
5  const [tasks, setTasks] = useState([]);
6  const [newTask, setNewTask] = useState('');
7  const [filter, setFilter] = useState('all');
8 
9  const addTask = () => {
10    if (newTask.trim()) {
11      setTasks(prev => [...prev, {
12        id: Date.now(),
13        text: newTask,
14        completed: false,
15        createdAt: new Date().toISOString()
16      }]);
17      setNewTask('');
18    }
19  };
20 
21  const toggleTask = (id) => {
22    setTasks(prev => prev.map(task =>
23      task.id === id ? { ...task, completed: !task.completed } : task
24    ));
25  };
26 
27  const filteredTasks = tasks.filter(task => {
28    if (filter === 'active') return !task.completed;
29    if (filter === 'completed') return task.completed;
30    return true;
31  });
32 
33  return (
34    <div style={{ maxWidth: 480, margin: '0 auto', padding: 24 }}>
35      <h1>Görev Yönet</h1>
36      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
37        <input
38          value={newTask}
39          onChange={e => setNewTask(e.target.value)}
40          onKeyDown={e => e.key === 'Enter' && addTask()}
41          placeholder="Yeni görev ekle..."
42          style={{ flex: 1, padding: 8, borderRadius: 6 }}
43        />
44        <button onClick={addTask}>Ekle</button>
45      </div>
46      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
47        {['all', 'active', 'completed'].map(f => (
48          <button
49            key={f}
50            onClick={() => setFilter(f)}
51            style={{
52              background: filter === f ? '#3b82f6' : '#e5e7eb',
53              color: filter === f ? 'white' : 'black',
54              border: 'none', padding: '4px 12px', borderRadius: 4
55            }}
56          >
57            {f === 'all' ? 'Tumunu' : f === 'active' ? 'Aktif' : 'Tamamlanan'}
58          </button>
59        ))}
60      </div>
61      {filteredTasks.map(task => (
62        <div
63          key={task.id}
64          onClick={() => toggleTask(task.id)}
65          style={{
66            padding: 12, marginBottom: 8, borderRadius: 8,
67            background: task.completed ? '#dcfce7' : '#f3f4f6',
68            textDecoration: task.completed ? 'line-through' : 'none',
69            cursor: 'pointer'
70          }}
71        >
72          {task.text}
73        </div>
74      ))}
75      <p style={{ color: '#6b7280', fontSize: 14 }}>
76        {tasks.filter(t => !t.completed).length} görev kaldi
77      </p>
78    </div>
79  );
80}

HTML/CSS Artifacts

Statik sayfalar ve email şablonlari için idealdir:

html

1<!-- Claude'un oluşturduğu responsive email şablonu -->
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <style>
8    * { margin: 0; padding: 0; box-sizing: border-box; }
9    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
10    .container { max-width: 600px; margin: 0 auto; }
11    .header { background: linear-gradient(135deg, #667eea, #764ba2); padding: 40px 24px; text-align: center; }
12    .header h1 { color: white; font-size: 28px; }
13    .content { padding: 32px 24px; }
14    .button { display: inline-block; background: #667eea; color: white; padding: 14px 28px; border-radius: 8px; text-decoration: none; }
15    @media (max-width: 480px) {
16      .header h1 { font-size: 22px; }
17      .content { padding: 20px 16px; }
18    }
19  </style>
20</head>
21<body>
22  <div class="container">
23    <div class="header">
24      <h1>Hosgeldin!</h1>
25    </div>
26    <div class="content">
27      <p>Merhaba, uygulamaya katıldığın için tesekkurler.</p>
28      <a href="#" class="button">Başla</a>
29    </div>
30  </div>
31</body>
32</html>

SVG Artifacts

Diagram, ikon ve görsel içerikleri oluşturmak için SVG artifact'lar kullanılır. Özellikle teknik dokümantasyonda flowchart ve mimari diyagramlar için çok faydali.

3. React Artifact'lar ile Canlı Prototipleme

Artifacts'in en güçlü kullanım alanı, bir fikri saniyeler içinde canlı bir prototipe dönüştürmektir.

Prototipleme Süreci

swift

11. Fikir Tanımlama  → "Bir dark mode toggle component'i istiyorum"
22. İlk Artifact     → Claude canlı React component oluşturur
33. Geri Bildirim    → "Animasyon ekle, renkler soyle olsun"
44. Iterasyon        → Claude artifact'i günceller
55. Export           → Kodu kopyala, projeye entegre et

Diyelim bir iOS uygula için admin dashboard prototipi yapiyorsun. Claude'a soyle diyorsun:

"Kullanıcı istatistiklerini göster bir dashboard widget'i oluştur. Günlük aktif kullanıcı, gelir ve retention orani göstersin. Chart'lar olsun."

Claude, Recharts veya kendi chart implementasyonu ile canlı bir dashboard oluşturur. Bunu gördükten sonra:

"Renkleri mavi yerine mor yap"
"Bir tarih araligi seç ekle"
"Dark mode desteği ekle"

Her talep anında uygula ve canlı olarak görürsün.

💡 Pro Tip: Artifact'lari sadece UI için değil, veri görselleştirme, algoritma animasyonu ve interaktif öğretim materyalleri için de kullanabilirsin. Örneğin bir sorting algoritmasının adım adım çalışmasını görselleştirmek harika bir kullanım örneği.

Kullanilabilecek Kutuphaneler

React artifact'larda su kutuphaneler kullanılabilir:

Kutuphane	Versiyon	Kullanım Alanı
React	18.x	Temel rendering
Recharts	2.x	Grafikler
Lucide React	Latest	Ikonlar
Tailwind CSS	3.x (inline)	Stil
Lodash	4.x	Utility fonksiyonlar
date-fns	3.x	Tarih işlemleri
Framer Motion	Sınırli	Animasyonlar

4. Iteratif Geliştirme Süreci

Artifacts'in en büyük güçu, "oluştur ve unut" değil "oluştur, geri bildirim ver, iyileştir" döngüsü sunmasıdır.

Versiyon Yönetimi

Her artifact değişikliği yeni bir versiyon oluşturur. Önceki versiyonlara geri donebilirsin:

swift

1Versiyon 1: Temel login formu (email + şifre)
2    ↓ "Sosyal giriş butonları ekle"
3Versiyon 2: Login + Google/Apple Sign In butonları
4    ↓ "Form validasyonu ekle"
5Versiyon 3: Login + sosyal giriş + canlı validasyon
6    ↓ "Dark mode desteği ekle"
7Versiyon 4: Tam özellikli login sayfası

Iterasyonlar Arasi Bağlam

Claude, önceki artifact versiyonlarını hatirlar. Bu sayede:

"Önceki versiyondaki renk şemasını geri getir ama yeni butonları koru"
"3. versiyondaki animasyonu simdiki versiyona ekle"

gibi karmaşık talepler bile doğru şekilde uygula.

typescript

1// Artifact versiyonlama mantığı (kavramsal)
2interface ArtifactVersion {
3  id: string;
4  version: number;
5  content: string;
6  type: 'react' | 'html' | 'svg' | 'markdown' | 'code';
7  createdAt: Date;
8  parentVersion?: number;
9  changeDescription: string;
10}
11 
12// Her iterasyon bir önceki versiyonun uzerine insa edilir
13const versions: ArtifactVersion[] = [
14  { id: 'art_001', version: 1, content: '...', type: 'react',
15    createdAt: new Date(), changeDescription: 'Temel login formu' },
16  { id: 'art_001', version: 2, content: '...', type: 'react',
17    createdAt: new Date(), parentVersion: 1,
18    changeDescription: 'Sosyal giriş butonları eklendi' },
19];

5. Mobil UI Prototipleme

Artifacts, mobil uygula UI prototiplemesi için muhteşem bir araç. Figma'ya gerek kalmadan hızlı prototip oluşturabilirsin.

iOS Tarzi Component Oluşturma

Claude'a "iOS tarzi bir Settings sayfası prototipi yap" dediğinizde, Apple'in Human Interface Guidelines'a uygun bir React prototipi oluşturur:

jsx

1// iOS Settings tarzi prototip (Claude Artifact)
2function IOSSettings() {
3  const [darkMode, setDarkMode] = useState(false);
4  const [notifications, setNotifications] = useState(true);
5  const [volume, setVolume] = useState(75);
6 
7  const SettingsRow = ({ icon, label, children }) => (
8    <div style={{
9      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
10      padding: '12px 16px', borderBottom: '0.5px solid #c6c6c8',
11      background: darkMode ? '#1c1c1e' : 'white'
12    }}>
13      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
14        <span style={{ fontSize: 20 }}>{icon}</span>
15        <span style={{ color: darkMode ? 'white' : 'black' }}>{label}</span>
16      </div>
17      {children}
18    </div>
19  );
20 
21  const Toggle = ({ value, onChange }) => (
22    <div
23      onClick={() => onChange(!value)}
24      style={{
25        width: 51, height: 31, borderRadius: 16,
26        background: value ? '#34c759' : '#e9e9eb',
27        position: 'relative', cursor: 'pointer',
28        transition: 'background 0.2s'
29      }}
30    >
31      <div style={{
32        width: 27, height: 27, borderRadius: 14,
33        background: 'white', position: 'absolute',
34        top: 2, left: value ? 22 : 2,
35        transition: 'left 0.2s',
36        boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
37      }} />
38    </div>
39  );
40 
41  return (
42    <div style={{
43      maxWidth: 390, margin: '0 auto',
44      background: darkMode ? '#000' : '#f2f2f7',
45      minHeight: '100vh', fontFamily: '-apple-system, sans-serif'
46    }}>
47      <h1 style={{
48        padding: '60px 16px 8px', fontSize: 34, fontWeight: 700,
49        color: darkMode ? 'white' : 'black'
50      }}>
51        Ayarlar
52      </h1>
53      <div style={{ margin: '16px 0', borderRadius: 12, overflow: 'hidden' }}>
54        <SettingsRow icon="🌙" label="Karanlik Mod">
55          <Toggle value={darkMode} onChange={setDarkMode} />
56        </SettingsRow>
57        <SettingsRow icon="🔔" label="Bildirimler">
58          <Toggle value={notifications} onChange={setNotifications} />
59        </SettingsRow>
60        <SettingsRow icon="🔊" label={'Ses: ' + volume + '%'}>
61          <input
62            type="range" min="0" max="100"
63            value={volume}
64            onChange={e => setVolume(Number(e.target.value))}
65            style={{ width: 120 }}
66          />
67        </SettingsRow>
68      </div>
69    </div>
70  );
71}

6. Takım İşbirl ve Paylaşım

Artifacts, takım üyelerinin fikirlerini hızla paylaşmasını sağlar.

Paylaşım Yöntemleri

Link ile paylaşım: Artifact'in benzersiz URL'ini paylaşarak herkesin görebilmesini sağla
Embed: Artifact'i baska bir sayfaya gömebilirsin
Export: Kodu indirip projeye entegre edebilirsin

Takım Prototipleme Workflow'u

swift

11. Product Owner: Fikri açıkla
22. Developer: Claude ile artifact oluşturur (2 dakika)
33. Takım: Canlı prototipi inceler
44. Geri bildirim: "Su butonu kirmizi yap, su bölüm asagiya taşı"
55. Developer: Claude'a geri bildirimi iletir (30 saniye)
66. Yeni versiyon: Takım tekrar inceler
77. Onay: Prototip development'a geçer

💡 Pro Tip: Artifacts'i sprint planning toplantısında kullan. Bir fikir tartisirken anında prototip oluştur, takım görenle karar versin. Bu yaklaşım, klasik "mockup sonra meeting" döngüsünü ortadan kaldırır.

Flutter vs React Native yazımızda cross-platform prototipleme stratejilerini detaylı ele aldık. Claude Code Plan Mode ile prototip öncesi mimari planlamaya da goz atabilirsin.

7. API Üzerinden Artifact Oluşturma

Claude API üzerinden programatik olarak artifact oluşturabilirsin. Bu, otomatik dokümantasyon, rapor oluşturma ve dinamik içerik üretimi için idealdir.

typescript

1// API ile artifact oluşturma
2const response = await anthropic.messages.create({
3  model: 'claude-sonnet-4-20250514',
4  max_tokens: 4096,
5  messages: [{
6    role: 'user',
7    content: 'Kullanıcı kayit formu için bir React component oluştur. Email, şifre, isim alanlari olsun. Validasyon ekle.'
8  }]
9});
10 
11// Response'daki artifact bloklarını işle
12for (const block of response.content) {
13  if (block.type === 'tool_use' && block.name === 'artifacts') {
14    const artifact = block.input;
15    console.log('Artifact turu:', artifact.type);
16    console.log('Artifact kodu:', artifact.content);
17    // Artifact'i render et veya dosyaya kaydet
18  }
19}

Otomatik Dokümantasyon Pipeline

typescript

1// CI/CD pipeline'da otomatik API dokümantasyonu
2async function generateAPIDocs(openAPISpec: string): Promise<string> {
3  const response = await anthropic.messages.create({
4    model: 'claude-sonnet-4-20250514',
5    max_tokens: 8192,
6    messages: [{
7      role: 'user',
8      content: `Bu OpenAPI spec'inden interaktif API dokümantasyonu oluştur.
9        Her endpoint için:
10        - Açıklama
11        - Request/Response örnekleri
12        - Canlı test butonu
13 
14        Spec:
15        ${openAPISpec}`
16    }]
17  });
18 
19  return extractArtifactContent(response);
20}

8. Best Practices ve Sınırlamalar

Sınırlamalar

Sınır	Değer	Not
Maks kod boyutu	~100KB	Çok büyük component'ler bölünmeli
Network istekleri	Yok	Sandbox dışına HTTP isteği yapilamaz
localStorage	Sınırli	Session içinde geçerli
Harici kutuphane	Whitelist	Sadece desteklenen kutuphaneler
Dosya sistemi	Yok	Dosya okuma/yazma yapilamaz

Do's and Don'ts

swift

1✅ YAP:
2- Prototipleme için kullan
3- UI component dene
4- Algoritmayi görselleştir
5- Takimla paylaş
6- Iteratif geliştir
7 
8❌ YAPMA:
9- Production kodu olarak kullanma
10- API key artifact'a koyma
11- Hassas veri gösterme
12- Çok büyük uygulamalar yapma
13- Backend logic ekleme

💡 Pro Tip: Artifact'lari başlangıç noktasi olarak kullan. Prototipi onayladiktan sonra, GraphQL Mobile yazımızda anlattığı mimari ile production-ready versiyonunu geliştir. Cursor AI IDE ve Claude Code MCP yazılarinda da artifacts benzeri deneyimleri karşılaştırdık.

Sonuç ve Öneriler

Temel çıkarımlar:

Prototipleme için Figma'dan önce Artifacts'i dene
Iteratif geliştirme ile her adım iyileştir
Takım işbirl için artifact link'lerini paylaş
Sınırlamalari bil — network, dosya sistemi ve kutuphane kısıtlamaları var
Production için başlangıç noktasi olarak kullan, doğrudan deploy etme

Resmi Kaynaklar:

ALTIN İPUCU

Bu yazının en değerli bilgisi

Bu ipucu, yazının en önemli çıkarımını içeriyor.

Easter Egg

Gizli bir bilgi buldun!

Bu bölümde gizli bir bilgi var. Keşfetmek ister misin?

Okuyucu Ödülü

Etiketler

#Claude#Artifacts#AI#Prototyping#React#Code Generation#Anthropic

Muhittin Çamdalı

Senior iOS Developer

12+ yıllık deneyime sahip iOS Developer. Swift, SwiftUI ve modern iOS mimarileri konusunda uzman. Apple platformlarında performanslı ve kullanıcı dostu uygulamalar geliştiriyorum.

GitHub LinkedIn Twitter

iOS Geliştirme Haberleri

Haftalık Swift tips, SwiftUI tricks ve iOS best practices. Spam yok, sadece değerli içerik.

Gizliliğinize saygı duyuyoruz. İstediğiniz zaman abonelikten çıkabilirsiniz.

Claude Artifacts: Gerçek Zamanlı Kod ve Prototip Oluşturma

Teknik Altyapı

Artifact Türleri ve Tetikleyiciler

React Artifacts

HTML/CSS Artifacts

SVG Artifacts

Prototipleme Süreci

Gerçek Dünya Örneği: Dashboard Widget

Kullanilabilecek Kutuphaneler

Versiyon Yönetimi

Iterasyonlar Arasi Bağlam

iOS Tarzi Component Oluşturma

Paylaşım Yöntemleri

Takım Prototipleme Workflow'u

Otomatik Dokümantasyon Pipeline

Sınırlamalar

Do's and Don'ts

ALTIN İPUCU

Easter Egg

Okuyucu Ödülü

Etiketler

Muhittin Çamdalı

iOS Geliştirme Haberleri

Paylaş

Claude Extended Thinking: AI'ın Derin Düşünme Modu

Claude Projects ve Memory: Bağlam Yönetimi

İlgili Yazılar

Claude Extended Thinking: AI'ın Derin Düşünme Modu

Claude Projects ve Memory: Bağlam Yönetimi

Claude Code + Opus 4.6: Otonom Kodlama Deneyiminin Zirvesi

Claude Code MCP: Model Context Protocol ile AI Plugin Ekosistemi

Claude Code Hooks: Pre-Commit ve Post-Commit Otomasyonu

İlgili Karşılaştırmalar

Claude vs ChatGPT — Yazılım Geliştirme İçin

Cursor vs GitHub Copilot

v0 (Vercel) vs Bolt.new

İlgili İçerik

Claude Artifacts: Gerçek Zamanlı Kod ve Prototip Oluşturma

Teknik Altyapı

Artifact Türleri ve Tetikleyiciler

React Artifacts

HTML/CSS Artifacts

SVG Artifacts

Prototipleme Süreci

Gerçek Dünya Örneği: Dashboard Widget

Kullanilabilecek Kutuphaneler

Versiyon Yönetimi

Iterasyonlar Arasi Bağlam

iOS Tarzi Component Oluşturma

Paylaşım Yöntemleri

Takım Prototipleme Workflow'u

Otomatik Dokümantasyon Pipeline

Sınırlamalar

Do's and Don'ts

ALTIN İPUCU

Easter Egg

Okuyucu Ödülü

Etiketler

Muhittin Çamdalı

iOS Geliştirme Haberleri

Paylaş

Claude Extended Thinking: AI'ın Derin Düşünme Modu

Claude Projects ve Memory: Bağlam Yönetimi

İlgili Yazılar

Claude Extended Thinking: AI'ın Derin Düşünme Modu

Claude Projects ve Memory: Bağlam Yönetimi

Claude Code + Opus 4.6: Otonom Kodlama Deneyiminin Zirvesi

Claude Code MCP: Model Context Protocol ile AI Plugin Ekosistemi

Claude Code Hooks: Pre-Commit ve Post-Commit Otomasyonu

İlgili Karşılaştırmalar

Claude vs ChatGPT — Yazılım Geliştirme İçin

Cursor vs GitHub Copilot

v0 (Vercel) vs Bolt.new

İlgili İçerik