Inspo MCP का उपयोग कैसे करें: डिज़ाइन रेफ़रेंस और स्क्रीनशॉट को Claude Code या Codex UI डेवलपमेंट में लाएँ

Claude Code या Codex से यह कहना कि “एक साफ़, प्रीमियम और अच्छी तरह डिज़ाइन की हुई landing page बनाओ” आमतौर पर एक चलने वाला पेज दिला देता है। कठिनाई यह है कि परिणाम अक्सर परिचित gradient background, rounded cards और बड़े heading तक सीमित रह जाता है। जिस layout, rhythm और visual hierarchy को आप वास्तव में अपनाना चाहते थे, वह पेज में दिखाई नहीं देती।

Inspo इसी अधिक स्पष्ट समस्या को हल करता है: Agent के UI लिखना शुरू करने से पहले उसे वास्तविक वेबसाइटों के डिज़ाइन रेफ़रेंस दिए जा सकते हैं। आधिकारिक साइट पर अभी 832 production websites, desktop और mobile capture सहित 2,320 page records, 68 reference components, और पेजों से निकाली गई color palettes, fonts, spacing, border radii, container widths तथा page structure की जानकारी सूचीबद्ध है। MCP के माध्यम से यह सामग्री Claude Code और Codex जैसे clients को दी जाती है।

फिर भी, installation पूरा होना यह साबित नहीं करता कि Agent ने screenshots देखे हैं। यह तो बिल्कुल भी साबित नहीं करता कि अंतिम पेज में वे रेफ़रेंस दिखाई देते हैं। अधिक भरोसेमंद workflow यह है:

1. Inspo MCP जोड़ें और पुष्टि करें कि client सचमुच connected है।
2. Agent को पहले रेफ़रेंस खोजने दें; तुरंत code लिखने न दें।
3. देखें कि उसे कौन से page records और image URLs मिले, और क्या उसने images वास्तव में पढ़ीं।
4. चुने हुए रेफ़रेंस को एक स्पष्ट “reference contract” में बदलें।
5. implementation के बाद वास्तविक render देखें, हर बिंदु पर तुलना करें और सुधार करें।

नीचे हम एक काल्पनिक काम का उदाहरण लेते हैं: किसी मौजूदा project के लिए developers को लक्षित B2B product landing page बनाना। यह उदाहरण workflow समझाने के लिए है; इसका अर्थ यह नहीं है कि इस लेख ने आपका project वास्तव में चलाया या test किया है।

Inspo MCP वास्तव में क्या देता है

Inspo केवल screenshot search tool नहीं है। इसकी आधिकारिक MCP page और project repository के अनुसार, Agent तीन प्रकार की reference सामग्री प्राप्त कर सकता है।

1. Pages और screenshots

search_screens natural-language description, style, industry, page type, color, light या dark mode और page structure के आधार पर वास्तविक pages खोज सकता है। परिणामों में यह जानकारी हो सकती है:

• page title, Inspo slug और मूल website URL;
• desktop और mobile screenshot URLs;
• page thumbnail;
• color palette, fonts, technology stack और tags;
• page की समग्र विशेषताओं और section structure का analysis।

किसी एक candidate को विस्तार से समझना हो तो कई candidates को एक साथ context में भरने के बजाय get_screen से उसी का अधिक पूरा record लें।

2. Structured design system

संग्रह में शामिल हर website के लिए page information से निकाला गया DESIGN.md होता है। get_design_system typography, semantic colors, type scale, spacing, border radii, CSS variables और container widths जैसी जानकारी दे सकता है।

यह data महत्वपूर्ण है, क्योंकि “इस website को reference बनाओ” बहुत अस्पष्ट निर्देश है। इसके विपरीत, “hero को दो columns में रखो, content container की चौड़ाई सीमित करो, primary button के लिए high-contrast accent color उपयोग करो और sections के बीच स्पष्ट spacing रखो” जैसे निर्देश Agent अधिक स्थिरता से लागू कर सकता है।

3. Reference components और code

Inspo navigation, hero, pricing, footer और अन्य हिस्सों के reference components भी देता है। Agent पहले find_reference_components से उपयुक्त component खोज सकता है और फिर get_reference_jsx से उसका JSX प्राप्त कर सकता है।

इसका अर्थ यह नहीं है कि पूरी site को बिना बदलाव copy किया जाए। बेहतर तरीका यह है कि component की composition और information hierarchy को समझकर वर्तमान project के stack, brand, content और interactions के अनुसार ढाला जाए।

