Nhận DESIGN.md
từ bất kỳ trang web nào

DESIGN.md là một tài liệu hệ thống thiết kế dạng văn bản thuần mà các agent lập trình AI đọc để tạo giao diện nhất quán. Nó là phiên bản dành cho thiết kế của AGENTS.md: cả con người lẫn agent đều có thể đọc, chỉnh sửa và áp dụng nó. Bên trong có hai lớp. Phần front matter YAML chứa các design token máy đọc được như màu sắc, typography và khoảng cách. Phần thân markdown giải thích lý do thiết kế.

Một tệp DESIGN.md thường có tám mục chuẩn theo thứ tự: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components và Do's and Don'ts. Phần front matter YAML ghi lại giá trị chính xác của token. Phần thân markdown giải thích cách áp dụng và lý do. Có thể bỏ những mục không liên quan, và có thể thêm các mục riêng cho từng lĩnh vực.

Dán URL của bất kỳ trang web công khai nào vào Design Extractor và nhấp trích xuất. Hãy đăng ký, mua một gói credit, mỗi lượt trích xuất sẽ tốn vài credit. Kết quả là một tệp DESIGN.md bạn có thể sao chép. Thả DESIGN.md vào repo, agent AI của bạn sẽ đọc nó làm tham chiếu style cho Claude, Cursor, Copilot hoặc Stitch.

Mọi công cụ lập trình AI đọc được tệp markdown trong thư mục dự án của bạn đều dùng được DESIGN.md. Trong đó có Claude Code, Cursor, GitHub Copilot và các trợ lý lập trình khác có quyền truy cập tệp. Đặt DESIGN.md vào thư mục gốc của dự án hoặc thư mục docs và nhắc đến nó trong prompt của bạn.

Bất kỳ trang web nào truy cập công khai được. Design Extractor phân tích trang đang chạy thực tế như khi được hiển thị trong trình duyệt. Công cụ hoạt động với trang tĩnh, SPA và trang được render phía máy chủ. Trang web phải truy cập được qua một URL HTTP/HTTPS tiêu chuẩn.

Một số trang, chẳng hạn cổng thông tin chính phủ và cửa hàng địa phương, chỉ mở cho khách truy cập từ một số quốc gia. Nếu lượt trích xuất thất bại vì trang web từ chối truy cập, trang kết quả sẽ cho biết điều đó và gợi ý những quốc gia mà trang web tải được. Chọn một quốc gia, trang sẽ được tải bằng một trình duyệt ở quốc gia đó, rồi trích xuất như bình thường. Một lượt chạy từ quốc gia khác tốn giá của chế độ đã chọn cộng một khoản phụ phí nhỏ, được hiển thị trước khi bạn bắt đầu, và lượt chạy vẫn thất bại sẽ được hoàn lại credit. Tùy chọn này cũng có trong tiện ích mở rộng Chrome và qua máy chủ MCP.

Có. Tiện ích mở rộng Chrome của Design Extractor dùng lại phiên bạn đã đăng nhập trên trang web: không cần đăng nhập riêng. Cửa sổ popup hiển thị số dư credit của bạn, và chỉ một cú nhấp sẽ gửi trang trong tab hiện tại đến cùng quy trình trích xuất như biểu mẫu trên trang chủ, ở chế độ Lite hoặc Pro, với cùng số credit. DESIGN.md hoàn chỉnh sẽ mở trên trang web và xuất hiện trong Lượt trích xuất của tôi. Trong phiên bản đầu tiên này, trang phải là trang công khai: máy chủ chụp lại trang, nên các trang cần đăng nhập, trên localhost hoặc trong mạng riêng chưa được hỗ trợ. Việc chỉnh sửa và tải xuống vẫn thực hiện trên trang web.

Có. Design Extractor cũng là một máy chủ MCP. Trong claude.ai, Claude Desktop hoặc ChatGPT, hãy thêm URL máy chủ làm connector và đăng nhập bằng tài khoản của bạn; trong Claude Code, Codex, Cursor hoặc Agent SDK, hãy kết nối bằng một lệnh (trang tài liệu có đoạn lệnh cho từng client, kèm khóa API từ trang tài khoản của bạn nếu client cần), rồi yêu cầu nó trích xuất một trang web. Agent bắt đầu lượt chạy, kiểm tra lại sau khoảng một phút, và nhận nội dung DESIGN.md để lưu vào repo của bạn, với cùng số credit như trên trang web. Claude Code và Codex cũng có thể cài đặt nó dưới dạng plugin, plugin này thêm một skill giúp áp dụng DESIGN.md vào codebase.