Panduan

Berikan spesifikasi desain kepada agen coding Anda kapan saja dengan MCP

Agen Anda bisa mengambil spesifikasi desain seperti mengambil dokumentasi. Hubungkan server MCP Design Extractor, dan agen bisa mengekstrak DESIGN.md dari situs publik mana pun, menunggu ekstraksinya, membaca file-nya, dan membangun dari file itu, semuanya dalam satu tugas.

Tidak perlu memindahkan file atau membuka tab browser: Anda menyebut sebuah situs di prompt, dan spesifikasinya masuk ke konteks agen.

Ditulis untuk developer yang membangun agen dan workflow agen. Diperbarui .

Yang akan Anda dapatkan

  • Server MCP terhubung ke Claude Code, Codex, Cursor, atau claude.ai, dengan masuk ke akun Anda atau memakai API key.
  • Alur tool yang diikuti agen: cek, ekstrak, tunggu, baca.
  • Prompt yang membuat agen menjalankan seluruh alurnya, dari ekstraksi hingga UI.
  • Biayanya dan batasan yang perlu diperhitungkan.

Apa yang didapat agen

Server berada di https://www.design-extractor.com/api/mcp dan memakai streamable HTTP. Melalui server ini, agen bisa memulai ekstraksi situs publik, menunggunya, membaca DESIGN.md yang sudah jadi, mengecek harga dan saldo Anda, serta melihat daftar yang pernah Anda ekstrak. Setiap ekstraksi juga muncul di Ekstraksi saya di situs, seperti ekstraksi lainnya.

File-nya sama dengan yang dihasilkan situs: token untuk warna, tipografi, spacing, radius, dan komponen di bagian atas, serta aturan pemakaiannya di bawah. File ini mengikuti spesifikasi DESIGN.md dari Google, jadi agen bisa membacanya seperti spesifikasi lainnya.

Hubungkan server

Pilih klien Anda. Claude Code, Codex, claude.ai, Claude Desktop, dan ChatGPT masuk dengan akun Anda; Cursor dan skrip memakai API key.

  1. Tambahkan server sekali. Tidak perlu key.

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

  2. Jalankan /mcp, pilih design-extractor, lalu pilih Authenticate. Masuk dan setujui di halaman yang terbuka.

  3. Minta sebuah situs: “ekstrak desain stripe.com”.

Claude Code, Codex, claude.ai, Claude Desktop, dan ChatGPT masuk dengan akun Anda. Cursor, n8n, dan skrip memakai API key pribadi dari halaman akun.

Untuk Claude Code dan Codex juga ada plugin. Plugin ini menggabungkan server dengan skill apply-designmd yang memandu agen mengekstrak situs referensi dan menerapkan DESIGN.md-nya ke codebase Anda. Setelah pemasangan, jalankan /mcp di Claude Code dan lakukan autentikasi untuk server milik plugin.

/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

Semua klien, snippet Agent SDK, dan pengaturan key ada di halaman dokumentasi server MCP.

Tools dan urutan pemanggilannya

ToolFungsinya
list_my_extractionsEkstraksi Anda, terbaru lebih dulu. Panggil ini lebih dulu agar situs yang sudah Anda miliki tidak dibayar dua kali.
get_pricingBiaya kredit terkini untuk sebuah ekstraksi.
get_creditsSisa saldo kredit Anda.
extract_designMemulai ekstraksi URL publik dan memakai kredit. Berikan tier PRO untuk mengambil sampel halaman-halaman utama situs. Langsung kembali begitu ekstraksi masuk antrean.
get_extractionMenerima nama atau URL situs. Mengembalikan status selama ekstraksi berjalan, lalu teks DESIGN.md lengkap. Ekstraksi yang gagal menyebutkan alasannya.

Sebuah ekstraksi memakan waktu setidaknya satu menit, jadi alurnya adalah mulai, lalu cek berkala. Server memberi tahu agen hal ini sendiri; Anda cukup menyebut situsnya.

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

