요소 저장
탐색 및 저장
마음에 드는 디자인을 찾고 해당 구성 요소와 요소를 DivMagic 라이브러리에 저장하세요.
신뢰할 수 있는 확장 프로그램과 동일한 엔진10,000명 이상의 개발자
DivMagic MCP 서버를 사용하면 AI 코딩 도구가 라이브 사이트에서 직접 픽셀까지 완벽한 코드를 가져올 수 있습니다.
npx -y divmagic-mcp에이전트와 협력
Claude Code
Cursor
ChatGPTCodex
OpenClaw
Hermes Agent
Windsurf
v0
Copilot마음에 드는 디자인을 찾고 해당 구성 요소와 요소를 DivMagic 라이브러리에 저장하세요.
Claude 또는 Codex를 열고 정확한 디자인을 사용하고 싶습니다.
복사되었습니다!
돌아가서 모든 색상과 구성 요소 사양을 프롬프트에 복사한 다음 모든 프로젝트에 대해 프로세스를 반복합니다.
DivMagic MCP는 저장된 디자인과 AI 코딩 워크플로우 사이의 격차를 해소합니다.
하나의 명령으로 DivMagic을 에이전트에 연결합니다.
npx -y divmagic-mcp
CursorClaude CodeWindsurf
VS CodeOpenAI Codex다른동일한 MCP 서버, 설정에 따라 다른 방식
MCP를 사용하는 클라이언트와 함께 작동하거나 도구 호출을 자신의 스크립트에 직접 추가하세요.
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.
에이전트에 한 줄을 붙여넣으면 문서를 읽고, 서버를 추가하고, 도구 호출을 시작합니다.
{
"mcpServers": {
"divmagic": {
"command": "npx",
"args": ["-y", "divmagic-mcp"],
"env": { "divmagic_API_KEY": "mm_live_your_key" }
}
}
}다음에서 가져온 가격 책정 카드의 실제 출력chatgpt.com형식을 전환하여 동일한 요소가 어떻게 나타나는지 확인하세요.
<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">AI 에이전트가 모든 웹사이트에서 구축하는 데 필요한 디자인, 스타일 및 코드에 액세스할 수 있도록 하세요.
선호하는 코드 형식으로 구축할 준비가 된 URL에서 전체 웹사이트를 다시 만드세요.
웹사이트의 디자인 시스템을 추출하여 바로 사용할 수 있는 테마로 바꿔보세요.
색상, 글꼴, 로고 및 기타 자산을 포함하여 상담원에게 필요한 브랜드 요소를 얻으세요.
프로젝트에 필요한 형식으로 출력을 생성합니다.
스택에 맞는 스타일 접근 방식을 사용하십시오.
에이전트가 페이지의 모든 요소를 가리키도록 하고 그 뒤에 있는 코드와 스타일을 가져옵니다.
10,000명이 넘는 사람들이 DivMagic을 사용하여 디자인 및 개발 작업 시간을 절약하고 있습니다.
“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.
10,000명 이상의 개발자, 디자이너, 비즈니스 소유자와 함께 웹사이트에서 코드를 복사하고 자신의 프로젝트에서 사용하세요.
받은편지함으로 전달되는 최신 업데이트, 워크플로 팁, 새로운 기능 공지사항을 받아보세요.