शुरुआत के लिए recommend सबसे उपयोगी tool है। इसे सामान्य भाषा में आवश्यकता देने पर यह page structure, candidate websites, reference components, color palettes और layout suggestions को एक साथ प्रस्तुत करता है। पहली बार उपयोग करते समय Agent से पहले recommend चलवाना और फिर एक या दो candidates को गहराई से देखना, शुरुआत में ही दर्जन भर pages खोजने से अधिक प्रभावी होता है।

Model connection और Inspo MCP दो अलग रास्ते हैं

Claude Code या Codex को code analysis, editing और reasoning के लिए काम करने वाला model connection चाहिए। Inspo MCP बाहरी design material देता है। दोनों के endpoint, authentication और failure causes अलग हैं।

यदि आप BetterToken के माध्यम से Claude Code या Codex पहले से इस्तेमाल करते हैं, तो पहले संबंधित documentation के अनुसार model-side setup पूरा करें:

• Claude Code connection guide
• Codex connection guide

इसके बाद Inspo को अलग से configure करें। https://inspomcp.dev/api/mcp को model Base URL के रूप में न लिखें और BetterToken API Key को Inspo को न दें। Inspo के official hosted endpoint को अभी account या API Key की आवश्यकता नहीं है। BetterToken Inspo को host नहीं करता, third-party design material का license नहीं देता और यह guarantee नहीं करता कि Agent images ज़रूर पढ़ेगा या किसी विशेष प्रकार का UI बनाएगा।

Connection से पहले केवल यह पुष्टि करें:

• Claude Code या Codex installed है और सामान्य coding tasks कर सकता है;
• client Inspo के hosted endpoint तक पहुँच सकता है;
• automatic installer या local stdio mode के लिए machine पर Node.js और npx उपलब्ध हैं।

Inspo MCP को connect करना

Inspo automatic installer देता है, और आप client के अपने MCP commands भी उपयोग कर सकते हैं। जिस computer पर कई AI coding tools हों, वहाँ पहले --dry-run चलाएँ ताकि पता चले कि कौन से clients और configuration बदले जाएँगे।

तरीका 1: Inspo installer का उपयोग करें

Configuration लिखे बिना केवल Claude Code जाँचें:

npx -y inspo-mcp install --dry-run --client claude-code

Plan देखने के बाद install करें:

npx -y inspo-mcp install --client claude-code

केवल Codex जाँचें:

npx -y inspo-mcp install --dry-run --client codex

जाँच के बाद install करें:

npx -y inspo-mcp install --client codex

--client न देने पर installer Claude Code, Codex, Cursor, VS Code, Windsurf, Claude Desktop और Zed की उपलब्ध installations को detect करता है। Inspo MCP की आधिकारिक documentation के अनुसार यह पहले plan दिखाता है और confirmation माँगता है; --dry-run केवल plan print करता है और files नहीं लिखता, जबकि -y confirmation को skip करता है।

तरीका 2: Hosted MCP सीधे जोड़ें

Inspo का recommended hosted endpoint है:

https://inspomcp.dev/api/mcp

Official repository Inspo को read-only service बताती है, लेकिन यह फिर भी एक external third-party MCP है। Team environment में connect करने से पहले repository, data scope और network policy की समीक्षा करें। केवल “read-only” होने के कारण trust review को न छोड़ें।

Claude Code की official MCP documentation के अनुसार remote services को HTTP से जोड़ा जाना चाहिए। सभी local projects में Inspo उपलब्ध कराने के लिए चलाएँ:

claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp

फिर जाँचें:

claude mcp get inspo
claude mcp list

Claude Code session में यह भी लिख सकते हैं:

/mcp

Added दिखाई देना केवल यह बताता है कि configuration लिखी गई। वास्तविक connection state के लिए claude mcp list देखें: Connected का अर्थ है कि connection सक्रिय है। आगे बढ़ने से पहले Failed to connect, Pending approval या disabled state को ठीक करें।

OpenAI की Codex MCP documentation के अनुसार Codex Streamable HTTP और STDIO services को support करता है। Remote MCP जोड़ने के लिए:

codex mcp add inspo --url https://inspomcp.dev/api/mcp

Configured services देखें:

codex mcp list

Codex के interactive interface में यह भी इस्तेमाल कर सकते हैं:

/mcp

OpenAI की वर्तमान documentation कहती है कि Codex CLI, IDE extension और ChatGPT desktop app एक ही Codex host पर चलने पर MCP configuration share करते हैं। Service जोड़ने या बदलने के बाद current client restart करें या नया session खोलें, फिर देखें कि Inspo दिखाई देता है या नहीं।

