designmd.me vs Design Extractor
designmd.me và Design Extractor đều biến URL của một trang web thành DESIGN.md cho agent lập trình AI của bạn. 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 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 designmd.me, trang bảng giá của họ, tài liệu CLI của họ, trang Figma của họ và một tệp trong mục Discover 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
| designmd.me | Design Extractor | |
|---|---|---|
| Tuân thủ đặc tả | Viết front matter YAML với các token của đặc tả, cùng các key cấp cao nhất mà đặc tả không định nghĩa, như source, themes và breakpoints. Các section là của riêng công cụ này, được đánh số từ Visual Theme & Atmosphere đến Known Gaps. | 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 là một danh sách giá trị style, như background, font, padding, border và radius, 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 công cụ tạo tệp: dán URL, nhận DESIGN.md. Do Crowdlinker phát triển. | Một công cụ tạo tệp: dán URL công khai, nhận DESIGN.md của trang web đó. |
| Số trang được đọc | Một trang (trang đích) hoặc nhiều trang (các trang chính của trang web), bạn chọn cho mỗi lượt chạy. | Pro lấy mẫu các trang chính của trang web. |
| Giá mỗi lượt chạy | 4 credit cho một trang, 8 credit cho nhiều trang, chỉ tính phí khi thành công. | 10 credit cho một lượt trích xuất Pro. Lượt chạy thất bại do phía chúng tôi được hoàn trả. |
| Gói credit | 5 US$ cho 50, 15 US$ cho 175, 30 US$ cho 375, hoặc nạp số lượng tùy chọn. Credit không bao giờ hết hạn. | 5 US$ cho 50, 10 US$ cho 110, 25 US$ cho 300. Credit không bao giờ hết hạn. Không thuê bao. |
| Bắt đầu miễn phí | 4 credit miễn phí ở lần truy cập đầu tiên và thêm 20 khi bạn đăng ký. Không cần thẻ để bắt đầu. | Không có credit miễn phí khi đăng ký. Thư viện mẫu và các công cụ miễn phí không tốn gì. |
| Tính năng thêm | Một tệp HTML xem trước (thêm 8 credit), nhập Variables, Styles và một board vào Figma (12 credit, một lần cho mỗi lần tạo), và so sánh song song hai trang web. | Chế độ xem Mã nguồn và Xem trước của tệp cùng ô Hệ thống trực quan trên trang kết quả, kèm các công cụ miễn phí: trình kiểm tra DESIGN.md, công cụ tìm font chữ và công cụ trích xuất bảng màu. |
| Ví dụ làm sẵn | Mục Discover gồm các trang web đã được tạo, có danh mục và bảng xếp hạng. | Thư viện mẫu gồm các thương hiệu đã được trích xuất sẵn, đọc và sao chép miễn phí. |
| Truy cập cho agent | Một CLI (@crowdlinker/designmdme) và một agent skill cho Claude Code, Cursor và các agent khác hỗ trợ skill. Không có máy chủ MCP. | Một máy chủ MCP từ xa cho Claude Code, claude.ai, ChatGPT, Codex, Cursor và các client khác, cùng một plugin cho Claude Code và Codex. |
| 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ở. |
designmd.me cung cấp gì
- Credit miễn phí ở lần truy cập đầu tiên và khi đăng ký, không cần thẻ để bắt đầu.
- Lượt chạy một trang giá 4 credit và lượt chạy nhiều trang giá 8, chỉ tính phí khi thành công.
- Một trang HTML mẫu và tính năng nhập Variables và Styles vào Figma, mỗi thứ tốn thêm credit.
- So sánh song song hệ thống thiết kế của hai trang web.
- Một CLI và một agent skill cho Claude Code, Cursor và các agent khác hỗ trợ skill.
Khác nhau ở đâu
Cả hai công cụ đều trả về DESIGN.md từ một URL. Design Extractor đi kèm mỗi component được chọn từ trang dưới dạng một công thức và kiểm tra nó 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.
Design Extractor cũng có mặt ở nơi bạn làm việc. Agent của bạn có thể bắt đầu một lượt trích xuất và đọc kết quả qua máy chủ MCP, và tiện ích mở rộng Chrome trích xuất tab bạn đang mở. Xem thêm các tệp hoàn chỉnh trong thư viện mẫu.
Cách chuyển từ designmd.me
- 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, 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ũ.
- Để agent của bạn tự chạy lượt trích xuất, hãy kết nối máy chủ MCP thay cho CLI của designmd.me.
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. 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. designmd.me tốn ít credit hơn cho mỗi lượt chạy, 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.
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.
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
designmd.me vs Design Extractor: câu hỏi thường gặp
Câu trả lời ngắn về designmd.me và Design Extractor, kiểm tra ngày 2026-10-20.
Có thể bắt đầu miễn phí: vào ngày 2026-10-20, khách truy cập mới nhận 4 credit miễn phí và thêm 20 khi đăng ký, không cần thẻ. Sau đó, gói credit bắt đầu từ 5 US$ cho 50 credit. Một lượt chạy một trang tốn 4 credit và một lượt chạy nhiều trang tốn 8.
designmd.me. Gói của họ bắt đầu từ 5 US$ cho 50 credit, còn gói của chúng tôi từ 5 US$ cho 50 credit. Một lượt chạy nhiều trang của designmd.me tốn 8 credit và một lượt chạy một trang tốn 4; một lượt chạy Pro của Design Extractor tốn 10. Bản xem trước HTML và tính năng nhập vào Figma của họ tốn thêm credit.
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.
Không. designmd.me cung cấp một CLI và một agent skill, nhưng không có máy chủ MCP. Design Extractor là một máy chủ MCP từ xa: claude.ai, Claude Desktop, ChatGPT và Claude Code kết nối bằng cách đăng nhập, còn Codex, Cursor và các script dùng khóa API.
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 và thay tệp cũ.
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.