Rehber

MCP ile kodlama ajanına istediği an tasarım spesifikasyonu ver

Ajanın bir tasarım spesifikasyonunu, dokümantasyonu getirdiği gibi getirebilir. Design Extractor MCP sunucusunu bağla; ajan herkese açık herhangi bir sitenin DESIGN.md dosyasını çıkarabilir, çalıştırmayı bekleyebilir, dosyayı okuyabilir ve ondan geliştirebilir, hepsi tek bir görev içinde.

Dosya kopyalamak yok, tarayıcı sekmesi yok: prompt'ta bir site adı verirsin, spesifikasyon ajanın bağlamına gelir.

ajan ve ajan iş akışları geliştiren geliştiriciler için yazıldı. Güncellenme: .

Ne elde edeceksin

  • Claude Code, Codex, Cursor veya claude.ai üzerinde bağlı, hesabınla ya da bir API anahtarıyla giriş yapmış MCP sunucusu.
  • Bir ajanın izlediği araç akışı: kontrol et, çıkar, bekle, oku.
  • Ajanın çıkarmadan UI'a kadar tüm döngüyü yapmasını sağlayan prompt'lar.
  • Maliyeti ve planlarken dikkate alman gereken sınırlar.

Ajan ne alır

Sunucu https://www.design-extractor.com/api/mcp adresinde çalışır ve streamable HTTP kullanır. Ajan bunun üzerinden herkese açık bir sitenin çıkarmasını başlatabilir, bekleyebilir, tamamlanan DESIGN.md dosyasını okuyabilir, fiyatı ve bakiyeni kontrol edebilir ve daha önce çıkardıklarını listeleyebilir. Her çalıştırma, diğerleri gibi sitedeki Çıkarmalarım sayfasında da görünür.

Dosya, sitenin ürettiğiyle aynıdır: en üstte renkler, tipografi, boşluklar, köşe yarıçapları ve bileşenler için token'lar, altında da bunların kullanım kuralları. Google'ın DESIGN.md spesifikasyonunu izler, böylece ajan onu diğer spesifikasyonlar gibi okuyabilir.

Sunucuyu bağla

İstemcini seç. Claude Code, Codex, claude.ai, Claude Desktop ve ChatGPT hesabınla giriş yapar; Cursor ve betikler bir API anahtarı kullanır.

  1. Sunucuyu bir kez ekle. Anahtar gerekmez.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. /mcp komutunu çalıştır, design-extractor'ı seç ve Authenticate'i seç. Açılan sayfada giriş yap ve onayla.

  3. Bir site iste: “stripe.com'un tasarımını çıkar”.

Claude Code, Codex, claude.ai, Claude Desktop ve ChatGPT hesabınla giriş yapar. Cursor, n8n ve betikler hesap sayfasındaki kişisel bir API anahtarını kullanır.

Claude Code ve Codex için bir eklenti de var. Sunucuyu, ajana bir referans siteyi çıkarma ve DESIGN.md dosyasını kod tabanına uygulama sürecinde yol gösteren bir apply-designmd skill'iyle birlikte paketler. Kurulumdan sonra Claude Code'da /mcp komutunu çalıştır ve eklentinin sunucusunda kimlik doğrulaması yap.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Tüm istemciler, Agent SDK kod parçası ve API anahtarı ayarları MCP sunucusu dokümantasyon sayfasında.

Araçlar ve çağrılma sırası

AraçNe yapar
list_my_extractionsÇıkarmaların, en yeniden eskiye. Zaten sahip olduğun bir site için iki kez ödeme yapılmasın diye önce bunu çağır.
get_pricingBir çıkarmanın güncel kredi maliyeti.
get_creditsKalan kredi bakiyen.
extract_designHerkese açık bir URL'nin çıkarmasını başlatır ve kredileri harcar. Sitenin önemli sayfalarını örneklemek için tier olarak PRO geçir. Çalıştırma kuyruğa alınır alınmaz döner.
get_extractionSitenin adını veya URL'sini alır. Çalıştırma sürerken durumu, sonra DESIGN.md metninin tamamını döndürür. Başarısız bir çalıştırma nedenini söyler.

Bir çalıştırma en az bir dakika sürer, bu yüzden akış önce başlatmak, sonra durumu yoklamaktır. Sunucu bunu ajana kendisi söyler; sen yalnızca siteyi belirtirsin.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

