Ücretsiz: günde 3 paket, ücretsiz hesapla 10

Her siteyi yapay zekanın kurabileceği tasarım paketine çevirin

Bir URL yapıştırın. Stylepack sayfayı render edildiği haliyle (renkler, tipografi, boşluklar, köşe yarıçapları, gölgeler, bileşenler) ve nasıl davrandığını ölçer: hover ve focus, menüler ve tooltip’ler, diğer tema ve dört ekran genişliği. Tek bir zip içinde DESIGN.md, BEHAVIOR.md, token’lar, bir Tailwind teması, bir SKILL.md ve ekran görüntüleri alırsınız.

Ölçülür, tahmin edilmez

Her değer canlı sayfadan gelir ve ekranda gerçekte ne kadar yer kapladığına göre ağırlıklandırılır. Ekran görüntüsünden tahmin yok, hex kodu uyduran model yok.

Yalnızca renkler değil, davranış

Hover ve focus durumları, tooltip konumu ve solma süresi, menüler, kaydırmayla beliren öğeler, sabit (sticky) arayüz katmanları, tablolar, formlar, metin sarma, koyu mod ve her kırılma noktası.

Ajanlara hazır formatlar

Google’ın DESIGN.md formatı, bir SKILL.md, W3C token’ları, CSS değişkenleri ve bir Tailwind v4 teması. Klasörü projenize atın, ajanınıza gösterin.

Herhangi bir web sitesinden tasarım sistemi çıkarın

  1. Bir URL yapıştırın

    stripe.com gibi herkese açık herhangi bir site. docs.stripe.com gibi alt alan adları ayrı bir site sayılır.

  2. Sayfayı ölçtürün

    Sayfa gerçek bir tarayıcıda, dört ekran genişliğinde ve iki temada açılır. Bir dakikadan kısa sürede paket hazır olur.

  3. Yapay zekanıza verin

    Zip dosyasını indirin, klasörü projenize koyun ve ajanınızdan kod yazmadan önce DESIGN.md ile BEHAVIOR.md dosyalarını okumasını isteyin.

Paketin içindekiler

Tek klasör, her yapay zeka kodlama ajanına ya da sohbet uygulamasına hazır.

DESIGN.md
Google’ın DESIGN.md formatında tasarım sistemi: renkler, tipografi, boşluklar, köşe yarıçapları, gölgeler ve bileşenler.
BEHAVIOR.md
Hover, focus, tooltip, menü, animasyon, kaydırma, tablo, form, metin sarma, responsive kurallar ve koyu mod.
SKILL.md
Claude Code ve Cursor için, ajana paketi doğru sırayla gezdiren bir skill.
tokens.json
Style Dictionary ve Figma token eklentileri için W3C tasarım token’ları (DTCG).
tokens.css
Tüm değerler CSS değişkenleri olarak.
tailwind.css
Aynı değerler bir Tailwind v4 @theme bloğu olarak.
screenshots/
Sitenin 1440, 1024, 768 ve 390 piksel genişlikteki görüntüleri, varsa diğer tema da.
README.md, PROMPT.md
Paketi her yapay zeka aracına nasıl vereceğiniz ve yapıştıracağınız prompt.

Zaten kullandığınız yapay zeka araçlarıyla çalışır

Her biri için adım adım rehber:

Örnek tasarım paketleri

Tüm galeriyi gör
linear.app ana sayfası
Inter Variable + Berkeley Mono
SaaS ve verimlilikKoyu + açık
resend.com ana sayfası
domaine + aBCFavorit
Geliştirici araçlarıKoyu + açık
supabase.com ana sayfası
Manrope + Inter
Geliştirici araçlarıAçık + koyu
figma.com ana sayfası
figmaSans + figmaMono
Tasarım araçlarıAçık
framer.com ana sayfası
GT Walsheim Medium + Inter Variable
Tasarım araçlarıKoyu
apple.com ana sayfası
SF Pro Text + SF Pro Display
Tüketici teknolojisiKoyu + açık
arc.net ana sayfası
Marlin Soft SQ + -apple-system
Tüketici teknolojisiAçık

Sorular

Stylepack nedir?

Stylepack (stylepack.ai), herkese açık herhangi bir web sitesini yapay zeka kodlama ajanları için bir tasarım paketine çeviren ücretsiz bir web aracıdır: DESIGN.md, BEHAVIOR.md, SKILL.md, tasarım token’ları, bir Tailwind teması ve ekran görüntüleri, tek bir zip içinde.

Bir web sitesinin tasarımını Cursor ya da Claude Code içinde nasıl kullanırım?

Sitenin adresini Stylepack içine yapıştırın ve paketi indirin. Klasörü projenize koyun, sonra ajandan bir şey kurmadan önce DESIGN.md ile BEHAVIOR.md dosyalarını okumasını ve ekran görüntülerine bakmasını isteyin. Her paket sayfasında tam adımlar ve kopyalanacak bir prompt bulunur.

DESIGN.md nedir?

DESIGN.md, bir görsel kimliği kodlama ajanlarına tek bir Markdown dosyasında anlatmak için Google’ın açık formatıdır: renkler, tipografi, boşluklar, köşe yarıçapları, gölgeler ve bileşenler. Stylepack, herkese açık herhangi bir web sitesi için bir tane yazar.

Bir web sitesinden tasarım token’ları nasıl çıkarılır?

Adresini Stylepack içine yapıştırın. Paket, W3C tasarım token’ları formatında (DTCG) tokens.json dosyasını, aynı değerlerin CSS değişkenleri olarak tokens.css içindeki halini ve tailwind.css içinde bir Tailwind v4 temasını içerir.

BEHAVIOR.md neleri kapsıyor?

Sitenin yalnızca nasıl göründüğünü değil, nasıl davrandığını: hover ve focus durumları, tooltip’ler, menüler, animasyon, kaydırma, tablolar, formlar, metin sarma, 1440, 1024, 768 ve 390 piksel genişlikte yerleşim ve koyu mod.

Ücretsiz mi?

Evet. Hesapsız günde 3, ücretsiz hesapla günde 10 paket alırsınız. Galeride zaten bulunan paketler sayılmaz.

Hangi yapay zeka araçlarıyla çalışır?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable ve Bolt ya da Markdown ve CSS okuyan başka herhangi bir araç.

Stylepack, galerideki sitelerle bağlantılı mı?

Hayır. Bir paket, bir sitenin herkese açık tasarımını referans olarak tanımlar. Logolar, fontlar, görseller ve metinler sahiplerine aittir; font lisanslarını kontrol etmek size düşer.