Dig Design System MCP

MCP (Model Context Protocol)

سرور MCP عمومی و فعال دیگ به ایجنت‌های کدنویسی (Claude Code، Codex و هر ابزار سازگار با MCP) اجازه می‌دهد کامپوننت‌های دیزاین سیستم را مستقیماً از طریق چت کشف و نصب کنند، بدون نیاز به کپی دستی یا دانستن آدرس رجیستری هر کامپوننت.

اتصال MCP دیگ

سرور دیگ یک MCP عمومی روی Streamable HTTP است و به حساب یا توکن نیاز ندارد. آدرس سرور برای همهٔ کلاینت‌ها یکی است:

https://docs.digdesign.ir/api/mcp

کلاینت‌های تست‌شده

اتصال و همهٔ ابزارهای سرور در این کلاینت‌ها به‌صورت کامل تست شده‌اند.

Claude Code

claude mcp add --transport http dig https://docs.digdesign.ir/api/mcp

OpenAI Codex

یک ورودی زیر mcp_servers به فایل تنظیمات Codex یعنی ~/.codex/config.toml اضافه کنید:

[mcp_servers.dig]
url = "https://docs.digdesign.ir/api/mcp"

سایر کلاینت‌های MCP

دیگ از استاندارد Model Context Protocol پیروی می‌کند و احتمالاً با هر کلاینت سازگار با MCP کار می‌کند، ولی این کلاینت‌ها هنوز به‌طور رسمی تست نشده‌اند و شکل تنظیمات در هر کلاینت کمی فرق دارد. برای رایج‌ترین‌ها:

Gemini CLI

در فایل ~/.gemini/settings.json برای همهٔ پروژه‌ها، یا فایل .gemini/settings.json داخل پروژه. برای HTTP کلید httpUrl است، نه url:

{
  "mcpServers": {
    "dig": { "httpUrl": "https://docs.digdesign.ir/api/mcp" }
  }
}

VS Code

در فایل .vscode/mcp.json پروژه. اینجا کلید بالایی servers است و نوع اتصال را باید گفت:

{
  "servers": {
    "dig": { "type": "http", "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

Cursor

در فایل .cursor/mcp.json پروژه، یا فایل ~/.cursor/mcp.json برای همهٔ پروژه‌ها:

{
  "mcpServers": {
    "dig": { "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

Windsurf

در فایل ~/.codeium/windsurf/mcp_config.json با کلید serverUrl:

{
  "mcpServers": {
    "dig": { "serverUrl": "https://docs.digdesign.ir/api/mcp" }
  }
}

Cline، Roo Code و Continue

در تنظیمات MCP همین افزونه‌ها یک سرور راه‌دور با نوع streamableHttp و همین آدرس بسازید. نمونه برای Cline:

{
  "mcpServers": {
    "dig": { "type": "streamableHttp", "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

کلاینتی که فقط سرور محلی (stdio) می‌شناسد

CLI دیگ خودش سرور MCP را به شکل یک سرور محلی اجرا می‌کند؛ نصب جداگانه یا پل دیگری لازم نیست:

{
  "mcpServers": {
    "dig": { "command": "npx", "args": ["-y", "digdesign@latest", "mcp"] }
  }
}

همین دستور را مستقیم هم می‌شود تست کرد: npx -y digdesign@latest mcp منتظر پیام‌های MCP روی ورودی می‌ماند.

ایجنتی که MCP ندارد

فایل llms.txt همهٔ قاعده‌های ساخت با دیگ، فهرست صفحه‌های مستندات و همهٔ بلاک‌ها را در یک متن ساده دارد. آدرسش را به ایجنت بدهید تا بداند از کجا شروع کند:

https://docs.digdesign.ir/llms.txt

تست اتصال

بعد از اتصال، فهرست ابزارهای سرور باید ابزارهایی مثل list_components ، search_components و get_component_demo را نشان دهد. بعد این را از ایجنت بخواهید:

با MCP دیگ یک صفحهٔ ورود فارسی با فیلد موبایل و دکمهٔ ارسال کد بساز.

اگر ایجنت از search_components یا get_block استفاده کرد و کامپوننت‌های دیگ را نصب کرد، اتصال درست است.

پیش از شروع

کامپوننت‌ها روی توکن‌های تم دیگ سوارند. اگر پروژه تم را نداشته باشد، کامپوننت‌ها نصب می‌شوند ولی با اندازهٔ فونت، رنگ و فاصلهٔ اشتباه دیده می‌شوند. پس یک بار در هر پروژه:

npx digdesign@latest init

و روی عنصر ریشه lang="fa" dir="rtl" با یک فونت فارسی بگذارید (جزئیات در صفحهٔ نصب). سرور MCP همین را هنگام اتصال به ایجنت هم می‌گوید، ولی بهتر است خودتان هم مطمئن شوید.

ابزارهای در دسترس

ابزار	کاربرد
list_components	نام همهٔ کامپوننت‌های دیگ، دسته‌بندی‌شده (فقط نام، برای مصرف کم توکن)
search_components	جست‌وجوی فارسی یا انگلیسی بر اساس نیاز؛ برای یک صفحهٔ کامل (مثل «صفحهٔ ورود» یا داشبورد) کامپوننت‌های لازم آن صفحه و راهنمای ترکیبشان را هم می‌دهد
get_component	دستور نصب، وابستگی‌ها و فایل‌های یک کامپوننت (React)؛ سورس کامل فقط با include_source
get_component_demo	نمونه‌های واقعیِ استفاده، از خودِ مستندات: کوتاه‌ترین کدِ کارکردنی، کدِ کامل با import، و همهٔ حالت‌های مستندشده با عنوان و کاربردشان، به‌همراه importها و دستور نصب
get_component_api	پراپ‌های دقیق هر کامپوننت و قطعه‌هایش، مستقیم از تایپ‌های TypeScript: مقدارهای مجاز، پیش‌فرض و اجباری‌بودن، تا ایجنت پراپ یا variant ناموجود نسازد
list_blocks / get_block	صفحه‌های کامل آماده (ورود، کارت به کارت، فهرست سفارش‌ها،...) که بازبینی و تایپ‌چک شده‌اند؛ کد کامل با یک دستور نصب، تا ایجنت صفحه را از یک بلاک آزموده شروع کند. بلاک‌های دستهٔ sections صفحهٔ کامل نیستند، تکه‌های لندینگ‌اند (هدر، هیرو، ویژگی‌ها، نظر مشتری، دعوت به اقدام، فوتر) که ایجنت از هر خانواده یکی را برمی‌دارد و روی هم می‌چیند. بلاک‌های هم‌خانواده (مثل لندینگ، ورود، قیمت‌گذاری) تا چهار مدل دارند و get_block بقیهٔ مدل‌ها را در other_variants برمی‌گرداند؛ عکس‌های واقعی بلاک‌ها هم از کتابخانهٔ stock-images همراه نصب می‌آیند. هر بلاک یک چک‌لیست adapt هم دارد (نام برند، متن‌ها، مدل، عکس، فیلدها، رنگ برند) تا ایجنت بلاک را دست‌نخورده تحویل ندهد
get_page_patterns	اصول زندهٔ ترکیب‌بندی صفحه (چیدمان، سلسله‌مراتب فاصله، ردیوس و اندازهٔ یکسان، تب برای انتخاب، هیروی جسور، دادهٔ فارسی، عکس واقعی، حرکت نرم با Reveal) با دلیل و بلاک نمونه؛ تا صفحه‌ای که بلاک آماده ندارد هم امروزی و یکدست ساخته شود. این فهرست زنده است و با هر اصل تازه بزرگ می‌شود؛ ایجنت پیش از ساخت هر صفحه صدایش می‌زند (با نام صفحه برای اصول مرتبط، یا بدون آن برای همه)
get_tokens	توکن‌های تم (رنگ معنایی، فاصله، شعاع، سایه، تایپوگرافی) به شکل کلاس Tailwind؛ مقدار روشن و تیره فقط با values ، تا ایجنت به‌جای hex یا px خام از توکن استفاده کند. سطح‌ها از muted تا subtle (یک Shade روشن‌تر، برای پنل‌های کناری) را هم شامل می‌شود
customize_theme	ساخت brand.css برای یک محصول از رنگ برند (hex یا نام پالت)، شعاع، فونت و نوع تم تیره؛ رمپ یازده‌پله‌ای می‌سازد و کنتراست دکمه‌ها را در هر دو تم تضمین می‌کند
get_design_md	فایل DESIGN.md پروژه با قالب باز DESIGN.md: توکن‌های واقعی دیگ (و رنگ برند) به‌علاوهٔ قاعده‌های چیدمان؛ در ریشهٔ پروژه می‌نشیند تا هر ایجنتی، حتی بدون MCP، هماهنگ با دیگ بسازد. بدون MCP: npx digdesign design-md. خروجی خامِ قابل‌خواندن برای ایجنت هم در /api/design-md در دسترس است.
check_contrast	کنتراست WCAG دو رنگ یا دو توکن، برای توکن‌ها در هر دو تم روشن و تیره
review_code	بازبینی کدی که ایجنت ساخته، پیش از تحویل: کنترل خام مرورگر، رنگ و px دستی، جهت فیزیکی در RTL و opacity؛ پراپ یا مقدار ناموجود و import جاافتاده (با مقایسه با تایپ‌های واقعی)؛ دکمهٔ آیکونی بی‌نام و تصویر بی‌alt؛ ارقام لاتین و ي/ك عربی در متن فارسی. هرکدام با خط و راه اصلاح

استفاده

بعد از اتصال، کافی است از ایجنت بخواهید با کامپوننت‌های دیگ کار کند؛ خودش ابزارهای بالا را برای پیدا کردن و دریافت کامپوننت‌های لازم صدا می‌زند.

با کامپوننت‌های دیگ یک فرم ورود بساز.

مسیری که ایجنت برای هر صفحه طی می‌کند:

1. با search_components کامپوننت هر بخش را پیدا می‌کند.
2. با get_component_demo طرز استفادهٔ درست، importها و دستور نصب را می‌گیرد.
3. برای هر استایل دستی (رنگ، فاصله، سایه) از get_tokens توکن برمی‌دارد، نه hex یا px خام.
4. کد نهایی را به review_code می‌دهد و تا وقتی یافته‌ای هست اصلاح می‌کند.

اگر ایجنت مرحلهٔ آخر را خودش انجام نداد، در پایان کار از او بخواهید:

کدی که ساختی را با review_code دیگ بررسی کن و همهٔ یافته‌ها را درست کن.

دیگچه (Digche Icons)

مجموعه‌آیکونِ دیگچه هم سرور MCP جداگانهٔ خودش را دارد — پیدا کردنِ آیکونِ مناسب بر اساس معنا، پیشنهادِ یک ست هماهنگ برای چند جای یک صفحه، و گرفتنِ SVG نهایی، مستقیم از داخلِ چت.

دیگچه فقط برای جاهای آزاد آیکون است: مثلاً آیکونِ سبد خرید روی یک کارتِ محصول، یا محتوایِ ابتدا/انتهایِ یک Input. خیلی از کامپوننت‌های دیگ (مثل Password Field با آیکونِ چشم، یا Checkbox با آیکونِ تیک) از پیش به آیکونِ داخلیِ خودِ دیگ سیم‌کشی شده‌اند؛ آن‌ها را با یک SVG از دیگچه جایگزین نکنید، چون هماهنگیِ رنگ و اندازه‌شان را می‌شکند.

جست‌وجوی دیگچه فارسی و انگلیسی را می‌فهمد (مثلاً «سبد خرید» یا «shopping cart»). نام‌های چسبیدهٔ CamelCase مثل ArrowNarrowLeft را جدا بنویسید: arrow narrow left.

اتصال در Claude Code

claude mcp add --transport http digche https://icons.digdesign.ir/api/mcp

اتصال در Codex

[mcp_servers.digche]
url = "https://icons.digdesign.ir/api/mcp"

در بقیهٔ کلاینت‌ها (Gemini CLI، VS Code، Cursor و...) همان تنظیمات بخش سایر کلاینت‌های MCP را با نام digche و آدرس https://icons.digdesign.ir/api/mcp تکرار کنید.

ابزارهای در دسترس

ابزار	کاربرد
search_icons	جست‌وجوی آیکون بر اساس معنا، نام، برچسب یا مورد استفاده
recommend_icons	پیشنهادِ یک ست هماهنگ آیکون برای چند جای مشخص یک صفحه، در یک فراخوانی
find_replacement	پیدا کردنِ معادلِ دیگچه برای آیکونی از یک کتابخانهٔ دیگر
preview_icons	نمایشِ تصویریِ چند آیکونِ کاندید کنار هم، قبل از انتخابِ نهایی
get_icon_svg	دریافتِ کدِ SVG معتبرِ همان آیکون و سبکی که انتخاب شده
list_categories	فهرستِ دسته‌بندی‌ها و سبک‌های موجود در کتابخانه

استفاده

بعد از اتصال، کافی است ایجنت را به آیکونِ موردنیاز راهنمایی کنید؛ جست‌وجو، مقایسه و دریافتِ SVG را خودش انجام می‌دهد.

برای این سایدبار یک آیکونِ آپلود مناسب از دیگچه پیدا کن.