Rê chuột lên một đoạn text là thấy ngay font đang thực sự được render — kèm gợi ý font Google Fonts miễn phí tương tự. Quét một lượt để lấy màu, kiểu chữ, khoảng cách, bo góc, đổ bóng của cả trang thành token mở thẳng trong Figma. Hover any text to see the font that is actually rendering — with free Google Fonts lookalikes. Scan once to pull the page's colors, type, spacing, radii and shadows into tokens you can open straight in Figma.
Không tài khoản · Không theo dõi · Không máy chủ. Mọi thứ chạy ngay trong trình duyệt của bạn. No account · No tracking · No server. Everything runs inside your browser.
Tính năngFeatures
Không phải đoán từ DevTools, không phải chụp màn hình rồi so màu bằng mắt. No guessing in DevTools, no screenshotting and eyeballing colors.
CSS ghi cả một stack dài, nhưng chỉ một font được dùng. DesignClone đo bằng canvas để biết font nào thực sự vẽ ra chữ trên máy bạn. CSS lists a long stack, but only one font renders. DesignClone measures glyphs on canvas to tell which one is actually drawing the text on your machine.
146 font đối chiếu theo chiều cao chữ x, độ rộng, độ đậm và phân loại — kèm điểm số và lý do vì sao hợp, không chỉ là danh sách đại khái. 146 fonts ranked by x-height, width, weight and classification — each with a score and a reason it matches, not just a vague list.
Một cú bấm để gom màu, thang chữ, khoảng cách, bo góc, độ dày viền, đổ bóng và breakpoint đang được dùng thật trên trang. One click collects the colors, type scale, spacing, radii, border widths, shadows and breakpoints the page actually uses.
Tải file JSON theo định dạng Tokens Studio, import vào Figma là thành biến màu và kiểu chữ dùng được ngay. Download JSON in Tokens Studio format and import it into Figma as usable color variables and text styles.
Alt+Shift+F để bật tắt, bấm để ghim thẻ lại mà đọc kỹ, sao chép CSS hoặc thẻ nhúng chỉ bằng một phím. Alt+Shift+F toggles it, click to pin the card open, copy the CSS or the embed tag with a single key.
Giao diện dịch đủ 7 thứ tiếng, và bộ đối chiếu font có riêng phần tiếng Nhật, Hàn, Trung giản thể và phồn thể. The UI ships in seven languages, and the font database has dedicated Japanese, Korean, Simplified and Traditional Chinese sets.
Cách dùngHow it works
Chưa lên Chrome Web Store, hiện cài bằng chế độ nhà phát triển. Not on the Chrome Web Store yet — install it in developer mode for now.
Mở chrome://extensions, bật Developer mode, bấm Load unpacked rồi chọn thư mục dự án.
Open chrome://extensions, turn on Developer mode, click Load unpacked and pick the project folder.
Bấm icon hoặc nhấn Alt+Shift+F, rồi rê chuột lên bất kỳ đoạn text nào. Bấm chuột để ghim thẻ lại. Click the icon or press Alt+Shift+F, then hover any text. Click to pin the card in place.
Mở tab Design token trong popup, bấm quét, rồi tải file JSON để import vào Figma. Open the Design tokens tab in the popup, hit scan, then download the JSON to import into Figma.
Design tokenDesign tokens
DesignClone đọc style đã tính toán của mọi phần tử đang hiển thị, gom các giá trị lặp lại thành thang chuẩn rồi loại bỏ những giá trị chỉ xuất hiện một lần. DesignClone reads the computed styles of every visible element, groups repeated values into a scale, and drops the one-off outliers.
// import thẳng vào Figma qua Tokens Studio { "color": { "brand-500": { "value": "#6366f1", "type": "color" }, "surface-900": { "value": "#0f111a", "type": "color" } }, "typography": { "body": { "value": { "fontFamily": "Inter", "fontSize": 16, "lineHeight": "1.6" } } }, "spacing": { "2": { "value": 8 }, "3": { "value": 12 } } }
Quyền riêng tưPrivacy
DesignClone không thu thập, không truyền và không bán bất kỳ dữ liệu nào. Không có mã phân tích, không quảng cáo, không tài khoản. DesignClone collects nothing, transmits nothing and sells nothing. No analytics, no ads, no accounts.
Lịch sử 12 mục gần nhất, kết quả quét và lựa chọn ngôn ngữ nằm trong bộ nhớ cục bộ của trình duyệt. Xoá bất cứ lúc nào.Your last 12 captures, the latest scan and your language choice live in local browser storage. Clear them any time.
Chỉ tải file CSS từ Google Fonts để xem trước font gợi ý — và chỉ khi chế độ soi đang bật.Only a stylesheet from Google Fonts, to preview the suggested fonts — and only while the inspector is on.
Toàn bộ tiện ích viết bằng JavaScript thuần, không làm rối mã, không bundler. Bạn tự đọc và kiểm chứng được.The whole extension is plain JavaScript — no obfuscation, no bundler. You can read and verify it yourself.
Đọc chính sách quyền riêng tư đầy đủ → Read the full privacy policy →
Ngôn ngữLanguages
FAQ
Vì font-family là một danh sách ưu tiên, không phải một font. Trình duyệt chọn font đầu tiên mà máy bạn có. DesignClone đo hình dạng chữ thực tế để báo đúng font đang vẽ, nên kết quả có thể khác trên máy khác.Because font-family is a priority list, not a single font. The browser picks the first one your machine has. DesignClone measures the actual glyphs, so it reports what is really drawing — and that can differ on another machine.
Gần như mọi trang web thường. Các trang hệ thống của trình duyệt như chrome:// và Chrome Web Store thì không — Chrome chặn mọi tiện ích chạy ở đó.Nearly every normal web page. Browser system pages like chrome:// and the Chrome Web Store are excluded — Chrome blocks all extensions there.
Một số trang có chính sách bảo mật nội dung chặt sẽ chặn việc nạp font xem trước; khi đó bạn vẫn thấy tên và điểm số, chỉ là không xem trước được bằng chính font đó.Some sites with a strict content security policy block the preview font from loading; you still get names and scores, just not a preview rendered in that font.
Có. File JSON theo định dạng Tokens Studio — cài plugin Tokens Studio trong Figma, chọn import, là ra biến màu và kiểu chữ.Yes. The JSON follows the Tokens Studio format — install the Tokens Studio plugin in Figma, choose import, and you get color variables and text styles.
Script chỉ đọc phần style của trang khi bạn bật chế độ soi. Nó có lưu một đoạn text tối đa 60 ký tự của phần tử bạn bấm vào, để hiển thị trong lịch sử — đoạn này nằm trên máy bạn và không đi đâu cả. Chi tiết đầy đủ nằm ở chính sách quyền riêng tư.The script only reads style information, and only while you have the inspector on. It does keep up to 60 characters of text from the element you click, to show in your history — that snippet stays on your device and goes nowhere. Full detail is in the privacy policy.
Cài trong một phút, không cần tài khoản, không thu thập gì.Install in a minute. No account, nothing collected.
