لوگوی ThinkFlow

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

ساخت صفحه وب سفارشی با Claude؛ راهنمای گام‌به‌گام بدون کدنویسی

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

نویسنده و ویراستار: تیم هوش عمیق۱۵ دقیقه مطالعه
لپ‌تاپی با صفحه پورتفولیو، کارت‌های پرامپت و چک‌لیست انتشار سایت
هوش مصنوعی می‌تواند شروع طراحی و کدنویسی صفحه را سریع کند، اما کیفیت نهایی به زمینه، بازبینی و اصلاح انسانی وابسته است.

پاسخ کوتاه: Claude دقیقاً چه کمکی می‌کند؟

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

اما «ساخت سایت بدون کدنویسی» به معنی بی‌نیازی از بازبینی نیست. متن، لینک‌ها، واکنش‌گرایی موبایل، دسترسی‌پذیری، سرعت، مالکیت دامنه و امنیت انتشار هنوز باید بررسی شوند. بهتر است Claude را مثل همکار تولید نسخه اولیه ببینید، نه جایگزین کامل طراح، توسعه‌دهنده و ویراستار.

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

۱. قبل از پرامپت، ورودی‌های درست آماده کنید

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

  • رزومه یا بیوگرافی کوتاه: نقش فعلی، تجربه‌ها، مهارت‌ها، صنعت‌ها و دستاوردهای مهم.
  • ۳ تا ۵ پروژه منتخب: برای هر پروژه مسئله، نقش شما، خروجی، ابزارها و نتیجه قابل توضیح را بنویسید.
  • مراجع بصری: چند اسکرین‌شات یا لینک از سایت‌هایی که حس و کیفیتشان را دوست دارید.
  • محدودیت‌ها: رنگ‌هایی که نمی‌خواهید، لحن برند، سطح رسمی بودن، دستگاه اصلی مخاطب و زبان صفحه.
  • هدف صفحه: جذب مشتری، استخدام، معرفی شخصی، رزرو جلسه یا نمایش پروژه‌ها.

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

۲. پرامپت اصلی برای ساخت صفحه پورتفولیو

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

Help me create a professional one-page portfolio website as a complete HTML file. Use the resume, project descriptions, and design references I uploaded to understand my background, achievements, and visual taste. Goal: the page should present me as a credible, thoughtful professional and encourage visitors to contact me. Design direction: sophisticated, editorial, modern, and handcrafted. Avoid generic corporate templates, overused AI gradients, excessive symmetry, and placeholder-looking sections. Use clear hierarchy, strong typography, responsive layout, accessible contrast, and refined spacing. Content sections: hero, short bio, selected projects, skills, working style, testimonials or proof points if available, and contact CTA. For each project, summarize the problem, my role, the solution, and the impact. If information is missing, make a reasonable placeholder but mark it clearly so I can replace it. Output: create a single HTML file with embedded CSS and minimal JavaScript only if useful. After creating it, explain how I can review, edit, and publish it without coding experience.

در نسخه فارسی هم می‌توانید همین ساختار را نگه دارید. نکته مهم این است که از Claude فقط «زیبا ساختن» نخواهید؛ از آن بخواهید دلیل طراحی، جای خالی اطلاعات، و مسیر اصلاح را هم توضیح دهد.

۳. خروجی Claude را چطور بازبینی کنیم؟

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

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

۴. آماده‌سازی برای انتشار زنده

اگر خروجی یک فایل HTML ساده است، انتشار معمولاً با سرویس‌هایی مثل Netlify، Vercel، GitHub Pages یا هاست معمولی ممکن می‌شود. مسیر دقیق بسته به ابزار شما فرق دارد، اما منطق کلی یکی است: فایل را بررسی کنید، نام‌گذاری و دارایی‌ها را مرتب کنید، سپس نسخه نهایی را روی سرویس میزبانی قرار دهید.

اگر از اتصال Netlify داخل Claude استفاده می‌کنید، می‌توانید از مدل بخواهید پروژه را بسازد و URL نهایی را توضیح دهد. با این حال، مالکیت حساب، دامنه، تنظیمات DNS و دسترسی‌ها را خودتان کنترل کنید. برای صفحه حرفه‌ای، بهتر است بعد از انتشار، دامنه اختصاصی، SSL، فرم تماس معتبر و ابزار تحلیل را هم بررسی کنید.

Using the HTML from my portfolio artifact, help me prepare it for deployment. Check the code for broken links, missing image alt text, mobile layout issues, placeholder content, and accessibility problems. Then give me exact deployment steps for a beginner. If using Netlify, explain what each step does and how I can update the site later.

۵. پرامپت‌های پیگیری برای بهتر کردن صفحه

ارزش اصلی کار با Claude در تکرار است. بعد از نسخه اول، به جای درخواست کلی «بهترش کن»، دقیق بگویید کدام بخش نیاز به تغییر دارد.

افزودن تعامل‌های ظریف

Add refined hover states to the project cards and subtle section reveal animations. Keep the interactions accessible, lightweight, and professional. Avoid flashy effects, motion overload, or anything that slows down the page.

تبدیل یک پروژه به مطالعه موردی

Expand my most important project into a detailed case study section. Include the problem, constraints, my role, process, iterations, final solution, measurable impact, and lessons learned. Keep the tone concrete and credible.

بهبود کیفیت بصری

Review the current design like a senior product designer. Identify anything that feels generic, unbalanced, or template-like. Suggest specific improvements to typography, spacing, hierarchy, color, and project presentation before rewriting the HTML.

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

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

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

منبع و روش تدوین

این مقاله بر اساس متن ارسالی شما و با الهام از آموزش Create a custom webpage در Claude Academy بازنویسی و برای مخاطب فارسی ThinkFlow تکمیل شده است. ساختار مقاله، نمونه پرامپت‌ها، هشدارهای انتشار، لینک‌های داخلی و توضیح محدودیت‌ها برای استاندارد انتشار وبلاگ ThinkFlow افزوده شده‌اند. تاریخ دسترسی و بازبینی: ۲۳ شهریور ۱۴۰۵.

نسخه اولیه را سریع‌تر بسازید

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

شروع ساخت در ThinkFlowمشاهده نمونه‌هاراهنمای استفاده