# KAYIT · Koşul: Anthropic frontend-design

Tarih: 2026-10-27 · Ajan: Hermes alt ajanı (Claude) · Klasör: `kalipta-tasarim/frontend-design/`

## Okunan kaynaklar
- `kalipta-tasarim/BRIEF.md` (tamamı): sabit içerik, kesin sınırlar, beş aile ve referans tablosu.
- `Downloads/baran/.codex/skills/frontend-design/SKILL.md` (tamamı). Başka tasarım skill'i (design-taste-frontend, impeccable, reference-to-design) okunmadı.
- 14 referans görseli `taste-vault/images/` içinden vision ile tek tek açıldı (aşağıda aile aile).
- `gallery.json` okunmadı; aile ilkeleri doğrudan görsellerden çıkarıldı.

## Skill'den uygulanan somut kurallar
- **Konudan yola çık:** Her ailenin görsel dili döküm/kalıp/3D baskı dünyasının kendi malzemesinden seçildi: silikon kalıp kutusu, markalama boyası ve teknik resim, kalıba akan reçine ipliği, FDM katman çizgisi ile risograf tramı, SLA yazıcının 405 nm ışığı.
- **İki aşama:** Her aile için önce token planı (renk, yazı, yerleşim, ilke) yazıldı, sonra "bu her sayfada çıkacak varsayılan mı?" diye gözden geçirildi. Değişenler aşağıda "Plan düzeltmesi" satırında.
- **Yazı:** Ailede en fazla iki yazı ailesi; varsayılan Inter/Roboto yok. Hepsi Türkçe glif destekli Google Fonts.
- **Kaçınılan şablon izleri:** Başlıkta tek kelime vurgusu yok. BÜYÜK HARF etiket yok. Başlık üstü eyebrow yok. Düğme ve bağlantı metninin sonunda `→` yok. Küçük veri etiketlerinde monospace yok (teknik ailede bile dar genişlikli Archivo kullanıldı). Arada `·` olan metinler yalnız brifin sabit metinleri (parça adı, bulgular, alt bilgi).
- **Numaralandırma yalnız gerçek sırada:** 1–3 numaraları yalnız "Üç adımda" sırasında ve rapordaki işaret ile liste satırını eşlemek için kullanıldı. "Üç girdi" bölümü bir sıra olmadığı için numarasız bırakıldı.
- **Cesaret tek yerde:** Her sayfada akılda kalacak tek öğe var (kalıp kutusu / kesit çizimi / reçine ipliği / katmanlı vazo / SLA tablası). Sayfanın geri kalanı sade tutuldu.
- **Hareket tek bir kurgu:** Sayfa başına bir açılış veya döngü hareketi var. Kartlarda hover efekti ve bölümlerde kayarak girme yok. Kullanıcı eylemine bağlı hareket yalnız SSS açılıp kapanırken var. `prefers-reduced-motion` açıkken hepsi duruyor; canvas statik bir kare çiziyor.
- **Yazı içeriği:** Form hatası yön veriyor ("E-posta adresi eksik ya da hatalı. … biçiminde yaz."). Onay metni brifteki metnin kendisi.
- **Kalite tabanı:** `:focus-visible` halkası, görünmez `label`, `role="status"` canlı bölge, SVG ve canvas için `aria-label`, 390 px'te tek sütun.

## Ailelerin kaydı

