Poradnik

Daj agentowi AI do kodowania specyfikacje designu na żądanie przez MCP

Twój agent może pobrać specyfikację designu tak, jak pobiera dokumentację. Połącz serwer MCP Design Extractor, a agent wyodrębni DESIGN.md dowolnej publicznej strony, poczeka na wynik, przeczyta plik i zbuduje na jego podstawie UI, wszystko w ramach jednego zadania.

Bez przenoszenia plików i bez karty przeglądarki: podajesz stronę w prompcie, a specyfikacja trafia do kontekstu agenta.

Dla programistów budujących agentów i procesy z agentami. Aktualizacja: .

Co zyskasz

  • Serwer MCP połączony z Claude Code, Codex, Cursor lub claude.ai, z logowaniem na twoje konto lub kluczem API.
  • Kolejność narzędzi, której trzyma się agent: sprawdź, wyodrębnij, poczekaj, przeczytaj.
  • Prompty, dzięki którym agent przejdzie całą pętlę, od ekstrakcji do UI.
  • Ile to kosztuje i jakie ograniczenia warto uwzględnić.

Co dostaje agent

Serwer działa pod adresem https://www.design-extractor.com/api/mcp i komunikuje się przez streamable HTTP. Dzięki niemu agent może uruchomić ekstrakcję publicznej strony, poczekać na nią, odczytać gotowy DESIGN.md, sprawdzić cenę i twoje saldo oraz wyświetlić listę wcześniejszych ekstrakcji. Każda ekstrakcja pojawia się też w Moich ekstrakcjach na stronie, jak każda inna.

To ten sam plik, który tworzy strona: na górze tokeny kolorów, typografii, odstępów, zaokrągleń i komponentów, a poniżej zasady ich użycia. Jest zgodny ze specyfikacją DESIGN.md od Google, więc agent może go czytać jak każdą inną specyfikację.

Połącz serwer

Wybierz swojego klienta. Claude Code, Codex, claude.ai, Claude Desktop i ChatGPT logują się na twoje konto; Cursor i skrypty używają klucza API.

  1. Dodaj serwer raz. Klucz nie jest potrzebny.

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

  2. Uruchom /mcp, wybierz design-extractor i wybierz Authenticate. Zaloguj się i zatwierdź na stronie, która się otworzy.

  3. Poproś o stronę: „wyodrębnij design stripe.com”.

Claude Code, Codex, claude.ai, Claude Desktop i ChatGPT logują się na twoje konto. Cursor, n8n i skrypty używają osobistego klucza API ze strony konta.

Dla Claude Code i Codex jest też plugin. Łączy serwer ze skillem apply-designmd, który prowadzi agenta przez wyodrębnienie strony wzorcowej i zastosowanie jej DESIGN.md w twojej bazie kodu. Po instalacji uruchom /mcp w Claude Code i uwierzytelnij serwer pluginu.

/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

Wszystkich klientów, fragment kodu dla Agent SDK i ustawienia kluczy znajdziesz na stronie dokumentacji serwera MCP.

Narzędzia i kolejność ich wywoływania

NarzędzieCo robi
list_my_extractionsTwoje ekstrakcje, od najnowszych. Wywołaj je najpierw, aby nie płacić dwa razy za stronę, którą już masz.
get_pricingAktualny koszt ekstrakcji w kredytach.
get_creditsTwoje pozostałe saldo kredytów.
extract_designUruchamia ekstrakcję publicznego URL i zużywa kredyty. Przekaż tier PRO, aby zbadać kluczowe podstrony witryny. Zwraca odpowiedź, gdy tylko ekstrakcja trafi do kolejki.
get_extractionPrzyjmuje nazwę lub URL strony. Zwraca status w trakcie ekstrakcji, a potem pełny tekst DESIGN.md. Nieudana ekstrakcja podaje powód.

Ekstrakcja trwa co najmniej minutę, więc schemat to: uruchom, potem odpytuj. Serwer sam mówi o tym agentowi; ty tylko podajesz stronę.

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

