Marka diline uyan, sayfaları birbirini tutan bir web sitesi kuran sistem

Sistem nasıl bağlanıyor

Marka bilgisi ve izinli örnekler → DESIGN.md → CLAUDE.md'den içe alma → tek tasarım becerisi → projeyle uyumlu bileşenler → iki sayfa üretimi → tarayıcıda ve 390 piksel genişlikte kontrol.

• 
  Claude Code gerekli

  DESIGN.md'yi yazar, okur ve sayfaları üretir

  Araç rehberi

• 
  DESIGN.md biçimi gerekli

  Marka kurallarını ajanın okuyacağı tek dosyada tutar

  Araç rehberi

• 
  Frontend Design eklentisi (Anthropic) gerekli

  Tek ana tasarım becerisi: estetik yön, yazı tipi ve renk seçimlerini yönlendirir

  Alternatif: Projende zaten başka bir tasarım becerisi kurulu ve iyi çalışıyorsa onu tek ana beceri olarak tut; ikisini birlikte zorunlu yapma

  Araç rehberi

• 
  shadcn/ui bileşen komutu isteğe bağlı

  Düğme, form gibi hazır bileşenleri projene ekler

  Alternatif: Yalnız projende olmayan bir bileşene gerçekten ihtiyaç duyarsan; mevcut bileşenler yetiyorsa hiç kurma

  Tasarım kaynaklarında

• 
  Playwright CLI gerekli

  Sayfayı tarayıcıda açıp telefon genişliğinde ekran görüntüsü alır

  Araç rehberi

• 
  Awesome DESIGN.md isteğe bağlı

  Başka sitelerin tasarım dilinden ilham almak için okunur; markana kopyalanmaz

  Alternatif: Elinde kendi marka rehberi ya da logo/renk dosyaların varsa buna gerek yok

  Tasarım kaynaklarında

• 
  Refero Styles isteğe bağlı

  Ücretli planda canlı tasarım araştırması

  Alternatif: Hazırladığın referans listesi yetmiyorsa ve ücretli plan almak istiyorsan

  Tasarım kaynaklarında

Başlamadan önce

Adım adım kurulum

İşaretlediğin adımlar yalnız bu tarayıcıda kalır; kurulumun çalıştığını doğrulamaz. 0/9 adımı bitirdin.

1. 1. adım · Terminalde

   Çalışacağın projeyi hazırla

   Bu adımı bitirdim

   Ne için: Sayfaların yazılacağı, çalıştırılabilir bir proje klasörün olsun.

   1. Zaten bir React projen varsa terminali o klasörde aç ve bu adımın komutunu atla; yükseltme yapma. Bileşen adımı (shadcn) TypeScript projesi varsayar; projen JavaScript ise o adımı atla.
   2. Yeni başlıyorsan Node.js sürümünü kontrol et, sonra aşağıdaki komutla React + TypeScript şablonunu oluştur. --no-immediate verildiği için 'bağımlılıkları kur ve başlat' sorusu gelmez; kurup başlatmayı sonraki maddede elle yapılır.
   3. Terminal etkileşimliyse 'Which linter to use?' (Oxlint / ESLint) sorusu gelebilir. Emin değilsen ilk seçenek olan Oxlint'i bırakıp Enter'a bas. Soru sormasın istersen komuta --no-interactive de ekleyebilirsin.
   4. Proje klasörüne gir, paketleri kur (npm install) ve npm run dev ile geliştirme sunucusunu başlat. Sunucunun yazdığı adres tarayıcıda açılmalı.
   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › node --versionKopyala

   Windows · macOS · LinuxKlasör: Projeyi koymak istediğin üst klasör

   › npm create vite@9.2.1 marka-sitesi -- --template react-ts --no-immediateKopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Windows · macOS · LinuxKlasör: marka-sitesi

   › npm run devKopyala

   Doğru yaptığını şuradan anlarsın

   • Terminal bir yerel adres yazar ve o adres tarayıcıda şablon sayfasını açar.
   Takılırsan: bu adıma özgü sorunlar

   • Komut Node.js sürümünden şikâyet ediyor
     Vite, Node.js 20.19 ve üzeri ya da 22.12 ve üzeri ister; sürümünü yükselt ve komutu yeniden çalıştır.
   • Proje açıldı ama tarayıcıda boş sayfa görünüyor
     Geliştirme sunucusunun terminalde hâlâ çalıştığından ve tarayıcıya terminalin yazdığı adresi girdiğinden emin ol.
   Dayanak: Vite belgesi: ilk adımlar ve Node.js şartı, npm kaydı: create-vite (güncel sürüm 9.2.1), vitejs/vite: create-vite kaynak kodu (seçenekler: --template, --immediate, --interactive), shadcn/ui belgesi: Vite kurulumuBu adımda yardım al →
