🌐 آموزش ساخت وبسایت سطحبالا با کلاد
🎯 در این ویدیو چی یاد میگیری؟
در این آموزش یاد میگیری چطور با استفاده از کلاد کُد (Claude Code) و اسکیل Taste، یه وبسایت حرفهای و سینماتیک با Next.js بسازی — بدون اینکه نیاز باشه بلد باشی چطور کد بنویسی. فقط یه پرامپت درست مینویسی و کلاد کل وبسایت رو برات میسازه.
📺 لینک ویدیو روی یوتیوب: https://youtu.be/ir2lMtdpnDA
ساختهشده توسط: ارتا بیدخوری — https://www.artabidkhori.com
🛠️ مرحله اول — نصب پیشنیازها
قبل از هر چیز، این سهتا ابزار رو روی کامپیوترت نصب کن:
۱. 🟩 نودجیاس و npm نصب کن
از لینک زیر نودجیاس (Node.js) رو دانلود و نصب کن:
nodejs.org/en/download
نکته مهم: وقتی نودجیاس رو نصب میکنی، ابزار npm هم خودکار باهاش نصب میشه — نیازی به نصب جداگانه نداری! بعد از نصب، ترمینال رو باز کن و این دستورها رو بزن تا مطمئن بشی همه چیز درسته:
اگه یه شماره نسخه مثل v20.x.x دیدی، یعنی اوکیه.
۲. 🐙 گیت نصب کن
از لینک زیر گیت (Git) رو دانلود و نصب کن:
git-scm.com/install
۳. 💻 ویژوال استودیو کُد نصب کن
از لینک زیر VS Code رو دانلود و نصب کن:
code.visualstudio.com/download
🤖 مرحله دوم — نصب اکستنشن کلاد در VS Code
بعد از نصب VS Code، این مراحل رو دنبال کن:
۱. ویاسکُد (VS Code) رو باز کن
۲. از نوار کناری چپ، آیکون اکستنشنها رو بزن (یا کلیدهای Ctrl+Shift+X)
۳. توی سرچ بنویس: Claude
۴. اکستنشن رسمی Anthropic رو پیدا کن و نصب کن
۵. بعد از نصب، روی آیکون چرخدنده (Manage) کلیک کن
۶. بعد گزینهی Settings رو بزن
۷. گزینهی Bypass Permissions رو فعال کن
این مرحله خیلی مهمه! بدون فعال کردن این گزینه، کلاد هر بار برای ساختن فایل از تو اجازه میخواد و کار کندتر میشه.
⚡ مرحله سوم — نصب Taste Skill
اسکیل Taste یه ابزار قدرتمنده که به کلاد یاد میده طراحیهای سطحبالا بسازه و از UI های کسلکننده و جنریک دور بشه. ریپوی گیتهابش بیش از ۳۰ هزار ستاره داره!
برای نصب، ترمینال رو باز کن (داخل VS Code یا جداگانه) و بزن:
بعد از نصب، دستور @design-taste-frontend توی کلاد فعال میشه. این اسکیل سه تا دایل (dial) داره که میتونی تنظیم کنی:
• 🎨 DESIGN_VARIANCE — میزان خلاقیت در لیاوت (از تمیز تا آزمایشی)
• 🎬 MOTION_INTENSITY — عمق انیمیشنها (از هاور تا اسکرول تریگر)
• 📐 VISUAL_DENSITY — میزان اطلاعات در هر صفحه
💬 مرحله چهارم — پرامپت ساخت وبسایت
حالا داخل VS Code، پنل Claude رو باز کن، Plan Mode رو فعال کن، و این پرامپت رو کپی کن و اجرا کن. کلاد اول ازت سوال میپرسه، بعد شروع به ساختن میکنه:
🖼️ پرامپت ساخت تصویر اول
این پرامپت رو توی ابزارهای تولید تصویر هوش مصنوعی مثل ChatGPT Images، Midjourney یا Firefly استفاده کن:
🖼️ پرامپت ساخت تصویر دوم
🎬 پرامپت ساخت ویدیوی ۶ ثانیهای
این پرامپت رو توی ابزارهای تولید ویدیوی هوش مصنوعی مثل Sora، Runway یا Kling استفاده کن:
📥 مرحله پنجم — کلون کردن پروژه
وقتی کلاد کدها رو ساخت، اول یه ریپازیتوری جدید روی گیتهاب (github.com) بساز. بعد پروژه رو با این دستور کلون کن — لینک your-repo رو با لینک واقعی ریپوت جایگزین کن:
🚀 مرحله ششم — اجرای لوکال
برای دیدن وبسایت روی کامپیوتر خودت، این دستور رو بزن:
بعد مرورگر رو باز کن و به آدرس http://localhost:3000 برو.
📤 مرحله هفتم — پوش به گیتهاب
وقتی تغییرات رو آماده کردی، با این سهتا دستور ذخیره و آپلود کن:
🌐 مرحله هشتم — انتشار با نتلیفای (Netlify)
برای آنلاینکردن وبسایتت از نتلیفای (Netlify) استفاده کن — رایگانه و خیلی سریع کار میکنه:
۱. برو به netlify.com و یه حساب بساز
۲. روی Add new site کلیک کن
۳. گزینهی Import from Git رو انتخاب کن
۴. اکانت گیتهابت رو وصل کن و ریپازیتوریت رو انتخاب کن
۵. روی Deploy site کلیک کن
چند ثانیه بعد، وبسایتت یه لینک آنلاین رایگان داره!
👤 سازندهی این محتوا
این آموزش توسط ارتا بیدخوری (Arta Bidkhori) ساخته شده.
• 🌐 وبسایت: https://www.artabidkhori.com
• 📷 اینستاگرام: https://artabidkhori.com/instagram
• 📺 ویدیوی یوتیوب: https://youtu.be/ir2lMtdpnDA