Generator DESIGN.md

Utwórz DESIGN.md z działającej strony. Wpisz jej URL, a generator zbuduje plik, który czyta twój agent AI do kodowania: tokeny kolorów, typografii, odstępów i komponentów oraz zasady ich użycia. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.

Jak generator tworzy DESIGN.md

  1. Wpisz URL strony

    Zadziała każda publiczna strona: strona marketingowa, dokumentacja czy strona startowa aplikacji webowej. Najpierw się zarejestruj; każda ekstrakcja zużywa kredyty z przedpłaconego pakietu.

  2. Generator czyta stronę

    Otwiera stronę w prawdziwej przeglądarce i mierzy kolory, fonty, odstępy, zaokrąglenia narożników i komponenty, których faktycznie używa. Ekstrakcja Pro bada około pięciu podstron witryny. Każda ekstrakcja trwa co najmniej minutę.

  3. Dostajesz DESIGN.md

    Tokeny trafiają do front matter w YAML, a zasady ich użycia do Markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components oraz Do's and Don'ts. Skopiuj go, pobierz albo edytuj w Moich ekstrakcjach.

Przykładowy wynik: DESIGN.md Anthropic

Fragment pliku, który generator utworzył z anthropic.com, skrócony do kilku tokenów na grupę i początku sekcji Overview. Pełny plik obejmuje też układ, elewację, kształty, komponenty oraz zalecenia i przeciwwskazania (Do's and Don'ts).

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

Zobacz pełny DESIGN.md AnthropicPrzeglądaj więcej przykładów DESIGN.md

FAQ

Pytania o generator DESIGN.md

Co tworzy generator, ile kosztuje i jak używać pliku z twoim agentem AI do kodowania.

Jeden plik DESIGN.md zgodny ze specyfikacją DESIGN.md od Google. Front matter w YAML zawiera tokeny kolorów, typografii, odstępów, zaokrągleń narożników i komponentów strony. Treść w Markdown wyjaśnia, sekcja po sekcji, jak ich używać, aby agent AI do kodowania mógł budować nowe UI pasujące do strony.

Nie za pomocą generatora: tworzy on plik z działającej, publicznej strony. Jeśli projektujesz od zera, napisz DESIGN.md ręcznie według specyfikacji i sprawdź jego strukturę i tokeny darmowym Walidatorem DESIGN.md.

Każdą publiczną stronę dostępną przez HTTP lub HTTPS, w tym strony statyczne, aplikacje jednostronicowe (SPA) i strony renderowane po stronie serwera. Strony za logowaniem, na localhost lub w sieci prywatnej nie są obsługiwane, a niektóre strony blokują zautomatyzowane przeglądarki.

Rejestrujesz się i kupujesz przedpłacony pakiet kredytów, od 5 USD za pulę 50 kredytów. Nie ma subskrypcji, a kredyty nigdy nie wygasają. Każda ekstrakcja zużywa kredyty, a aktualny koszt ekstrakcji pokazuje strona cennika. Jeśli ekstrakcja nie powiedzie się po naszej stronie, kredyty są zwracane.

Zapisz go jako DESIGN.md w katalogu głównym projektu lub w folderze z dokumentacją i wspomnij o nim w prompcie. Claude Code, Cursor, GitHub Copilot, Windsurf i inni agenci z dostępem do plików czytają go jako wzorzec stylu. Agenci mogą też sami uruchamiać generator przez serwer MCP Design Extractor.

Tak. Każdy wygenerowany DESIGN.md zapisuje się w Moich ekstrakcjach, gdzie możesz go edytować, pobrać ponownie albo później ponownie wyodrębnić stronę. To zwykły tekst, więc możesz go też edytować we własnym edytorze.