2. 2. adım · Kod editöründe

   Marka bilgini ve izinli örnekleri bir araya getir

   Bu adımı bitirdim

   Ne için: DESIGN.md'nin ham maddesi hazır olsun; neye benzemesi gerektiği ve neye benzememesi gerektiği yazılı olsun.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Bir not dosyasına markanın adını, kime hitap ettiğini, 2-3 sıfatla tonunu, logo ve renk kodlarını, kullandığın yazı tiplerini ve sitenin amacını yaz. Elinde marka rehberi varsa onu da ekle.
   2. Örnek olarak yalnız kendi sitelerinin ekran görüntülerini, sana kullanım izni verilmiş görselleri ya da beğendiğin tasarım dilini anlatan kendi cümlelerini kullan.
   3. İsteğe bağlı: Awesome DESIGN.md deposundaki bir dosyayı ilham olarak oku. Deponun README'sinde kullanım koşulları bağlantısı yok; koşullar getdesign.md/terms sayfasındadır, önce onu oku. Dosyalar başka şirketlerin sitelerinden çıkarılmış analizlerdir: logo, marka adı ve görselleri ürününe kopyalama ve başka bir markayla karışıklık yaratacak bir ürün yapma (Terms bunu yasaklar).
   4. Rakip sitenin kodunu ya da görsellerini indirip kopyalama. Rehber bu yolu anlatmaz.

   Doğru yaptığını şuradan anlarsın

   • Elinde marka adı, ton, renk, yazı tipi, amaç ve izinli örnek listesini içeren tek bir not dosyası olur.
   Takılırsan: bu adıma özgü sorunlar

   • Markanın yazılı bir rehberi yok
     Mevcut logodan ve sitenden renk ile yazı tipini sen seç ve nedenini bir cümleyle yaz; DESIGN.md'nin metin kısmı bu gerekçeler için vardır.
   Dayanak: VoltAgent/awesome-design-md: README ve lisans notu, getdesign.md Terms (dizindeki DESIGN.md dosyalarının kullanımı)Bu adımda yardım al →
