Dokümanlar

Design Extractor nasıl çalışır

Bir URL yapıştır, yapılandırılmış bir tasarım spesifikasyonu al. Renkler, tipografi, boşluklar ve bileşenler, bir repoya koyabileceğin tek bir DESIGN.md içinde.

DESIGN.md nedir?

DESIGN.md, hem insanların hem de AI ajanlarının okuyabildiği düz metin bir tasarım sistemi belgesidir. Onu AGENTS.md dosyasının tasarımdaki karşılığı olarak düşün. AGENTS.md ajanlara projeyi nasıl inşa edeceklerini söyler, DESIGN.md ise nasıl görünmesi ve hissettirmesi gerektiğini.

Her DESIGN.md iki katmandan oluşur: makinenin okuyabildiği tasarım token'larını içeren YAML frontmatter ve tasarım gerekçesini açıklayan bir Markdown gövdesi. Token'lar ajanlara kesin değerler verir. Metin, bu değerlerin neden var olduğunu anlatır.

DESIGN.md spesifikasyonunun tamamını oku ->

Standart bölümler

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

Nasıl çalışır

  1. Girdi

    Herkese açık bir URL yapıştır (örneğin design-extractor.com).

  2. Çıkarma

    Sistem sayfayı tarar ve görsel özelliklerini analiz eder: renkler, tipografi, boşluklar, bileşen kalıpları ve genel tasarım dili.

  3. Çıktı

    Şunları içeren tek bir DESIGN.md:

    • Genel bakış ve marka stili yönergeleri
    • Adlandırılmış token'larla renk paletleri
    • Tipografi seviyeleri ve font özellikleri
    • Yerleşim, boşluk ve şekil token'ları
    • Bileşen yönergeleri ve token referansları
    • Tasarımın sınırlarını çizen Do's and Don'ts kuralları

Çıktı

Her çıkarma tek bir DESIGN.md üretir.

Markdown

  • DESIGN.md. Standart DESIGN.md formatını Google Stitch tanıttı. AI ajanlarının kullanması için herhangi bir repoya koy.

Chrome uzantısı

Açık sekmendeki sayfayı buraya dönmeden çıkar. Uzantı sitedeki oturumunu kullanır ve aynı kredileri harcar. Uzantının nasıl çalıştığını oku ->

Temel fikir

AI ajanlarına hem kesin token'lar hem de insanların okuyabileceği gerekçeler verildiğinde daha iyi tasarım çıktısı üretirler. YAML frontmatter kesin değerleri verir. Markdown gövdesi bu değerlerin pratikte nasıl kullanılacağını açıklar.

Denemeye hazır mısın?

Herkese açık her URL'den bir DESIGN.md al. Bir çıkarma en az bir dakika sürer.

Bir site çıkar