Przykład w praktyce: Supabase

Załóżmy, że agent ma zbudować UI w stylu supabase.com. Gdy get_extraction zgłosi zakończenie ekstrakcji, zwraca cały DESIGN.md jako tekst. DESIGN.md Supabase w galerii pochodzi z takiej samej ekstrakcji Pro, więc pokazuje, co trafia do kontekstu agenta. Zaczyna się tak:

Początek DESIGN.md Supabase z galerii, skrócony do kilku tokenów na grupę.
---
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
---

Wyodrębnione z publicznej strony Supabase, to nie są oficjalne wytyczne marki. Przeczytaj pełny DESIGN.md Supabase

Pod tokenami są sekcje, z których agent czyta zasady i receptury: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Sama sekcja Components zawiera 49 receptur w HTML i CSS, więc agent odtwarza przycisk czy kartę ze zmierzonych wartości, zamiast je zgadywać.

Prompty

Nazwij narzędzia, stronę i to, co ma się stać z plikiem. Te prompty zostały napisane dla tego poradnika; zmień stronę i zadanie.

Wyodrębnij i zbuduj w jednym zadaniu

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.

Porównaj, zanim wybierzesz

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.

Budujesz własnego agenta? Przekaż serwer w opcji mcpServers w Agent SDK z kluczem API i zezwól na mcp__design-extractor__*; pełny fragment kodu jest w dokumentacji MCP.

Kredyty i ograniczenia

  • Te same kredyty co na stronie. Ekstrakcja Pro kosztuje 10 kredytów, niezależnie od tego, czy uruchomisz ją na stronie, czy zrobi to twój agent. Doładuj w Cenniku.
  • Bez podwójnej opłaty za twoje niedawne ekstrakcje. Prośba o stronę wyodrębnioną przez ciebie niedawno używa tej ekstrakcji ponownie.
  • Tylko strony publiczne. Strony za logowaniem, na localhost lub w sieci prywatnej nie są obsługiwane.
  • Klucze. Do pięciu aktywnych kluczy API, każdy ważny przez rok, do unieważnienia na stronie konta. Zalogowany klient sam odnawia swój token; odłączysz go na tej samej stronie.

FAQ

Specyfikacje designu dla agentów przez MCP: pytania

Krótkie odpowiedzi na pytania, które ludzie zadają, zanim spróbują.

Tak. Korzysta z tego samego konta i tych samych przedpłaconych kredytów: ekstrakcja Pro kosztuje 10 kredytów. Agent może wywołać get_pricing, aby poznać aktualny koszt, i get_credits, aby sprawdzić twoje saldo; gdy saldo jest za niskie, extract_design odmawia i o tym informuje.

Nie dla klientów, którzy się logują: claude.ai, Claude Desktop, ChatGPT, Claude Code i Codex raz otwierają stronę zgody i przechowują token, który sam się odnawia. Cursor, n8n, skrypty i Agent SDK używają osobistego klucza API ze strony konta.

Co najmniej minutę. extract_design zwraca odpowiedź od razu; agent czeka około minuty, a potem co 25 sekund wywołuje get_extraction z nazwą strony, aż DESIGN.md będzie gotowy.

Nie za stronę wyodrębnioną przez ciebie niedawno: ponowna prośba używa twojej ekstrakcji, a odpowiedź informuje, że nie pobrano kredytów. Strona wyodrębniona tylko przez inne osoby nadal kosztuje zwykłą cenę. list_my_extractions pokazuje, co już masz.

Nie. Serwer przechwytuje stronę z jej URL, więc strony za logowaniem, na localhost lub w sieci prywatnej nie są obsługiwane. Wdróż publiczny podgląd albo wyodrębnij działającą stronę.

Chcesz zobaczyć DESIGN.md przed połączeniem?

Uruchom jedną ekstrakcję na stronie. Twój agent dostaje ten sam plik przez serwer.

Wygeneruj DESIGN.md z dowolnej strony

Powiązane poradniki

Zobacz wszystkie poradniki DESIGN.md