Dokumentacja

Jak działa Design Extractor

Wklej URL, otrzymaj uporządkowaną specyfikację designu. Kolory, typografia, odstępy i komponenty w pliku DESIGN.md, który wrzucisz do repozytorium.

Czym jest DESIGN.md?

DESIGN.md to tekstowy dokument z design systemem, który mogą czytać zarówno ludzie, jak i agenci AI. To designowy odpowiednik AGENTS.md. Tam, gdzie AGENTS.md mówi agentom, jak zbudować projekt, DESIGN.md mówi im, jak ma wyglądać i jakie wrażenie ma robić.

Każdy DESIGN.md ma dwie warstwy: front matter w YAML z czytelnymi dla maszyn tokenami projektowymi oraz treść w Markdown, która wyjaśnia uzasadnienie designu. Tokeny dają agentom dokładne wartości. Tekst mówi im, dlaczego te wartości istnieją.

Przeczytaj pełną specyfikację DESIGN.md ->

Kanoniczne sekcje

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

Jak to działa

  1. Wejście

    Wklej publiczny URL (np. design-extractor.com).

  2. Ekstrakcja

    System przeszukuje stronę i analizuje jej właściwości wizualne: kolory, typografię, odstępy, wzorce komponentów i ogólny język designu.

  3. Wynik

    Jeden DESIGN.md zawierający:

    • Przegląd i wskazówki dotyczące stylu marki
    • Palety kolorów z nazwanymi tokenami
    • Poziomy typografii i właściwości fontów
    • Tokeny układu, odstępów i kształtów
    • Wskazówki dla komponentów i odwołania do tokenów
    • Zalecenia i zakazy (Do's and Don'ts), które działają jak bariery ochronne designu

Wynik

Każda ekstrakcja tworzy jeden DESIGN.md.

Markdown

  • DESIGN.md. Kanoniczny format DESIGN.md wprowadził Google Stitch. Wrzuć go do dowolnego repozytorium, aby korzystali z niego agenci AI.

Rozszerzenie Chrome

Wyodrębnij stronę z bieżącej karty bez wracania tutaj. Rozszerzenie korzysta z twojej sesji na stronie i zużywa te same kredyty. Zobacz, jak działa rozszerzenie ->

Najważniejsze

Agenci AI tworzą lepszy design, gdy dostają zarówno dokładne tokeny, jak i czytelne dla ludzi uzasadnienie. Front matter w YAML daje dokładne wartości. Treść w Markdown wyjaśnia, jak tych wartości używać w praktyce.

Chcesz spróbować?

Wygeneruj DESIGN.md z dowolnego publicznego URL. Wyodrębnianie trwa co najmniej minutę.

Wyodrębnij stronę