3. 3. adım · Kod ajanında

   DESIGN.md dosyasını yaz ve kontrol et

   Bu adımı bitirdim

   Ne için: Tasarım kuralların ajanın her seferinde okuyacağı tek bir dosyada dursun.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Claude Code'u proje klasöründe başlat ve not dosyanı göstererek şunu iste: kök klasörde DESIGN.md oluştur; başta renk, yazı tipi, köşe yuvarlaklığı ve boşluk değerleri olsun; altında şartnamenin İngilizce başlıkları şu sırayla yer alsın: Overview, Colors, Typography, Layout, Components, Do's and Don'ts. Başlıklar İngilizce kalsın, açıklamalar Türkçe olabilir.
   2. Şartnameye göre bölümlerin hepsi isteğe bağlıdır ama yazılanlar bu sırayla olmalıdır. Dosyanın başındaki bölüm (front matter) renk, yazı tipi ve boşluk değerlerini makinenin okuyacağı biçimde taşır; metin kısmı bu değerlerin nedenini anlatır.
   3. Dosyayı oku, markana uymayan yerleri düzelttir. Sonra aşağıdaki komutla biçimini denetle. Komut var olmayan token başvurularını (örn. var olmayan bir renge bağlantı) hata sayar; bileşen (components) tanımlarsan onların metin/zemin renk çiftlerinin kontrastını da uyarı olarak raporlar. Aşağıdaki kısa örnekte components yoktur, yani kontrast denetlenmez.
   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün)

   › npx -p @google/design.md@0.4.0 designmd lint DESIGN.mdKopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   DESIGN.md (kısa biçim örneği) · markdownKopyala

   ---
   name: Heritage
   colors:
     primary: "#1A1C1E"
     secondary: "#6C7278"
     tertiary: "#B8422E"
     neutral: "#F7F5F2"
   typography:
     h1:
       fontFamily: Public Sans
       fontSize: 3rem
     body-md:
       fontFamily: Public Sans
       fontSize: 1rem
   rounded:
     sm: 4px
     md: 8px
   spacing:
     sm: 8px
     md: 16px
   ---
   
   ## Overview
   
   Architectural Minimalism meets Journalistic Gravitas.
   
   ## Colors
   
   The palette is rooted in high-contrast neutrals and a single accent color.
   
   - **Primary (#1A1C1E):** Deep ink for headlines and core text.
   - **Tertiary (#B8422E):** the sole driver for interaction.

   Resmî deponun kısa örneğinden alınmış biçim örneğidir. Renkleri, adı ve yazı tiplerini kendi markana göre değiştir.

   Doğru yaptığını şuradan anlarsın

   • Kök klasörde DESIGN.md vardır.
   • Lint komutu hata (error) bildirmeden biter; uyarı (warning) çıkabilir ve bu normaldir.
   Takılırsan: bu adıma özgü sorunlar

   • Lint komutu hata bildirip 1 koduyla çıkıyor
     Çıktıdaki path ve message alanları hangi değerin bozuk olduğunu söyler; genellikle var olmayan bir renge verilen bağlantıdır. Düzelttirip komutu yeniden çalıştır.
   • Şartname 'alpha' sürümünde, alan adları değişmiş olabilir
     Komuttaki sürümü sabit tut; yeni sürüme geçmeden önce depodaki şartnameyi oku.
   • Windows PowerShell'de lint komutu çıktı vermiyor ya da DESIGN.md bir Markdown düzenleyicide açılıyor
     README, paketin bin adındaki .md uzantısının Windows dosya ilişkisiyle çakıştığını söyler ve noktasız designmd takma adını önerir. Bu yüzden komut npx -p ... designmd lint biçiminde yazıldı; doğrudan npx @google/design.md ... biçimini kullanma.
   Dayanak: google-labs-code/design.md: depo ve README (biçim, lint komutu, lisans), DESIGN.md şartnamesi (docs/spec.md, sürüm: alpha), npm kaydı: @google/design.md (güncel sürüm 0.4.0)Bu adımda yardım al →
4. 4. adım · Kod editöründe

   DESIGN.md'yi Claude Code'a tanıt

   Bu adımı bitirdim

   Ne için: Ajan her oturumda tasarım kurallarını kendiliğinden okusun.

   1. Proje kökünde CLAUDE.md dosyası yoksa oluştur; belgeye göre proje talimatı kökteki CLAUDE.md ya da .claude/CLAUDE.md dosyasında durur.
   2. Dosyaya aşağıdaki örnekteki gibi @DESIGN.md satırını ekle. Belgeye göre @ ile yazılan dosya oturum başında bağlama yüklenir; bu yüzden DESIGN.md'yi kısa ve gerekli tut.
   3. Claude Code'u kapatıp yeniden başlat ve ona 'tasarım kuralları hangi dosyada, bana özetle' diye sor.
   CLAUDE.md · markdownKopyala

   # Proje talimatları
   
   Tasarım kuralları için bu dosyaya uy:
   @DESIGN.md
   
   Yeni sayfalarda DESIGN.md dışında renk, yazı tipi ya da boşluk değeri uydurma.

   @yol/dosya sözdizimi belgedeki içe alma bölümünden gelir; ikinci cümle DijiKoçum'un önerisidir.

   Doğru yaptığını şuradan anlarsın

   • Claude Code, tasarım kurallarını DESIGN.md içeriğinden özetler.
   Takılırsan: bu adıma özgü sorunlar

   • Claude Code DESIGN.md'den habersiz davranıyor
     Satırın backtick içinde yazılmadığından emin ol; kod bloğu ya da backtick içindeki @yol içe alınmaz. Oturumu kapatıp yeniden aç.
   Dayanak: Claude Code belgesi: CLAUDE.md ve @ ile dosya içe alma
5. 5. adım · Kod ajanında

   Tek bir ana tasarım becerisi kur

   Bu adımı bitirdim

   Ne için: Ajan estetik kararlarda genel, kalıp görünümlere düşmesin; ama birbirinin işini tekrarlayan çok sayıda beceri de yüklenmesin.

   1. Bu rehberin önerdiği tek beceri Anthropic'in Frontend Design eklentisidir. Claude Code oturumunun içinde aşağıdaki komutu yaz; kurulum ekranı eklentinin ne eklediğini gösterir, oku ve kapsamı (yalnız bu proje ya da tüm projelerin) seç.
   2. Projende zaten başka bir tasarım becerisi kurulu ve işini görüyorsa onu tut; ikinci bir tasarım becerisi ekleme. Aynı işi yapan becerileri birlikte yüklemek talimatları birbirine karıştırabilir.
   3. Dürüst not: bu eklenti sürüme sabitlenerek kurulamaz. Pazar yeri kaydında sürüm ya da commit sabitlemesi yok ve belgeye göre resmî pazar yerindeki eklentiler varsayılan olarak kendiliğinden güncellenir; eklentinin davranışı zamanla değişebilir. Bu yüzden tasarım kurallarını eklentiden bağımsız, kendi DESIGN.md dosyanda tut.
   4. Eklenti kurulunca yazım kutusuna / yazıp listede frontend-design adını gör.
   Windows · macOS · LinuxKlasör: Claude Code oturumu (proje klasöründe açık)

   › /plugin install frontend-design@claude-plugins-officialKopyala

   Doğru yaptığını şuradan anlarsın

   • Kurulum özeti 'Plugin is now active' ya da yeniden yükleme istediğini söyler.
   • / yazınca eklentinin becerisi listede görünür.
   Takılırsan: bu adıma özgü sorunlar

   • Kurulumdan sonra beceri listede görünmüyor
     Kurulum özetinin son cümlesi eklentinin hemen etkin olup olmadığını söyler; gerekiyorsa /reload-plugins komutunu çalıştır.
   • Eklenti pazar yerini bulamıyor
     Belgeye göre resmî pazar yeri etkileşimli ilk oturumda otomatik eklenir; terminalden kuruyorsan önce 'claude plugin marketplace add anthropics/claude-plugins-official' komutu gerekebilir.
   • Eklenti güncellendi ve ajan farklı davranıyor
     Resmî pazar yerinde otomatik güncelleme belgeye göre varsayılan olarak açıktır. Kurallarını DESIGN.md içinde tut; gerekirse /plugin ekranından eklentiyi kapat.
   Dayanak: Claude Code belgesi: eklenti kurma, anthropics/claude-plugins-official: marketplace.json (frontend-design kaydı), anthropics/claude-code: frontend-design eklentisi READMEBu adımda yardım al →
6. 6. adım · Terminalde

   Gerekirse projene uygun hazır bileşen ekle

   Bu adımı bitirdim

   Ne için: Projede olmayan düğme, form gibi bir parçayı sıfırdan yazdırmak yerine hazır bileşenle ekle.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Önce ajana projedeki mevcut bileşenleri listeletip ihtiyacın olan parçanın zaten var olup olmadığına baktır. Varsa bu adımı atla. Projen TypeScript değilse de atla: shadcn'ın Vite belgesi React + TypeScript şablonunu varsayar.
   2. Belgedeki mevcut proje sırası: Tailwind CSS kur, src/index.css içeriğini değiştir, tsconfig dosyalarına @ yol takma adını ekle, vite.config.ts dosyasını güncelle, sonra shadcn init ve add komutlarını çalıştır. Belge @types/node kurmayı da sayar; yeni projede create-vite şablonu onu zaten getirir, o komutu atla.
   3. Önemli: şablonun kök tsconfig.json dosyasında compilerOptions bölümü yoktur (yalnız files ve references vardır); bölümü sen eklemelisin. Belge baseUrl satırını da yazar, ama TypeScript 6.0 baseUrl'yi kullanımdan kaldırdı ve şablon TypeScript ~6.0.2 kurar; bu yüzden aşağıdaki örneklerde yalnız paths var.
   4. Aşağıdaki komutları ve dosya düzenlemelerini sırayla yap; kendi dosyandaki mevcut ayarları silme, yalnız eksik olanları ekle.
   5. Alternatif: belgede sıfırdan başlamak için npx shadcn@latest init -t vite biçimi de yazılıdır (yeni Vite projesi oluşturur); bu rehber ana yol olarak yukarıdaki sırayı izler.
   6. init sorular sorar; neyi seçtiğini anlamıyorsan dur ve destek iste.
   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün)

   › npm install tailwindcss@4.3.3 @tailwindcss/vite@4.3.3Kopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün)

   › npx shadcn@4.22.0 initKopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün)

   › npx shadcn@4.22.0 add buttonKopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   src/index.css · cssKopyala

   @import "tailwindcss";

   Belgeye göre dosyanın tüm içeriği bu satırla değiştirilir; mevcut stillerin varsa önce yedekle.

   tsconfig.json (kök; compilerOptions bölümünü ekle) · jsonKopyala

   {
     "files": [],
     "references": [
       { "path": "./tsconfig.app.json" },
       { "path": "./tsconfig.node.json" }
     ],
     "compilerOptions": {
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

   Şablonun kök tsconfig.json dosyasında compilerOptions yoktur; yalnız files ve references vardır. paths alanı shadcn Vite belgesinden alındı, baseUrl satırı TypeScript 6.0 nedeniyle bırakıldı. init yol takma adı hatası verirse baseUrl: "." ile birlikte "ignoreDeprecations": "6.0" eklemek TypeScript duyurusundaki geçici yoldur.

   tsconfig.app.json (mevcut compilerOptions içine eklenecek kısım) · jsonKopyala

   "paths": {
     "@/*": ["./src/*"]
   }

   Belge aynı alanı tsconfig.app.json dosyasına da ekletir (belgedeki baseUrl satırı TypeScript 6.0 nedeniyle çıkarıldı). Bu dosyada compilerOptions zaten vardır; mevcut ayarları koru.

   vite.config.ts · typescriptKopyala

   import path from "path"
   import tailwindcss from "@tailwindcss/vite"
   import react from "@vitejs/plugin-react"
   import { defineConfig } from "vite"
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
   })

   Belgedeki örnektir; şablonunda başka eklenti ayarları varsa onları koru.

   Doğru yaptığını şuradan anlarsın

   • src/index.css Tailwind satırını içerir, components.json oluşur ve eklenen bileşenin dosyası projede görünür.
   Takılırsan: bu adıma özgü sorunlar

   • init yol takma adı (@) ya da Tailwind bulunamadı diyor
     Yukarıdaki Tailwind, index.css, tsconfig ve vite.config adımlarından birini atlamış olabilirsin; sırayla kontrol edip init'i yeniden çalıştır.
   • Projem JavaScript, tsconfig dosyası yok
     Belgede JavaScript ya da jsconfig için bir anlatım yok. Bu adımı atla; bileşenleri ajanın projenin mevcut yapısına göre yazmasını iste ya da destek al.
   • Vite sayfasındaki örnekler pnpm dlx ile görünüyor
     Belgenin kaynağında ve CLI sayfasında npx shadcn@latest biçimi de yazılıdır; bu rehber aynı komutu npx ile ve sürümü sabitleyerek verir.
   • tsc ya da editör baseUrl ile ilgili bir kullanımdan kaldırma uyarısı veriyor
     baseUrl satırını kaldır ve yalnız paths bırak; TypeScript duyurusuna göre paths baseUrl olmadan çalışır. Satırı tutmak zorundaysan yanına "ignoreDeprecations": "6.0" ekle.
   Dayanak: shadcn/ui belgesi: Vite kurulumu, shadcn-ui/ui: Vite kurulum belgesinin kaynağı (npx komutları ve adımlar), shadcn/ui belgesi: CLI (init, add, info), npm kaydı: shadcn (güncel sürüm 4.22.0), npm kaydı: tailwindcss ve @tailwindcss/vite (4.3.3), TypeScript 6.0 duyurusu: kullanımdan kaldırılan baseUrl, vitejs/vite: create-vite@9.2.1 react-ts şablonu (package.json, tsconfig.json)Bu adımda yardım al →
