آموزش طراحی سایت با Claude: راهنمای گام‌به‌گام برای مبتدیان

اگر تا امروز فکر می‌کردید ساخت یک وب‌سایت حرفه‌ای فقط کار برنامه‌نویس‌هاست، وقت آن رسیده این تصور را کنار بگذارید. در این راهنما قدم‌به‌قدم یاد می‌گیرید طراحی سایت با Claude چیست، چطور بدون نوشتن حتی یک خط کد، صفحه یا سایتی حرفه‌ای بسازید و آن را به‌صورت رایگان روی اینترنت منتشر کنید. این آموزش برای افرادی نوشته شده که هیچ پیش‌زمینه فنی ندارند و می‌خواهند اولین تجربه‌ی طراحی سایت با هوش مصنوعی را با اطمینان کامل شروع کنند.

طراحی سایت با کلود (Claude) چیست؟

طراحی سایت با کلود یعنی استفاده از دستیار هوش مصنوعی Claude، محصول شرکت Anthropic، برای تولید کد واقعی وب‌سایت شامل HTML، CSS و جاوا اسکریپت، فقط با توضیح‌دادن خواسته‌تان به زبان فارسی یا انگلیسی. شما در یک گفت‌وگوی ساده می‌گویید چه سایتی می‌خواهید و Claude همان لحظه یک نسخه‌ی زنده و قابل‌مشاهده از صفحه را برایتان می‌سازد.

در حال حاضر چند راه برای این کار وجود دارد:

• Artifacts: در چت معمولی Claude، کدی که می‌نویسد را همان لحظه به‌صورت یک صفحه‌ی زنده کنار متن نمایش می‌دهد؛ سریع‌ترین راه برای ساخت یک صفحه‌ی تکی.
• Claude Design: پیش‌نمایش تحقیقاتی جدید Anthropic برای ساخت سیستم طراحی، رنگ‌بندی برند و نمونه‌های بصری صیقلی‌تر، پیش از تبدیل‌شدن به کد نهایی.
• Claude Cowork: محیطی در اپلیکیشن دسکتاپ Claude که مستقیماً روی فایل‌های واقعی روی کامپیوتر شما کار می‌کند؛ برای ساخت و انتشار یک سایت کامل و چندصفحه‌ای مناسب‌تر است.
• Claude Code: ابزاری برای پروژه‌های بزرگ‌تر و توسعه‌دهندگانی که می‌خواهند کنترل بیشتری روی کد داشته باشند.

تفاوت اصلی این روش با سایت‌سازهای آماده یا Elementor این است که خروجی Claude، کد اختصاصی و کاملاً قابل‌ویرایش است، نه یک قالب از پیش‌ساخته که هزاران سایت دیگر هم از همان استفاده می‌کنند. به همین دلیل طراحی سایت با ai این‌روزها به گزینه‌ی اول کسانی تبدیل شده که هم سرعت می‌خواهند و هم کنترل کامل روی نتیجه‌ی نهایی.

چرا طراحی سایت با هوش مصنوعی Claude انتخاب خوبی است؟

• پیش‌نمایش زنده: نتیجه‌ی کار را همان لحظه می‌بینید و بدون رفت‌وبرگشت زیاد بازخورد می‌دهید.
• کد تمیز و استاندارد: خروجی معمولاً ساختارمند و خوانا است و نیاز به اصلاح دستی کمتری دارد.
• طراحی ریسپانسیو: اگر در پرامپت درخواست کنید، صفحه به‌طور پیش‌فرض در موبایل و دسکتاپ هم درست نمایش داده می‌شود.
• ویرایش با زبان طبیعی: کافی است بنویسید «هدر را چسبان کن» یا «رنگ اصلی را به #26C8DD تغییر بده» تا کد به‌روزرسانی شود.
• هزینه‌ی صفر برای شروع: نسخه‌ی رایگان Claude به همراه GitHub و Cloudflare Pages، کل مسیر ساخت و انتشار را بدون هزینه پوشش می‌دهد.
• بدون نیاز به دانش برنامه‌نویسی: تمام مراحل، از ساخت تا اصلاح، فقط با نوشتن پرامپت انجام می‌شود.

