Lưu phần tử
Duyệt và lưu
Bạn tìm thấy một thiết kế mình thích và lưu các thành phần, thành phần đó vào thư viện DivMagic.
Công cụ tương tự như tiện ích mở rộng đáng tin cậybởi hơn 10.000 nhà phát triển
Máy chủ DivMagic MCP cho phép các công cụ mã hóa AI của bạn lấy mã pixel hoàn hảo trực tiếp từ các trang web trực tiếp.
npx -y divmagic-mcpLàm việc với đại lý của bạn
Claude Code
Cursor
ChatGPTCodex
OpenClaw
Hermes Agent
Windsurf
v0
CopilotBạn tìm thấy một thiết kế mình thích và lưu các thành phần, thành phần đó vào thư viện DivMagic.
Bạn mở Claude hoặc Codex và muốn sử dụng thiết kế chính xác đó.
Đã sao chép!
Bạn quay lại sao chép mọi thông số về màu sắc và thành phần vào lời nhắc của mình, sau đó lặp lại quy trình cho mọi dự án.
DivMagic MCP thu hẹp khoảng cách giữa các thiết kế đã lưu và quy trình mã hóa AI của bạn.
Một lệnh nối DivMagic vào tác nhân của bạn.
npx -y divmagic-mcp
CursorClaude CodeWindsurf
VS CodeOpenAI CodexKhácCùng một máy chủ MCP, các cách khác nhau tùy thuộc vào thiết lập của bạn
Hoạt động với bất kỳ ứng dụng khách nói tiếng MCP nào hoặc đưa các lệnh gọi công cụ thẳng vào tập lệnh của riêng bạn.
Requires an active DivMagic subscription.
One JSON block in your agent's MCP config — same shape every client uses.
get_element, get_colors, get_fonts — every tool just takes a URL.
Dán một dòng vào tác nhân của bạn — nó đọc tài liệu, thêm máy chủ và bắt đầu gọi các công cụ.
{
"mcpServers": {
"divmagic": {
"command": "npx",
"args": ["-y", "divmagic-mcp"],
"env": { "divmagic_API_KEY": "mm_live_your_key" }
}
}
}Sản lượng thực tế của thẻ định giá được lấy từchatgpt.comChuyển đổi định dạng để xem phần tử tương tự xuất hiện như thế nào.
<div style="box-sizing: border-box; color: rgb(255, 255, 255); column-rule-width: 2px; counter-reset: katexEqnNo 0 mmlEqnNo 0; height: 100%; line-height: 24px; outline-width: 4px; overflow-block: visible; overflow-inline: visible; width: 1746px; background-color: rgb(0, 0, 0)">
<div style="background-color: rgb(33, 33, 33); height: 7196px; width: 1746px">
<div style="grid-template-columns: 548.922px 568.148px 548.93px; grid-template-rows: 64px; height: 64px; padding-left: 32px; padding-right: 32px; position: sticky; width: 1746px; z-index: 50; display: grid; gap: 8px">
<div style="align-items: center; height: 64px; width: 550px; display: flex">
<a href="https://chatgpt.com/" style="align-items: center; cursor: pointer; height: 28px; position: relative; width: 118px; display: flex"
><svg height="28" viewbox="0 0 118 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="ChatGPT blossom logo" role="img" style="height: 28px; overflow-block: hidden; overflow-inline: hidden; width: 118px; overflow: hidden">
<g clip-path="url(#clip0_1116_479)" fill="rgb(255, 255, 255)" style="overflow-block: visible; overflow-inline: visible">
<path
d="M25.9489 10.854C26.5806 8.48721 25.968 5.85728 24.1111 4.0005C22.2544 2.14371 19.6244 1.53106 17.2576 2.16271C15.5236 0.432283 12.9397 -0.352139 10.4032 0.32755C7.86677 1.00724 6.02142 2.97849 5.38482 5.34396C3.01935 5.9804 1.0481 7.82591 0.368566 10.3624C-0.311124 12.8988 0.473299 15.4826 2.20372 17.2166C1.57208 19.5834 2.18473 22.2134 4.04152 24.0701C5.89829 25.927 8.52823 26.5396 10.8951 25.9079C12.6291 27.6384 15.213 28.4228 17.7493 27.7431C20.2857 27.0634 22.1311 25.0921 22.7677 22.7267C25.1333 22.0903 27.1046 20.2447 27.7841 17.7083C28.4638 15.1718 27.6794 12.5881 25.9489 10.854ZM16.3108 4.19745C18.4392 2.96691 21.208 3.2621 23.029 5.08306C24.3143 6.36844 24.8391 8.12667 24.6041 9.79791L18.6092 6.33677C18.3724 6.20006 18.0806 6.20006 17.8438 6.33677L10.8241 10.3897V7.66464C10.8241 7.48081 10.9226 7.30904 11.0817 7.21712L16.3107 4.1976L16.3108 4.19745ZM14.0764 10.2797L17.3288 12.1575V15.9131L14.0764 17.7909L10.8239 15.9131V12.1575L14.0764 10.2797ZM6.67376 7.18129C6.67221 4.72282 8.31227 2.47243 10.7998 1.80602C12.5555 1.3355 14.3406 1.76015 15.6705 2.7993L9.67567 6.26046C9.43886 6.39717 9.29303 6.64989 9.29303 6.92332V15.0291L6.93297 13.6665C6.77386 13.5745 6.67422 13.4032 6.67422 13.2196L6.67376 7.18144V7.18129ZM1.84704 10.7583C2.31757 9.00254 3.57778 7.66881 5.14261 7.0367V13.9588C5.14261 14.2323 5.28843 14.485 5.52524 14.6217L12.545 18.6747L10.1849 20.0373C10.0259 20.1292 9.82765 20.1298 9.66856 20.0379L4.43913 17.0193C2.30923 15.7914 1.18049 13.2458 1.84689 10.7585L1.84704 10.7583ZM11.8419 23.8732C9.71352 25.1038 6.94471 24.8085 5.12376 22.9876C3.83838 21.7022 3.31362 19.944 3.54858 18.2727L9.54344 21.7339C9.7802 21.8706 10.0721 21.8706 10.3089 21.7339L17.3286 17.6809V20.406C17.3286 20.5899 17.2301 20.7617 17.071 20.8535L11.842 23.8731L11.8419 23.8732ZM21.479 20.8894C21.4805 23.3479 19.8404 25.5983 17.3529 26.2646C15.5971 26.7352 13.812 26.3105 12.4822 25.2713L18.477 21.8102C18.7139 21.6735 18.8597 21.4207 18.8597 21.1473V13.0416L21.2198 14.4042C21.3788 14.4961 21.4785 14.6675 21.4785 14.8511L21.479 20.8892V20.8894ZM26.3055 17.3123C25.835 19.0681 24.5748 20.4018 23.0099 21.034V14.1118C23.0099 13.8384 22.8641 13.5857 22.6273 13.4489L15.6075 9.39599L17.9676 8.03337C18.1266 7.94146 18.3249 7.94083 18.484 8.03275L23.7134 11.0513C25.8434 12.2792 26.972 14.8249 26.3056 17.3122L26.3055 17.3123Z"
fill="rgb(255, 255, 255)"></path>
<path d="M41.9916 18.5672C39.4791 18.5672 37.7343 16.6644 37.7343 14.0346C37.7343 11.4048 39.4817 9.50202 41.9539 9.50202C43.7599 9.50202 45.1515 10.5618 45.5638 11.8565H48.3704C47.8806 9.03104 45.2315 6.9707 41.9141 6.9707C37.93 6.9707 35.0078 10.1306 35.0078 14.0346C35.0078 17.9386 37.852 21.0985 41.9351 21.0985C45.3095 21.0985 47.8995 19.078 48.4295 16.2127H45.6439C45.1729 17.5267 43.8002 18.5672 41.9942 18.5672H41.992H41.9916Z" fill="rgb(255, 255, 255)"></path>
<path d="M55.3097 10.8956C54.0145 10.8956 52.9951 11.4654 52.4251 12.2494V7.16797H49.875V20.9027H52.4251V15.6233C52.4251 14.0927 53.2494 13.0921 54.5844 13.0921C55.8018 13.0921 56.4868 14.0341 56.4868 15.3476V20.9001H59.0369V14.9357C59.0369 12.5033 57.5465 10.8925 55.3097 10.8925V10.8947V10.8956Z" fill="rgb(255, 255, 255)"></path>
<path d="M69.4973 14.5063C69.4973 12.2697 67.9666 10.8965 65.1411 10.8965C62.8264 10.8965 60.9802 12.1917 60.6672 14.0753H63.2387C63.434 13.4279 64.1405 12.9166 65.1227 12.9166C66.3991 12.9166 67.0067 13.5828 67.0067 14.7414V14.8001L64.5152 15.0168C61.9064 15.2335 60.4531 16.2931 60.4531 18.2944C60.4531 19.9827 61.9059 21.101 63.9264 21.101C65.2803 21.101 66.5944 20.571 67.1454 19.6881C67.1454 20.1188 67.1853 20.5123 67.2632 20.9054H69.6369C69.538 20.2768 69.5003 19.5515 69.5003 18.7085V14.5098L69.4977 14.5051L69.4973 14.5063ZM67.0036 16.8425C67.0036 18.0011 66.1396 19.1782 64.3948 19.1782C63.4528 19.1782 62.942 18.726 62.942 18.0598C62.942 17.3344 63.4318 16.8824 64.5314 16.7834L67.0036 16.5667V16.842V16.8425Z" fill="rgb(255, 255, 255)"></path>
<path d="M74.8572 7.91406H72.3071V11.0927H70.2656V13.1532H72.3071V17.9802C72.3071 19.8453 73.2679 20.9047 75.3283 20.9047H77.3698V18.7856H76.0746C75.2105 18.7856 74.8572 18.4915 74.8572 17.6861V13.1535H77.3698V11.0932H74.8572V7.91449V7.91406Z" fill="rgb(255, 255, 255)"></path>
<path d="M90.0387 13.5641H85.6422V15.7609H89.3908C89.1344 17.5858 87.4268 18.6854 85.5245 18.6854C82.7765 18.6854 81.1684 16.6648 81.1684 14.035C81.1684 11.4053 82.9744 9.4832 85.4444 9.4832C87.1327 9.4832 88.508 10.465 88.8608 11.5624H91.6653C91.1352 8.83581 88.6231 6.9707 85.4063 6.9707C81.4432 6.9707 78.5 10.1682 78.5 14.0534C78.5 17.9386 81.2081 21.0985 85.2509 21.0985C87.0968 21.0985 88.764 20.2743 89.5082 19.1559V20.9033H91.7852V15.311C91.7852 14.1926 91.1588 13.5636 90.0382 13.5636L90.0387 13.5641Z" fill="rgb(255, 255, 255)"></path>
<path d="M99.8947 7.16841H93.8125V20.9031H96.4003V15.7416H99.9132C102.624 15.7416 104.545 14.1522 104.545 11.4843C104.545 8.81642 102.624 7.16797 99.8947 7.16797V7.16841ZM99.7178 13.4671H96.4003V9.52289H99.7178C101.054 9.52289 101.917 10.2881 101.917 11.4843C101.917 12.6806 101.054 13.4668 99.7178 13.4668V13.4671Z" fill="rgb(255, 255, 255)"></path>
<path d="M105.189 7.16797V9.52246H109.88V20.9027H112.468V9.52246H117.178V7.16797H105.188H105.19H105.189Z" fill="rgb(255, 255, 255)"></path>
</g>
<defs fill="none" style="overflow-block: visible; overflow-inline: visible">
<clippath id="clip0_1116_479" fill="none"><rect height="28" fill="rgb(255, 255, 255)" style="height: 28px; width: 118px"></rect></clippath>
</defs></svg
></a>
</div>
<nav style="align-items: center; height: 64px; width: 570px; display: flex">
<ul style="align-items: center; height: 36px; width: 570px; display: flex; list-style-type: none; gap: 16px">
<li style="height: 36px; width: 60px; display: list-item">
<a href="https://chatgpt.com/overview/" style="align-items: center; color: rgb(205, 205, 205); cursor: pointer; font-size: 14px; height: 36px; letter-spacing: 0px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; width: 60px; display: flex; border-radius: 8px; gap: 2px"><span style="height: 24px; width: 40px">About</span></a>
</li>
<li style="height: 36px; width: 76px; display: list-item">
<div style="height: 36px; position: relative; width: 76px">
<button style="align-items: center; appearance: button; color: rgb(205, 205, 205); cursor: pointer; font-size: 14px; height: 36px; letter-spacing: 0px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; text-align: center; width: 76px; display: inline-flex"><span style="height: 24px; width: 56px">Features</span></button>
</div>
</li>
<li style="height: 36px; width: 58px; display: list-item">
<div style="height: 36px; position: relative; width: 58px">
<button style="align-items: center; appearance: button; color: rgb(205, 205, 205); cursor: pointer; font-size: 14px; height: 36px; letter-spacing: 0px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; text-align: center; width: 58px; display: inline-flex"><span style="height: 24px; width: 38px">Learn</span></button>
</div>
</li>
<li style="height: 36px; width: 62px; display: list-item">
<div style="height: 36px; position: relative; width: 62px">
<a href="https://chatgpt.com/codex/" style="align-items: center; color: rgb(205, 205, 205); cursor: pointer; font-size: 14px; height: 36px; letter-spacing: 0px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; width: 62px; display: inline-flex"><span style="height: 24px; width: 42px">Codex</span></a>
</div>
</li>
<li style="height: 36px; width: 76px; display: list-item">
<div style="height: 36px; position: relative; width: 76px">Cấp cho tác nhân AI của bạn quyền truy cập vào các thiết kế, kiểu dáng và mã mà nó cần để xây dựng từ bất kỳ trang web nào.
Tạo lại toàn bộ trang web từ một URL, sẵn sàng xây dựng với định dạng mã ưa thích của bạn.
Trích xuất hệ thống thiết kế của trang web và biến nó thành một chủ đề sẵn sàng sử dụng.
Nhận các yếu tố thương hiệu mà đại lý của bạn cần, bao gồm màu sắc, phông chữ, biểu tượng và các nội dung khác.
Tạo đầu ra theo định dạng mà dự án của bạn cần.
Sử dụng phương pháp tạo kiểu phù hợp với ngăn xếp của bạn.
Trỏ tác nhân của bạn tới bất kỳ thành phần nào trên một trang và lấy mã cũng như kiểu đằng sau nó.
Để kết nối các công cụ AI với DivMagic.
Hơn 10.000 người sử dụng DivMagic để tiết kiệm thời gian cho công việc thiết kế và phát triển.
“DivMagic saves me a lot of time and money. With just one click, I can copy designs and code from any website effortlessly.”
Very good I like it very much. Very easy to use. Support is also very helpful. I bought monthly package first and then asked to switch to lifetime and they gave the price difference back to me, much appreciated!
“If you build landing pages or SaaS UIs, this tool is a huge timesaver.”
Michael Hoffman
@Mokkapps
🛠️ DivMagic 👉🏻 A Chrome extension to convert elements directly into Tailwind CSS (including colors). 👉🏻 See it in action: https://youtube.com/watch?v=QxPAsDSOIrI https://chrome.google.com/webstore/detail/divmagic/okpadhgilncoodafepkdmlneojcehclf#divmagic
Amazing tool! Makes me 10x more productive when building my own projects. Well worth the price!
Super helpful addon! Paid for the full product because it saves me time and effort.
“Perfect for small businesses wanting big results without a headache.”
Wordpress integration is amazing!!!!! We were working with a designer to build a design based on a template and she worked on it for weeks and couldn't get it right. It literally took one click with divmagic to export the template to wordpress
Works great with AI coding tools. Very useful.
DivMagic is the tool I was looking for! I can add the design elements I like from websites to my project with a single click. HTML, JSX, and even Tailwind CSS transcoding options make my work incredibly easy. Especially the browser DevTools integration is very practical, I can work without any interruptions. It's really a life saver, it deserves 5 stars!
“Imagine effortlessly copying styles even from iframes and adapting them to different screen sizes with built in media query support. No more manual adjustments!”
The extension is you, clicking things in the browser. The MCP server lets your agent request the same clean output straight from a URL — no browser tab required.
No. It's read-only — it returns code and tokens, and your agent decides what to do with them.
MCP access is included on Pro and above. Free accounts get a limited number of calls per month to try it out.
Anything that speaks MCP — Cursor, Claude Code, Windsurf, VS Code with Copilot's agent mode, Cline, and Zed.
Tham gia cùng hơn 10.000 nhà phát triển, nhà thiết kế và chủ doanh nghiệp để sao chép mã từ bất kỳ trang web nào và sử dụng mã đó trong các dự án của riêng họ.
Nhận thông tin cập nhật mới nhất, mẹo về quy trình làm việc và thông báo tính năng mới được gửi tới hộp thư đến của bạn.
