Simpan Elemen
Jelajahi & simpan
Anda menemukan desain yang Anda sukai dan menyimpan komponen dan elemen tersebut ke perpustakaan DivMagic.
Mesin yang sama dengan ekstensi tepercayaoleh 10.000+ pengembang
Server DivMagic MCP memungkinkan alat pengkodean AI Anda menarik kode dengan piksel sempurna langsung dari situs langsung.
npx -y divmagic-mcpBekerja dengan agen Anda
Claude Code
Cursor
ChatGPTCodex
OpenClaw
Hermes Agent
Windsurf
v0
CopilotAnda menemukan desain yang Anda sukai dan menyimpan komponen dan elemen tersebut ke perpustakaan DivMagic.
Anda membuka Claude atau Codex dan ingin menggunakan desain yang persis seperti itu.
Disalin!
Anda kembali menyalin setiap warna dan spesifikasi komponen ke dalam prompt Anda, lalu ulangi proses untuk setiap proyek.
DivMagic MCP menjembatani kesenjangan antara desain tersimpan dan alur kerja pengkodean AI Anda.
Satu perintah menghubungkan DivMagic ke agen Anda.
npx -y divmagic-mcp
CursorClaude CodeWindsurf
VS CodeOpenAI CodexLainnyaServer MCP yang sama, caranya berbeda tergantung pada pengaturan Anda
Bekerja dengan klien berbahasa MCP mana pun, atau masukkan panggilan alat langsung ke skrip Anda sendiri.
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.
Tempelkan satu baris ke agen Anda — agen membaca dokumen, menambahkan server, dan mulai memanggil alat.
{
"mcpServers": {
"divmagic": {
"command": "npx",
"args": ["-y", "divmagic-mcp"],
"env": { "divmagic_API_KEY": "mm_live_your_key" }
}
}
}Output nyata untuk kartu harga yang diambilchatgpt.comGanti format untuk melihat bagaimana elemen yang sama muncul kembali.
<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">Berikan agen AI Anda akses ke desain, gaya, dan kode yang diperlukan untuk dibuat dari situs web mana pun.
Buat ulang seluruh situs web dari URL, siap dibuat dengan format kode pilihan Anda.
Ekstrak sistem desain situs web dan ubah menjadi tema siap pakai.
Dapatkan elemen merek yang dibutuhkan agen Anda, termasuk warna, font, logo, dan aset lainnya.
Hasilkan output dalam format yang dibutuhkan proyek Anda.
Gunakan pendekatan gaya yang sesuai dengan tumpukan Anda.
Arahkan agen Anda ke elemen mana pun di halaman dan dapatkan kode serta gaya di baliknya.
Untuk menghubungkan alat AI ke DivMagic.
Lebih dari 10.000 orang menggunakan DivMagic untuk menghemat waktu dalam pekerjaan desain dan pengembangan.
“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.
Bergabunglah dengan 10.000+ pengembang, desainer, dan pemilik bisnis untuk menyalin kode dari situs web mana pun dan menggunakannya dalam proyek mereka sendiri.
Dapatkan pembaruan terkini, kiat alur kerja, dan pengumuman fitur baru yang dikirimkan ke kotak masuk Anda.