پیش‌نیازهای شروع طراحی سایت با Claude

• یک حساب کاربری رایگان در Claude.
• یک ایده‌ی نسبتاً روشن از سایتی که می‌خواهید بسازید (موضوع، مخاطب، بخش‌ها).
• آشنایی پایه با مفاهیم ساده‌ی وب مثل هدر، هیرو و فوتر.
• در صورت تمایل به انتشار رایگان و کامل: یک ایمیل برای ساخت حساب در GitHub و Cloudflare.
• اگر می‌خواهید نتیجه را روی دامنه‌ی خودتان و در وردپرس منتشر کنید: دسترسی به پیشخوان سایت وردپرسی.

دو روش طراحی سایت با Claude؛ کدام را انتخاب کنید؟

روش اول: ساخت سریع یک صفحه با Artifacts

این روش بهترین نقطه‌ی شروع برای مبتدیان است، چون هیچ تنظیمات جانبی لازم ندارد.

۱. وارد Claude شوید و یک چت جدید باز کنید

به claude.ai بروید، وارد حساب کاربری‌تان شوید و یک گفت‌وگوی تازه شروع کنید.

۲. یک پرامپت دقیق بنویسید

هرچه توضیح شما دقیق‌تر باشد، خروجی به خواسته‌ی شما نزدیک‌تر است. حتماً زبان، بخش‌ها، رنگ برند و حس‌وحال طراحی را مشخص کنید. نمونه‌ای از یک پرامپت خوب:

۳. پیش‌نمایش زنده (Artifact) را بررسی کنید

Claude کنار پاسخ خود، یک پنجره‌ی پیش‌نمایش باز می‌کند که همان لحظه صفحه‌ی طراحی‌شده را نشان می‌دهد.

۴. با پیام بعدی اصلاح کنید

هر تغییری لازم بود را در پیام بعدی به زبان ساده بگویید؛ مثلاً «فاصله‌ی بین بخش‌ها را بیشتر کن» یا «فلان سکشن رو حذف کن». نیازی نیست از صفر شروع کنید.

۵. کد نهایی را کپی و ذخیره کنید

وقتی نتیجه راضی‌کننده بود، کد را از پنجره‌ی Artifact کپی کنید تا در مرحله‌ی بعد آن را منتشر کنید.

چطور خروجی Claude را روی وردپرس منتشر کنیم؟

سه راه اصلی دارید:

پس از انتقال، حتماً موارد زیر را بررسی کنید: سرعت بارگذاری صفحه، نمایش صحیح در موبایل، و ساختار سئوی صفحه شامل عنوان (Title)، توضیحات متا و ترتیب درست هدینگ‌ها (H1 تا H3).

روش دوم: ساخت و انتشار رایگان یک سایت کامل با Claude Cowork

اگر می‌خواهید نتیجه‌ی کار فقط یک پیش‌نمایش نباشد و یک آدرس اینترنتی واقعی و زنده داشته باشید، این روش را دنبال کنید. در این مسیر از سه ابزار رایگان استفاده می‌کنیم: Claude Cowork برای ساخت و ویرایش فایل‌ها، GitHub برای نگهداری نسخه‌ها، و Cloudflare Pages برای انتشار خودکار سایت روی اینترنت.

مرحله ۰ — دانلود Claude Desktop

 Claude Desktop را دانلود و نصب کنید.

Claude Desktop این امکان را به شما می‌دهد که با فایل‌های موجود روی کامپیوترتان کار کنید. این قابلیت در یکی از سه حالت Claude با نام Cowork ارائه می‌شود. در این بخش قرار است از همین حالت استفاده کنیم.