Uygulamalı örnek: Supabase

Diyelim ki ajandan supabase.com tarzında geliştirmesi isteniyor. get_extraction çalıştırmanın tamamlandığını bildirdiğinde DESIGN.md'nin tamamını metin olarak döndürür. Galerideki Supabase DESIGN.md dosyası aynı türden bir Pro çalıştırmasından gelir, bu yüzden ajanın bağlamına neyin geldiğini gösterir. Şöyle başlar:

Galerideki Supabase DESIGN.md dosyasının başı, grup başına birkaç token'a kısaltılmış.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Supabase markasının herkese açık web sitesinden çıkarılmıştır; resmi marka yönergeleri değildir. Supabase DESIGN.md dosyasının tamamını oku

Token'ların altında, ajanın kurallar ve tarifler için okuduğu bölümler gelir: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Yalnızca Components bölümü HTML ve CSS ile 49 tarif içerir; böylece ajan bir butonu veya kartı tahmin etmek yerine ölçülmüş değerlerden yeniden oluşturur.

Prompt'lar

Araçları, siteyi ve dosyayla ne yapılacağını belirt. Bu prompt'lar bu rehber için yazıldı; siteyi ve görevi değiştir.

Tek görevde çıkar ve geliştir

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

Seçmeden önce karşılaştır

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

Kendi ajanını mı geliştiriyorsun? Sunucuyu bir API anahtarıyla Agent SDK'nın mcpServers seçeneğinde geçir ve mcp__design-extractor__* için izin ver; kod parçasının tamamı MCP dokümantasyonunda.

Krediler ve sınırlar

  • Sitedekiyle aynı krediler. Bir Pro çıkarma, ister sitede sen başlat ister ajanın başlatsın, 10 kredi tutar. Fiyatlandırma sayfasından kredi yükle.
  • Kendi yakın tarihli çalıştırmaların için çift ücret yok. Yakın zamanda çıkardığın bir siteyi istemek o çıkarmayı yeniden kullanır.
  • Yalnızca herkese açık sayfalar. Giriş gerektiren, localhost'ta veya özel bir ağda bulunan sayfalar desteklenmez.
  • Anahtarlar. En fazla beş aktif API anahtarı; her biri bir yıl geçerlidir ve hesap sayfandan iptal edilebilir. Giriş yapmış bir istemci kendi token'ını yeniler; bağlantısını aynı sayfadan kesebilirsin.

SSS

MCP ile kodlama ajanlarına tasarım spesifikasyonu: sorular

Bunu denemeden önce en çok sorulanlara kısa yanıtlar.

Evet. Aynı hesabı ve aynı ön ödemeli kredileri kullanır: bir Pro çıkarma 10 kredi tutar. Ajan güncel maliyet için get_pricing, bakiyen için get_credits çağırabilir; bakiye yetersizse extract_design isteği reddeder ve bunu belirtir.

Giriş yapan istemciler için hayır: claude.ai, Claude Desktop, ChatGPT, Claude Code ve Codex bir kez onay sayfası açar ve kendini yenileyen bir token saklar. Cursor, n8n, betikler ve Agent SDK, hesap sayfandaki kişisel bir API anahtarını kullanır.

En az bir dakika. extract_design hemen döner; ajan yaklaşık bir dakika bekler, sonra DESIGN.md hazır olana kadar her 25 saniyede bir siteyi belirterek get_extraction çağrısı yapar.

Yakın zamanda çıkardığın bir site için hayır: yeniden istemek mevcut çıkarmanı yeniden kullanır ve yanıt hiç kredi düşülmediğini söyler. Yalnızca başkalarının çıkardığı bir site yine normal fiyata mal olur. list_my_extractions zaten elinde olanları gösterir.

Hayır. Sunucu sayfayı URL'sinden yakalar; bu yüzden giriş gerektiren, localhost'ta veya özel bir ağda bulunan sayfalar desteklenmez. Herkese açık bir önizleme yayınla ya da canlı siteyi çıkar.

Bağlanmadan önce bir DESIGN.md görmek ister misin?

Sitede bir çıkarma çalıştır. Ajanın aynı dosyayı sunucu üzerinden alır.

Herhangi bir web sitesinden DESIGN.md al

İlgili rehberler

Tüm DESIGN.md rehberlerini gör