stdio केवल एक alternative transport है

यदि client के लिए remote URL से connect करना सुविधाजनक न हो, तो वह npx के माध्यम से stdio service चला सकता है:

claude mcp add --scope user inspo -- npx -y inspo-mcp

codex mcp add inspo -- npx -y inspo-mcp

Automatic installation command में --local भी जोड़ा जा सकता है। लेकिन इस mode में भी Inspo catalog CDN से लिया जाता है, इसलिए यह offline operation या पूर्ण self-hosting के बराबर नहीं है।

पहली बार उपयोग करते समय code से पहले रेफ़रेंस खोजें

एक आम गलती “रेफ़रेंस खोजो” और “पेज बनाओ” को एक ही वाक्य में जोड़ना है:

Inspo का उपयोग करके मेरे लिए एक सुंदर landing page बनाओ।

ऐसा करने पर Agent स्वयं रेफ़रेंस चुनेगा, स्वयं तय करेगा कि क्या अपनाना है और तुरंत code लिखना शुरू कर देगा। परिणाम खराब हो तो यह समझना कठिन होगा कि search results सही नहीं थे, screenshots context में नहीं पहुँचे या implementation रेफ़रेंस से दूर चला गया।

पहला prompt इस प्रकार अलग रखना अधिक सुरक्षित है:

अभी code में कोई बदलाव न करें और page design शुरू न करें।

Inspo MCP का उपयोग करके “developers के लिए B2B AI API product landing page” के 4 candidate references खोजें।

आवश्यकताएँ:
- visual style संतुलित और professional हो; बड़े क्षेत्रों में चमकीले gradients न हों;
- hero में product value स्पष्ट हो और एक primary CTA हो;
- product interface या invocation flow दिखाया जा सकता है, लेकिन page पारंपरिक corporate website जैसा न लगे;
- desktop और mobile दोनों references जाँचें;
- पहले recommend से शुरू करें और आवश्यकता होने पर ही search_screens, get_screen या get_design_system उपयोग करें।

हर candidate के लिए लौटाएँ:
1. page title, Inspo slug और sourceUrl;
2. यदि tool result में मौजूद हों तो desktop और mobile screenshot URLs;
3. macrostructure, मुख्य color palette और typography;
4. अपनाने योग्य 3 स्पष्ट design points;
5. वे brand elements, copy या decorations जिन्हें copy नहीं करना चाहिए।

अंत में केवल एक primary reference और अधिकतम दो supporting references सुझाएँ, और बताएँ कि हर reference किस चीज़ को नियंत्रित करेगा। अभी code न लिखें।

इस prompt का उद्देश्य अधिक विशेषण पाना नहीं है। उद्देश्य ऐसे page identifiers और evidence पाना है जिन्हें trace किया जा सके। आपको केवल “modern, clean, professional” जैसा summary नहीं, बल्कि स्पष्ट slug, original website URL, screenshot URLs और design data दिखना चाहिए।

कैसे पुष्टि करें कि Agent को रेफ़रेंस वास्तव में मिले

जाँच को चार स्तरों में बाँटें। एक स्तर सफल होने से अगला स्तर अपने आप सिद्ध नहीं होता।

स्तर	दिखाई देने वाला प्रमाण	इससे क्या सिद्ध होता है
MCP configured	Claude Code Connected दिखाता है, या Codex की MCP list में Inspo मौजूद है	Connected Claude Code का connection पुष्ट करता है; Codex list में entry configuration की पुष्टि करती है। Service access की पुष्टि के लिए सफल tool call चाहिए
Tool ने data लौटाया	Response में वास्तविक slug, sourceUrl, colors, fonts, page structure और screenshot URLs हैं	Agent ने Inspo को call किया और structured record पाया
Images पढ़ी गईं	Agent image-reading tool से screenshot URLs खोलता है या उपलब्ध image viewer इस्तेमाल करता है और स्पष्ट visual details बताता है	Agent ने केवल text description या links नहीं पढ़े; result में thumbnails होना अकेले इसका प्रमाण नहीं है
Page में reference दिखता है	वास्तविक render और चुने हुए reference के structure, hierarchy, rhythm और responsive behavior के बीच समझाने योग्य समानता है	Reference ने implementation को सचमुच प्रभावित किया