مرحله ۱ — باز کردن Cowork و ساخت یک پروژه جدید

ابتدا Claude Desktop را باز کنید و از منوی کناری سمت چپ وارد بخش Cowork شوید.

Cowork بخشی از Claude است که می‌تواند مستقیماً با فایل‌های موجود روی کامپیوتر شما کار کند؛ یعنی فقط درباره فایل‌ها با شما گفتگو نمی‌کند، بلکه می‌تواند آن‌ها را بخواند، ویرایش کند و فایل‌های جدید ایجاد کند و همه این کارها را در پوشه‌ای که شما انتخاب می‌کنید انجام دهد.

حالا روی Projects کلیک کنید و سپس در قسمت بالای سمت راست صفحه، روی دکمه New project کلیک کنید.

مرحله ۲ — انتخاب گزینه «Use an existing folder»

Claude برای شروع یک پروژه، سه روش در اختیار شما قرار می‌دهد:

• ساخت یک پروژه از ابتدا
• وارد کردن پروژه‌ای که قبلاً جای دیگری ساخته‌اید
• انتخاب پوشه‌ای که از قبل روی کامپیوترتان دارید

برای کاری که ما می‌خواهیم انجام دهیم، ابتدا یک پوشه خالی در کامپیوترتان بسازید. من پوشه خودم را داخل Documents ایجاد کردم و نام آن را sample-web-site گذاشتم.

سپس گزینه Use an existing folder را انتخاب کنید.

مرحله ۳ — انتخاب پوشه

یک پنجره باز می‌شود و از شما می‌خواهد پوشه موردنظر را انتخاب کنید.

روی گزینه Select a folder کلیک کنید و به پوشه خالی‌ای که در مرحله قبل ساختید بروید و آن را انتخاب کنید.

مرحله ۴ — تأیید نام پروژه

بعد از انتخاب پوشه، Claude به‌صورت خودکار نام پروژه را بر اساس نام پوشه وارد می‌کند.

می‌توانید نام را همان‌طور که هست نگه دارید یا آن را تغییر دهید.

یک بخش اختیاری به نام Instructions هم وجود دارد. فعلاً این قسمت را خالی بگذارید؛ بعداً دوباره به آن برمی‌گردیم.

در نهایت روی Create کلیک کنید.

مرحله ۵ — حالا یک پروژه دارید

Claude شما را وارد نمای پروژه خالی می‌کند.

در سمت چپ، بخش Chat قرار دارد که در آن با Claude گفتگو می‌کنید. در سمت راست هم Project Context را می‌بینید که شامل پوشه‌ای است که انتخاب کرده‌اید و همچنین بخش Memory.

از اینجا به بعد، این صفحه محل اصلی کار شماست. هر چیزی که از Claude بخواهید در این پروژه ایجاد کند، داخل همان پوشه‌ای که روی کامپیوترتان انتخاب کرده‌اید ذخیره می‌شود.

مرحله ۶ — ساخت یک حساب رایگان در GitHub

حالا برای چند دقیقه از Claude خارج می‌شویم و سراغ GitHub می‌رویم.

GitHub جایی است که توسعه‌دهندگان معمولاً کدهای خود را در آن ذخیره می‌کنند. اما برای کاری که شما انجام می‌دهید، می‌توانید GitHub را مثل یک پوشه ابری رایگان با قابلیت ذخیره تاریخچه تغییرات در نظر بگیرید.

هر بار که تغییری در فایل‌ها ایجاد شود، GitHub دقیقاً ثبت می‌کند چه چیزی و چه زمانی تغییر کرده است.

به github.com/signup بروید و یک حساب رایگان بسازید. یک نام کاربری انتخاب کنید؛ این نام بخشی از پروفایل عمومی شما خواهد بود. سپس ایمیل خود را تأیید کنید و کار تمام است.

مرحله ۷ — ساخت یک Repository جدید

