TypeUI vs Design Extractor
DESIGN.md Style Extractor của TypeUI là một tiện ích mở rộng Chrome miễn phí, đọc style của trang trong tab của bạn và điền vào mẫu DESIGN.md riêng của TypeUI. Tệp của Design Extractor tuân theo đặc tả DESIGN.md của Google và đi kèm mỗi component được chọn từ trang dưới dạng một công thức HTML và CSS mà agent lập trình AI của bạn có thể dựng lại. Mỗi công thức được kiểm tra với trang web thật hoặc được đánh dấu kèm lý do. Công cụ này cũng hoạt động với những trang web chỉ phản hồi khách truy cập từ một số quốc gia.
Mới biết đến định dạng này? Hãy đọc DESIGN.md là gì trước.
Đã kiểm tra ngày , đối chiếu với README và mã nguồn của tiện ích, trang của tiện ích trên Chrome Web Store và README của TypeUI. Ưu đãi và giá có thể thay đổi, vì vậy hãy xem trang web của họ trước khi quyết định.
Vì sao chọn Design Extractor
Tuân theo đặc tả DESIGN.md của Google
Phần front matter YAML chỉ dùng các thuộc tính mà đặc tả định nghĩa, không có key cấp cao nhất tùy chỉnh. Các section chuẩn xuất hiện theo đúng thứ tự của đặc tả, từ Overview đến Do's and Don'ts. Các mục component trong front matter chỉ dùng tám thuộc tính của đặc tả, với giá trị cụ thể. 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 từ trang
Header, footer, nút, ô nhập liệu, thẻ và các component khác được chọn từ trang đều đi kèm một công thức: HTML và CSS chắt lọc với giá trị cụ thể, nằm trong section Components của DESIGN.md. Mỗi công thức liệt kê các phần của nó cùng các trạng thái hover và focus ghi nhận được trên trang, để agent lập trình AI của bạn dựng lại component thay vì phải đoán.
Kiểm chứng với trang web thật
Mỗi công thức được render riêng và kiểm tra với trang web thật: so khớp cấu trúc các phần đã render với những gì đo được trên trang, và so sánh từng pixel với ảnh chụp mới của phần tử thật. Công thức nào không đạt sẽ được dựng lại và kiểm tra lần nữa. Công thức vẫn không đạt sẽ được đánh dấu kèm lý do, không bao giờ được giao như đã kiểm chứng. Trang kết quả cho thấy các component khớp đến mức nào và bao nhiêu màu sắc, kiểu chữ của trang web được bao phủ: xem Stripe trong thư viện mẫu.
Hoạt động với trang web giới hạn theo khu vực
Một số trang web chỉ phản hồi khách truy cập từ một số quốc gia. Khi một lượt trích xuất thất bại vì lý do đó, trang kết quả sẽ đưa ra bộ chọn quốc gia, ưu tiên những quốc gia mà trang được ghi nhận là tải được, rồi chạy cùng lượt trích xuất đó qua một trình duyệt ở quốc gia bạn chọn. Một lượt chạy theo quốc gia có giá bằng giá Pro cộng phụ phí 6 credit (16 credit). Nếu lượt trích xuất thất bại, chúng tôi hoàn lại credit cho bạn.
So sánh song song
| TypeUI | Design Extractor | |
|---|---|---|
| Tuân thủ đặc tả | Không cung cấp | Tuân theo đặc tả DESIGN.md của Google: front matter chỉ có các thuộc tính của đặc tả và không có key cấp cao nhất tùy chỉnh, các section chuẩn theo thứ tự của đặc tả, và các mục component giới hạn ở tám thuộc tính của đặc tả với giá trị cụ thể. |
| Công thức component | Component xuất hiện dưới dạng số lượng theo từng loại (nút, liên kết, ô nhập liệu, thẻ, điều hướng, danh sách, bảng) kèm hướng dẫn chung về component. | Mỗi component được chọn từ trang, như header, footer, nút, ô nhập liệu và thẻ, đều đi kèm một công thức: HTML và CSS chắt lọc trong section Components, để agent lập trình AI của bạn có thể dựng lại. |
| Kiểm chứng với trang web thật | Không cung cấp | Có. Mỗi công thức được render riêng và kiểm tra với trang web thật: so khớp cấu trúc các phần và so sánh từng pixel. Component nào không đạt sẽ được đánh dấu kèm lý do, không bao giờ được giao như đã kiểm chứng. |
| Trang web giới hạn theo khu vực | Không cung cấp | Có. Khi một trang web chặn khách truy cập từ một số quốc gia, lượt chạy thất bại sẽ đưa ra bộ chọn quốc gia, ưu tiên những quốc gia mà trang tải được, rồi chạy cùng lượt trích xuất đó qua một trình duyệt ở đó. Một lượt chạy theo quốc gia có giá bằng giá Pro cộng phụ phí 6 credit (16 credit). |
| Đây là gì | DESIGN.md Style Extractor, một tiện ích mở rộng Chrome miễn phí của Bergside SRL, đơn vị phát triển TypeUI. Phiên bản 0.4.0, khoảng 40.000 người dùng trên Chrome Web Store, mã nguồn mở theo giấy phép MIT. | Một công cụ tạo tệp: đưa vào một URL công khai trên trang web, qua MCP hoặc từ tiện ích mở rộng Chrome, và nhận DESIGN.md của trang web đó. |
| Kết quả tuân theo | Mẫu DESIGN.md riêng của TypeUI: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules và nhiều phần khác, không có front matter YAML. Tiện ích cũng có thể viết một SKILL.md. | Đặc tả DESIGN.md của Google: token trong front matter YAML và các section chuẩn theo thứ tự của đặc tả. |
| Cách đọc trang web | Đọc computed style của tối đa 280 phần tử hiển thị trên trang trong tab của bạn, ngay trong trình duyệt, không gửi yêu cầu mạng nào. | Máy chủ của chúng tôi mở URL 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. |
| Những trang đọc được | Trang đang mở trong tab của bạn, kể cả những trang bạn đã đăng nhập. | Chỉ trang công khai. Trang yêu cầu đăng nhập, trên localhost hoặc trong mạng riêng hiện chưa được hỗ trợ. |
| Kết quả được lưu ở đâu | Hiển thị trong popup, nơi bạn sao chép hoặc tải xuống. Nút Quick install ghi SKILL.md vào thư mục skills của Claude Code, Codex hoặc Cursor trong một dự án bạn chọn. | Lưu vào Lượt trích xuất của tôi trong tài khoản của bạn, nơi bạn chỉnh sửa, sao chép hoặc tải xuống. Agent của bạn có thể đọc kết quả qua MCP. |
| Giá | Miễn phí. Không cần tài khoản hay thanh toán. | Credit trả trước, không thuê bao. Gói bắt đầu từ 5 US$ cho 50 credit; một lượt trích xuất Pro tốn 10 credit. Thư viện mẫu và các công cụ miễn phí không tốn gì. |
| Truy cập cho agent | Tiện ích chạy từ popup của nó. CLI riêng và máy chủ MCP được lưu trữ của TypeUI cung cấp các design skill và UI prompt được tuyển chọn của họ. | Một máy chủ MCP từ xa có công cụ trích xuất nhận bất kỳ URL nào, dùng được từ Claude Code, claude.ai, ChatGPT, Codex, Cursor và các client khác. |
TypeUI cung cấp gì
- Một tiện ích mở rộng Chrome miễn phí, mã nguồn mở (MIT) với khoảng 40.000 người dùng trên Chrome Web Store, không cần tài khoản hay thanh toán.
- Chạy hoàn toàn trong trình duyệt của bạn trên trang trong tab, kể cả những trang bạn đã đăng nhập.
- Giá trị kiểu chữ, màu sắc, khoảng cách, bo góc, đổ bóng và chuyển động trong một DESIGN.md theo định dạng riêng của TypeUI, hoặc một SKILL.md.
- Sao chép hoặc tải tệp xuống từ popup, hoặc dùng Quick install để đưa SKILL.md vào một dự án Claude Code, Codex hoặc Cursor.
- Ngoài tiện ích, TypeUI còn cung cấp các design skill và UI prompt được tuyển chọn, một CLI mã nguồn mở và một máy chủ MCP được lưu trữ, cùng một phiên bản Pro với tệp design skill nâng cao, UI prompt cho bố cục và một cộng đồng Discord riêng.
Khác nhau ở đâu
Tiện ích của TypeUI tóm tắt các giá trị style tìm thấy trên một trang và thêm hướng dẫn chung từ mẫu của nó. Design Extractor render trang web, chọn các component và viết một công thức cho từng component, rồi kiểm tra mọi công thức với trang web thật, nên agent của bạn biết component nào có thể dựng lại đúng như đã viết và component nào bị đánh dấu, kèm lý do. Xem ví dụ với Stripe trong thư viện mẫu.
Bạn muốn bắt đầu từ tab đang mở? Tiện ích mở rộng Chrome của Design Extractor gửi tab đó qua cùng quy trình trích xuất, với cùng tài khoản và credit. Agent của bạn cũng có thể bắt đầu một lượt chạy và đọc kết quả qua máy chủ MCP. Xem thêm các tệp hoàn chỉnh trong thư viện mẫu.
Cách chuyển từ TypeUI
- Dán URL của trang web trên trang chủ Design Extractor, hoặc nhấn Extract this page trong tiện ích mở rộng Chrome, rồi chạy một lượt trích xuất Pro.
- Lưu kết quả thành DESIGN.md ở thư mục gốc của repository, thay cho tệp cũ. Dòng trỏ đến tệp trong AGENTS.md hoặc CLAUDE.md vẫn hoạt động như cũ.
- Nếu bạn đã dùng Quick install, hãy xóa thư mục skill design-system mà TypeUI đã ghi và giữ dòng trỏ đến DESIGN.md của bạn.
- Để agent của bạn tự chạy lượt trích xuất, hãy kết nối máy chủ MCP.
Kết luận
Hãy chọn Design Extractor nếu bạn cần một DESIGN.md tuân theo đặc tả của Google, với một công thức cho mỗi component được chọn từ trang, mỗi công thức đều được kiểm tra với trang web thật hoặc được đánh dấu kèm lý do, và được lưu vào tài khoản của bạn. Công cụ này truy cập được các trang web giới hạn theo khu vực. Agent của bạn có thể chạy công cụ qua MCP. Tiện ích của TypeUI miễn phí và đọc được những trang bạn đã đăng nhập, như bảng cho thấy.
Các bài so sánh khác
getdesign.md vs Design Extractor
Một bộ sưu tập tệp DESIGN.md làm sẵn được tuyển chọn, so với một DESIGN.md đúng đặc tả từ bất kỳ URL nào, có công thức component được kiểm tra với trang web thật.
designmd.me vs Design Extractor
Hai công cụ tạo DESIGN.md từ URL, so sánh về mức tuân thủ đặc tả, công thức component, kiểm tra với trang web thật và giá.
Refero Styles vs Design Extractor
Một thư viện lớn, miễn phí về phong cách trang web, so với một DESIGN.md đúng đặc tả từ bất kỳ URL nào, có công thức component được kiểm tra với trang web thật.
FAQ
TypeUI vs Design Extractor: câu hỏi thường gặp
Câu trả lời ngắn về TypeUI và Design Extractor, kiểm tra ngày 2026-10-20.
Có. Vào ngày 2026-10-20, tiện ích này miễn phí và là mã nguồn mở theo giấy phép MIT, không cần tài khoản hay thanh toán. Design Extractor không miễn phí: lượt trích xuất dùng credit trả trước, với gói từ 5 US$ cho 50 credit và 10 credit cho một lượt trích xuất Pro. Thư viện mẫu và các công cụ miễn phí không tốn gì.
Không. Tệp tuân theo định dạng DESIGN.md mã nguồn mở của TypeUI, với các section như Mission, Brand, Style Foundations và Rules, và phiên bản 0.4.0 không viết front matter YAML, nên không tuân theo đặc tả DESIGN.md của Google. Design Extractor tuân theo đặc tả của Google, và Trình kiểm tra DESIGN.md miễn phí kiểm tra bất kỳ tệp nào theo đặc tả đó.
Một DESIGN.md tuân theo đặc tả của Google, với token trong front matter và mỗi component được chọn từ trang, như header, footer, nút, ô nhập liệu và thẻ, dưới dạng một công thức HTML và CSS chắt lọ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, và công thức nào không đạt sẽ được đánh dấu kèm lý do.
Có. Tiện ích đọc trang trong tab của bạn ngay trong trình duyệt, nên hoạt động trên những trang bạn đã đăng nhập. Design Extractor chỉ đọc trang công khai: trang yêu cầu đăng nhập, trên localhost hoặc trong mạng riêng hiện chưa được hỗ trợ.
Design Extractor có thể chạy lượt trích xuất từ một quốc gia khác. Sau khi một lượt chạy thất bại vì lý do đó, trang kết quả sẽ đưa ra bộ chọn quốc gia, ưu tiên những quốc gia mà trang tải được, rồi chạy cùng lượt trích xuất đó qua một trình duyệt ở đó. Một lượt chạy theo quốc gia có giá bằng giá Pro cộng phụ phí 6 credit (16 credit). Nếu lượt trích xuất thất bại, chúng tôi hoàn lại credit cho bạn.
Có. Cả hai đều tạo ra một DESIGN.md nằm trong repository của bạn, nên cách thiết lập agent vẫn giữ nguyên. Chạy trang web qua Design Extractor, trên trang web hoặc bằng tiện ích mở rộng Chrome của nó, và thay tệp cũ. Nếu bạn đã dùng Quick install, hãy xóa thư mục skill design-system mà TypeUI đã ghi và giữ dòng trỏ đến DESIGN.md của bạn.
Nhận DESIGN.md cho trang web bạn cần
Dán bất kỳ URL công khai nào. Pro lấy mẫu các trang chính của trang web và trả về một DESIGN.md đúng đặc tả, có công thức component được kiểm tra với trang web thật.