यह अंतर महत्वपूर्ण है। Inspo का response format हमेशा structured text देता है और original image URLs भी दे सकता है। Supported paths में thumbnails native image content blocks के रूप में tool result में जुड़ सकते हैं। लेकिन project के response-format implementation में दो अन्य स्थितियाँ भी स्पष्ट रूप से संभाली गई हैं: image retrieval असफल होने पर image block हट सकता है, जबकि text और URLs बने रहते हैं; और text-first configuration में केवल text लौट सकता है।

इसलिए “Agent ने screenshot URL दिया” यह साबित नहीं करता कि model ने pixels पढ़े। यह verification prompt भेजें:

पहले साबित करें कि आपको primary reference मिला है। अभी code लिखना शुरू न करें।

लौटाएँ:
- इस session में वास्तव में उपयोग किए गए Inspo tools के नाम;
- primary reference का slug, sourceUrl, desktop screenshot URL और mobile screenshot URL;
- desktop screenshot से देखे गए 3 और mobile screenshot से देखे गए 3 स्पष्ट visual facts, जैसे hero composition, navigation position, CTA alignment, image cropping, card arrangement या collapse behavior;
- कौन से conclusions screenshots से आए और कौन से केवल Inspo के text fields से आए।

यदि current client को केवल text या URLs मिले और उसने image pixels नहीं पढ़े, तो साफ़ लिखें: “image pixels नहीं पढ़े गए।” Description के आधार पर visual details का अनुमान न लगाएँ।

आदर्श परिणाम लंबी design critique नहीं है। वह “image में वास्तव में मौजूद तत्वों” और “structured data से निकले conclusions” को अलग-अलग दिखाए।

यदि Agent केवल color palette, typography और northstar description दोहरा सकता है, तो उसे client में पहले से उपलब्ध browser या image-reading tool के माध्यम से screenshot URLs खोलने के लिए कहें। यदि वर्तमान client और model visual input support करते हैं, तो screenshots download करके image attachments के रूप में दें। यदि model या provider path images process नहीं करता, तो file attach करने से यह नहीं बदलेगा: Inspo को structure, color और text analysis के लिए इस्तेमाल करें या visual input support करने वाले compatible setup पर जाएँ। MCP images लौटा सकता है, पर इसका अर्थ यह नहीं है कि हर client और model combination उन्हें process करेगा।

रेफ़रेंस को “reference contract” में बदलें

Candidates तय होने के बाद केवल “reference A जैसा feel दो” न कहें। हर reference की जिम्मेदारी तय करें और स्पष्ट करें कि क्या copy नहीं किया जाना चाहिए।

Agent से ऐसा contract बनवाएँ:

पुष्टि किए गए primary और supporting references के आधार पर पहले एक “reference contract” तैयार करें। अभी code में बदलाव न करें।

इसमें शामिल करें:

1. Primary reference
- slug / sourceUrl:
- केवल इसके लिए जिम्मेदार: overall page structure, hero composition, section rhythm

2. Supporting reference A
- slug / sourceUrl:
- केवल इसके लिए जिम्मेदार: type hierarchy, body width, whitespace

3. Supporting reference B (केवल तभी जब वास्तव में आवश्यक हो)
- slug / sourceUrl:
- केवल इसके लिए जिम्मेदार: एक specific component या mobile collapse behavior

4. Current project में अवश्य बनाए रखें
- मौजूदा technology stack, routing और component conventions
- वास्तविक product copy, feature boundaries और brand colors
- मौजूदा interactions, accessibility requirements और performance requirements

5. स्पष्ट रूप से निषिद्ध
- source website का logo, brand name, illustrations, photos या original copy न करें
- पूरी website को pixel-by-pixel reproduce न करें
- reference जैसा दिखाने के लिए ऐसे features न बनाएँ जो current product में नहीं हैं

6. Acceptance criteria
- सामान्य desktop viewport में hero title, explanation, CTA और main visual को पूरा दिखाए
- information hierarchy primary reference के अनुरूप हो, लेकिन content current product का हो
- mobile में जानबूझकर rearrangement हो; केवल desktop layout को छोटा न किया जाए
- section spacing, container width, type hierarchy और button priority के नियम जाँचने योग्य हों

Reference contract inspiration को constraints में बदलता है। Primary reference overall structure नियंत्रित करता है और supporting references केवल local problems हल करते हैं। अधिक references हमेशा बेहतर नहीं होते। यदि पाँच websites एक साथ colors, typography, cards और hero नियंत्रित करें, तो परिणाम फिर एक generic AI-style page बन सकता है जिसमें कोई स्पष्ट प्राथमिकता न हो।

