# Artifacts: Live Working Outputs

> Source: https://sukruyusufkaya.com/en/learn/claude-ustaligi/artifacts
> Updated: 2026-05-11T13:48:34.794Z
> Category: Claude Ustalığı
> Module: 7. Claude's Superpowers
**TLDR:** Mechanics of Artifacts — Claude's code, SVG, or React component live-rendered in a side panel. Build and iterate live.

# Artifacts'i Sevmek İçin 5 Sebep

1. **Anlık görsel kontrol** — kodu kopyalamadan denersin.
2. **Değişiklik döngüsü çok hızlı** — "şu rengi koyulaştır" der, görür, onaylarsın.
3. **Kod + UI arasında bağlam korunur.**
4. **Mini araç prototipleme** — hesap makinesi, anket, oyun.
5. **Belge / SVG çıkarımı** — okumaya hazır.

### HTML / JS / CSS artifact

Tek dosyada CSS + JS + HTML. CDN'den `https://cdnjs.cloudflare.com` üzerinden harici kütüphaneler import edilebilir.

### React artifact

Tek dosyalı default export bileşen. Tailwind temel utility class'ları çalışır. Hooks kullanılabilir. localStorage YASAK; in-memory state kullan.

### SVG artifact

Vektör grafik üretimi için ideal. CSS değişkenleri ile renk teması koru.

### Markdown artifact

Uzun yazılı içerik için (rapor, makale). Kopyala-yapıştır kolaylığı.

> **Browser storage yasak**
>
> Artifacts içinde `localStorage` ve `sessionStorage` kullanılamaz. Verileri React state veya in-memory değişkenlerde tut.

```tsx
// Örnek React artifact: pomodoro hesaplayıcı
import { useState } from "react";

export default function Pomodoro() {
  const [tasks, setTasks] = useState(2);
  const [minutes, setMinutes] = useState(25);
  const [breakMin, setBreakMin] = useState(5);

  const total = tasks * (minutes + breakMin);

  return (
    <div className="p-6 max-w-md mx-auto">
      <h1 className="text-xl font-bold mb-4">Pomodoro Planı</h1>
      <div className="space-y-3">
        <label className="block">
          Görev sayısı:
          <input type="number" value={tasks} onChange={e => setTasks(+e.target.value)} className="ml-2 border px-2 py-1 rounded" />
        </label>
        <label className="block">
          Pomodoro süresi (dk):
          <input type="number" value={minutes} onChange={e => setMinutes(+e.target.value)} className="ml-2 border px-2 py-1 rounded" />
        </label>
        <label className="block">
          Mola süresi (dk):
          <input type="number" value={breakMin} onChange={e => setBreakMin(+e.target.value)} className="ml-2 border px-2 py-1 rounded" />
        </label>
      </div>
      <p className="mt-6 font-semibold">Toplam süre: {total} dk</p>
    </div>
  );
}
```

**Boşluk doldurma egzersizi (text):**
```text
Artifacts içinde _____ ve _____ Storage kullanılamaz. React artifact'lerinde _____ kullanılarak veri saklanır. Stil için Tailwind _____ utility'leri çalışır.
```

> ✋ Kontrol noktası: `q-706-mc1`

> 📝 İlgili quiz: `module-7-final`