Hướng dẫn

Cung cấp đặc tả thiết kế cho agent lập trình khi cần bằng MCP

Agent của bạn có thể lấy đặc tả thiết kế giống như cách nó lấy tài liệu. Kết nối máy chủ MCP của Design Extractor và agent có thể trích xuất DESIGN.md của bất kỳ trang công khai nào, chờ lượt chạy, đọc tệp và dựng giao diện từ đó, tất cả trong một tác vụ.

Không phải sao chép tệp qua lại, không cần mở tab trình duyệt: bạn nêu tên một trang trong prompt, và đặc tả sẽ nằm trong ngữ cảnh của agent.

Viết cho lập trình viên xây dựng agent và quy trình agent. Cập nhật .

Bạn sẽ nhận được

  • Máy chủ MCP được kết nối với Claude Code, Codex, Cursor hoặc claude.ai, đăng nhập bằng tài khoản của bạn hoặc bằng khóa API.
  • Trình tự gọi công cụ mà agent tuân theo: kiểm tra, trích xuất, chờ, đọc.
  • Các prompt khiến agent tự làm trọn quy trình, từ trích xuất đến UI.
  • Chi phí và các giới hạn cần tính trước.

Agent nhận được gì

Máy chủ nằm ở https://www.design-extractor.com/api/mcp và dùng streamable HTTP. Thông qua nó, agent có thể bắt đầu trích xuất một trang công khai, chờ kết quả, đọc DESIGN.md đã hoàn tất, xem giá và số dư của bạn, và liệt kê những gì bạn đã trích xuất trước đó. Mỗi lượt chạy cũng xuất hiện trong Lượt trích xuất của tôi trên trang web, như mọi lượt khác.

Tệp giống hệt tệp mà trang web tạo ra: token cho màu sắc, kiểu chữ, khoảng cách, bo góc và component ở đầu, và quy tắc sử dụng ở bên dưới. Tệp tuân theo đặc tả DESIGN.md của Google, nên agent có thể đọc nó như mọi đặc tả khác.

Kết nối máy chủ

Chọn client của bạn. Claude Code, Codex, claude.ai, Claude Desktop và ChatGPT đăng nhập bằng tài khoản của bạn; Cursor và script dùng khóa API.

  1. Thêm máy chủ một lần. Không cần khóa.

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

  2. Chạy /mcp, chọn design-extractor rồi chọn Authenticate. Đăng nhập và chấp thuận trên trang vừa mở.

  3. Yêu cầu một trang web: “trích xuất thiết kế của stripe.com”.

Claude Code, Codex, claude.ai, Claude Desktop và ChatGPT đăng nhập bằng tài khoản của bạn. Cursor, n8n và các script dùng khóa API cá nhân lấy từ trang tài khoản.

Với Claude Code và Codex còn có một plugin. Plugin gói máy chủ cùng skill apply-designmd, hướng dẫn agent từng bước trích xuất một trang tham khảo và áp dụng DESIGN.md của nó vào codebase của bạn. Sau khi cài, chạy /mcp trong Claude Code và xác thực máy chủ của 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

Mọi client, đoạn mã cho Agent SDK và các thiết lập khóa đều có trên trang tài liệu máy chủ MCP.

Các công cụ và thứ tự gọi

Công cụChức năng
list_my_extractionsCác lượt trích xuất của bạn, mới nhất trước. Gọi công cụ này trước để không phải trả tiền hai lần cho trang bạn đã có.
get_pricingChi phí credit hiện tại của một lượt trích xuất.
get_creditsSố dư credit còn lại của bạn.
extract_designBắt đầu trích xuất một URL công khai và trừ credit. Truyền tier PRO để lấy mẫu các trang chính của trang web. Trả về ngay khi lượt chạy được đưa vào hàng đợi.
get_extractionNhận tên hoặc URL của trang. Trả về trạng thái trong lúc lượt chạy đang xử lý, sau đó là toàn bộ nội dung DESIGN.md. Lượt chạy thất bại sẽ cho biết lý do.

Một lượt chạy mất ít nhất một phút, nên quy trình là bắt đầu, rồi kiểm tra định kỳ. Máy chủ tự báo điều này cho agent; bạn chỉ cần nêu tên trang.

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

