Claude Design MCP तीन अलग चीज़ों को दर्शाता है: Claude Code 2.1.181 में HTTP 404 लौटाने वाला built-in सर्वर, /design-sync कमांड, और एक कम्युनिटी सर्वर। Claude Code और Codex के लिए सटीक सेटअप देखें, साथ में हर रिपोर्ट किए गए एरर का फ़िक्स भी।
Claude Design MCP खोजेंगे तो आप एक साथ तीन अलग-अलग जगहों पर पहुँचते हैं। एक है built-in सर्वर, जिसे Claude Code अपने-आप इंजेक्ट करता है और जून 2026 में कई लोगों के लिए इसने 404 लौटाया। दूसरा है /design-sync कमांड, जो आपकी कंपोनेंट लाइब्रेरी को Claude Design में भेजता है। तीसरा है एक कम्युनिटी सर्वर, जो टर्मिनल से Claude Design वेबसाइट को चलाता है, और तीनों में से यही अकेला है जो Codex से भी जुड़ता है।
इन तीनों को आपस में मिला देना ही ज़्यादातर "काम नहीं कर रहा" रिपोर्टों के बेकार जाने की वजह है: एक के लिए किया गया फ़िक्स बाकी किसी पर असर नहीं करता। यह आर्टिकल तीनों को अलग करता है, Claude Code और Codex के लिए सटीक server setup कमांड दिखाता है, और हर उस एरर मैसेज से गुज़रता है जो लोगों ने असल में रिपोर्ट किया है, साथ में उसका कारण और सबसे छोटा रास्ता।
💡 संक्षेप में: built-in 404 सर्वर-साइड समस्या है जिसे आप लोकली ठीक नहीं कर सकते,
/design-syncलॉगिन और प्रोजेक्ट की ज़रूरतों पर विफल होता है, और कम्युनिटी सर्वर Chrome सेशन और टाइमआउट पर विफल होता है। अपने एरर से मेल खाने वाले सेक्शन पर जाएँ।
Claude Design Anthropic का टूल है, जिससे Claude के साथ चैट करके प्रोटोटाइप, स्लाइड और मार्केटिंग सामग्री बनाई जाती है। यह April 17, 2026 को Anthropic Labs के तहत लॉन्च हुआ, Claude Opus 4.7 पर चलता है, और Pro, Max, Team और Enterprise प्लान पर उपलब्ध है। Enterprise संगठनों में यह डिफ़ॉल्ट रूप से बंद मिलता है, इसलिए इसे एडमिन को चालू करना पड़ता है। डिज़ाइन तैयार होने पर आप उसे फ़ोल्डर, PDF, PPTX, स्टैंडअलोन HTML, Canva फ़ाइल, किसी संगठन का URL, या Claude Code के लिए हैंडऑफ़ के रूप में एक्सपोर्ट कर सकते हैं।
"MCP" इस प्रोडक्ट में तीन अलग तरीकों से दिखता है, और हर एक की विफलता का पैटर्न अलग है।
Claude Code 2.1.181 ने हर सेशन में claude_design नाम का एक सर्वर इंजेक्ट करना शुरू किया। यह https://api.anthropic.com/v1/design/mcp की तरफ़ इशारा करता है, और कई लोगों के लिए वह एंडपॉइंट 404 लौटाता था। /doctor कमांड ने इसे फ़्लैग किया, और /mcp ने प्रिंट किया "Failed to reconnect to claude_design: HTTP 404 at https://api.anthropic.com/v1/design/mcp"।
यह सर्वर डायनैमिक रूप से इंजेक्ट होता है, इसलिए यह किसी सेटिंग फ़ाइल में नहीं रहता, और इसे हटाने की कोशिश "Cannot remove MCP server from scope: dynamic" पर खत्म होती है। issue #69323 की रिपोर्ट 18 जून 2026 को दर्ज हुई और 22 जून 2026 को डुप्लिकेट बताकर बंद कर दी गई, साथ में #69325 जैसी कई लगभग एक जैसी रिपोर्टें भी थीं।
17 जून 2026 को घोषित, /design-sync Claude Code के टर्मिनल के अंदर चलता है। यह आपका असली डिज़ाइन सिस्टम (React कंपोनेंट, CSS टोकन, फ़ॉन्ट) Claude Design में खींचता है, ताकि प्रोटोटाइप आपके कंपोनेंट से शुरू हों, और वापस कोड भेजता है ताकि आप कैनवास पर एडिट करते रह सकें। /design-login आपके claude.ai अकाउंट से एक्सेस की अनुमति लेता है। इसे सिर्फ़ आप लॉन्च कर सकते हैं: स्किल को मॉडल द्वारा शुरू न किया जा सकने वाला (not model invocable) चिह्नित किया गया है, यानी Claude इसे अपने-आप शुरू नहीं कर सकता।
claude-design-mcp एक अनौपचारिक, MIT लाइसेंस वाला सर्वर है, जो agentic CLI से Claude Design को चलाता है। यह लगभग 30 टूल देता है, जिनमें create_design_system, generate, iterate, list_files, read_file, export और publish शामिल हैं। अंदर से यह claude.ai पर Chrome को ऑटोमेट करता है, यानी यह ऐसे इंटरनल एंडपॉइंट पर निर्भर है जिनका दस्तावेज़ीकरण नहीं है, और साइट बदलने पर टूट सकता है। README साफ़ कहता है कि यह Anthropic से न तो जुड़ा है और न ही इसे उसका समर्थन प्राप्त है।
| टुकड़ा | कहाँ चलता है | Codex में काम करता है | आम विफलता |
|---|---|---|---|
Built-in claude_design | Claude Code द्वारा इंजेक्ट | नहीं | HTTP 404 |
/design-sync | Claude Code स्लैश कमांड | नहीं | Authorization, 403 |
claude-design-mcp | लोकल stdio सर्वर और Chrome | हाँ | सेशन खत्म होना, टाइमआउट |
दस मिनट की जाँच एक दोपहर की डीबगिंग बचा देती है। "MCP टूटा है" वाले ज़्यादातर मामले असल में किसी ज़रूरी शर्त के छूट जाने से होते हैं, टूटे सर्वर से नहीं।
/design-sync के लिए first-party claude.ai अकाउंट चाहिए। API क्रेडेंशियल, Bedrock या Vertex सेटअप काम नहीं करेंगे।/design-sync बड़े रिपॉज़िटरी पर घंटों लंबे इंपोर्ट और टोकन लागत की चेतावनी देता है।/design-sync के लिए। जाँचने के लिए claude --version चलाएँ।dist/ हो, या Storybook के साथ React। Vue, Angular और Svelte समर्थित नहीं हैं। कमांड डिज़ाइन सिस्टम रिपो में चलाएँ, उस एप्लिकेशन में नहीं जो उसका उपयोग करता है।💡 अगर
/design-loginUnknown command कहता है, तो सबसे पहले अपना वर्ज़न जाँचें। v2.1.234 से पुराने बिल्ड पहले संदिग्ध हैं।
सिर्फ़ कम्युनिटी सर्वर ऐसा है जिसे आप खुद इंस्टॉल करते हैं, इसलिए यह सेटअप उसी के बारे में है। built-in सर्वर और /design-sync को ऊपर की शर्तों से आगे कुछ नहीं चाहिए।
git clone https://github.com/e-brokenc0de/claude-design-mcp.git
cd claude-design-mcp
pnpm install
pnpm exec playwright install chromium
pnpm run chrome:cdp
pnpm run build
chrome:cdp स्क्रिप्ट एक persistent प्रोफ़ाइल के साथ Chrome लॉन्च करती है, जो .auth/cdp-chrome में स्टोर रहती है। उस विंडो में एक बार claude.ai में साइन इन करें, और सेशन टूल कॉल्स के बीच बना रहेगा।
claude mcp add --transport stdio --scope user claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
-- Claude के अपने विकल्पों को उस कमांड से अलग करता है जो सर्वर शुरू करता है। टीम के साथ साझा फ़ाइल पसंद है? वही एंट्री प्रोजेक्ट रूट पर .mcp.json में डालें:
{
"mcpServers": {
"claude-design": {
"command": "node",
"args": ["/absolute/path/to/claude-design-mcp/dist/server.js"]
}
}
}
| स्कोप | कौन देखता है | कहाँ स्टोर होता है |
|---|---|---|
local (डिफ़ॉल्ट) | आप, यह प्रोजेक्ट | ~/.claude.json |
project | वर्ज़न कंट्रोल के ज़रिए सभी | .mcp.json |
user | आप, हर प्रोजेक्ट | ~/.claude.json |
claude mcp list
claude mcp get claude-design
फिर सेशन के अंदर /mcp खोलें। स्वस्थ सर्वर connected दिखता है, और Claude से list my Claude Design projects कहने पर असली नतीजे आने चाहिए। प्रोजेक्ट-स्कोप वाले सर्वर पहली बार आपकी मंज़ूरी माँगते हैं; गलती से मना कर दिया हो तो claude mcp reset-project-choices वह अनुमति वाला सवाल वापस ले आता है।
Codex MCP सर्वर ~/.codex/config.toml से पढ़ता है, या प्रोजेक्ट-स्कोप वाली .codex/config.toml से, और हर सर्वर के लिए एक [mcp_servers.<name>] टेबल इस्तेमाल होती है। Codex MCP दस्तावेज़ीकरण में हर विकल्प की सूची है।
codex mcp add claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
codex mcp list
या टेबल खुद लिखें:
[mcp_servers.claude-design]
command = "node"
args = ["/absolute/path/to/claude-design-mcp/dist/server.js"]
startup_timeout_sec = 30
tool_timeout_sec = 300
Codex स्टार्टअप के लिए 10 सेकंड और हर टूल कॉल के लिए 60 सेकंड का डिफ़ॉल्ट लेता है। वेबसाइट चलाने वाला टूल आसानी से दोनों से ज़्यादा समय ले सकता है, इसलिए इन्हें बढ़ाना सबसे पहला बदलाव है जो करने लायक है। Codex के टर्मिनल UI के अंदर /mcp दिखाता है कि कौन से सर्वर सक्रिय हैं।
💡 Windows पाथ: TOML में सामान्य कोट्स के अंदर बैकस्लैश से एस्केप शुरू हो जाता है।
C:/Users/you/claude-design-mcp/dist/server.jsको फ़ॉरवर्ड स्लैश के साथ लिखें, या पाथ को सिंगल कोट्स में रखें।
एक ईमानदार चेतावनी: कम्युनिटी README सिर्फ़ Claude Code और Cursor का कॉन्फ़िग दिखाता है। ऊपर की Codex एंट्री वही लॉन्च कमांड लेकर Codex के दस्तावेज़ी फ़ॉर्मेट में लागू करती है, इसलिए उस पर भरोसा करने से पहले codex mcp list से पुष्टि कर लें।
built-in claude_design सर्वर Claude Code इंजेक्ट करता है, /design-sync और /design-login Claude Code के कमांड हैं, और हैंडऑफ़ बटन बंडल Claude Code को भेजता है। Codex को इनमें से कुछ नहीं मिलता। वह जो कर सकता है वह है कम्युनिटी सर्वर के टूल जैसे read_file और export को कॉल करना, या सिर्फ़ एक्सपोर्ट किए गए फ़ोल्डर या स्टैंडअलोन HTML फ़ाइल पर काम करना, जो डिस्क पर सामान्य फ़ाइलें हैं।
| काम | Claude Code | Codex |
|---|---|---|
| stdio सर्वर जोड़ना | claude mcp add name -- cmd | codex mcp add name -- cmd |
| कॉन्फ़िग फ़ाइल | ~/.claude.json, .mcp.json | ~/.codex/config.toml, .codex/config.toml |
| सर्वर की सूची | claude mcp list | codex mcp list |
| सेशन के अंदर पैनल | /mcp | /mcp |
| स्टार्टअप टाइमआउट | MCP_TIMEOUT (ms) | startup_timeout_sec (डिफ़ॉल्ट 10) |
| टूल टाइमआउट | MCP_TOOL_TIMEOUT (ms) | tool_timeout_sec (डिफ़ॉल्ट 60) |
अपना मैसेज नीचे दी टेबल में ढूँढें, फिर उससे मेल खाता सेक्शन पढ़ें।
| आप क्या देखते हैं | सबसे संभावित कारण | पहला कदम |
|---|---|---|
HTTP 404 at .../v1/design/mcp | बिल्ट-इन एंडपॉइंट 404 दे रहा है | अपडेट करें, फिर उसे नज़रअंदाज़ करें |
/design-login requires an interactive terminal | Headless, web या non-interactive सेशन | सामान्य टर्मिनल सेशन में चलाएँ |
status code 403 recording access के दौरान | Authorization अस्वीकार | अकाउंट और संगठन की नीति दोबारा जाँचें |
| सर्वर विफल होता है या टूल टाइमआउट होते हैं | स्टार्टअप या टूल टाइमआउट बहुत कम | Timeout वैल्यू बढ़ाएँ |
| टूल लॉगिन एरर देते हैं | Chrome सेशन खत्म | pnpm run chrome:cdp दोबारा चलाएँ |
यह आपकी समस्या नहीं है। एंडपॉइंट ने 404 लौटाया, सर्वर कॉन्फ़िगर नहीं किया गया बल्कि इंजेक्ट होता है, और रिपोर्ट में लिखा गया कि कारण authentication नहीं था। यहाँ कोई एंट्री हटानी नहीं है और कोई टोकन रीफ़्रेश नहीं करना है।
/doctor फिर से चलाएँ।/mcp खोलें और अपने सर्वर देखें। अगर सिर्फ़ claude_design लाल है, तो उसे नज़रअंदाज़ करें।claude mcp get <name> चलाएँ और उसकी तुलना सर्वर के दस्तावेज़ में दिए पते से करें।
सबसे ज़्यादा दो मैसेज आते हैं: "DesignSync needs design-system authorization, but /design-login requires an interactive terminal and is not available in this environment" और साधारण Unknown command। पहला बताता है कि आप ऐसे सेशन में हैं जहाँ लॉगिन फ़्लो नहीं दिख सकता, जैसे web वर्ज़न या headless रन। एक संबंधित रिपोर्ट (#91063) बताती है कि अभी कोई non-interactive रास्ता नहीं है, जो CI जॉब्स को रोकता है।
/design-login को सामान्य, interactive Claude Code टर्मिनल में चलाएँ, फिर /design-sync।
403 ऐसा दिखता है: "Couldn't record Design agent access ... Request failed with status code 403"। यह macOS ऐप, Claude Code Web और Windows CLI पर लोगों को आया है, और उन्होंने पहले ही पुष्टि की थी कि उनका ब्राउज़र एक्सेस काम कर रहा था, इसलिए यह प्लान की समस्या नहीं थी। जब मैंने जाँचा, तब issue #75024 खुला था और किसी maintainer का जवाब नहीं आया था। तब तक पक्का करें कि आपका संगठन Claude Design की अनुमति देता है, first-party अकाउंट से साइन इन करें, और फिर कोशिश करें।
टाइमआउट कम्युनिटी सर्वर से जुड़े हैं। Claude Code में लॉन्च से पहले दोनों सीमाएँ बढ़ाएँ:
MCP_TIMEOUT=30000 MCP_TOOL_TIMEOUT=600000 claude
PowerShell यह प्रीफ़िक्स वाला रूप स्वीकार नहीं करता, इसलिए पहले वेरिएबल सेट करें:
$env:MCP_TIMEOUT = 30000; $env:MCP_TOOL_TIMEOUT = 600000; claude
Codex में TOML टेबल के अंदर startup_timeout_sec और tool_timeout_sec बढ़ाएँ।
कम्युनिटी सर्वर .auth/cdp-chrome में मौजूद Chrome प्रोफ़ाइल इस्तेमाल करता है। अगर टूल लॉगिन एरर या खाली प्रोजेक्ट सूची देने लगें, तो claude.ai सेशन शायद खत्म हो गया है।
pnpm run chrome:cdp फिर से चलाएँ और claude.ai में दोबारा साइन इन करें।git pull, pnpm install और pnpm run build से अपडेट लें। सर्वर इंटरनल एंडपॉइंट पर चलता है, इसलिए साइट बदलने पर फ़िक्स रिपॉज़िटरी में आ जाते हैं।Claude Design Claude Opus 4.7 पर चलता है, और वही मॉडल PicassoIA पर टेक्स्ट मॉडल के रूप में उपलब्ध है। जिस MCP एरर को एक नज़र में पढ़ना मुश्किल हो, उसके लिए यह एक अच्छी दूसरी राय है। रूटीन यह है:
/mcp पैनल का स्क्रीनशॉट जोड़ें। अगर छोटा टेक्स्ट पढ़ने लायक नहीं आता, तो Max Image Resolution बढ़ाएँ (डिफ़ॉल्ट 0.5 megapixels है)।साधारण एरर के लिए तेज़ जवाब चाहिए? Claude Sonnet 5 भी उसी तरह चलता है।
💡 लाइव टोकन, कुकी या पासवर्ड किसी भी चैट बॉक्स में कभी न चिपकाएँ। पहले उनकी जगह placeholders लगाएँ।
Claude Design के प्रोटोटाइप जो ग्रे प्लेसहोल्डर बॉक्स से भरे हों, अधूरे लगते हैं, और स्टॉक फ़ोटो शायद ही किसी ब्रांड से मेल खाती हैं। जिस टर्मिनल में आप Claude Code या Codex चलाते हैं, वहीं से इमेजरी जनरेट करने से यह कमी पूरी हो जाती है।
PicassoIA https://api.picassoia.com/v1 पर developer API और एक MCP कनेक्टर देता है, इसलिए एजेंट किसी भी दूसरे टूल कॉल की तरह मीडिया माँग सकता है। जॉब्स असिंक्रोनस होते हैं: prediction बनाएँ, पूरा होने तक poll करें, फिर नतीजा लाएँ। हर अकाउंट पर एक साथ अधिकतम 5 predictions चल सकते हैं, जो tokens और MCP कनेक्शन में साझा होते हैं, और साइन इन करने के बाद कनेक्शन picassoia.com/en/mcp/accounts पर मैनेज होते हैं। किसी भी चीज़ पर निर्माण करने से पहले, आपके प्लान में क्या शामिल है यह प्राइसिंग पेज पर जाँचें।
डिज़ाइन के काम में तीन मॉडल मायने रखते हैं:
वेबसाइट पर Seedream 5 Pro फ़ोटोरियलिस्टिक सीन के लिए एक और टेक्स्ट-टू-इमेज विकल्प है।
ऊपर का हर फ़िक्स एक ही जगह पर खत्म होता है: काम करने वाली डिज़ाइन पाइपलाइन को भी तस्वीरें चाहिए। Picasso IA Image खोलें, किसी फ़ोटोग्राफ़र को ब्रीफ़ करने के तरीके से सीन लिखें, और उसे रेंडर होते देखें। लेंस, रोशनी और लोकेशन बदलें जब तक फ़्रेम सही न लगे, फिर सबसे अच्छी इमेज को Image Editor Pro से अंतिम फ़िक्स दें, या Picasso IA Video से उसे एनिमेट करें। आज तीन प्रॉम्प्ट आज़माएँ, एक हीरो बैनर के लिए, एक प्रोडक्ट शॉट के लिए और एक पोर्ट्रेट के लिए, और देखें कि आपका अगला प्रोटोटाइप कितनी ज़्यादा तेज़ी से तैयार होता है।
अपनी भाषा चुनें
