Limited time:Save $145on lifetime access→See our prices to get DivMagic with discounts!

Browser-extensie MCP-serverNieuw

Dezelfde engine als de vertrouwde extensiedoor meer dan 10.000 ontwikkelaars

Ontvang schone code van elke site,in uw AI-editor

Met de DivMagic MCP-server kunnen uw AI-coderingstools pixel-perfecte code rechtstreeks van live sites ophalen.

Koop nu DivMagic Instellen voor agenten

npx -y divmagic-mcp

Probeer een monster

Kader

Styling

Pixel-perfect HTML & CSS
Tailwind-ready output
Extract themes & colors
Real-time content from any URL
Works with your AI coding tools
MCP support

Werkt samen met uw makelaar

Claude Code

Cursor

ChatGPT

Codex

OpenClaw

Hermes Agent

Windsurf

Copilot

Stop met het schakelen tussen uw browser en uw code-editor

Element opslaan

Bladeren en opslaan

U vindt een ontwerp dat u bevalt en slaat deze componenten en elementen op in de DivMagic-bibliotheek.

Begin met bouwen

U opent Claude of Codex en wilt precies dat ontwerp gebruiken.

Gekopieerd!

Kopiëren, plakken, herhalen

U gaat terug om elke kleur- en componentspecificatie naar uw prompt te kopiëren en herhaalt het proces vervolgens voor elk project.

DivMagic MCP overbrugt de kloof tussen uw opgeslagen ontwerpen en uw AI-coderingsworkflow.

Installeer binnen enkele seconden

Eén commando verbindt DivMagic met uw agent.

Terminal

npx -y divmagic-mcp

Cursor

Claude Code

Windsurf

VS Code

OpenAI CodexAnder

Bekijk de installatiehandleiding

Of kies hoe u verbinding maakt

Dezelfde MCP-server, verschillende manieren, afhankelijk van uw configuratie

Noem het zelf

Werkt met elke MCP-sprekende client, of zet de toolaanroepen rechtstreeks in uw eigen scripts.

Get your key

Requires an active DivMagic subscription.

Add the server

One JSON block in your agent's MCP config — same shape every client uses.

Call a tool

get_element, get_colors, get_fonts — every tool just takes a URL.

Haal uw API-sleutel op

Laat uw makelaar het doen

AANBEVOLEN

Plak één regel in uw agent: deze leest de documenten, voegt de server toe en begint tools aan te roepen.

{
  "mcpServers": {
    "divmagic": {
      "command": "npx",
      "args": ["-y", "divmagic-mcp"],
      "env": { "divmagic_API_KEY": "mm_live_your_key" }
    }
  }
}

sample_colorscopy_componentisolate_elementread_typographymeasure_spacing

Zie wat DivMagic daadwerkelijk retourneert

Echte output voor een prijskaart die eruit is getrokkenchatgpt.comWissel van formaat om te zien hoe hetzelfde element terugkomt.

chatgpt.html

900 ms

Voorbeeld van de pagina waar DivMagic het element uit heeft gehaald

<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">

Alles wat uw agent kan doen met DivMagic

Geef uw AI-agent toegang tot de ontwerpen, stijlen en code die hij nodig heeft om vanaf elke website te bouwen.

Kloon een website

Maak een volledige website opnieuw op basis van een URL, klaar om te bouwen met het codeformaat van uw voorkeur.

Extraheer een thema

Pak het ontwerpsysteem van een website uit en verander het in een kant-en-klaar thema.

Extraheer een merk

Verkrijg de merkelementen die uw agent nodig heeft, inclusief kleuren, lettertypen, logo's en andere elementen.

Kies uw code

Genereer de uitvoer in het formaat dat uw project nodig heeft.

Kies uw stijl

Gebruik de stijlaanpak die bij uw stapel past.

Extraheer elk element

Wijs uw agent naar een willekeurig element op een pagina en haal de code en stijlen erachter op.

Op krediet gebaseerde prijzen voor DivMagic MCP

NIEUW

DivMagic MCP

Voor het verbinden van AI-tools met DivMagic.

$ 10

eenmalig, geen abonnement/ 1000 studiepunten

✓Kopieer een webelement

✓Genereer React en HTML

✓Tailwind-CSS exporteren

✓Behoud responsieve stijlen

✓Extraheer kleuren, lettertypen en middelen

✓Verzend browsercontext via MCP

✓Bouw sneller met AI-coderingstools

Koop kredieten Zie de installatiehandleiding

Wat mensen zeggen over DivMagic

Meer dan 10.000 mensen gebruiken DivMagic om tijd te besparen op ontwerp- en ontwikkelingswerk.

@somesai

“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!

Regina Richardson

SaaS Tool Insider

“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

42ReageerKopieer link

Amazing tool! Makes me 10x more productive when building my own projects. Well worth the price!

Tomas Ye

Super helpful addon! Paid for the full product because it saves me time and effort.

Torralaq

LTD Trend

“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

Debra Serrano

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!

Ertuğrul Emre Cihan

@pcsaas

“Imagine effortlessly copying styles even from iframes and adapting them to different screen sizes with built in media query support. No more manual adjustments!”

Veelgestelde vragen

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.

Begin vandaag nog met bouwen met DivMagic MCP

Sluit je aan bij meer dan 10.000 ontwikkelaars, ontwerpers en bedrijfseigenaren om code van elke website te kopiëren en deze in hun eigen projecten te gebruiken.

Get DivMagic for 42% off

Limited time deal for 22:45

Blijf op de hoogte

Ontvang de nieuwste updates, workflowtips en aankondigingen van nieuwe functies in uw inbox.