Claude Code या Codex से implementation शुरू करवाएँ

References और acceptance criteria की पुष्टि के बाद Agent को repository देखने और code बदलने दें। नीचे दिए prompt में जानबूझकर npm run dev, framework directory या test command तय नहीं की गई है। इन्हें वर्तमान project से पहचाना जाना चाहिए, अनुमान से नहीं।

अब implementation शुरू करें।

पहले current repository का technology stack, page entry points, design variables, reusable components और available scripts जाँचें। इसके बाद confirmed “reference contract” के अनुसार page में बदलाव करें।

Implementation requirements:
- existing framework, component system और dependencies का उपयोग करें; वास्तविक आवश्यकता न हो तो नया UI framework न जोड़ें;
- वास्तविक product content और functionality बनाए रखें, और reference websites के brand assets या copy न करें;
- references को इस project के अपने layout, CSS variables और components में बदलें;
- desktop और mobile दोनों को जानबूझकर implement करें; mobile को अंत के लिए न छोड़ें और automatic scaling पर निर्भर न रहें;
- shadows और border radii जैसी decoration से पहले overall structure, information hierarchy और spacing ठीक करें;
- केवल इसलिए existing project components को overwrite न करें कि Inspo JSX देता है।

Files बदलने से पहले संक्षेप में बताएँ:
1. किन files को बदलने की योजना है;
2. हर reference point किस component या style rule में लागू होगा;
3. कौन सा existing content बिना बदलाव रहना चाहिए।

पूरा होने के बाद:
- repository में मौजूद formatter, type checks या tests चलाएँ;
- उपलब्ध local preview शुरू करें;
- वास्तव में बदली गई files की सूची दें;
- “reference point → implementation location” mapping दें;
- केवल “more modern” या “more premium” जैसे शब्दों से परिणाम का मूल्यांकन न करें।

यदि project में design tokens पहले से हैं, तो Agent से कई components में hard-coded colors और dimensions फैलाने के बजाय tokens या semantic variables पहले बदलवाएँ। इससे अगली iteration में पूरे page का rhythm जल्दी सुधारा जा सकेगा।

अंतिम निर्णय वास्तविक render पर होना चाहिए, code diff पर नहीं

Page compile होना केवल यह साबित करता है कि code चलता है। Reference वास्तव में दिखाई देता है या नहीं, यह जानने के लिए वास्तविक page देखना ज़रूरी है।

Inspo pages में सामान्यतः desktop और mobile captures होते हैं। इसकी official Colophon के अनुसार archive 1440 pixels और 375 pixels की widths पर capture किया जाता है। समान height उपयोग करना आवश्यक नहीं है, लेकिन इनसे मिलती-जुलती widths पर implementation देखने से overall structure और mobile rearrangement की तुलना आसान होती है।

यदि Claude Code या Codex में browser, Playwright या कोई अन्य screenshot tool configured है, तो Agent से local page खुलवाएँ। अन्यथा browser में preview स्वयं खोलें, desktop और mobile screenshots लें और Agent को वापस दें।

उससे इस format में review करवाएँ:

तुलना करें:
- confirmed primary reference के desktop और mobile screenshots;
- current page के लगभग 1440px और 375px width पर वास्तविक rendered screenshots।

अभी redesign या code change न करें। पहले differences की table दें:

| जाँच बिंदु | Reference में दिखाई देने वाला प्रमाण | Current implementation | अंतर | सुझाया गया बदलाव |
| --- | --- | --- | --- | --- |
| Hero structure |  |  |  |  |
| Title और CTA hierarchy |  |  |  |  |
| Container और whitespace |  |  |  |  |
| Type hierarchy |  |  |  |  |
| Color और contrast |  |  |  |  |
| Component arrangement |  |  |  |  |
| Mobile rearrangement |  |  |  |  |

इसके बाद केवल सबसे अधिक प्रभाव वाले 3 differences चुनें और उन्हें ठीक करें। Changes के बाद फिर से render और review करें। उसी pass में कोई नई design direction न जोड़ें।

अच्छा feedback ऐसा होना चाहिए जिसे देखा और लागू किया जा सके। उदाहरण:

• यह न कहें: “Hero अभी पर्याप्त premium नहीं लगता।”
• यह कहें: “Primary reference में headline, CTA और product interface पहले viewport में एक साथ दिखाई देते हैं। Current page में vertical whitespace बहुत अधिक है, इसलिए product interface fold के नीचे चला जाता है। Hero का vertical spacing घटाएँ, headline की width सीमित करें और main visual को सामान्य desktop height के भीतर दिखाएँ।”

