«قالب» یعنی یک طراحی کامل و قابل استفاده مجدد، مثلاً صفحه‌ی اصلی، صفحه‌ی مقاله و صفحه‌ی تماس، که رنگ، فونت و چیدمانش در همه‌ی صفحات یکدست باشد.
با هوش مصنوعی می‌توانی این قالب را در چند مرحله بسازی. ترتیب مراحل مهم است: اول سیستم طراحی، بعد صفحات، و در آخر ویرایش و بررسی.
مرحله ۱: تعریف هدف و مخاطب
پیش از هر پرامپت، این موارد را روشن کن:
- قالب برای چه نوع سایتی است؟ وبلاگ، معرفی شخصی، فروشگاه کوچک یا صفحه‌ی فرود؟
- چه صفحاتی لازم است؟ مثلاً صفحه‌ی اصلی، مقالات، درباره‌ی من و تماس.
- سبک مورد نظر چیست؟ مینیمال، رنگی، رسمی یا خلاقانه؟
- چند نمونه سایتی که دوست داری داری؟ اسم یا توصیف آن‌ها به هوش مصنوعی کمک می‌کند سلیقه‌ات را بفهمد.
مرحله ۲: ساخت سیستم طراحی (Design System)
این مهم‌ترین مرحله است. قبل از صفحه‌سازی، رنگ‌ها، فونت‌ها و فاصله‌ها را تعریف کن تا همه‌ی صفحات از یک قاعده پیروی کنند.
برای یک قالب وبلاگ شخصی درباره‌ی هوش مصنوعی یک سیستم طراحی بساز. شامل این موارد باشد:
- پالت رنگی: یک رنگ اصلی، یک رنگ تأکید، رنگ پس‌زمینه‌ی روشن و تیره، و رنگ متن. کنتراست را برای خوانایی رعایت کن.
- فونت: یک فونت برای تیتر و یک فونت برای متن فارسی. سایزها را برای موبایل و دسکتاپ مشخص کن.
- فاصله‌ها: مقیاس ثابت مثل ۴، ۸، ۱۶، ۲۴ و ۳۲ پیکسل.
- اجزای پایه: دکمه، کارت مقاله، فرم، هدر و فوتر، با حالت‌های معمولی، هاور و فعال.
خروجی را به‌صورت متغیرهای CSS بنویس.
اگر هوش مصنوعی متغیرهای CSS تولید کند، هر تغییر رنگ یا فونت بعداً در کل سایت اعمال می‌شود. این یعنی قالب قابل نگهداری است.
مرحله ۳: ساخت صفحات با اجزای مشترک
به‌جای ساختن هر صفحه از صفر، ابتدا هدر، فوتر و کارت مقاله را بساز، بعد صفحات را با همان اجزا تشکیل بده.
پرامپت نمونه:
با سیستم طراحی قبلی، یک فایل HTML تک‌صفحه‌ای برای صفحه‌ی اصلی بساز. شامل هدر با منوی ساده، بخش معرفی کوتاه، سه کارت آخرین مقالات و فوتر باشد. کد CSS را داخل همان فایل بگذار و طرح را ریسپانسیو کن.
سپس صفحه‌های دیگر را با همین روش بساز و از هوش مصنوعی بخواه هدر و فوتر یکسان باشند.
مرحله ۴: طراحی واکنش‌گرا (Responsive)
بیشتر بازدیدها از موبایل است. از هوش مصنوعی بخواه:
این صفحه را برای عرض‌های ۳۶۰، ۷۶۸ و ۱۲۸۰ پیکسل بررسی کن و کدی بده که چیدمان کارت‌ها را از یک ستون در موبایل به سه ستون در دسکتاپ تغییر دهد. منوی همبرگری برای موبایل اضافه کن.
نکته‌ی مهم: اگر متن فارسی داری، جهت صفحه را راست‌چین (dir="rtl") و زبان را lang="fa" تنظیم کن. بسیاری از قالب‌ها در این بخش مشکل دارند.
مرحله ۵: دسترس‌پذیری و سرعت
قبل از نهایی کردن قالب، از هوش مصنوعی بخواه این موارد را بررسی کند:
- کنتراست رنگ متن و پس‌زمینه کافی باشد.
- تصاویر متن جایگزین (alt) داشته باشند.
- ترتیب کلیدهای Tab منطقی باشد.
- تصاویر و فونت‌ها بیش از حد سنگین نباشند.
این صفحه را از نظر دسترس‌پذیری بررسی کن و مشکلات احتمالی را با پیشنهاد اصلاح فهرست کن.
مرحله ۶: بازبینی و اصلاح تدریجی
یک بار یک فقره را تغییر بده، نه همه را. مثلاً:
- «فاصله‌ی بین بخش‌ها را کمتر کن.»
- «رنگ دکمه‌ها را به آبی تیره تغییر بده و در حالت هاور کمی روشن‌تر کن.»
- «فونت تیترها را بزرگ‌تر کن، ولی متن‌ها را همان بگذار.»
تغییرات کوچک و هدفمند، هم سریع‌تر نتیجه می‌دهند و هم کمتر چیزهای درست قبلی را خراب می‌کنند.
مرحله ۷: تبدیل قالب به فرمت قابل استفاده
بسته به ابزاری که داری، خروجی متفاوت است:
- فایل HTML و CSS: قابل آپلود روی هر هاستینگ ساده یا استفاده در ابزارهای سازنده‌ی سایت.
- قالب وردپرس: اگر هدفت وردپرس است، از هوش مصنوعی بخواه ساختار فایل‌های theme مثل
header.php،footer.phpوindex.phpرا بسازد. قبل از استفاده، حتماً روی نسخه‌ی آزمایشی وردپرس تست کن. - قالب در ابزارهای طراحی: بعضی ابزارها امکان ساخت یا ویرایش قالب را با هوش مصنوعی دارند. امکانات آن‌ها را در صفحه‌ی رسمی بررسی کن.
جمع‌بندی
ساخت قالب با هوش مصنوعی یعنی سه کار: اول تعریف سیستم طراحی، دوم ساخت صفحات با اجزای مشترک، و سوم بررسی و اصلاح تدریجی. هرچه سیستم طراحی دقیق‌تر باشد، قالب یکدست‌تر و قابل نگهداری‌تر خواهد بود. پرامپت‌ها را مرحله به مرحله بنویس و خروجی هر مرحله را قبل از ادامه‌ی کار بررسی کن.
ورود کاربران
خوش آمدید! لطفا وارد حساب خود شوید