یک Repository (یا به‌اختصار Repo) در واقع مثل یک پوشه در GitHub است که فایل‌های پروژه شما داخل آن قرار می‌گیرند.

بعد از ورود به حساب کاربری، به صفحه github.com/new بروید.

برای Repository یک نام انتخاب کنید. من برای هماهنگی با نام پوشه‌ای که روی کامپیوترم ساخته بودم، نام sample-web-site را انتخاب کردم.

Repository را روی حالت Public قرار دهید. نیازی نیست قسمت Description را پر کنید.

مرحله ۸ — اضافه کردن README

بعد از انجام مرحله قبل، GitHub به شما نشان می‌دهد که پروژه خالی است. اما یک لینک برای اضافه کردن فایل README در اختیار شما قرار می‌دهد.

روی این لینک کلیک کنید و یک فایل README بسازید. نگران محتوای آن نباشید؛ حتی اگر بخواهید می‌توانید آن را خالی بگذارید.

این مرحله مهم‌تر از چیزی است که به نظر می‌رسد. دلیل اضافه کردن یک فایل ساده README این است که با این کار، Main Branch ایجاد می‌شود؛ یعنی نسخه اصلی و پیش‌فرض پروژه که سرویس‌های دیگر می‌توانند به آن متصل شوند.

چند مرحله بعد قرار است Cloudflare Pages را راه‌اندازی کنیم. این سرویس برای اینکه بتواند تغییرات پروژه را بررسی و سایت شما را به‌صورت خودکار منتشر کند، به یک Branch نیاز دارد. بدون Branch، چیزی برای اتصال وجود ندارد.

فعلاً لازم نیست نگران خود فایل README باشید. کمی بعد محتوای این پوشه را با فایل واقعی index.html جایگزین و کامل‌تر می‌کنیم.

در حال حاضر، فقط می‌خواهیم نقطه اتصال پروژه را ایجاد کنیم.

مرحله ۹ — ساخت حساب در Cloudflare

Cloudflare سرویسی است که فایل‌های موجود در Repository شما در GitHub را دریافت می‌کند و آن‌ها را به یک وب‌سایت واقعی با یک آدرس اینترنتی تبدیل می‌کند.

به dash.cloudflare.com/sign-up بروید.

می‌توانید با حساب Google، Apple یا GitHub ثبت‌نام کنید، یا با استفاده از ایمیل و رمز عبور یک حساب بسازید.

در مرحله بعد، هویت خود را تأیید کنید، ایمیل‌تان را تأیید کنید و وارد حساب Cloudflare شوید.

مرحله ۱۰ — انتخاب Pages برای انتشار سایت

بعد از ورود به داشبورد Cloudflare، در منوی سمت چپ و در بخش Build، گزینه Workers & Pages را پیدا کنید و روی آن کلیک کنید.

در صفحه‌ای که باز می‌شود، بخشی با عنوان Ship something new می‌بینید که چند گزینه مختلف دارد.

در پایین این بخش، روی لینک کوچک Looking to deploy Pages? Get started کلیک کنید.

مرحله ۱۱ — اتصال به Git

Cloudflare برای انتشار سایت دو روش در اختیار شما قرار می‌دهد:

• وارد کردن یک Git Repository موجود
• کشیدن و رها کردن فایل‌ها (Drag & Drop)

ما روش Git را انتخاب می‌کنیم، چون در مراحل بعد باعث می‌شود هر بار که پروژه را ویرایش می‌کنید، تغییرات به‌صورت خودکار روی سایت منتشر شوند.

در کنار گزینه Import an existing Git repository روی Get started کلیک کنید.

مرحله ۱۲ — انتخاب حساب GitHub

Cloudflare از شما می‌پرسد که می‌خواهید به کدام سرویس Git متصل شوید. تب GitHub را انتخاب کنید.

سپس وارد مراحل تأیید دسترسی در GitHub می‌شوید. در این بخش باید به Cloudflare اجازه دهید به Repositoryهای شما دسترسی داشته باشد.