Ví dụ thực tế: Supabase

Giả sử agent được yêu cầu dựng giao diện theo phong cách của supabase.com. Khi get_extraction báo lượt chạy đã hoàn tất, nó trả về toàn bộ DESIGN.md dưới dạng văn bản. DESIGN.md của Supabase trong thư viện mẫu đến từ cùng loại lượt chạy Pro, nên nó cho thấy những gì đi vào ngữ cảnh của agent. Tệp bắt đầu như sau:

Phần đầu DESIGN.md của Supabase trong thư viện mẫu, rút gọn còn vài token mỗi nhóm.
---
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
---

Trích xuất từ trang web công khai của Supabase, không phải hướng dẫn thương hiệu chính thức. Đọc toàn bộ DESIGN.md của Supabase

Bên dưới token là các phần agent đọc để lấy quy tắc và công thức: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Riêng phần Components đã có 49 công thức bằng HTML và CSS, nên agent dựng lại một nút hay một thẻ từ giá trị đo được thay vì đoán.

Prompt

Nêu tên công cụ, trang web và việc cần làm với tệp. Các prompt này được viết cho hướng dẫn này; hãy đổi trang web và tác vụ.

Trích xuất và dựng trong một tác vụ

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.

So sánh trước khi chọn

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.

Bạn đang tự xây agent? Truyền máy chủ vào tùy chọn mcpServers của Agent SDK kèm khóa API và cho phép mcp__design-extractor__*; tài liệu MCP có đoạn mã đầy đủ.

Credit và giới hạn

  • Cùng credit như trên trang web. Một lượt trích xuất Pro tốn 10 credit, dù bạn bắt đầu trên trang web hay agent bắt đầu. Nạp credit tại Bảng giá.
  • Không trừ tiền hai lần cho các lượt chạy gần đây của bạn. Yêu cầu một trang bạn đã trích xuất gần đây sẽ dùng lại lượt trích xuất đó.
  • Chỉ trang công khai. Các trang cần đăng nhập, chạy trên localhost hoặc trong mạng nội bộ không được hỗ trợ.
  • Khóa. Tối đa năm khóa API đang hoạt động, mỗi khóa có hiệu lực một năm và có thể thu hồi trên trang tài khoản. Client đã đăng nhập tự gia hạn token của mình; ngắt kết nối nó trên cùng trang đó.

FAQ

Đặc tả thiết kế cho agent lập trình qua MCP: câu hỏi thường gặp

Trả lời ngắn cho những điều mọi người hay hỏi trước khi thử.

Có. Nó dùng cùng tài khoản và cùng credit trả trước: một lượt trích xuất Pro tốn 10 credit. Agent có thể gọi get_pricing để xem chi phí hiện tại và get_credits để xem số dư của bạn; khi số dư không đủ, extract_design sẽ từ chối và báo rõ.

Không cần với các client có đăng nhập: claude.ai, Claude Desktop, ChatGPT, Claude Code và Codex mở trang cấp quyền một lần và giữ một token tự gia hạn. Cursor, n8n, script và Agent SDK dùng khóa API cá nhân từ trang tài khoản của bạn.

Ít nhất một phút. extract_design trả về ngay; agent chờ khoảng một phút, rồi gọi get_extraction với trang đó mỗi 25 giây cho đến khi DESIGN.md sẵn sàng.

Không với trang bạn đã trích xuất gần đây: yêu cầu lại sẽ dùng lại lượt trích xuất của bạn và phản hồi cho biết không có credit nào bị trừ. Trang chỉ do người khác trích xuất vẫn tốn giá bình thường. list_my_extractions cho thấy những gì bạn đã có.

Không. Máy chủ ghi lại trang từ URL của nó, nên các trang cần đăng nhập, chạy trên localhost hoặc trong mạng nội bộ không được hỗ trợ. Hãy triển khai một bản xem trước công khai, hoặc trích xuất trang đang chạy thật.

Muốn xem một DESIGN.md trước khi kết nối?

Chạy một lượt trích xuất trên trang web. Agent của bạn nhận đúng tệp đó qua máy chủ.

Lấy DESIGN.md từ bất kỳ trang web nào

Hướng dẫn liên quan

Xem tất cả hướng dẫn DESIGN.md