### 1. `urun-sade.html` · Product-Led Minimalism
- **İncelenen referanslar:** zuno-orange-workspace (beyaz zemin, ortalanmış iki satırlık başlık, tek turuncu vurgu, renkli çerçeve içinde ürün paneli) ve synthos-ai-workspace (solda başlık, sağda destek metni, mor dalgalı zemin üstünde üç kart).
- **Alınan ilke:** Kanıt ürünün kendisi. Sade başlığın hemen altında, çerçeve içinde büyük bir ürün önizlemesi duruyor.
- **Kalıpta'ya özgü fikir:** Çerçeve degrade bir pano değil, **iki parçalı silikon kalıp kutusu**: üstte döküm ağzı oyuğu, köşelerde kalıp anahtarları, ortada kesikli ayırma hattı var. Rapor bu kalıbın "boşluğunda" oturuyor. Ölçü sapması küçük bir tolerans çubuğuyla gösteriliyor (±0,2 bandı, +0,4 işareti).
- **Token:** kâğıt #F6F8F7, mürekkep #0F2A2D, silikon #57B3A8, işaret #D93A63. Yazı: Schibsted Grotesk.
- **Plan düzeltmesi:** İlk plandaki turuncu vurgu, Zuno'nun paletini kopyalayacağı için silikon yeşili ve işaret kalemi pembesiyle değiştirildi.
- **Hareket:** Üç işaret, sayfa açılırken sırayla vazonun üstüne düşüyor.

### 2. `teknik-sistem.html` · Technical Systems
- **İncelenen referanslar:** drone-from-above (fotoğraf üstünde ızgara, nişangâh, dev yazı), drone-thermal-specimen (spec tablosu, ortada termal görüntü, devasa "TRS-01"), drone-see-to-sea (dev başlık, HUD katmanları, numaralı alt bölümler).
- **Alınan ilke:** Ölçen bir sistemin dili: ızgara, nişan, tablo ve çok büyük yazı.
- **Kalıpta'ya özgü fikir:** Arazi fotoğrafı ve siyah-turuncu palet yerine atölyedeki **markalama boyası mavisi** kullanıldı: çizilen çizgi boyayı kazıyıp metali açar. Kahramanda iki parçalı kalıbın taralı (ISO kesit taraması) **kesit çizimi** var: boşlukta vazo, döküm ağzı, havalık, ayırma hattı, Ø ölçüsü. Nişan, kabarcığa kilitleniyor. Rapor bir teknik resim **paftası** olarak sunuluyor: balon numaraları, bulgu tablosu, tolerans dışı değer fosforlu kalemle boyanmış.
- **Token:** markalama mavisi #1B3FA6, metal #E7ECF4, mürekkep #0B1D52, fosfor #FFD43B. Yazı: Archivo (değişken genişlik; başlıkta 125, etiketlerde 75–80).
- **Plan düzeltmesi:** Etiketler için monospace düşünülmüştü; skill'in "küçük etiketlerde mono" uyarısı yüzünden dar genişlikli Archivo'ya geçildi.
- **Hareket:** Nişan, kayık konumdan kabarcığın üstüne bir kez kilitleniyor.

### 3. `sakin-sinematik.html` · Vast Quiet Cinematic
- **İncelenen referanslar:** **ctgt-alt** (Baran'ın seçtiği: sisli beyaz gök, sağ altta koyu yeşil dağ kütlesi, sol üstte küçük başlık, sayfa siyaha iniyor), **visora** (Baran'ın seçtiği: kum beji gök, altta kıvrımlı kumul, kumulda tek küçük insan silueti) ve ctgt-hero (ortada başlık, altta kayalık zirve).
- **Alınan ilke:** Geniş boşluk, tek sessiz kütle, tek küçük odak noktası. Sayfa açık gökten koyu zemine iniyor.
- **Kalıpta'ya özgü fikir:** Dağ ya da kumul yok. Alçak açıdan görülen **devasa bir kalıbın ağzı** var: ince koyu bir dudak ve sisi yansıtan dinlenen reçine yüzeyi. Gökten tek bir **amber reçine ipliği** iniyor ve yüzeyde yavaş halkalar açıyor. Renk yalnız reçinede. Kapanış bölümünde sayfa yeniden sise açılıyor.
- **Token:** sis #E4E5E9 / #C5C8D0, kütle #19181E, reçine #C98C3C. Yazı: Geist 300/400.
- **Plan düzeltmesi:** CTGT'deki iki tonlu başlık (bir kısmı gri) skill'in "tek ifade vurgusu" uyarısına girdiği için alınmadı; başlık tek renk.
- **Hareket:** İplik akıyor, yüzeyde iki halka dönüşümlü açılıyor. Reduced-motion açıkken ikisi de duruyor.

