ساخت وب سایت با کلاد کد : راهنمای کامل بدون کدنویسی 1405
ساخت وب سایت با کلاد کد
فکرشو بکن میخوای یه وب سایت حرفهای داشته باشی، از اونایی که اگه به یه آژانس طراحی سفارش بدی بین ۵۰ تا ۲۰۰ میلیون ازت میگیره. حالا تصور کن همین کارو خودت بدون اینکه یه خط کد بلد باشی انجام بدی.
شاید این حرف یه کم دور از ذهن بهنظر برسه، ولی ساخت وب سایت با کلاد کد دقیقاً همین امکانو بهت میده. توی این راهنما قراره قدمبهقدم بهت نشون بدم چطور با کلاد کد و VS Code یه سایت واقعی، متحرک و جذاب بسازی که هیچ شباهتی به سایتهای کلیشهای ساختهشده با هوش مصنوعی نداره. نقش تو اینجا مدیر پروژهست، نه برنامهنویس. بذار شروع کنیم.
برای اطلاعات بیشتر راجع به مدلهای مختلف کلاد میتونی مقاله معرفی کلاد سونت 5 رو بخونی.
تفاوت وب سایت حرفهای با وب سایت معمولی چیه؟
یه وب سایت حرفهای از اولین ثانیهای که بازش میکنی حس متفاوتی بهت میده. این حس از کجا میاد؟ از یه سری جزئیات نامرئی که با هم ترکیب میشن و یه تجربه یکپارچه میسازن. وقتی میخوای ساخت وب سایت با کلاد کد رو شروع کنی، باید بدونی یه سایت حرفهای چه ویژگیایی داره تا بتونی همونها رو از کلاد بخوای.
اولین نکته دیدگاه مشخص و شخصیت منحصربهفرد سایتست. سایت باید یه هویت داشته باشه، نه اینکه شبیه هزارتا سایت دیگهای باشه که هر روز میبینی. کاربر باید بفهمه این سایت برای کیه و چی میگه.
تایپوگرافی و انتخاب فونت یکی دیگه از تفاوتهای بزرگه. سایتهای حرفهای از فونتهایی استفاده میکنن که شخصیت دارن و تو ذهنت میمونن. فونتهای کسلکنندهای مثل Arial یا همون Roboto که همهجا دیدی، سایتو فوری معمولی نشون میده. یه فونت خوب میتونه یه سایت معمولی رو به یه طراحی لوکس تبدیل بکنه.
بعدش رنگبندی هدفمند میاد. سایتهای گرونقیمت معمولاً از رنگای خیلی کمی استفاده میکنن، ولی اون رنگا رو با دقت انتخاب میکنن. یه پالت رنگی ساده ولی منسجم خیلی بهتر از رنگینکمونی از رنگاست که همهجا پاچیده شدن.
سلسلهمراتب بصری یعنی چشم کاربر بدونه اول کجا رو نگاه بکنه، بعد کجا و بعد کجا. اگه همه چیز یه اندازه باشه، چشم کلاً گم میشه. طراحی خوب چشمو هدایت میکنه دقیقاً به نقطهای که تو مدنظرت داری.
تصاویر و ویدیوهای با کیفیت تأثیر خیلی زیادی روی حس کاربر دارن. یه عکس حرفهای فوراً حس لوکسبودنو میده. بعداً یاد میگیریم چطور با هوش مصنوعی تصویر و ویدیوی حرفهای بسازیم و داخل سایتمون ازشون استفاده بکنیم.
انیمیشنهای هدفمند و ملایم یکی دیگه از تفاوتهای مهمه. حرکتهای آروم و ظریف که چشمنواز هستن، حس حرفهایبودن میدن، نه انیمیشنهای شلوغپلوغی که موسو تکون میدی همهچی میریزه.
طراحی واقعی برای موبایل یعنی سایت برای صفحهی کوچیک طراحی شده باشه، نه اینکه فقط المانها کوچیکتر بشن. این با رسپانسیو بودن خیلی فرق داره.
آخرین نکته کیفیت نامرئیـه. چیزایی که کاربر نمیبینه ولی حس میکنه: سایت سریع لود میشه، اسکرول روونست، همهچی طبیعی کار میکنه. این جزئیات ریز فرق خوب با عالی رو میسازن.
راهاندازی پروژه وب سایت در VS Code با کلاد کد
برای شروع ساخت وب سایت با کلاد کد اول باید محیط کارتو آماده کنی. اگه میخوای از خود کلاد دسکتاپ استفاده کنی، میتونی از بخش کلاد کد توی همون اپلیکیشن شروع کنی. ولی توی این مقاله از VS Code استفاده میکنیم چون کار خیلی مرتبتری داره، دسترسی بهتری به پروژه داری و تسلط بیشتری روی فایلها داری.
اول VS Code رو باز کن و به بخش Extensions برو. اگه افزونهی کلاد کد رو نصب نکردی، باید اول نصبش کنی. بعد از نصب، یه پوشهی خالی برای پروژهت روی کامپیوترت بساز. یه نکتهی مهم: از اسپیس توی اسم پوشه استفاده نکن. مثلاً بهجای “My Website” بذار “my-website” یا “MyWebsite”.
حالا توی VS Code روی گزینهی “Open Folder” کلیک کن و همون پوشهای که ساختی رو انتخاب کن. بعد از اینکه پوشه باز شد، روی آیکون کلاد کد توی نوار کناری کلیک کن. یه دکمهی “New Session” میبینی، روش کلیک کن. یه سشن جدید برات باز میشه که اینجا قراره دستوراتو بدی و کلاد سایتو برات بسازه.
اینجا نقش تو مدیر پروژهست، نه کدنویس. تو میگی چی میخوای، کلاد کد مینویسه. این یعنی باید دقیق بگی چه سایتی میخوای، چه رنگایی، چه حسی، چه بخشهایی. هرچی دقیقتر باشی، خروجی بهتره.
توی پروژهی جدید کلاد یه ساختار پوشه میسازه. معمولاً یه فایل HTML اصلی داری، یه پوشه برای CSS و یکی هم برای JavaScript. اگه میخوای از تصاویر یا ویدیو استفاده کنی، یه پوشهی assets یا images هم لازمه. خود کلاد کد این ساختارو برات میسازه، فقط باید درخواستتو روشن بدی.
مفهوم skill در کلاد کد و کاربرد آن
یکی از مهمترین مفاهیمی که باید قبل از ساخت وب سایت با کلاد کد بدونی، مفهوم Skill یا skillست. کلاد کد بهصورت پیشفرض یه هوش مصنوعی عمومیست. یعنی کارهای عمومیو که همه باهاش انجام میدن رو انجام میده. خیلی چیزا رو میدونه، ولی وقتی ازش میخوای یه سایت طراحی کنه، معمولاً همون فونتهای تکراری، همون رنگای کلیشهای و همون طرحبندیای پیشپاافتادهای رو میده که همه سایتها دارن.
اینجاست که skillها به کمکت میان. skill در واقع یه فایل متنیه که معمولاً با فرمت Markdown و پسوند .md نوشته میشه. این فایل شامل دستورالعملهای دقیق برای کلادست که بهش میگه توی یه حوزهی خاص چطور رفتار کنه. مثلاً بهش میگه از این فونتها استفاده نکن، از این رنگا استفاده نکن، برای طراحی این مسیر رو دنبال نکن.
تفاوت کلاد عمومی با کلاد مجهز به skill اینه که کلاد عمومی یه خروجی استاندارد و تکراری میده، ولی کلاد با skill یه خروجی تخصصی و حرفهای میده که دقیقاً به خواستهی تو نزدیکتره.
ساختار فایل skill خیلی سادهست. یه فایل مارکدان با تیترها، پاراگرافها و لیستهاست. مثلاً مینویسه: “وقتی داری یه سایت محصول طراحی میکنی، از این آیکونها استفاده نکن” یا “برای انتخاب فونت، این گزینهها رو در اولویت قرار بده”.
برای اینکه کلاد بتونه این skillها رو پیدا کنه و ازشون استفاده بکنه، باید توی یه ساختار پوشهی مشخص بذاریشون. کلاد یه پوشهی مخفی بهاسم .claud/Skills توی ریشهی پروژه میسازه و skillها رو اونجا ذخیره میکنه.
skillها رو میتونی بهدوتا روش نصب کنی: دستی یا از طریق لینک. برای نصب دستی، فایل skill رو دانلود میکنی و خودت توی پوشهی Skills میذاری. برای نصب از طریق لینک، فقط کافیه لینک skill رو به کلاد بدی و خودش دانلود و نصبش میکنه.
نصب و استفاده از skill Front-End Design
اولین skillی که برای ساخت وب سایت با کلاد کد لازمه، skill Front-End Design هست. این skill رو خود شرکت Anthropic، همون سازندهی کلاد، ساخته و طراحی کرده. این skill توی پسزمینه کار میکنه، یعنی نیاز نیست هر بار صداش بزنی. یهبار که نصبش کنی، تا وقتی که توی پروژه باشه، همیشه فعالست.
این skill دقیقاً چیکار میکنه؟ اول از همه، رایجترین فونتهای اینترنت رو توی کلاد ممنوع میکنه. فونتهایی که انقدر زیاد توی سایتهایی که با هوش مصنوعی ساخته میشن استفاده شدن که فوری تا سایتو باز میکنی، داد میزنه این سایتو یه AI ساخته. با این skill، جلوی کلاد رو میگیری که سراغ فونتهای کلیشهای نره و یه سری انتخابهای جسورانهتر و متمایزتر داشته باشه.
مورد دومی که این skill انجام میده اینه که کلاد کد رو به سمت یه جهت طراحی مشخص هدایت میکنه. بهجای اینکه همون خروجیهای استاندارد و تکراری رو بده، یه مسیر طراحی متفاوت رو دنبال میکنه که نتیجهش سایتی میشه که واقعاً از بقیه جدا میافته.
برای دانلود این skill، میتونی به مخزن رسمی آنتروپیک توی GitHub بری یا مستقیم لینکشو به کلاد بدی. وقتی لینک رو میدی، کلاد خودش فایلو میگیره و توی پوشهی Skills ذخیرهش میکنه. از اون بهبعد، هر بار که یه درخواست طراحی وب سایت بدی، این skill توی پسزمینه فعاله و خروجیو فرق میده.
این skill هم کیفیت نوشتار و محتوای سایت رو بهبود میده. یعنی نهفقط ظاهر، بلکه متنهایی که کلاد برای بخشهای مختلف سایت مینویسه هم حرفهایتر و جذابتر میشن.
🎯 اشتراک Claude Pro رو از کادینر بگیر!
اکانت اختصاصی و قانونی روی ایمیل خودت، تحویل زیر ۳۰ دقیقه و گارانتی تا پایان اشتراک — بدون دردسر.
🛡 گارانتی تا پایان اشتراک
💬 پشتیبانی فارسی
نصب skill UI/UX Pro Max
skill دوم که برای ساخت وب سایت با کلاد کد خیلی کاربردیست، UI/UX Pro Max هست. این skill دسترسی به ۵۷ استایل UI مختلف بهت میده که میتونی از اونها الهام بگیری یا مستقیم بخوای کلاد کد ازشون استفاده کنه.
علاوه بر این، این skill شامل ۹۵ پالت رنگی آماده و حرفهایـه. این پالتها از سایتهای معروف و طراحیهای برتر دنیا جمعآوری شدن و هرکدوم یه ترکیب منسجم و چشمنواز رو ارائه میدن. دیگه لازم نیست خودت ساعتها فکر کنی چه رنگایی باهم جور میشن.
یکی از ویژگیهای خاص این skill ترکیب فونتها با رنگهای منتخبـه. یعنی بهت پیشنهاد میده کدوم فونتها با کدوم پالت رنگی بهتر جور میشن و خروجی منسجمتری میدن.
حالا چطور این skill رو نصب کنیم؟ چون این skill رو شخص ثالثی ساخته (نه خود Anthropic)، باید یه کم احتیاط بیشتری کنی. اول اطمینان حاصل کن که از یه منبع معتبر داری دانلودش میکنی. بعد فایلو دانلود کن و توی پوشهی .claud/Skills پروژهت بذار.
روش امن برای نصب skillهای شخص ثالث اینه که اول محتوای فایلو باز کنی و یه نگاه بهش بندازی. چون فایل Markdown و متنیه، میتونی ببینی دقیقاً چه دستوراتی داره. اگه چیز مشکوکی ندیدی، میتونی باخیال راحت ازش استفاده کنی.
بعد از نصب، وقتی بهش میگی یه سایت بسازه، میتونی بهش بگی “از پالت رنگی شماره ۲۳ استفاده کن” یا “طراحیو با استایل UI شماره ۱۲ پیش ببر”. این skill خیلی کمک میکنه سایتت یه ظاهر منسجم و حرفهای داشته باشه.
نصب و کار با skill Video to Website
یکی از جذابترین skillهایی که برای ساخت وب سایت با کلاد کد میتونی استفاده کنی، Video to Website هست. این skill کاری میکنه که ویدیوهاتو به یه المان تعاملی توی سایت تبدیل کنی که با اسکرول کاربر همزمان پخش میشه.
این skill چطور کار میکنه؟ اول ویدیو رو به فریمهای تصویری تبدیل میکنه. یعنی ویدیوی تو رو میشکنه به چندین عکس متوالی. بعد این فریمها رو به موقعیت اسکرول متصل میکنه. یعنی وقتی کاربر صفحه رو اسکرول میکنه پایین، فریمهای ویدیو بهترتیب نمایش داده میشن و یه حس استاپموشن درست میشه.
این افکت خیلی جذابه چون افکت استاپموشن با اسکرول ایجاد میکنه که حس واقعاً حرفهای و پرمیوم میده. سایتهای خیلی گرونقیمت از این روش استفاده میکنن تا کاربر رو درگیر کنن و تجربهی متفاوتی بهش بدن.
برای نصب این skill، فایلشو دانلود میکنی و دقیقاً مثل skillهای قبلی توی پوشهی Skills قرار میدی. بعد وقتی میخوای ازش استفاده کنی، ویدیوتو آماده میکنی (ترجیحاً با کیفیت بالا و مدتزمان کوتاه) و به کلاد کد میگی: “این ویدیو رو با skill Video to Website توی بخش اصلی سایت اضافه کن”.
کلاد کد خودش ویدیو رو پردازش میکنه، فریمها رو جدا میکنه و کدهای لازم رو مینویسه که اسکرول با نمایش فریمها همزمان بشه. نتیجهش یه سایت خیلی جذاب و متحرکه که کاربرا رو شگفتزده میکنه.
یه نکته: این افکت روی سرعت لود سایت تأثیر میذاره، پس بهتره تعداد فریمها رو زیاد نکنی و کیفیت تصاویر رو بهینهسازی کنی.
مفاهیم پایه طراحی وب: فرانتاند و ساختار صفحه
قبل از اینکه بیشتر توی ساخت وب سایت با کلاد کد پیش بری، بهتره یه درک پایه از مفاهیم طراحی وب داشته باشی. نگران نباش، قرار نیست برنامهنویس بشی، فقط باید بدونی چی داری ازش میخوای.
فرانتاند به اون بخشی از وب سایت گفته میشه که کاربر میبینه و باهاش تعامل میکنه. همهچیزی که روی صفحه نمایش داده میشه — رنگا، فونتها، دکمهها، منوها، تصاویر — همش فرانتانده. در مقابلش بکاند هست که مربوط به دیتابیس و سرور و چیزاییست که کاربر نمیبینه.
فرانتاند از سه جزء اصلی تشکیل شده: HTML که ساختار صفحه رو مشخص میکنه، CSS که ظاهر و استایل رو تعیین میکنه و JavaScript که رفتارها و تعاملات رو کنترل میکنه. وقتی کلاد کد داره برات سایت میسازه، همین سه تا رو مینویسه، ولی تو نیازی نیست بدونی چطور مینویسه.
ساختاردهی صفحه با HTML یعنی تعیین کردن اینکه کدوم بخش هِدِره، کدوم بخش محتوای اصلیه، کدوم بخش فوتِره. این مثل اسکلت یه ساختمونه که بعداً رنگ و جزئیات بهش اضافه میشه.
درک تعامل کاربر با رابط کاربری یعنی فهمیدن اینکه کاربر چطور با سایت کار میکنه. مثلاً روی چی کلیک میکنه، کجا اسکرول میکنه، چه انتظاراتی داره. وقتی اینها رو درک کنی، میتونی بهتر به کلاد کد بگی چطور سایتو طراحی کنه.
مثلاً میتونی بگی: “یه منوی ثابت در بالای صفحه بساز که وقتی اسکرول میشه، شفاف بشه” یا “دکمهی تماس باید توی گوشهی پایین راست شناور باشه”. اینجوری داری مستقیم دستور میدی که رابط کاربری چطور باشه.
سؤالات متداول
آیا واقعاً میشه بدون دانش کدنویسی سایت حرفهای ساخت؟
بله، با کلاد کد و استفاده از skillهای مناسب میتونی یه سایت کاملاً حرفهای بسازی بدون اینکه یه خط کد بنویسی. نقش تو مدیریت پروژهست: تصمیم میگیری سایت چطور باشه، چه رنگایی داشته باشه، چه بخشهایی داشته باشه. کلاد کد کدنویسی رو انجام میده.
skillها رو از کجا پیدا کنم؟
skill Front-End Design رو خود Anthropic توی مخزن رسمیش توی GitHub منتشر کرده. skillهای دیگه رو میتونی از جوامع مختلف هوش مصنوعی، مثل Discord یا Reddit پیدا کنی. فقط حواست باشه از منابع معتبر دانلود کنی و محتوای فایل رو قبل از استفاده چک کنی.
چطور میتونم سایتمو روی اینترنت منتشر کنم؟
بعد از اینکه سایتتو با ساخت وب سایت با کلاد کد آماده کردی، باید یه سرویس هاست پیدا کنی. سرویسهایی مثل Netlify، Vercel یا GitHub Pages رایگان هستن و خیلی ساده سایتتو آپلود میکنن. کافیه فایلهای HTML، CSS و JavaScript رو بهشون بدی و چند دقیقه بعد سایتت آنلاینه.
آیا سایتی که با کلاد کد میسازم موبایلفرنلیست؟
اگه توی درخواستت به کلاد بگی که سایت باید responsive باشه و برای موبایل طراحی بشه، کلاد کد خودش این کارو انجام میده. ولی بهتره بعد از ساخت، خودت سایتو روی موبایل و تبلت تست کنی و اگه جایی مشکل دیدی، به کلاد بگی اصلاحش کنه.
چطور تصاویر و ویدیوهای خودمو توی سایت اضافه کنم؟
تصاویر و ویدیوهاتو توی یه پوشه مثل assets یا images توی پروژه قرار بده. بعد به کلاد کد بگو: “تصویر فلان رو از پوشه assets بگیر و توی بخش هِدِر قرار بده” یا “ویدیوی فلان رو با skill Video to Website اضافه کن”. کلاد کد خودش کدهای لازم رو مینویسه که اون فایلها بهدرستی لود بشن.
منابع
- مستندات رسمی Claude{:target=”_blank” rel=”noopener noreferrer”} — راهنمای کامل استفاده از کلاد و کلاد کد
- GitHub Skills Collection{:target=”_blank” rel=”noopener noreferrer”} — مجموعه skillهای رسمی و کاربردی برای کلاد
- VS Code Marketplace – Claude Extension{:target=”_blank” rel=”noopener noreferrer”} — افزونه کلاد برای VS Code
حالا که تا اینجا خوندی، میدونی که ساخت وب سایت با کلاد کد فقط یه خیال نیست، بلکه یه روش واقعی و کاربردیست که میتونه بهت کمک کنه یه سایت حرفهای بسازی بدون اینکه ماهها وقت بذاری یاد بگیری کدنویسی. با استفاده از skillهای مناسب، انتخاب پالتهای رنگی حرفهای، استفاده از تصاویر و ویدیوهای با کیفیت و توجه به جزئیاتی که یه سایت حرفهای رو از یه سایت معمولی جدا میکنه، میتونی یه نتیجهی واقعاً خوب بگیری.
برای اینکه بتونی از امکانات کامل کلاد استفاده کنی و سرعت کار بالا بره، اشتراک Claude Pro از کادینر{:target=”_blank” rel=”noopener”} رو بررسی کن — اکانت اختصاصی روی ایمیل خودت، تحویل سریع و گارانتی کامل.
هنوز دیدگاهی برای این محصول ثبت نشده است.