7. 7. adım · Terminalde

   DESIGN.md renklerini ve yazı tiplerini temaya aktar

   Bu adımı bitirdim

   Ne için: Bileşenler shadcn varsayılan temasıyla değil, kendi marka değerlerinle çıksın.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Sınır: shadcn belgesi DESIGN.md okumaz; init'in src/index.css içine hangi tema değişkenlerini yazdığını belge ayrıntılı anlatmıyor. Yani marka değerleri kendiliğinden gelmez, bu adımı sen yaptırırsın.
   2. DESIGN.md aracının README'sinde Tailwind v4 için css-tailwind dışa aktarımı yazılıdır. Aşağıdaki komut DESIGN.md değerlerini @theme bloğu olarak terminale yazar. Çıktı beklediğin gibi değilse destek iste.
   3. Çıktıyı Claude Code'a göster ve şunu iste: bu @theme bloğunu src/index.css dosyasına ekle, shadcn'ın tanımladığı renk ve köşe yuvarlaklığı değişkenlerini bu değerlere bağla, mevcut ayarları silme.
   4. Sonra tarayıcıda bir düğme aç: markanın birincil renginde mi, DESIGN.md'deki köşe yuvarlaklığını taşıyor mu bak.
   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün)

   › npx -p @google/design.md@0.4.0 designmd export --format css-tailwind DESIGN.mdKopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Doğru yaptığını şuradan anlarsın

   • Terminal --color-* gibi CSS değişkenleri içeren bir @theme bloğu yazar.
   • src/index.css bu değerleri taşır ve bir düğme markanın birincil renginde görünür.
   Takılırsan: bu adıma özgü sorunlar

   • Düğme hâlâ gri ya da varsayılan renkte
     shadcn değişkenleri ile @theme değerleri ayrı olabilir; ajana düğmenin hangi değişkeni kullandığını bulup DESIGN.md değerine bağlatmasını söyle.
   • Windows PowerShell'de komut çıktı vermiyor
     README doğrudan design.md biçiminin çıktı vermeyebileceğini söyler; bu yüzden komut -p ... designmd biçiminde yazıldı. Aynı biçimi koru.
   Dayanak: google-labs-code/design.md: depo ve README (biçim, lint komutu, lisans), shadcn-ui/ui: Vite kurulum belgesinin kaynağı (npx komutları ve adımlar)Bu adımda yardım al →