### 4. `kagit-baski.html` · Print-Tech Paper
- **İncelenen referanslar:** stillpage (krem kâğıt, kesikli ızgara, koordinatlar, raster ağaç, tek turuncu kelime), spade (açık yeşil pano, kontur çizgili 3D nesne, veri kutuları), roamfield (raster manzara, ortalanmış serif başlık, hap düğme).
- **Alınan ilke:** Kâğıt ve baskı tekniği görünür. Tram noktası, kesikli ızgara ve kontur çizgileri birlikte kullanılıyor.
- **Kalıpta'ya özgü fikir:** **FDM baskının katman çizgileri** ile risografın iki mürekkebi aynı yerde buluşuyor. Vazo 52 katmandan oluşuyor; mavi ve pembe baskı 3–4 px kayık. Açılışta katmanlar alttan üste doğru "basılıyor". Ayrıca kırpma işaretleri, ayar hedefi ve renk şeridi var. Rapor, mühürlü bir **muayene formu**. Erken erişim, makaslı bir kesme **kuponu**. Başlık da kayık baskı gibi pembe gölgeli.
- **Token:** kâğıt #EFF0EA, riso mavi #0078BF, fosforlu pembe #FF48B0, mürekkep #1E2547. Yazı: Familjen Grotesk (başlık, arayüz) + Newsreader (gövde serif, satır aralığı 1,62).
- **Plan düzeltmesi:** Stillpage'in turuncusu ve raster ağacı alınmadı. Bunların yerine riso mavi/pembe ikilisi ve katmanlı vazo kullanıldı.
- **Hareket:** Katmanlar adım adım basılıyor (`steps()` ile).

### 5. `isikli-gelecek.html` · Luminous Futurism
- **İncelenen referanslar:** stardust-pixel-light (karanlıkta turuncu-mavi ışık şeritleri, piksel yazı), nebula-luminous-flower (ışıktan bir çiçek, solda başlık, italik vurgu), sakura-cosmic-tree (çerçeve içinde ışıklı ağaç, altta serif başlık).
- **Alınan ilke:** Karanlıkta ışığın kendisi kahraman. Tek bir parlayan nesne var.
- **Kalıpta'ya özgü fikir:** Çiçek ya da ağaç yok. **SLA reçine yazıcının içi** gösteriliyor: parça, yapı tablasından aşağı doğru **ters sarkarak** katman katman büyüyor. Teknenin altındaki 405 nm mor ekranda o anki kesit parlıyor; yeni kürlenen katman bir ışık çizgisi. Animasyon canvas'la çiziliyor.
- **Token:** gece #0C0A22, UV #7B4DFF / #CBB8FF, amber #FFB560, metin #EEEAF9. Yazı: Unbounded 300 (başlık) + Figtree (gövde).
- **Plan düzeltmesi:** Nebula'daki italik serif vurgu, "tek kelime vurgusu" kalıbına girdiği için alınmadı.
- **Hareket:** 11 saniyelik baskı döngüsü. Reduced-motion açıkken %80 basılmış durumda tek statik kare çiziliyor.

## Doğrulama (gerçekten çalıştırıldı)
Betik: `frontend-design/dogrula.py` (py -3.11 + Playwright Chromium), adres `http://127.0.0.1:8766/frontend-design/<aile>.html`.
Son çalıştırmada 5 dosyanın hepsi için sonuç:

| Kontrol | Sonuç |
|---|---|
| Yatay taşma 1440×900 (`scrollWidth` = `clientWidth`) | 5/5 taşma yok (1440 = 1440) |
| Yatay taşma 390×844 (mobil bağlam) | 5/5 taşma yok (390 = 390) |
| Konsol `error` ve `pageerror` | 5/5 yok (masa, tel ve reduced-motion bağlamlarında) |
| `reduced_motion="reduce"` iken görünmez kalan metin | 5/5 yok (opaklığı < 0,05 olan ya da `visibility:hidden` metin öğesi bulunmadı) |
| Form gönderimi sırasında ağ isteği | 5/5 sıfır istek; yerel onay metni sayfada çıktı |

- Ekran görüntüleri `ekran/frontend-design-<aile>-{masa,tel,kapak}.png`: 15 dosya.
- Görsel inceleme vision ile yapıldı ve iki düzeltme turu uygulandı:
  - **1. tur:** (a) urun-sade: gövdede global `tnum` yüzünden noktalama işaretinden önce boşluk oluşuyordu; kaldırıldı. Rapor başlığı büyütüldü. (b) teknik-sistem: kesit boşluğu simetrik değildi ve kabarcık duvarın dışındaydı; düzeltildi. (c) sakin-sinematik: dikey çizgide `objectBoundingBox` degradesi boyanmadığı için iplik görünmüyordu; `userSpaceOnUse` yapıldı. Kalıp ağzı gezegen ufku gibi okunuyordu; ince dudak ve yansıtan reçine yüzeyi olarak yeniden çizildi. İplik mobil kadraja girecek şekilde x=880'e taşındı. (d) isikli-gelecek: ışık sütunu lamba gibi baskın duruyordu; opaklığı düşürüldü. Döngü %55'ten başlatıldı, böylece ilk karede parça görünüyor. (e) kagit-baski: mobilde sağ kolonun yüksekliği 0 olduğu için vazo metnin üstüne biniyordu; kolona en az yükseklik verildi.
  - **2. tur:** sakin-sinematik mobilde destek metni ve gezinme reçine ipliğine değiyordu. Metin genişliği daraltıldı. Playwright ölçümü: ipliğin x'i 345 px, metinlerin en sağ ucu 336 px; çakışma yok.

## Bilinen eksikler ve dürüst notlar
- Klavye gezintisi ve odak halkası otomatik test edilmedi; yalnız CSS'te tanımlı. Renk kontrastı ölçülmedi (göz kararı).
- Reduced-motion kontrolü yalnız 1440 genişlikte ve opacity/visibility ölçüsüyle yapıldı. Kapalı `<details>` içerikleri bilerek kapsam dışı tutuldu.
- Yazılar Google Fonts'tan yükleniyor; ağ yoksa sistem yazısına düşer ve görünüm değişir.
- isikli-gelecek'teki görsel yalnız canvas; metin karşılığı `aria-label`.
- Brifte olmayan ama arayüz için eklenen etiketler: form hata metni, figür açıklaması ("Kesit: iki parçalı silikon kalıp, poliüretan vazo boşluğu"), "ayırma hattı", tablo başlıkları ("Balon", "Bulgu"), "Adım 1–3", form alanı adları ("Parça", "Bulgular", "Olası neden"). Hiçbiri yeni ürün iddiası, sayı ya da müşteri değil. Yine de sabit içerik dışında kaldıkları için burada not edildi.
- Hiçbir yerde fotoğraf gerekmedi; bu yüzden "Görsel alanı · 2. aşamada üretilecek" yer tutucusu kullanılmadı.
- Skill'in uyardığı kalıplarla kalan yakınlıklar: sakin-sinematik ve isikli-gelecek koyu zemin üstünde tek vurgu rengi kullanıyor (kalıp 2'ye yakın; aile bunu zaten istiyor). kagit-baski'de kesikli çizgiler ve kâğıt tonu var (kalıp 3'e yakın; aile bunu açıkça istiyor), ama krem yerine soğuk gri-yeşil kâğıt seçildi.
- `dogrula.py` bu klasörde duruyor (doğrulama aracı, teslim sayfası değil).