می‌توانید دسترسی به همه Repositoryها را بدهید یا فقط Repositoryهای مشخصی را انتخاب کنید.

بعد از بازگشت به Cloudflare، حساب GitHub شما در منوی کشویی نمایش داده می‌شود. مطمئن شوید که حساب درست را انتخاب کرده‌اید.

مرحله ۱۳ — تنظیمات Build

حالا Cloudflare از شما می‌خواهد تنظیمات انتشار سایت را مشخص کنید. در این بخش، دو گزینه مهم وجود دارد:

Project name — این نام بخشی از آدرس سایت شما خواهد بود. من نام پروژه را mysamplewebsite گذاشتم؛ بنابراین آدرس سایت به شکل زیر خواهد بود:

mysamplewebsite.pages.dev

Production branch — این گزینه را روی main بگذارید. این همان Branchای است که Cloudflare برای بررسی تغییرات پروژه دنبال می‌کند.

از آنجا که سایت ما با HTML ساده ساخته شده و به فرآیند Build پیچیده‌ای نیاز ندارد، لازم نیست تنظیمات دیگر را تغییر دهید.

به پایین صفحه بروید و روی Save and Deploy کلیک کنید.

مرحله ۱۴ — انتشار سایت

حالا Cloudflare شروع به کار می‌کند. حدود ۳۰ ثانیه بعد، پیام Success! Your project is deployed to Region: Earth. را می‌بینید.

می‌توانید روی لینک پیش‌نمایش در بالای صفحه کلیک کنید؛ در مثال من این آدرس mysamplewebsite.pages.dev است.

با ورود به این آدرس، می‌بینید که سایت شما از نظر فنی آنلاین شده است. البته هنوز محتوایی روی آن وجود ندارد؛ ممکن است یک صفحه خالی یا بسته به تنظیمات، نمایش پیش‌فرض README را ببینید.

اما نکته مهم این است که فرآیند انتشار سایت راه‌اندازی شده است. از این به بعد، هر تغییری که در GitHub ثبت کنید، Cloudflare به‌صورت خودکار سایت را دوباره Build و منتشر می‌کند.

مرحله ۱۵ — اتصال GitHub به Claude

حالا دوباره به Claude برمی‌گردیم و آن را به GitHub متصل می‌کنیم. با این کار، Claude می‌تواند فایل‌های پروژه را به‌جای شما در Repository قرار دهد و دیگر لازم نیست با Terminal کار کنید یا دستورات Git را یاد بگیرید.

در Claude وارد بخش Settings → Connectors شوید.

در فهرست، گزینه GitHub Integration را پیدا کنید و روی Connect کلیک کنید.

سپس وارد یک مرحله کوتاه برای تأیید دسترسی در GitHub می‌شوید. مراحل تأیید را انجام دهید و به Claude برگردید.

اگر اتصال با موفقیت انجام شده باشد، وضعیت GitHub به Connected تغییر می‌کند.

مرحله ۱۶ — ساخت یک Design System

قبل از اینکه از Claude بخواهیم سایت را طراحی کند، بهتر است یک راهنمای ظاهری و بصری در اختیارش قرار دهیم. به این راهنما Design System یا «سیستم طراحی» گفته می‌شود.

Design System شامل مواردی مثل رنگ‌ها، فونت‌ها، دکمه‌ها، فاصله‌ها و قوانین ظاهری طراحی است. وقتی این سیستم را ایجاد کنید، طراحی‌هایی که Claude برای شما می‌سازد، به‌صورت خودکار از همین قوانین پیروی می‌کنند.

به claude.ai/design بروید و یک Design System جدید ایجاد کنید.

در صفحه Your design system is ready می‌توانید مواردی را که ایجاد شده‌اند ببینید؛ از جمله:

• UI Kit
• رنگ‌های برند
• استایل‌های تایپوگرافی