8. 8. adım · Kod ajanında

   İki farklı sayfayı aynı kurallarla ürettir

   Bu adımı bitirdim

   Ne için: Tutarlılığın gerçekten çalıştığını iki farklı sayfada gör.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Claude Code'a şunu yaz: DESIGN.md kurallarına uyarak ana sayfayı ve bir hizmet sayfasını oluştur; mevcut bileşenleri kullan, kural dışı renk ya da yazı tipi ekleme; iki sayfada üst menü, düğmeler ve başlıklar aynı görünsün.
   2. Üretim bitince değişen dosyaların listesini iste ve DESIGN.md dışında uydurulmuş bir renk ya da yazı tipi olup olmadığını sor.
   3. Sayfaları tarayıcıda yan yana aç: başlık boyutları, düğmeler, boşluklar ve renkler iki sayfada aynı mı, bağlantılar çalışıyor mu, form alanları görünüyor mu bak.

   Doğru yaptığını şuradan anlarsın

   • İki sayfa aynı üst menü, düğme ve başlık stilini taşır.
   • Menü bağlantıları iki sayfa arasında gidip gelir.
   Takılırsan: bu adıma özgü sorunlar

   • İki sayfanın renkleri ya da düğmeleri birbirinden farklı çıkıyor
     Farkı gösteren ekran görüntüsünü ajana ver ve farkı DESIGN.md'ye göre düzelttir; kuralda eksik bir şey varsa önce DESIGN.md'ye ekle.
   Dayanak: Claude Code belgesi: CLAUDE.md ve @ ile dosya içe alma, Claude Code belgesi: hızlı başlangıç ve hesap türleriBu adımda yardım al →
