# KAYIT · Taste koşulu (design-taste-frontend)

Kalıpta tanıtım sayfasının beş aile yorumu, **Taste** koşulunda (Leonxlnx/taste-skill, `design-taste-frontend`). Başka tasarım skill'i okunmadı.

## Üretilen dosyalar

| Aile | Sayfa | Ekran görüntüleri (`../ekran/`) |
|---|---|---|
| Product-Led Minimalism | `urun-sade.html` | `taste-urun-sade-{masa,tel,kapak}.png` |
| Technical Systems | `teknik-sistem.html` | `taste-teknik-sistem-{masa,tel,kapak}.png` |
| Vast Quiet Cinematic | `sakin-sinematik.html` | `taste-sakin-sinematik-{masa,tel,kapak}.png` |
| Print-Tech Paper | `kagit-baski.html` | `taste-kagit-baski-{masa,tel,kapak}.png` |
| Luminous Futurism | `isikli-gelecek.html` | `taste-isikli-gelecek-{masa,tel,kapak}.png` |

Yardımcılar: `dogrula.py` (Playwright ölçüm + ekran görüntüsü), `canli-test.py` (canlı öğe tıklama testi), `gate.sh` (skill'in lint + inspect betikleri), `.taste-skill/<aile>/` (dağıtılan yön sayfası `direction.json`, inspector ekranları `inspect/`, son kapı çıktısı `gate.txt`). Ölçüm sonuçları: `../ekran/taste-dogrulama.json`.

## Okunan kaynaklar

- `BRIEF.md` (tamamı). Sabit içerik kelimesi kelimesine kullanıldı.
- Skill: `SKILL.md` (tamamı), `references/tells.md`, `critique.md`, `layout.md`, `copy.md` (tamamı); `colour.md` §5–9; `imagery.md` §7–10; `motion.md` §1–6'nın ilk yarısı (bütçe, tokenlar, yükleme dizisi, maskeli satır, açılışta bir kez görünme, basma/üzerine gelme). `type.md`, `research.md`, `scenes.md`, `app-screens.md` ve `motion.md`'nin geri kalanı **okunmadı**. `base.css` göz atıldı, kopyalanmadı.
- Skill betikleri yerelde çalıştı (Node 22.22.1 + yerel Chrome): `draw.mjs` (yön dağıtma), `lint.mjs`, `inspect.mjs`. `assets.mjs` (açık koleksiyonlardan görsel indirme) brif "indirme yok" dediği için **çalıştırılmadı**. `scenes.mjs` kullanılmadı (kaydırma sahnesi kurulmadı).

## Skill'den uygulanan somut kurallar

- **Dağıtma, sonra seçme:** `draw.mjs --options 3` ile üç yön alındı; aile brifte sabit olduğu için her aileye en uygun yön `--direction` ile dağıtıldı (aşağıda). Yön sayfaları `.taste-skill/<aile>/direction.json`.
- **Ev kuralları:** göz kaşı etiketi yok, monospace yok, 01/02/03 süsü yok (bulgu sırası yalnız gerçek `<ol>`/rapor numarası), ince ayırıcı çizgi yok (çizgiler yalnız gerçek tabloda, form alanında ve `data-ui` ürün parçalarında), CSS gradyanı yok, dinlenen öğede gölge yok (tek gölge: urun-sade'de açık iletişim kutusu, `data-ui` içinde), mor/çivit yok, cam/bulanıklık yok, emoji yok, başlıkta stilli vurgu kelimesi yok, en çok bir yazı ailesi.
- **Başlıklar her genişlikte en çok iki satır:** h1 "Hatayı kalıptan / çıkmadan gör." elle bölündü; inspector 1440/768/390'da beş sayfada da 2 satır ölçtü. "İlk dökümünü birlikte kontrol edelim." ilk turda 3 satıra düştü, ölçü/genişlik değiştirilerek düzeltildi.
- **İlk ekranda gerçek düğme**, tek birincil eylem; ikincil eylem metin bağlantısı.
- **Eşit dış kenar boşlukları, yarısı boş bölüm yok, yarım ekrandan uzun boşluk yok** (inspector'ın blank-gap/edge-text/off-centre bulguları düzeltildi; `:where(ul[class])` sıfırlaması kenar boşluğunu yiyordu).
- **Yazılım parçaları `data-ui`:** ürün önizlemeleri gerçek HTML arayüz parçası (gerçek etiketler, bir seçili durum), gri çubuklu sahte panel değil.
- **Bir "canlı şey"** her sayfada (aşağıda), klavyeyle çalışan gerçek `<input type=range>`/`<button>`.
- **Hareket:** maskeli başlık satırı (imza hareketi), bölümlerde sırayla yükselen girişler (60–90 ms kademe), düğmelerde basma/üzerine gelme geri bildirimi, bir hareketli resim. Gizli durumlar yalnız `html.js` + `prefers-reduced-motion: no-preference` altında; azaltılmış harekette içerik baştan görünür.
- **Kanıt uydurma yok:** yeni sayı/müşteri/alıntı eklenmedi. Örnek veri brifteki değerlerle sınırlı.

## Aile aile: referanslar, alınan ilke, Kalıpta'ya özgü fikir

Her referans `vision_analyze` ile açılıp bakıldı.

### urun-sade · Product-Led Minimalism
- **Referanslar:** `zuno-orange-workspace.png` (ortalı başlık + iki düğme + altta büyük ürün paneli, beyaz zemin, turuncu vurgu), `synthos-ai-workspace.png` (solda başlık / sağda açıklama, altta renkli sahnede üç ürün kartı).
- **Alınan ilke:** ürünün kendisi kahramandır; sakin açık zemin, tek vurgu rengi, gerçek boyutta arayüz.
- **Kopyalanmayan:** ortalı yığın, turuncu/mor-pembe sahne, pano kartları, sahte istatistik.
- **Yön:** `product-performs` (Albert Sans). Palet: dağıtılan "Warm black, gold" aileyle (açık, sade) çeliştiği için `--redraw palette` → "Stone and blueprint" (taş zemin, mavi vurgu).
- **Fikir:** "Kalıpta'nın muayene ekranı sayfanın resmi olur": başlığın yanında çalışan muayene ekranı (katman düğmeleri: Kabarcık/Çekme/Ölçü sapması), rapor bölümünde bulguya tıklayınca parça üstündeki işaret öne çıkar, "Üç adımda" bölümünde kaydırıcı ekranı Çek→İşaretle→Düzelt durumuna geçirir.
- **Canlı şey:** katman düğmeleri + adım kaydırıcısı + bulgu seçimi.

### teknik-sistem · Technical Systems
- **Referanslar:** `drone-from-above.png` (dev büyük harf başlık, fotoğraf üstünde ızgara/hedef işaretleri, mono etiketler), `drone-thermal-specimen.png` (dev parantezli başlık, solda "Specs" tablosu, ortada gözlem görüntüsü, dev ürün kodu), `drone-see-to-sea.png` (tam genişlik dev başlık, turuncu çizgi, kuşbakışı gemi, 01/02/03 özellikler).
- **Alınan ilke:** tam genişlikte dev grotesk başlık, gözlem altındaki nesne + yanında teknik özellik tablosu, tek sıcak sinyal rengi.
- **Kopyalanmayan:** artı imleç/ızgara/köşe işaretleri, mono mikro etiketler, 01/02/03 (ev kuralları bunları yasaklar), kuşbakışı askeri fotoğraf konusu, beyaz-siyah-turuncu palet.
- **Yön:** `specimen-catalogue`, `--tone technical` ile yeniden dağıtıldı (ilk dağıtım EB Garamond + pastel idi; teknik aileyle çelişiyordu). Dağıtılan General Sans Google Fonts'ta yok → **Archivo** (genişlik ekseni 62–125, Türkçe glifli) kullanıldı; inspector bunu `font-not-dealt` uyarısı olarak raporluyor. Palet "Sand and moss" oranları korunup zemin krem uyarısına girmesin diye daha gri taşa çekildi.
- **Fikir:** "Kusurlar numune olur": üç bulgu numune kataloğu gibi renkli karolarda büyütülmüş yakın çizimlerle sunulur; parça "plaka" üstünde gözlenir, yanında gerçek `<table>` özellik listesi.
- **Canlı şey:** tolerans ölçeri: çap sapmasını kaydır, ±0,2 mm bandına göre "Tolerans içinde/dışı" kararı değişir (Örnek veri).

### sakin-sinematik · Vast Quiet Cinematic
- **Referanslar:** **`ctgt-alt.png`** (Baran'ın seçimi: sisli kayalık dağ sağ altı kaplar, sol üstte küçük başlık ve tek düğme), **`visora.png`** (Baran'ın seçimi: geniş sıcak gökyüzü, altta kum tepesi, minik insan figürü, solda başlık), `ctgt-hero.png` (ortalı başlık, altta karanlık zirve, sis).
- **Alınan ilke:** çok geniş, sessiz bir sahne; ekranın büyük kısmı hava; tek minik odak nesnesi; küçük, sakin tipografi; tek düğme.
- **Kopyalanmayan:** dağ/kum tepesi/insan konusu, fotoğraf, sıcak bej veya yeşil kaya paleti.
- **Yön:** `quiet-instrument` (Literata, soğuk gri + kobalt). Kobalt mor/çivit alanına düşmesin diye #1d4fd8'e çekildi.
- **Fikir:** "Açılmış kalıp bir vadi olur": iki büyük kalıp yarısı uçurum gibi ön planda (sol yarının iç yüzünde vazo boşluğu), uzakta sise karışan üst üste kalıp kutuları, ortada minik poliüretan vazo ve kenarında tek kobalt halka (kabarcık). Tümü düz ton basamaklarıyla (gradyan yok) çizilmiş SVG.
- **Canlı şey:** "Sis ↔ Kalıpta ile net" kaydırıcısı rapor görselinde bulguların üstündeki sisi kaldırır.

### kagit-baski · Print-Tech Paper
- **Referanslar:** `stillpage.png` (raster/yarım ton ağaç, krem kâğıt, kesik çizgili ızgara, mono menü), `spade.png` (açık yeşil kâğıt, kontur çizgili 3B nesne, mono veri kutuları), `roamfield.png` (yarım ton manzara, ortalı serif başlık).
- **Alınan ilke:** baskı tekniği görselin dokusu olur: yarım ton (halftone) noktalar, iki mürekkep üst üste basım, kâğıt zemin.
- **Kopyalanmayan:** ağaç/manzara konusu, ortalı başlık, kesik çizgi ızgara, mono etiketler, krem + turuncu.
- **Yön:** `editorial-report` (Bricolage Grotesque, şişe yeşili + altın). Roller: zemin düşük doygunlukta kemik kâğıt; yeşil ve altın iki baskı mürekkebi ve tam sayfa renk alanları (Üç girdi = yeşil sayfa, SSS = altın sayfa). Başlıklar viewport'un ~%42'sindeki eksenden başlar.
- **Fikir:** "Kalıp ve döküm iki renkli baskı olur": maşthead'de canvas ile üretilen iki mürekkepli yarım ton: açılmış silikon kalıp ve ondan çıkan vazo.
- **Canlı şey:** rapor görselinde "İşaretli ↔ Ham baskı" kaydırıcısı, işaret katmanını baskının üstünden açıp kapar.

### isikli-gelecek · Luminous Futurism
- **Referanslar:** `stardust-pixel-light.png` (karanlıkta turuncu-mavi ışık şeritleri, piksel doku, solda alt köşede başlık), `nebula-luminous-flower.png` (karanlıkta ışıktan çiçek, ışık hüzmeleri, sol altta başlık), `sakura-cosmic-tree.png` (ışık akıntıları içinde pembe kozmik ağaç, altında başlık).
- **Alınan ilke:** karanlık alan + ışıktan yapılmış tek organik nesne; başlık sol altta, ince ağırlıkta.
- **Kopyalanmayan:** çiçek/ağaç konusu, mor-pembe tonlar, başlıkta italik serif vurgu kelimesi, köşe işaretli düğmeler.
- **Yön:** `dark-room` (Work Sans 300). Palet "Charcoal and sage" yerine `--redraw palette` → "Night and cornflower" (ışık temalı aileye uygun).
- **Fikir:** "Kabarcıklar ışık olur": vazo binlerce soğuk ışık noktasından dönen bir 3B nokta bulutu; üç bulgu (üst kenar kabarcığı, taban çekmesi, çap halkası) sıcak kehribar ışık olarak parlar.
- **Canlı şey:** rapor bölümünde bulguya tıklayınca vazo o bulguyu öne çevirir; sürükleyerek döndürülür.
- **Ev kuralı gerilimi:** aile ışıma ister, skill CSS'te parlama/gradyanı yasaklar. Işık yalnız canvas resminin içinde; sayfa öğelerinde gradyan/gölge yok.

## Doğrulama (gerçekten çalıştırılanlar)

**Statik sunucu:** `http://127.0.0.1:8766/taste/<aile>.html`.

**1. Skill lint (`lint.mjs`)** son sürümde beş sayfada da `0 FAIL, 0 WARN`.

**2. Skill inspector (`inspect.mjs`, 1440/768/390, gerçek Chrome)**, son tur:

| Sayfa | FAIL | WARN | Not |
|---|---|---|---|
| urun-sade | 0 | 3 | no-real-pictures, no-footage, size-count (768/390'da 10 boyut) |
| teknik-sistem | 0 | 4 | size-count (10), no-real-pictures, no-footage, font-not-dealt (Archivo) |
| sakin-sinematik | **1** | 1 | **few-pictures**, no-footage |
| kagit-baski | **1** | 3 | **few-pictures**, size-count (10), no-footage, lopsided @768 (rapor metni) |
| isikli-gelecek | **1** | 2 | **few-pictures**, size-count (10), no-footage |

Kalan FAIL'ların tümü `few-pictures`: skill sayfa başına en az dört gerçek resim (fotoğraf/arşiv/video) ister; brif gerçek fotoğrafı ve dış indirmeyi yasaklıyor. SVG ve canvas çizimleri sayılmıyor. Ölçeri kandırmak için çizimleri `<img>`e çevirmedim. Bu, brif ile skill arasındaki bilinen bir çelişki; skill'in kendi ölçüsüne göre bu üç sayfa **"bitmedi"** sayılır (critique tavanı: tasarım ≤ 6,5).
İlk turda yakalanıp düzeltilenler: başlık 3–4 satır (teknik h1 768/390'da, iki sayfada kapanış başlığı), boş şeritler (urun-sade), ince çizgiler (urun-sade, `[data-ui]` kapsamına alındı), göz kaşı algısı (kagit maşthead etiketi, teknik telefon sırası), ekran kenarına yapışık metin (sakin, kagit), ilk ekranda görünmeyen düğme ve uzun açıklama paragrafı (teknik), krem uyarıları.

**3. Playwright (py -3.11, `dogrula.py`)**, son tur, beş sayfa:
- Yatay taşma: `scrollWidth` 1440'ta 1440, 390'da 390; taşan öğe yok (beş sayfada).
- Konsol hatası/uyarısı ve sayfa hatası: yok (masa, tel, kapak bağlamlarında).
- `prefers-reduced-motion: reduce`: sayfa baştan sona kaydırıldıktan sonra opaklığı < 0,95 veya `visibility:hidden` olan görünür metin: **0** (beş sayfada).
- Form: e-posta doldurulup "Listeye katıl"a basıldı → yerel onay metni görünür ("Teşekkürler, bu bir demo; bilgin hiçbir yere gönderilmedi."), gönderim sonrası **ağ isteği 0**, adres değişmedi.
- Ekran görüntüleri: `ekran/taste-<aile>-masa.png` (1440 tam sayfa), `-tel.png` (390 tam sayfa), `-kapak.png` (1440×900 ilk ekran).

**4. Canlı şey testi (`canli-test.py`):** urun katman düğmesi işareti gizledi, adım kaydırıcısı "Düzelt / Neden eşleşti" durumuna geçti; teknik ölçer +0,1 mm'de "Tolerans içinde" dedi; sakin sis opaklığı 0,88'e çıktı; kagit kesim %60 oldu; isikli seçim üçüncü bulguya geçti.

**5. Görsel inceleme:** ekran görüntüleri `vision_analyze` ile açıldı, iki düzeltme turu yapıldı. Ana düzeltmeler: urun "Üç girdi" fotoğraf kırpımı bozuktu, erişim alanında boşluk vardı, telefonda etiket örtüşmesi; sakin sahnesi blok/UI kartı gibi okunuyordu (uzak kalıp sırası ve zemin basamaklarıyla yeniden çizildi, metinle çakışan kalıp yarıları aşağı alındı); isikli vazo tabanı açıklama metnine değiyordu (konum/ölçek); teknik telefonda "Çek" harfinin çengeli alttaki satıra değiyordu.

### Kısa critique (skill biçimi, son tur, kendi puanım; ölçeğe göre iyimser olabilir)
- urun-sade: ilk bakışta muayene ekranındaki vazo. Tasarım 7 · kullanılabilirlik 8 · yaratıcılık 6,5 · içerik 7 → ~7,2. Fikir rakip bir QC aracına da uyabilir (yaratıcılık ≤7 tavanı).
- teknik-sistem: dev yoğun başlık + numune plakası. 7,5 · 7,5 · 7 · 7 → ~7,3.
- sakin-sinematik: açılmış kalıp vadisi ve minik vazo. FAIL tavanı ≤6,0; ölçüsüz değerlendirme ~6,8. Bölümler ince, telefonda kalıp yarıları kırpılıyor.
- kagit-baski: iki renkli yarım ton maşthead. FAIL tavanı ≤6,0; ölçüsüz ~7,0. Üç girdi'deki küçük yarım ton simgeler okunaksız.
- isikli-gelecek: ışık noktalarından dönen vazo. FAIL tavanı ≤6,0; ölçüsüz ~7,0. Kabarcık kümesi biraz leke gibi.

## Bilinen eksikler

- **Gerçek resim yok** (brif gereği). Skill'in "en az dört gerçek resim + bir video" tabanı karşılanmadı; üç sayfada inspector FAIL'ı duruyor. Tüm görseller kodla çizildi ve her görsel alanında "Görsel alanı · 2. aşamada üretilecek" yer tutucusu var. 2. aşamada fotoğraf gelince bu FAIL kalkabilir.
- `size-count` uyarısı (9–10 yazı boyutu): arayüz parçalarının kendi boyutları sayıma giriyor; tamamen beşe indirilmedi.
- teknik-sistem'de dağıtılan General Sans yerine Archivo (Google Fonts sınırı).
- Kaydırma sahneleri (`scenes.mjs`) kurulmadı; hareket katmanı CSS + IntersectionObserver ile sınırlı. Inspector "still-page" bulgusu vermedi.
- JS kapalıyken davranış ölçülmedi. Hareket gizlemeleri `html.js` sınıfına bağlı; JS kapalıyken metin görünür olmalı ama test edilmedi. JS kapalıyken form gönderimi sayfayı GET ile yeniler (yerel kalır, ama ağ isteği olur).
- `inspect.mjs` 768 px çıktıları üretildi ama ben yalnız 1440 ve 390 görüntülerine baktım; tablet ekranlarını gözle incelemedim.
- `references/type.md`, `research.md`, `scenes.md`, `app-screens.md` okunmadı; urun-sade'deki ürün parçaları `draw.mjs --app` ile ayrı dağıtılmadı.
- kagit-baski'de 768 px'te `lopsided` uyarısı (rapor metni dar kalıyor) çözülmedi.