یک عامل کدنویسی که فقط کد می‌نویسد و صفحه را نمی‌بیند، شبیه طراحی است که چشم‌هایش بسته است. دو چیز این وضع را بهتر می‌کند: ابزار مرورگر تا عامل صفحه را باز کند، کلیک کند و خطاها را ببیند، و دانش طراحی تا خروجی ظاهری از قالب‌های تکراری بهتر باشد. Playwright MCP Claude Code مهم‌ترین گزینه برای گروه اول است: با یک دستور به Claude Code (کلاد کد) اضافه می‌شود و به عامل اجازه می‌دهد صفحه را مثل کاربر واقعی امتحان کند.
این مقاله سه ابزار را معرفی می‌کند: Playwright MCP برای اتوماسیون و تست، Chrome DevTools MCP برای دیباگ و کارایی، و ui-ux-pro-max برای دانش طراحی. می‌خوانید هرکدام را چطور نصب کنید، چه زمانی کدام را بردارید، چه هشدار امنیتی دارند و چطور در یک گردش‌کار کنار هم بنشینند.
تست مرورگر را روی Claude Code خودتان راه بیندازید
Claude Code را با کلید نقطه از داخل ایران وصل کنید؛ بدون فیلترشکن و کارت خارجی، با پرداخت ریالی؛ راه‌اندازی حدود ۵ دقیقه طول می‌کشد. بعد Playwright MCP با یک دستور اضافه می‌شود.
برای اینکه کارتان وسط پروژه قطع نشود، راهنمای کلود کد بدون بن شدن را ببینید.
چرا عامل کدنویسی به مرورگر نیاز دارد؟
وقتی از عامل می‌خواهید فرم ورود بسازد، کد را می‌نویسد و می‌گوید «انجام شد». اما آیا دکمه واقعاً کار می‌کند؟ آیا پیام خطا درست نمایش داده می‌شود؟ آیا در موبایل متن بریده نمی‌شود؟ بدون مرورگر، عامل فقط حدس می‌زند و مجبورید خودتان صفحه را باز کنید و بازخورد را دستی برگردانید.
با ابزار مرورگر، حلقه بسته می‌شود: عامل کد را می‌نویسد، صفحه را باز می‌کند، جریان را می‌رود، خطا را می‌بیند و اصلاح می‌کند. این همان اصل «بازخورد قابل‌اندازه‌گیری» در گردش‌کار توسعه با Claude Code است: هر جا عامل بتواند نتیجه را خودش بسنجد، کیفیت بالاتر می‌رود.
ابزارهای مرورگر از طریق MCP به Claude Code وصل می‌شوند. اگر MCP برایتان تازه است، اول MCP چیست و چطور کار می‌کند و بعد نصب امن پلاگین، skill و MCP در Claude Code را بخوانید.
Playwright MCP Claude Code: اتوماسیون و تست مرورگر
Playwright MCP (مایکروسافت) به LLM اجازه می‌دهد با صفحه‌های وب از طریق «snapshot ساختاریافتهٔ دسترس‌پذیری» (accessibility snapshot) کار کند، نه با اسکرین‌شات. README سه مزیت را برمی‌شمارد: سریع و سبک است چون از درخت دسترس‌پذیری Playwright استفاده می‌کند، برای LLM مناسب است چون بدون مدل بینایی و فقط با داده‌های ساختاریافته کار می‌کند، و کاربرد ابزار قطعی‌تر است چون ابهام روش‌های مبتنی بر اسکرین‌شات را ندارد.
نصب در Claude Code
نیاز: Node.js نسخهٔ ۱۸ یا بالاتر. دستور نصب طبق README:
claude mcp add playwright npx @playwright/mcp@latest
بعد از افزودن، با claude mcp list وضعیت اتصال را ببینید (باید Connected نشان دهد) و داخل Claude Code با /mcp سرورها را مدیریت کنید. سپس از Claude بخواهید: «صفحهٔ ورود را باز کن، با کاربر آزمایشی وارد شو و بگو بعد از ورود چه چیزی نمایش داده می‌شود.» عامل مرورگر را راه می‌اندازد و مراحل را با ابزارهای MCP می‌رود.
پروفایل مرورگر: ماندگار یا ایزوله
این بخش README برای امنیت مهم است. Playwright MCP به‌طور پیش‌فرض با «پروفایل ماندگار» (persistent) اجرا می‌شود، مثل یک مرورگر معمولی: اطلاعات ورود شما در پروفایل می‌ماند. در لینوکس مسیر پیش‌فرض آن زیر ~/.cache/ms-playwright/ است و پوشهٔ آن از ریشهٔ workspace مشتق می‌شود، پس هر پروژه پروفایل جدا دارد. سه راه برای کنترل:
- پروفایل ماندگار (پیش‌فرض): مناسب وقتی می‌خواهید یک بار وارد شوید و دفعات بعد وارد بمانید.
- حالت ایزوله: با
--isolatedپروفایل فقط در حافظه است و با بستن مرورگر همه‌چیز پاک می‌شود. برای تست تمیز بهترین گزینه است. اگر حالت اولیهٔ ورود لازم دارید، با--storage-stateفایل کوکی و local storage را به آن بدهید. - افزونهٔ مرورگر: با
--extensionبه مرورگر در حال اجرا وصل می‌شود (فقط Edge/Chrome). فقط وقتی لازم است که مطمئنید عامل به همان حساب‌ها دسترسی دارد.
یک محدودیت: پروفایل ماندگار هم‌زمان فقط توسط یک نمونهٔ مرورگر قابل استفاده است. اگر چند کلاینت MCP را با هم اجرا می‌کنید، برای هرکدام --isolated یا یک --user-data-dir جدا بدهید.
گزینه‌های پرکاربرد
| گزینه | کاربرد |
|---|---|
--headless |
اجرا بدون پنجره (پیش‌فرض با پنجره است)؛ برای سرور و CI |
--isolated |
پروفایل فقط در حافظه، بدون ذخیره روی دیسک |
--browser |
انتخاب مرورگر: chrome، firefox، webkit یا msedge |
--storage-state |
مسیر فایل حالت ذخیره‌شده (کوکی و local storage) برای نشست ایزوله |
--caps |
فعال‌کردن قابلیت‌های اضافه مثل vision، pdf و devtools |
برای اضافه کردن گزینه در Claude Code، بعد از -- بنویسید، مثلاً claude mcp add playwright -- npx @playwright/mcp@latest --isolated. این الگوی کلی دستور claude mcp add در مستندات code.claude.com است: گزینه‌های Claude پیش از -- و دستور سرور بعد از آن می‌آیند.
MCP یا CLI؟ نکتهٔ خود README دربارهٔ context
README خودش اعتراف می‌کند که عامل‌های کدنویسی جدید گاهی CLI را به MCP ترجیح می‌دهند، چون schema ابزارها و درخت دسترس‌پذیری بزرگ را وارد context نمی‌کند. در همان جا می‌گوید MCP برای حلقه‌های عاملی خاص مناسب است، مثل کاوش خودکار، تست‌های خودترمیم‌شونده یا کارهای طولانی که حفظ context مرورگر مهم‌تر از هزینهٔ توکن است. اگر مصرف context برایتان مهم است، این را بسنجید و راهنمای کاهش مصرف توکن را کنارش بخوانید.
Chrome DevTools MCP: دیباگ و کارایی
ابزار chrome-devtools-mcp از تیم Chrome به عامل اجازه می‌دهد مرورگر زنده را کنترل و بررسی کند: ثبت trace کارایی، بررسی درخواست‌های شبکه، اسکرین‌شات و پیام‌های کنسول (با stack trace نگاشت‌شده به منبع). نیازمندی‌ها طبق README: Node.js نسخهٔ LTS، Chrome پایدار فعلی (یا جدیدتر) و npm.
نصب
راهنمای رسمی ریپو برای Claude Code این دستور را می‌دهد:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
پیکربندی عمومی (برای کلاینت‌هایی که فایل JSON می‌خواهند) این است:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
اولین prompt آزمایشی خود README:
Check the performance of https://developers.chrome.com
اگر درست نصب شده باشد، مرورگر باز می‌شود و یک trace ثبت می‌شود. توجه: سرور مرورگر را فقط وقتی ابزاری نیاز داشته باشد راه می‌اندازد، پس صرفِ اتصال، مرورگر باز نمی‌کند.
پلاگین، CLI و skillهای آماده
README می‌گوید بستهٔ npm یک CLI هم دارد (chrome-devtools) تا بدون MCP از ترمینال مرورگر را کنترل کنید، و چند skill آماده برای عامل شامل دیباگ دسترس‌پذیری، دیباگ و بهینه‌سازی LCP و پیدا کردن نشت حافظه. نصب پلاگین (MCP و skillها با هم) در Claude Code:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
README یادآوری می‌کند skillها نسخهٔ مشخصی از ابزارها را توصیف می‌کنند؛ هر وقت سرور یا CLI را به‌روز کردید skillها را هم به‌روز کنید.
قیاس سریع
Playwright بیشتر «انجام‌دادن کار در صفحه» است و DevTools بیشتر «فهمیدن چرا صفحه کند یا خراب است». اگر جریان فرم را تست می‌کنید، Playwright؛ اگر می‌پرسید چرا بارگذاری کند است یا چرا خطای کنسول می‌آید، DevTools.
هشدارهای امنیتی و حریم خصوصی
README را جدی بگیرید: chrome-devtools-mcp محتوای نمونهٔ مرورگر را در اختیار کلاینت MCP می‌گذارد و می‌تواند هر داده‌ای را در مرورگر یا DevTools بخواند یا تغییر دهد؛ پس اطلاعات حساس یا شخصی را در آن مرورگر باز نگذارید. دو نکتهٔ دیگر از همان README:
- آمار استفاده: گوگل به‌طور پیش‌فرض آمار استفاده را جمع می‌کند (نرخ موفقیت ابزارها، تأخیر، اطلاعات محیط). با پرچم
--no-usage-statisticsمی‌توانید خاموشش کنید. - CrUX: ابزارهای کارایی ممکن است URL را برای دریافت داده‌های تجربهٔ کاربران واقعی به API گوگل (CrUX) بفرستند. با
--no-performance-cruxخاموش می‌شود.
همچنین پرچم‌هایی مثل --headless و --isolated در بخش Configuration ریپو آمده، و --slim فقط مجموعهٔ کوچکی از ابزارها را برای کارهای ساده نشان می‌دهد.
قاعدهٔ ما: با پروفایل جداگانه و بدون ورود به حساب‌های واقعی تست کنید. هرگز مرورگری را که در آن به بانک، ایمیل یا پنل مدیریتی وارد شده‌اید به عامل ندهید. همین قاعده برای Playwright با پروفایل ماندگار هم صادق است.
قبل از اجرای دستورهای نصب
دستورهای
claude mcp addو/pluginوقتی جواب می‌دهند که Claude Code به مدل وصل باشد؛ با یک کلید نقطه به Sonnet و Opus می‌رسید و مصرف را زنده در داشبورد می‌بینید.
ui-ux-pro-max: دانش طراحی برای خروجی بهتر
این skill (ریپوی nextlevelbuilder/ui-ux-pro-max-skill) مجموعه‌ای از سبک‌ها، پالت‌ها، فونت‌ها و قواعد UX است تا خروجی ظاهری بهتر شود. فایدهٔ اصلی‌اش این است که به‌جای «یک صفحهٔ زیبا بساز» که نتیجهٔ قالبی می‌دهد، عامل را به دانش طراحی مشخص (سبک، رنگ، تایپوگرافی، قاعدهٔ دسترس‌پذیری) مجهز می‌کند.
نصب
نصب در Claude Code، طبق README:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
یا از CLI (README آن را توصیه‌شده می‌داند): npm install -g ui-ux-pro-max-cli، بعد در پروژه uipro init --ai claude. فرمان uipro init --ai claude --global هم آن را به ~/.claude/skills/ می‌برد. اسکریپت جست‌وجوی skill به Python 3 نیاز دارد (با python3 --version بررسی کنید).
استفاده
README می‌گوید کافی است stack دلخواهتان را در prompt بیاورید (پیش‌فرض HTML و Tailwind است). برای دسترسی مستقیم به تولیدکنندهٔ سیستم طراحی، نمونهٔ README این است:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
فارسی و راست‌به‌چپ
README برای رابط‌های راست‌به‌چپ (عربی، عبری، فارسی) گزینهٔ --rtl دارد، مثلاً --domain style --rtl=full. با این حال، این skill بر پایهٔ سبک‌های بین‌المللی است؛ فونت فارسی، ارقام و جهت متن را خودتان بررسی کنید و در prompt صریح بخواهید (dir="rtl"، فونت مشخص). ما برای صفحه‌های فارسی همیشه خروجی را در مرورگر می‌بینیم و بعد اصلاح می‌کنیم؛ دقیقاً کاری که Playwright MCP آسانش می‌کند.
یک گزینهٔ سبک‌تر هم plugin رسمی frontend-design است که راهنمای کلی طراحی غیرقالبی می‌دهد.
مقایسهٔ سه ابزار: کدام را کی بردارم؟
| ابزار | بهترین برای | نیازمندی | نکتهٔ مراقبت |
|---|---|---|---|
| Playwright MCP | رفتن در جریان‌های صفحه: فرم، ورود، کلیک | Node.js ۱۸+ | پروفایل ماندگار؛ برای تست تمیز --isolated |
| Chrome DevTools MCP | کارایی، شبکه، کنسول، علت خرابی | Node.js LTS، Chrome پایدار | دسترسی کامل به مرورگر؛ آمار استفاده و CrUX |
| ui-ux-pro-max | سبک، رنگ، فونت و قواعد UX | Python 3 برای اسکریپت جست‌وجو | فارسی و RTL را در مرورگر وارسی کنید |
می‌توانید هر سه را داشته باشید، ولی هر MCP بخشی از context را می‌گیرد. برای شروع، یکی را انتخاب کنید که مشکل فعلی‌تان را حل می‌کند و بعد اضافه کنید.
گردش‌کار پیشنهادی طراحی و تست
- طراحی را با ui-ux-pro-max یا frontend-design شروع کنید و سبک و فونت را صریح بگویید.
- با Playwright MCP صفحه را باز کنید و جریان اصلی را بروید (ورود، ثبت فرم، خطاها).
- اگر کند یا خراب بود، با Chrome DevTools MCP trace و کنسول را بخوانید.
- اصلاح کنید و دوباره تست کنید.
- تست‌های ماندگار را در پروژه بنویسید (خود عامل می‌تواند بنویسد) تا دفعهٔ بعد لازم نباشد دستی تکرار شود.
این گردش‌کار را می‌توانید در حلقهٔ برنامه‌ریزی و بازبینی هم جا بدهید؛ راهنمای compound engineering نشان می‌دهد چطور.
عیب‌یابی رایج
- سرور در
claude mcp listمتصل نشان نمی‌دهد: Node.js را بررسی کنید و دستورnpxرا در ترمینال دستی اجرا کنید تا پیام خطای واقعی را ببینید. - مرورگر باز نمی‌شود (روی سرور): پنجره‌دار بودن پیش‌فرض Playwright MCP در Claude Code است؛ روی سرور بدون صفحه‌نمایش از
--headlessاستفاده کنید. - خطای پروفایل در حال استفاده: پروفایل ماندگار هم‌زمان برای یک نمونه است؛
--isolatedیا--user-data-dirجدا بدهید. - مصرف زیاد context: چند MCP را هم‌زمان فعال نگه ندارید؛ برای کارهای ساده از
--slimدر DevTools استفاده کنید. - متن فارسی برعکس یا بریده: جهت راست‌به‌چپ و فونت را در prompt صریح بخواهید و با Playwright خروجی را بررسی کنید.
جمع‌بندی
برای دیدن نتیجه: Playwright MCP Claude Code. برای فهمیدن مشکل: DevTools. برای ظاهر بهتر: ui-ux-pro-max یا frontend-design. و همیشه پروفایل مرورگر جدا. اگر می‌خواهید ببینید این ابزارها در تصویر بزرگ‌تر کجا می‌نشینند، راهنمای کامل Claude Code را بخوانید؛ و اگر به کنترل مرورگر واقعی (با ورودهای موجود) فکر می‌کنید، راهنمای browser-harness در Claude Code مسیر دیگری را نشان می‌دهد: Playwright برای تست تمیز با پروفایل جدا، browser-harness وقتی عامل باید با همان Chrome لاگین‌شدهٔ شما کار کند.
کلید API برای Claude Code با پلن پرو
کلید API فقط با پلن پرو نقطه باز می‌شود؛ با همان یک کلید به Sonnet و Opus می‌رسید، ریالی پرداخت می‌کنید و مصرف هر درخواست را زنده در داشبورد می‌بینید.
این مقاله چگونه بررسی شد؟
دستورهای نصب و ویژگی‌ها از README رسمی ابزارها (و برای دستور claude mcp از مستندات code.claude.com) برداشته شد و در ۱۳ آبان ۱۴۰۵ (۴ نوامبر ۲۰۲۶) دوباره با نسخهٔ فعلی ریپوها مقایسه شد. اگر دستوری در نسخهٔ شما فرق داشت، README همان نسخه معتبرتر است.
← آموزش Claude Code · نصب امن پلاگین و MCP · گردش‌کار توسعه با Claude Code
منابع: README رسمی microsoft/playwright-mcp، ChromeDevTools/chrome-devtools-mcp، nextlevelbuilder/ui-ux-pro-max-skill و مستندات code.claude.com. تاریخ بررسی: ۱۳ آبان ۱۴۰۵ (۴ نوامبر ۲۰۲۶).