در نهایت، Design System را روی حالت Published و Default قرار دهید تا هر طراحی جدیدی که Claude ایجاد می‌کند، در قدم اول از این قوانین طراحی استفاده کند.

مرحله ۱۷ — تنظیم Design System

وقتی یک Design System جدید ایجاد می‌کنید، Claude از شما می‌خواهد چند اطلاعات اولیه را وارد کنید.

مهم‌ترین بخش، قسمت Company name and blurb است؛ در این قسمت نام شرکت و یک توضیح کوتاه درباره کسب‌وکار یا برندتان وارد کنید.

چند بخش اختیاری دیگر هم وجود دارد که می‌توانید در آن‌ها منابع طراحی موجودتان را اضافه کنید؛ مثلاً:

• لوگوی برند
• تصاویر یا اسکرین‌شات‌هایی از سایت‌هایی که طراحی آن‌ها را دوست دارید
• رنگ‌های موردنظر
• کدهای پروژه، اگر از قبل دارید

هر اطلاعات یا فایلی که در اختیار دارید اضافه کنید و سپس روی Continue to generation کلیک کنید.

Claude در عرض چند دقیقه Design System را بر اساس اطلاعاتی که به آن داده‌اید ایجاد می‌کند.

مرحله ۱۸ — اضافه کردن فایل Design System به پروژه

بعد از آماده شدن Design System، Claude به شما اجازه می‌دهد آن را به‌صورت یک فایل Markdown خروجی بگیرید. این فایل یک نسخه متنی از قوانین و دستورالعمل‌های طراحی شماست.

فایل را دانلود کنید. در مثال من، نام فایل design.md بود. سپس آن را داخل پروژه Cowork که در مرحله ۵ ساختید، بکشید و رها کنید.

در قسمت چت، از Claude بخواهید کاری شبیه این انجام دهد:

Claude فایل راهنمای طراحی را به Project Memory اضافه می‌کند.

از این به بعد، هر صفحه‌ای که Claude برای شما طراحی کند، از قوانین و دستورالعمل‌های موجود در این فایل استفاده خواهد کرد.

این کار را فقط یک بار انجام می‌دهید.

مرحله ۱۹ — از Claude بخواهید سایت را بسازد

اینجا همان بخشی است که هنوز برای من هم کمی شبیه جادو به نظر می‌رسد!

در همان پروژه Cowork، توضیح دهید که می‌خواهید چه چیزی ساخته شود. من از Claude این درخواست را کردم:

Claude شروع به کار می‌کند. ابتدا ساختار صفحه را بررسی می‌کند، سپس از Design System که در مرحله قبل به پروژه اضافه کردید استفاده می‌کند و در نهایت یک فایل HTML واحد، همراه با تمام استایل‌های موردنیاز، ایجاد می‌کند.

چند دقیقه بعد، یک صفحه وب قابل اجرا خواهید داشت که داخل پوشه پروژه شما روی کامپیوتر ذخیره شده است.

مرحله ۲۰ — ذخیره فایل با نام index.html

احتمالاً Claude فایل را با یک نام توصیفی ذخیره کرده است. برای مثال، فایل من domain-conference.html نام داشت.

حالا باید نام فایل را به index.html تغییر دهیم. دلیلش این است که وقتی کسی وارد یک سایت می‌شود، وب‌سرورها معمولاً ابتدا به دنبال فایلی با نام index.html می‌گردند. این یک استاندارد رایج برای فایل اصلی سایت است.

از Claude بخواهید:

Claude نام فایل را تغییر می‌دهد و کار تمام است.

مرحله ۲۱ — انتقال سایت به GitHub

حالا باید فایل نهایی سایت را از روی کامپیوترتان به Repository در GitHub منتقل کنیم.

این مرحله معمولاً به دانش کار با Command Line و دستورات Git نیاز دارد؛ اما چون در مرحله ۱۵، اتصال GitHub را به Claude برقرار کردیم، می‌توانیم این کار را مستقیماً از Claude بخواهیم.

