Tiện ích mở rộng Chrome Design Extractor
Tiện ích mở rộng Chrome của Design Extractor biến trang web trong tab hiện tại của bạn thành một tệp DESIGN.md: tệp hệ thống thiết kế chứa màu sắc, typography, khoảng cách, hình dạng và quy tắc component của trang, được viết cho các agent lập trình như Claude Code, Cursor và Copilot. Một cú nhấp trên thanh công cụ, không cần dán URL.
Cài đặt miễn phí. Mỗi lượt trích xuất tiêu tốn credit từ số dư trả trước của bạn, cùng mức giá như trên trang web.
Tiện ích làm gì
DESIGN.md từ chính tab bạn đang mở
Trích xuất trang trong tab của bạn
Một cú nhấp sẽ gửi địa chỉ của tab bạn đang mở qua cùng quy trình trích xuất như biểu mẫu trên trang chủ. Pro còn lấy mẫu các trang chính của trang web, nên kết quả phản ánh cả trang web, không chỉ một màn hình.
Viết một hệ thống thiết kế đầy đủ
Token YAML cho màu sắc, typography, khoảng cách và hình dạng, cùng tám mục của định dạng DESIGN.md: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components và Do's and Don'ts.
Một công thức cho mỗi component
Các component được chọn từ trang, như header, nút, ô nhập liệu và thẻ, đều đi kèm HTML và CSS đã được chắt lọc, được kiểm tra với trang web thật hoặc được đánh dấu kèm lý do.
Cùng tài khoản, cùng credit
Tiện ích dùng lại phiên đăng nhập của bạn trên design-extractor.com. Không cần đăng nhập lần hai, và cửa sổ popup hiển thị số dư credit của bạn.
Cách hoạt động
Ba bước từ tab đến DESIGN.md
Thêm vào Chrome và ghim lại
Cài đặt từ Chrome Web Store và ghim tiện ích qua biểu tượng mảnh ghép. Tiện ích chỉ yêu cầu quyền truy cập design-extractor.com và tab đang mở, không gì khác. Đăng nhập trên trang web một lần; cửa sổ popup sẽ dùng phiên đó.
Mở một trang công khai và nhấp Extract this page
Chọn chế độ trong cửa sổ popup và bắt đầu lượt chạy. Tiến trình hiển thị trong popup khi lượt chạy diễn ra, và bạn có thể tiếp tục duyệt web.
Mở DESIGN.md
Open result đưa bạn đến DESIGN.md trên trang web. Tệp cũng được lưu trong Lượt trích xuất của tôi, nơi bạn sao chép, tải xuống hoặc chỉnh sửa trước khi thả vào repo.
Chi tiết cài đặt, đăng nhập, credit và các giới hạn hiện tại có trong hướng dẫn cài đặt tiện ích. Thích dán URL hơn? Quy trình trích xuất tương tự cũng chạy từ trang chủ.
So sánh
Những gì tiện ích bổ sung so với DESIGN.md Style Extractor của TypeUI
DESIGN.md Style Extractor của TypeUI là một tiện ích mở rộng miễn phí, mã nguồn mở, điền style của trang trong tab vào mẫu riêng của TypeUI. Tiện ích mở rộng của Design Extractor bổ sung:
DESIGN.md tuân theo đặc tả của Google
Token trong front matter YAML và các mục chuẩn theo đúng thứ tự của đặc tả. Kiểm tra bất kỳ tệp nào bằng Trình kiểm tra DESIGN.md miễn phí.
Một công thức cho mỗi component được chọn
HTML và CSS đã chắt lọc cho header, nút, ô nhập liệu, thẻ và nhiều component khác, mỗi công thức được kiểm tra với trang web thật bằng so khớp cấu trúc và so sánh từng pixel, hoặc được đánh dấu kèm lý do.
Trang web giới hạn theo khu vực
Khi một trang web chặn khách truy cập từ một số quốc gia, lượt chạy có thể đi qua một trình duyệt ở quốc gia khác. Một lượt chạy theo quốc gia tốn giá Pro cộng phụ phí 6 credit (16 credit).
Cùng tài khoản và credit như trên trang web
Mọi lượt chạy đều được lưu trong Lượt trích xuất của tôi, nơi bạn chỉnh sửa, sao chép hoặc tải xuống, và agent của bạn có thể đọc qua MCP.
Kiểm tra vào với phiên bản 0.4.0, README và mã nguồn và trang trên Chrome Web Store của tiện ích này.
| Khía cạnh | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Cách đọc trang web | Máy chủ của chúng tôi mở địa chỉ của trang trong một trình duyệt và phân tích trang đã render. Pro còn lấy mẫu các trang chính của trang web. | Đọc computed style của tối đa 280 phần tử hiển thị trên trang đang mở trong tab, ngay trong trình duyệt của bạn. |
| Kết quả tuân theo | Đặc tả DESIGN.md của Google: token trong front matter YAML và các mục chuẩn theo đúng thứ tự của đặc tả. | Mẫu DESIGN.md riêng của TypeUI (Mission, Brand, Style Foundations, Rules và các mục khác), không có front matter YAML, hoặc một tệp SKILL.md. |
| Component | Một công thức HTML và CSS đã chắt lọc cho mỗi component được chọn từ trang, được kiểm tra với trang web thật bằng so khớp cấu trúc và so sánh từng pixel, hoặc được đánh dấu kèm lý do. | Số lượng theo từng loại component, kèm hướng dẫn chung về component. Kết quả không được so sánh với trang đã render. |
| Kết quả được lưu ở đâu | Lưu vào Lượt trích xuất của tôi trên trang web, nơi bạn có thể chỉnh sửa, sao chép hoặc tải xuống. | Hiển thị trong cửa sổ popup, nơi bạn sao chép hoặc tải xuống dưới dạng tệp. |
| Trang có thể đọc | Chỉ trang công khai. Các trang cần đăng nhập, trên localhost hoặc trong mạng riêng chưa được hỗ trợ. | Trang đang mở trong tab của bạn, kể cả các trang bạn đã đăng nhập, vì tiện ích đọc trực tiếp trang đó. |
| Giá | Cài đặt miễn phí. Lượt trích xuất tiêu tốn credit trả trước. | Miễn phí và mã nguồn mở (MIT). |
Hãy chọn tiện ích mở rộng của Design Extractor nếu bạn cần một tệp DESIGN.md tuân theo đặc tả của Google, với công thức cho mỗi component được kiểm tra với trang web thật, và được lưu vào tài khoản của bạn. Bản so sánh đầy đủ có tại TypeUI vs Design Extractor.
FAQ
Câu hỏi về tiện ích mở rộng Chrome
Câu trả lời ngắn về cách cài đặt tiện ích, dữ liệu tiện ích gửi đi và chi phí.
Cài đặt miễn phí. Mỗi lượt trích xuất tiêu tốn credit từ số dư trả trước của bạn, cùng mức giá như trên trang web. Các gói bắt đầu từ 5 US$ cho 50 credit, không có thuê bao, và credit không bao giờ hết hạn. Nếu lượt trích xuất thất bại do lỗi từ phía chúng tôi, credit sẽ được hoàn lại.
Chỉ địa chỉ của tab hiện tại và chế độ bạn đã chọn, khi bạn nhấp Extract this page. Tiện ích không bao giờ đọc nội dung của trang, không chạy ngầm trên các trang bạn truy cập, và không chứa công cụ phân tích nào.
Chưa. Máy chủ của chúng tôi chụp trang từ địa chỉ của nó, nên trang phải là trang công khai. Các trang cần đăng nhập, trên localhost hoặc trong mạng riêng không được hỗ trợ. Tiện ích chỉ có cho Chrome.
Không. Cửa sổ popup dùng lại phiên bạn đã đăng nhập trên design-extractor.com. Khi chưa đăng nhập, popup hiển thị nút Đăng nhập để mở trang web. Đăng xuất trong popup cũng sẽ đăng xuất bạn khỏi trang web.
Bất kỳ agent nào đọc tệp từ repo của bạn. Lưu DESIGN.md cạnh mã nguồn và chỉ cho Claude Code, Cursor, GitHub Copilot, Codex, Windsurf hoặc Google Stitch dùng nó làm tham chiếu style cho giao diện mới.
Các tiện ích như DESIGN.md Style Extractor của TypeUI đọc computed style trong trình duyệt của bạn và điền các giá trị vào mẫu riêng của chúng. Design Extractor viết một tệp DESIGN.md tuân theo đặc tả của Google, với một công thức HTML và CSS cho mỗi component được chọn từ trang, được kiểm tra với trang web thật hoặc được đánh dấu kèm lý do, và lưu vào tài khoản của bạn.
Nhận DESIGN.md từ tab bạn đang mở
Cài đặt miễn phí. Mỗi lượt trích xuất tiêu tốn credit từ số dư trả trước của bạn, cùng mức giá như trên trang web.