Refero Styles vs Design Extractor
Design Extractor tạo một DESIGN.md từ bất kỳ URL công khai nào bạn đưa vào. Tệp 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.
Refero Styles là một thư viện lớn, miễn phí về style của các trang web, mỗi style có màu sắc, kiểu chữ, khoảng cách và component ở nhiều định dạng. Mới biết đến định dạng này? Hãy đọc DESIGN.md là gì.
Đã kiểm tra ngày , đối chiếu với styles.refero.design, một trang style của họ và sitemap style của họ. Ư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
| Refero Styles | 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 | Mỗi component được mô tả bằng văn bản, với vai trò và số đo, không có HTML. | 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ì | Một thư viện style trang web miễn phí, đang ở giai đoạn beta, của Refero, sản phẩm tham khảo UI tại refero.design. | Một công cụ tạo tệp: bạn đưa vào một URL công khai, công cụ trả về DESIGN.md của trang web đó. |
| Mọi trang web theo yêu cầu | Không cung cấp | Có. Dán bất kỳ URL công khai nào và lượt chạy bắt đầu ngay. |
| Phạm vi | 1.342 trang style, theo danh sách trong sitemap style của họ. | Mọi trang web công khai, cùng một thư viện mẫu gồm các thương hiệu đã được trích xuất sẵn. |
| Định dạng cho mỗi style | DESIGN.md (bản gọn và bản mở rộng), Tailwind v4, biến CSS và design token. | Một DESIGN.md, với token trong front matter và công thức component bằng HTML và CSS. |
| Giá | Xem và sao chép miễn phí. | 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. |
| Độ mới | Bản chụp. Style của Apple được trích xuất ngày 2026-09-20. | Tạo từ trang web thật tại thời điểm bạn chạy. |
| Truy cập cho agent | Mỗi trang style đều liên kết đến MCP của Refero cho Claude, ChatGPT, Cursor, Codex và nhiều client khác. | 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. |
| Tiện ích mở rộng trình duyệt | Không cung cấp | Một tiện ích mở rộng Chrome trích xuất tab bạn đang mở. |
Refero Styles cung cấp gì
- Một thư viện style trang web miễn phí, có thể duyệt theo phong cách như SaaS chế độ tối hay bố cục kiểu tạp chí.
- Nhiều định dạng cho mỗi style: DESIGN.md (bản gọn và bản mở rộng), Tailwind v4, biến CSS và design token.
- Liên kết đến MCP của Refero cho Claude, ChatGPT, Cursor, Codex và nhiều client khác.
Một thư viện so với mọi URL theo yêu cầu
Một thư viện chỉ bao gồm những trang web mà ai đó đã thêm vào. Design Extractor đọc trang web thật mà bạn chỉ định, nên nó bao gồm cả sản phẩm của chính bạn, trang của khách hàng, của đối thủ hay của một thương hiệu ngách, đúng như giao diện hôm nay.
Dán URL trên trang chủ, hoặc để agent của bạn làm qua máy chủ MCP. Xem các tệp hoàn chỉnh, kèm công thức và kết quả kiểm tra, trong thư viện mẫu.
Cách chuyển từ Refero Styles
- Dán URL của trang web trên trang chủ Design Extractor và 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 và giữ nguyên dòng trỏ đến nó trong AGENTS.md hoặc CLAUDE.md. Kiểm tra các chỉnh sửa thủ công bằng Trình kiểm tra DESIGN.md miễn phí.
- Hoặc để agent của bạn làm: kết nối máy chủ MCP và yêu cầu agent trích xuất trang web.
Kết luận
Hãy chọn Design Extractor nếu bạn cần DESIGN.md cho bất kỳ trang web công khai nào, không chỉ những trang có trong một thư viện, với công thức component được kiểm tra với trang web thật. Công cụ đọc trang web đúng như giao diện hiện tại và 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, được đánh dấu kèm lý do khi không đạt. 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.
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á.
TypeUI vs Design Extractor
Tiện ích mở rộng Chrome miễn phí của TypeUI, vốn điền mẫu riêng của nó từ các style trong tab của bạn, so với một DESIGN.md đúng đặc tả có công thức component được kiểm tra với trang web thật.
FAQ
Refero Styles vs Design Extractor: câu hỏi thường gặp
Câu trả lời ngắn về Refero Styles và Design Extractor, kiểm tra ngày 2026-10-20.
Có. Vào ngày 2026-10-20, việc xem và sao chép style trên styles.refero.design là miễn phí. Các trang của họ liên kết đến MCP của Refero trên refero.design.
Không. Refero Styles không có cách nào để gửi URL của riêng bạn: bạn chọn từ thư viện của họ. Design Extractor tạo DESIGN.md từ bất kỳ URL công khai nào khi bạn chạy.
Không. Design Extractor tạo ra một tệp: 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 dưới dạng một công thức HTML và CSS chắt lọc. Agent lập trình AI của bạn đọc tệp và viết style theo cách dự án của bạn đang dùng.
Mỗi công thức component được render riêng và so sánh với trang web thật: so khớp cấu trúc các phần 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 đánh dấu kèm lý do, không bao giờ được giao như đã kiểm chứng.
Sitemap style của họ liệt kê 1.342 trang style vào ngày 2026-10-20.
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.
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.