9. 9. adım · Terminalde

   Tarayıcıda ve 390 piksel genişlikte kontrol et

   Bu adımı bitirdim

   Ne için: Telefon genişliğinde taşma, kırık yerleşim ya da okunmayan yazı kalmasın.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Ön koşul: bilgisayarında Google Chrome kurulu olmalı. Geliştirme sunucusu çalışırken Playwright CLI'ı kur, aşağıdaki komutlarla sayfayı Chrome ile aç, pencereyi 390 piksel genişliğe getir ve ekran görüntüsü al. Belgeye göre araç varsayılan olarak ekransızdır (headless); pencereyi görmek istersen open komutuna --headed ekle.
   2. Üç playwright-cli komutunu (open, resize, screenshot) da aynı klasörden, yani marka-sitesi içinden çalıştır. README oturumları çalışma klasörüne göre grupladığı için farklı klasörlerden verilen komutlar aynı oturuma ulaşmayabilir; README bunu açıkça söylemez, bu bir tedbirdir.
   3. Komutları art arda çalıştır: README, ekransız oturumun komutsuz kalınca kendiliğinden kapandığını ve open komutuyla yeniden başlatılması gerektiğini söyler.
   4. Kaydedilen görüntüyü aç ve dosya özelliklerinden genişliğin 390 piksel olduğunu kontrol et. Farklıysa README'deki open --mobile ya da open --device="iPhone 15" seçeneklerini dene.
   5. Görüntüde metin kenardan taşıyor mu, düğmeler parmakla basılacak büyüklükte mi, görseller ekran dışına çıkıyor mu bak. Sorun varsa görüntüyü ajana ver ve düzelttir; her düzeltmeden sonra aynı komutla yeni görüntü al.
   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › npm install -g @playwright/cli@0.1.22Kopyala

   Sürüm sabit (17 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün); üç komut da aynı klasörde

   › playwright-cli open http://localhost:5173 --browser=chromeKopyala

   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün); üç komut da aynı klasörde

   › playwright-cli resize 390 844Kopyala

   Windows · macOS · LinuxKlasör: marka-sitesi (ya da kendi proje klasörün); üç komut da aynı klasörde

   › playwright-cli screenshot --filename=mobil-ana-sayfa.pngKopyala

   Doğru yaptığını şuradan anlarsın

   • Komutları çalıştırdığın klasörde mobil-ana-sayfa.png dosyası oluşur ve genişliği 390 pikseldir.
   • Görüntüde metin ve düğmeler ekran genişliği içinde kalır.
   Takılırsan: bu adıma özgü sorunlar

   • open komutundaki adres açılmıyor
     Vite'in terminale yazdığı adresi kullan; 5173 örnektir, sunucun başka bir port seçmiş olabilir.
   • Tarayıcı açılmıyor ya da bulunamadı hatası var
     README bu hatayı ve tarayıcı indirme adımını anlatmıyor. Bilgisayarında Chrome kurulu olduğundan emin ol ve open komutunda --browser=chrome seçeneğini kullan.
   • screenshot komutu oturum bulunamadı gibi bir hata veriyor
     Ekransız oturum belge uyarınca boşta kalınca kapanır; open komutunu yeniden çalıştır, ardından resize ve screenshot komutlarını art arda ver.
   • Yatay kaydırma çubuğu çıkıyor
     Ekran görüntüsüyle birlikte hangi öğenin ekranı taştığını ajana sor; genellikle sabit genişlikli bir görsel ya da tablodur.
   Dayanak: microsoft/playwright-cli: README (open, resize, screenshot), npm kaydı: @playwright/cli (güncel sürüm 0.1.22)Bu adımda yardım al →

