راهنمای جامع perfect-web-clone-skill: کپی کردن هر وب‌سایت با هوش مصنوعی

perfect-web-clone-skill یک ابزار متن‌باز برای Claude Code است که هر وب‌سایتی را به کدهای تمیز و آماده‌ی React، Next.js یا Vue تبدیل می‌کند. با این اسکیل، فقط کافی است آدرس سایت را بگویید تا خروجی کاملی دریافت کنید.

توسعه و اتوماسیون ★ ۱۷۶ Python منبع اصلی

perfect-web-clone-skill چیست؟

perfect-web-clone-skill یک اسکیل (Skill) برای Claude Code است که به شما امکان می‌دهد هر صفحه‌ی وب را به کدهای pixel-perfect و آماده‌ی تولید (production-ready) تبدیل کنید. این ابزار متن‌باز توسط Nexting.ai ساخته شده و با زبان Python نوشته شده است. با نصب این اسکیل، می‌توانید به زبان طبیعی به Claude Code بگویید که یک سایت را clone کند و آن را به صورت خودکار به پروژه‌ای قابل اجرا تبدیل کنید.

چه مشکلی را حل می‌کند؟

تبدیل یک وب‌سایت به کد معمولاً زمان‌بر و پر از خطاست. این اسکیل با خودکارسازی کل فرآیند، مشکلات زیر را حل می‌کند:

  • صرفه‌جویی در زمان: به جای ساعت‌ها کدنویسی دستی، در چند دقیقه کد آماده دارید.
  • دقت بالا: خروجی با استفاده از تکنیک‌های پیشرفته، ظاهر اصلی سایت را با جزئیات کامل بازتولید می‌کند.
  • پشتیبانی از فریمورک‌های مختلف: خروجی را می‌توانید در قالب Next.js، React، Vue یا HTML ساده دریافت کنید.
  • بدون نیاز به اسکریپت‌نویسی دستی: همه‌ی مراحل توسط Claude Code مدیریت می‌شود.

ویژگی‌های کلیدی

  • استخراج کامل صفحه: با استفاده از Playwright، DOM، استایل‌ها، اسکرین‌شات و تم (روشن/تاریک) سایت استخراج می‌شود.
  • تقسیم هوشمندانه: صفحه به بخش‌های کوچک و بدون همپوشانی تقسیم می‌شود (الگوریتم Three Principles).
  • تولید موازی: چند عامل (Agent) به صورت موازی کد تولید می‌کنند تا سرعت کار افزایش یابد.
  • پوشش کامل امکانات: چیدمان (Flexbox/Grid)، رنگ‌ها، تایپوگرافی، فاصله‌ها، سایه‌ها، انیمیشن‌ها، هاور، تصاویر و واکنش‌گرایی (Responsive) پشتیبانی می‌شود.
  • آماده‌ی اجرا: خروجی یک پروژه‌ی کامل با فایل‌های پیکربندی (مثل tailwind.config.js و package.json) است.

کاربردها

  • بازسازی سریع یک وب‌سایت برای پروژه‌های شخصی یا تیمی
  • یادگیری و بررسی کد سایت‌های محبوب (مثل Stripe یا Linear)
  • ایجاد نمونه‌ی اولیه (Prototype) از یک طرح موجود
  • مهاجرت سایت‌های قدیمی به فریمورک‌های مدرن

محدودیت‌ها و نکات

  • برای سایت‌های تک‌صفحه‌ای (SPA) که محتوای داینامیک دارند، ممکن است نیاز به تنظیم زمان انتظار باشد.
  • تصاویر در Next.js نیاز به پیکربندی خاص دارند (توضیح در بخش Troubleshooting).
  • این اسکیل فقط برای کلون کردن صفحات عمومی (بدون نیاز به ورود) طراحی شده است.

نصب

نصب

نصب شخصی (برای همه‌ی پروژه‌ها)

# کلون کردن به پوشه‌ی skills کلود کد
git clone https://github.com/anthropics/perfect-web-clone-skill.git ~/.claude/skills/perfect-web-clone

# نصب وابستگی‌ها
cd ~/.claude/skills/perfect-web-clone/scripts
pip install -r requirements.txt
playwright install chromium

نصب پروژه‌ای (برای اشتراک تیمی)

# کلون کردن به پوشه‌ی پروژه
git clone https://github.com/anthropics/perfect-web-clone-skill.git .claude/skills/perfect-web-clone

# نصب وابستگی‌ها (مثل بالا)

بعد از نصب، Claude Code را ریستارت کنید تا اسکیل به صورت خودکار شناسایی شود.

نحوهٔ استفاده

نحوه استفاده

کافی است به زبان طبیعی به Claude Code بگویید چه می‌خواهید. مثال‌ها:

  • Clone https://stripe.com – کلون با Next.js (پیش‌فرض)
  • Clone https://linear.app using React – کلون با React
  • Clone https://example.com with Vue – کلون با Vue 3
  • Clone https://example.com with 5 parallel agents – کلون سریع‌تر با عامل‌های موازی بیشتر
  • Clone https://example.com as fast as possible – حداکثر موازی‌سازی

بعد از کلون، برای اجرای پروژه:

npm install && npm run dev

مثال عملی

فرض کنید می‌خواهید سایت https://example.com را با React کلون کنید. دستور زیر را به Claude Code بدهید:

Clone https://example.com using React

Claude Code به صورت خودکار مراحل زیر را انجام می‌دهد:

  1. صفحه را با Playwright استخراج می‌کند.
  2. صفحه را به بخش‌های کوچک تقسیم می‌کند.
  3. کامپوننت‌های React را به صورت موازی تولید می‌کند.
  4. پروژه‌ی نهایی را در پوشه‌ی خروجی می‌سازد.

پرسش‌های متداول

آیا perfect-web-clone-skill برای سایت‌های داینامیک (SPA) هم کار می‌کند؟

بله، اما ممکن است نیاز باشد به Claude Code بگویید تا چند ثانیه صبر کند تا محتوا به طور کامل بارگذاری شود. مثلاً: «Clone https://example.com, wait 5 seconds for content to load».

چه فریمورک‌هایی پشتیبانی می‌شوند؟

Next.js (پیش‌فرض)، React، Vue 3 و HTML ساده. استایل‌ها معمولاً با Tailwind CSS تولید می‌شوند، به جز حالت HTML که از CSS ساده استفاده می‌کند.

آیا تصاویر سایت اصلی در خروجی حفظ می‌شوند؟

بله، تمام تصاویر با URL اصلی خود در خروجی قرار می‌گیرند. اگر در Next.js تصاویر لود نشدند، باید پیکربندی next.config.js را مطابق راهنمای Troubleshooting تنظیم کنید.

حداقل پیش‌نیازهای سیستم برای استفاده از این اسکیل چیست؟

Claude Code، Python 3.8 یا بالاتر، و Node.js 18 یا بالاتر. همچنین باید Playwright و مرورگر Chromium نصب شده باشند.

آیا استفاده از این اسکیل رایگان است؟

بله، این پروژه با مجوز MIT منتشر شده و کاملاً متن‌باز و رایگان است. فقط کافی است آن را از گیت‌هاب کلون کنید.

منابع

← همهٔ اسکیل‌ها نصب و راه‌اندازی توسط دیباچین