एक और उदाहरण:

• यह न कहें: “Mobile version reference जैसा पर्याप्त नहीं लगता।”
• यह कहें: “Mobile reference में पहले headline और CTA आते हैं, फिर single-column product card। Current implementation desktop का two-column layout बनाए रखता है, जिससे text और image दोनों संकरे हो जाते हैं। Mobile पर one column करें और CTA को main visual से पहले रखें।”

हर iteration में केवल कुछ high-impact differences ठीक करना, बार-बार “इसे और सुंदर बनाओ” कहने से अधिक जल्दी परिणाम तक पहुँचता है।

आम समस्याएँ

Configuration command सफल हुआ, लेकिन Agent को Inspo नहीं मिलता

दोबारा install करने से पहले client state देखें।

Claude Code:

claude mcp get inspo
claude mcp list

Codex:

codex mcp list

यह पुष्टि करें कि endpoint में कोई अतिरिक्त character नहीं है, फिर client restart करें। यदि Claude Code project-level .mcp.json उपयोग करता है, तो trusted workspace में service approve करनी पड़ सकती है।

MCP connected है, लेकिन Agent कभी Inspo को call नहीं करता

Retrieval और coding stages अलग करें। Prompt में स्पष्ट लिखें: “पहले Inspo को call करें, slug, sourceUrl और screenshot URLs लौटाएँ, और references confirm होने से पहले code न बदलें।” /mcp में यह भी देखें कि service enabled है।

Page description मिला, लेकिन image दिखाई नहीं देती

संभव है call ने केवल text लौटाया हो, thumbnail retrieval असफल हुई हो, client MCP image blocks न दिखाता हो या model path images process न करता हो। देखें कि desktop और mobile screenshot URLs अभी भी मौजूद हैं या नहीं, और Agent से स्पष्ट कहलवाएँ कि उसने pixels पढ़े या नहीं। यदि वर्तमान client और model visual input support करते हैं, तो browser tool से URLs खोलें या screenshots attach करें। Text-only model के लिए structured data इस्तेमाल करें या images process करने वाले setup पर जाएँ।

Page अभी भी generic template जैसा दिखता है

समाधान आमतौर पर दस और references खोजना नहीं है। Scope छोटा करें: एक primary reference macrostructure नियंत्रित करे, एक supporting reference typography और whitespace नियंत्रित करे, और अधिकतम एक reference किसी specific component को नियंत्रित करे। इन roles को contract में लिखें और Agent से “reference point → code location” mapping माँगें।

Context बहुत बड़ा है और Agent references मिला रहा है

Candidates पाने के लिए पहले recommend चलाएँ, फिर केवल चुने गए एक या दो pages पर get_screen या get_design_system call करें। कई full page records और component sources एक साथ load न करें। get_reference_jsx केवल किसी specific component की आवश्यकता होने पर call करें।

Original website अब Inspo screenshot जैसी नहीं है

Inspo capture के समय का page material सुरक्षित रखता है, जबकि original website बाद में बदल सकती है। तुलना चुने गए Inspo screenshot और record से करें। sourceUrl source trace करने के लिए है; यह मानकर न चलें कि बाहरी site हमेशा archive जैसी ही दिखेगी।

लक्ष्य केवल “MCP install करना” नहीं, बल्कि evidence chain बनाना है

Inspo MCP का मूल्य इस बात में नहीं है कि वह अपने आप तय कर दे कि अच्छा design क्या है। वह “मुझे ऐसा feel चाहिए” को traceable pages, screenshots, design data और reference components में बदलता है।

एक भरोसेमंद UI development cycle में चार प्रकार के प्रमाण होने चाहिए:

1. Client पुष्टि करे कि Inspo connected है।
2. Agent स्पष्ट pages और design material लौटाए।
3. आप पुष्टि कर सकें कि उसने screenshots पढ़े, या वह ईमानदारी से बताए कि उसे केवल text मिला।
4. Final render में point by point समझाया जा सके कि structure, hierarchy और responsive behavior के कौन से नियम references से आए।

जब retrieval, confirmation, implementation और verification अलग रखे जाते हैं, तो Claude Code या Codex केवल “अंदाज़ से सुंदर page” नहीं बनाता। वह ऐसे design context में काम करता है जिसे आप inspect, correct और reuse कर सकते हैं।