Neye para ödenir

Kalemler ayrıdır ve toplam değildir; hangilerinin sana gerektiği kurduğun yola bağlıdır. Fiyatlar değişir, her kalemin kaynağına bak.

• AbonelikClaude Code erişimi

  Belgeye göre Claude Pro, Max, Team ya da Enterprise aboneliği, Claude Console hesabı ya da bir bulut sağlayıcı gerekir. Güncel plan koşulları ve fiyatlar için Anthropic'in fiyat sayfasına bak. kaynak

• AbonelikRefero MCP (isteğe bağlı)

  Ücretsiz planda MCP erişimi yok; MCP için ücretli plan gerekir. Güncel fiyatlar Refero'nun fiyat sayfasındadır. kaynak

• Ücret yokDESIGN.md denetim aracı, shadcn komutu, Playwright CLI, Vite

  Bunlar açık lisanslı yazılımlardır (DESIGN.md deposu Apache-2.0, Awesome DESIGN.md deposu MIT, shadcn ve Vite MIT, Playwright CLI Apache-2.0); kurulum için ayrıca abonelik istemezler. kaynak

• BarındırmaSite yayını ve barındırma

  Bu rehber siteyi yayına almayı kapsamaz; yayın için barındırma ve alan adı ayrı bir maliyet kalemidir. kaynak