از Claude بخواهید:

حالا می‌تونی فایل رو به Repository ما در GitHub منتقل کنی؟
https://github.com/yourusername/sample-web-site

Claude فایل index.html را مستقیماً در Repository شما ثبت می‌کند.

دیگر نیازی به Terminal، دستورات Git یا SSH Key ندارید.

حالا صفحه GitHub را در مرورگر Refresh کنید. باید فایل index.html را در Repository ببینید که در کنار فایل README قرار گرفته است.

مرحله ۲۲ — سایت شما آنلاین شد

یادتان هست در مرحله ۱۴، انتشار خودکار سایت در Cloudflare را راه‌اندازی کردیم؟

به‌محض اینکه Claude فایل index.html را در GitHub قرار داد، Cloudflare تغییر ایجادشده را شناسایی کرد، سایت را دوباره Build کرد و نسخه جدید را به‌صورت خودکار منتشر کرد.

حالا آدرس yourprojectname.pages.dev را در مرورگر Refresh کنید.

سایت شما آماده است؛ یک وب‌سایت واقعی روی اینترنت، با یک آدرس واقعی که هر کسی در هر جای دنیا می‌تواند آن را بازدید کند.

مرحله ۲۳ — ایجاد یک تغییر در سایت

اینجاست که این روش واقعاً کاربرد خودش را نشان می‌دهد.

سایت آنلاین خود را بررسی کنید، هر بخشی را که می‌خواهید تغییر دهید پیدا کنید و فقط تغییر موردنظرتان را برای Claude توضیح دهید.

برای مثال، من متوجه شدم که می‌خواهم یکی از جمله‌های صفحه اصلی را تغییر دهم. بنابراین از Claude خواستم:

در صفحه اصلی، جمله «The Domain Conference is what happens when both rooms talk to each other.» را می‌بینم و می‌خواهم آن را به این جمله تغییر بدهی: «The Domain Conference is what happens when business leaders and AI experts have the right conversations.»

Claude فایل index.html را ویرایش می‌کند، تغییرات را در GitHub ثبت می‌کند و آن را Push می‌کند؛ همه این کارها در یک مرحله انجام می‌شود.

مرحله ۲۴ — مشاهده تغییرات در سایت

حدود یک دقیقه صبر کنید تا Cloudflare تغییر جدید ثبت‌شده در GitHub را شناسایی کند و سایت را دوباره Build و منتشر کند.

سپس سایت آنلاین خود را Refresh کنید. می‌بینید که متن جدید روی سایت قرار گرفته است.

از اینجا به بعد، روند کار شما به این شکل است:

شما تغییر موردنظرتان را توضیح می‌دهید → Claude تغییر را اعمال می‌کند → GitHub تغییرات و زمان انجام آن‌ها را ثبت می‌کند → Cloudflare سایت را به‌صورت خودکار به‌روزرسانی و منتشر می‌کند.

به این ترتیب، انجام یک تغییر در سایت از ابتدا تا انتشار نهایی، معمولاً کمتر از دو دقیقه زمان می‌برد.

نکات تخصصی برای استفاده‌ی واقعی از طراحی سایت با Claude