Contoh nyata: Supabase

Misalnya agen diminta membangun dengan gaya supabase.com. Saat get_extraction melaporkan ekstraksi selesai, tool itu mengembalikan seluruh DESIGN.md sebagai teks. DESIGN.md Supabase di galeri berasal dari ekstraksi Pro yang sama jenisnya, jadi file itu menunjukkan apa yang masuk ke konteks agen. Awalnya seperti ini:

Bagian atas DESIGN.md Supabase dari galeri, diringkas menjadi beberapa token per 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
---

Diekstrak dari website publik Supabase, bukan pedoman brand resmi. Baca DESIGN.md Supabase selengkapnya

Di bawah token ada bagian-bagian yang dibaca agen untuk aturan dan resep: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Bagian Components saja berisi 49 resep dalam HTML dan CSS, sehingga agen membangun ulang tombol atau kartu dari nilai yang terukur, bukan menebaknya.

Prompt

Sebutkan tools-nya, situsnya, dan apa yang terjadi dengan file-nya. Prompt ini ditulis untuk panduan ini; ganti situs dan tugasnya.

Ekstrak dan bangun dalam satu tugas

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.

Bandingkan sebelum memilih

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.

Membangun agen sendiri? Berikan server di opsi mcpServers milik Agent SDK dengan API key dan izinkan mcp__design-extractor__*; dokumentasi MCP berisi snippet lengkapnya.

Kredit dan batasan

  • Kredit yang sama seperti di situs. Ekstraksi Pro memakai 10 kredit, baik Anda yang memulainya di situs maupun agen Anda. Isi ulang di halaman Harga.
  • Tidak ada biaya ganda untuk ekstraksi terbaru Anda sendiri. Meminta situs yang baru-baru ini Anda ekstrak akan memakai ulang ekstraksi itu.
  • Hanya halaman publik. Halaman di balik login, di localhost, atau di jaringan privat tidak didukung.
  • Key. Maksimal lima API key aktif, masing-masing berlaku satu tahun dan bisa dicabut di halaman akun Anda. Klien yang sudah masuk memperbarui token-nya sendiri; putuskan di halaman yang sama.

FAQ

Spesifikasi desain untuk agen coding lewat MCP: pertanyaan

Jawaban singkat atas pertanyaan yang sering diajukan sebelum mencoba ini.

Ya. Ekstraksi lewat MCP memakai akun yang sama dan kredit prabayar yang sama: ekstraksi Pro memakai 10 kredit. Agen bisa memanggil get_pricing untuk biaya terkini dan get_credits untuk saldo Anda; jika saldo kurang, extract_design menolak dan memberi tahu.

Tidak untuk klien yang bisa masuk ke akun: claude.ai, Claude Desktop, ChatGPT, Claude Code, dan Codex membuka halaman persetujuan sekali dan menyimpan token yang diperbarui sendiri. Cursor, n8n, skrip, dan Agent SDK memakai API key pribadi dari halaman akun Anda.

Setidaknya satu menit. extract_design langsung kembali; agen menunggu sekitar satu menit, lalu memanggil get_extraction dengan nama situs setiap 25 detik sampai DESIGN.md siap.

Tidak untuk situs yang baru-baru ini Anda ekstrak: meminta lagi akan memakai ulang ekstraksi Anda dan balasannya menyebutkan bahwa tidak ada kredit yang dipotong. Situs yang hanya diekstrak orang lain tetap dikenai harga normal. list_my_extractions menampilkan apa yang sudah Anda miliki.

Tidak. Server mengambil halaman dari URL-nya, jadi halaman di balik login, di localhost, atau di jaringan privat tidak didukung. Deploy pratinjau publik, atau ekstrak situs live-nya.

Ingin melihat DESIGN.md sebelum menghubungkan?

Jalankan satu ekstraksi di situs. Agen Anda mendapat file yang sama lewat server.

Dapatkan DESIGN.md dari website apa pun

Panduan terkait

Lihat semua panduan DESIGN.md