• Kurulum hizmetiKurulum desteği

  İstersen marka/tasarım sistemi hazırlığını, bileşen uygulamasını ve site geliştirmeyi bizden alabilirsin; kapsam görüşmeyle belli olur. kaynak

Kaynaklar

• google-labs-code/design.md: depo ve README (biçim, lint komutu, lisans) · Kaynak kod · okundu 17 Ekim 2026
• DESIGN.md şartnamesi (docs/spec.md, sürüm: alpha) · Kaynak kod · okundu 17 Ekim 2026
• npm kaydı: @google/design.md (güncel sürüm 0.4.0) · Üretici sayfası · okundu 17 Ekim 2026
• getdesign.md Terms (dizindeki DESIGN.md dosyalarının kullanımı) · Resmî belge · okundu 17 Ekim 2026
• VoltAgent/awesome-design-md: README ve lisans notu · Kaynak kod · okundu 17 Ekim 2026
• Claude Code belgesi: CLAUDE.md ve @ ile dosya içe alma · Resmî belge · okundu 17 Ekim 2026
• Claude Code belgesi: eklenti kurma · Resmî belge · okundu 17 Ekim 2026
• Claude Code belgesi: hızlı başlangıç ve hesap türleri · Resmî belge · okundu 17 Ekim 2026
• anthropics/claude-plugins-official: marketplace.json (frontend-design kaydı) · Kaynak kod · okundu 17 Ekim 2026
• anthropics/claude-code: frontend-design eklentisi README · Kaynak kod · okundu 17 Ekim 2026
• shadcn/ui belgesi: Vite kurulumu · Resmî belge · okundu 17 Ekim 2026
• shadcn/ui belgesi: CLI (init, add, info) · Resmî belge · okundu 17 Ekim 2026
• npm kaydı: shadcn (güncel sürüm 4.22.0) · Üretici sayfası · okundu 17 Ekim 2026
• Vite belgesi: ilk adımlar ve Node.js şartı · Resmî belge · okundu 17 Ekim 2026
• npm kaydı: create-vite (güncel sürüm 9.2.1) · Üretici sayfası · okundu 17 Ekim 2026
• microsoft/playwright-cli: README (open, resize, screenshot) · Kaynak kod · okundu 17 Ekim 2026
• npm kaydı: @playwright/cli (güncel sürüm 0.1.22) · Üretici sayfası · okundu 17 Ekim 2026
• Refero belgesi: planlar · Yardım merkezi · okundu 17 Ekim 2026
• Refero belgesi: MCP başlangıç · Resmî belge · okundu 17 Ekim 2026
• Refero Terms of Use: Refero içeriğinin kullanımı · Resmî belge · okundu 17 Ekim 2026
• vitejs/vite: create-vite kaynak kodu (seçenekler: --template, --immediate, --interactive) · Kaynak kod · okundu 17 Ekim 2026
• shadcn-ui/ui: Vite kurulum belgesinin kaynağı (npx komutları ve adımlar) · Kaynak kod · okundu 17 Ekim 2026
• npm kaydı: tailwindcss ve @tailwindcss/vite (4.3.3) · Üretici sayfası · okundu 17 Ekim 2026
• Refero belgesi: MCP araçları (Styles) · Resmî belge · okundu 17 Ekim 2026
• TypeScript 6.0 duyurusu: kullanımdan kaldırılan baseUrl · Resmî belge · okundu 17 Ekim 2026
• vitejs/vite: create-vite@9.2.1 react-ts şablonu (package.json, tsconfig.json) · Kaynak kod · okundu 17 Ekim 2026