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

Webbläsartillägg MCP-serverNy

Samma motor som förlängningen betroddav 10 000+ utvecklare

Få ren kod från vilken webbplats som helst,inuti din AI Editor

DivMagic MCP-servern låter dina AI-kodningsverktyg dra pixel-perfekt kod direkt från livesajter.

Skaffa DivMagic nu Konfiguration för agenter

npx -y divmagic-mcp

Prova ett prov

Ram

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

Arbetar med din agent

Claude Code

Cursor

ChatGPT

Codex

OpenClaw

Hermes Agent

Windsurf

Copilot

Sluta växla mellan din webbläsare och din kodredigerare

Spara element

Bläddra och spara

Du hittar en design du gillar och sparar dessa komponenter och element i DivMagic-biblioteket.

Börja bygga

Du öppnar Claude eller Codex och vill använda den exakta designen.

Kopierade!

Kopiera, klistra in, upprepa

Du går tillbaka för att kopiera varje färg och komponentspecifikation till din prompt och upprepar sedan processen för varje projekt.

DivMagic MCP överbryggar klyftan mellan dina sparade mönster och ditt AI-kodningsarbetsflöde.

Installera på några sekunder

Ett kommando kopplar DivMagic till din agent.

Terminal

npx -y divmagic-mcp

Cursor

Claude Code

Windsurf

VS Code

OpenAI CodexAndra

Se installationsguiden

Eller välj hur du ansluter

Samma MCP-server, olika sätt beroende på din inställning

Kalla det själv

Fungerar med alla MCP-talande klienter, eller släpp verktygsanropen direkt i dina egna skript.

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.

Hämta din API-nyckel

Låt din agent göra det

REKOMMENDERAD

Klistra in en rad i din agent – den läser dokumenten, lägger till servern och börjar anropa verktyg.

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

sample_colorscopy_componentisolate_elementread_typographymeasure_spacing

Se vad DivMagic faktiskt returnerar

Verklig utgång för ett priskort som hämtats frånchatgpt.comByt format för att se hur samma element kommer tillbaka.

chatgpt.html

900 ms

Förhandsvisning av sidan DivMagic hämtade elementet från

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

Allt din agent kan göra med DivMagic

Ge din AI-agent tillgång till designen, stilarna och koden den behöver för att bygga från vilken webbplats som helst.

Klona en webbplats

Återskapa en hel webbplats från en URL, redo att bygga med ditt föredragna kodformat.

Extrahera ett tema

Extrahera en webbplatss designsystem och förvandla det till ett färdigt att använda tema.

Extrahera ett varumärke

Få de varumärkeselement som din agent behöver, inklusive färger, typsnitt, logotyper och andra tillgångar.

Välj din kod

Generera utdata i det format som ditt projekt behöver.

Välj din styling

Använd stylingmetoden som passar din stack.

Extrahera valfritt element

Peka din agent på valfritt element på en sida och få koden och stilarna bakom den.

Kreditbaserad prissättning för DivMagic MCP

DivMagic MCP

För att ansluta AI-verktyg till DivMagic.

10 USD

engång, ingen prenumeration/ 1000 poäng

✓Kopiera valfritt webbelement

✓Generera React och HTML

✓Exportera Tailwind CSS

✓Bevara responsiva stilar

✓Extrahera färger, typsnitt och tillgångar

✓Skicka webbläsarkontext via MCP

✓Bygg snabbare med AI-kodningsverktyg

Köp krediter Se installationsguiden

Vad folk säger om DivMagic

Över 10 000 personer använder DivMagic för att spara tid på design och utvecklingsarbete.

@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

42SvaraKopiera länk

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

Vanliga frågor

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.

Börja bygga med DivMagic MCP idag

Gå med över 10 000 utvecklare, designers och företagsägare för att kopiera kod från vilken webbplats som helst och använda den i sina egna projekt.

Get DivMagic for 42% off

Limited time deal for 22:45

Håll dig uppdaterad

Få de senaste uppdateringarna, arbetsflödestips och meddelanden om nya funktioner levererade till din inkorg.