• زبان و راست‌چین بودن را همیشه صریح بخواهید: خروجی پیش‌فرض Claude معمولاً چپ‌چین و انگلیسی طراحی می‌شود؛ برای صفحات فارسی حتماً کلمه‌ی «RTL» و «راست‌چین» را در پرامپت بگنجانید.
• برای بخش‌های پویا از AI انتظار معجزه نداشته باشید: خروجی HTML ساده برای صفحات فرود و بازاریابی عالی است، اما برای بخش‌هایی مثل فیلتر پیشرفته یا اتصال به دیتابیس واقعی، باز هم به یکپارچه‌سازی با تیم فنی نیاز دارید.
• محتوای تولیدشده را قبل از انتشار بازبینی کنید: هوش مصنوعی ممکن است آمار یا ادعای نادرست بسازد؛ همیشه محتوای نهایی را خودتان چک کنید.
• سئو را دستی تکمیل کنید: Claude به‌طور پیش‌فرض متا تگ، Schema یا alt تصاویر را کامل نمی‌سازد؛ این بخش را جداگانه از او بخواهید یا خودتان اضافه کنید.
• تصاویر را بهینه ذخیره کنید: پیش از قرار دادن در وردپرس، تصاویر خروجی را فشرده و ترجیحاً در فرمت WebP ذخیره کنید تا سرعت سایت افت نکند.
• نسخه‌بندی را جدی بگیرید: با استفاده از GitHub، هر تغییری قابل بازگشت است؛ این یعنی هیچ ویرایشی دیگر «غیرقابل‌جبران» نیست.

اشتباهات رایج در طراحی سایت با Claude

• پرامپت مبهم: جمله‌ی کلی مثل «یک سایت قشنگ بساز» نتیجه‌ی متوسط می‌دهد؛ همیشه جزئیات بدهید.
• درخواست همه‌چیز در یک پیام: به‌جای یک درخواست غول‌پیکر، مرحله‌به‌مرحله بسازید و اصلاح کنید.
• فراموش‌کردن نام index.html: بدون این نام‌گذاری، سایت روی هاست به‌درستی بالا نمی‌آید.
• نادیده‌گرفتن تست موبایل: همیشه پیش از انتشار نهایی، نمایش صفحه در گوشی را بررسی کنید.
• انتشار بدون بازبینی محتوا: محتوا و کد را همیشه پیش از انتشار نهایی مرور کنید.

مطالعه بیشتر: آموزش تولید محتوا با هوش مصنوعی

محدودیت‌های طراحی سایت با هوش مصنوعی و Claude

Claude ابزار قدرتمندی است، اما جادو نیست. برای پروژه‌های بزرگ با منطق پیچیده‌ی سمت سرور، پایگاه داده یا سیستم‌های پرداخت، همچنان به دانش فنی یا همکاری با توسعه‌دهنده نیاز دارید. بهترین نتیجه زمانی به‌دست می‌آید که Claude را همکار سریع خود در بخش طراحی و محتوا بدانید، نه جایگزین کامل یک تیم فنی.

اگر برای راه‌اندازی کسب‌وکارتان به یک وب‌سایت حرفه‌ای نیاز دارید اما نمی‌خواهید درگیر پیچیدگی‌های فنی طراحی و توسعه سایت شوید، وب‌شهر می‌تواند این مسیر را برای شما ساده‌تر کند.

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

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

سوالات متداول

آیا برای طراحی سایت با Claude باید برنامه‌نویسی بلد باشم؟

نه. با توضیح ساده به زبان فارسی می‌توانید کد سایت را از Claude بگیرید. آشنایی پایه با مفاهیم وب کمک می‌کند، اما دانش تخصصی برنامه‌نویسی لازم نیست.

آیا می‌توان خروجی Claude را مستقیماً روی وردپرس گذاشت؟

بله. می‌توانید کد را در یک بلوک HTML سفارشی وردپرس قرار دهید یا آن را به‌صورت یک قالب صفحه‌ی اختصاصی به سایت اضافه کنید.

آیا سایت ساخته‌شده با Claude برای سئو مناسب است؟

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

آیا Claude می‌تواند سایت را به‌صورت خودکار روی اینترنت منتشر کند؟

Claude به‌تنهایی سایت را میزبانی نمی‌کند، اما با اتصال به GitHub می‌تواند فایل‌ها را مستقیماً روی مخزن شما push کند و در ترکیب با سرویسی مثل Cloudflare Pages، هر تغییر به‌صورت خودکار روی سایت زنده منتشر می‌شود.