طراحی سایت با هوش مصنوعی؛ ساختار، متن و نسخهٔ اول صفحه برای یک کسب‌وکار کوچک

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

هوش مصنوعی چه کاری برای وب‌سایت شما انجام می‌دهد؟

یک سایت از متن، چیدمان، کد و زیرساخت (دامنه و میزبانی) ساخته می‌شود. در ساخت سایت با هوش مصنوعی، سه بخش اول را مدل خوب پیش می‌برد و چهارمی کار شماست یا یک متخصص.

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

گام اول در طراحی سایت با هوش مصنوعی؛ بخش‌ها و متن‌ها

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

یک صفحهٔ ساده معمولاً چه بخش‌هایی دارد؟

• بالای صفحه: نام، یک جمله که بگوید چه کاری می‌کنید و یک دکمه برای مهم‌ترین کار (تماس، سفارش، نوبت).
• محصول یا خدمت: سه تا شش مورد، هر کدام با یک جملهٔ مشخص؛ قیمت فقط اگر ثابت است.
• چطور کار می‌کنید: سفارش، ارسال یا نوبت‌گیری در سه قدم.
• دربارهٔ شما: دو سه جمله و یک عکس واقعی از خود مغازه یا تیم.
• ساعت کار، نشانی و راه تماس: همان چیزهایی که مردم بیشتر از همه می‌پرسند.
• پانویس: نشانی، شبکه‌های اجتماعی و نماد اعتماد اگر فروش آنلاین دارید.

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

درخواستمان را برای همان نانوایی به gemini-3.8-flash دادیم:

مدل چهار بخش پیشنهاد داد: سربرگ بالای صفحه، برنامهٔ پخت و محصولات امروز، راهنمای سفارش تلفنی، و نشانی و ساعت کار. همان‌طور که خواستیم، ساعت‌ها، شماره و قیمت‌ها را داخل کروشه گذاشت و به‌جای صفت‌های توخالی، از ساعت درآمدن نان از تنور حرف زد. نقطه‌ضعفش این است که چند چیز را از خودش فرض کرده که ما نگفته بودیم: دو نوبت پخت برای سنگک (صبح و عصر)، دو نوبت کاری برای نانوایی، و جمله‌هایی مثل «سر ساعت اعلام‌شده بسته‌بندی می‌شود» و «بدون معطلی و گرم تحویل بگیرید». نانوایی هیچ‌کدام را نگفته و دو تای آخر قولی است که شاید نتواند بدهد؛ یا با واقعیت مغازه جورشان کنید یا پاکشان کنید. جای یک بخش کوتاه «دربارهٔ ما» و پانویس (Footer) هم در آخر صفحه خالی است.

گام دوم؛ عکس‌ها و لوگو

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

برای کسب‌وکارهایی مثل کلینیک، نانوایی یا مغازهٔ محله، عکس واقعی از محیط کار و محصولات معمولاً بیشتر از هر تصویر ساختگی اعتماد می‌سازد. عکس‌های خوب خودتان را جای کادرهای خاکستری کد نهایی بگذارید. اگر هنوز برای کسب‌وکارتان هویت بصری مشخصی ندارید، در کارگاه گیسو از طراحی لوگو و برندبوک کمک بگیرید تا لوگو و رنگ‌های برندتان روشن شود و سایت ظاهری یک‌دست داشته باشد.

گام سوم؛ نوشتن کد HTML با هوش مصنوعی

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

این درخواست را به gemini-3.8-flash دادیم و کدی را که برگرداند، بی‌تغییر در Chrome باز کردیم:

خروجی یک فایل HTML سیصد و چند سطری بی JavaScript است و چیدمانش در هر دو اندازه درست کار می‌کند؛ کارت‌ها روی نمایشگر بزرگ کنار هم‌اند و روی گوشی زیر هم. ولی یک درس هم دارد: چون متن‌های تأییدشدهٔ گام قبل را در این درخواست نگذاشتیم، مدل از خودش محصولاتی مثل کروسان و دونات ساخت و جمله‌های تبلیغاتی کلیشه‌ای نوشت. متن سایت باید پیش از کد قطعی شود. متن نهایی را همیشه در درخواست کد کپی کنید تا صفحه همان چیزی را بگوید که شما می‌خواهید.

صفحهٔ ساخته‌شده را چطور ببینید و امتحان کنید؟

کد هنوز سایت نیست، ولی مرورگر بازش می‌کند. این‌طور ببینید و امتحانش کنید:

1. کپی کردن کد. در پاسخ مدل، دکمهٔ «کپی کد» بالای بلوک کد را بزنید.
2. ذخیرهٔ فایل. یک ویرایشگر متن ساده (مثل Notepad در ویندوز) باز کنید، کد را در آن بچسبانید و هنگام ذخیره، نام فایل را index.html بگذارید.
3. دیدن در مرورگر. روی فایل ذخیره‌شده دوبار کلیک کنید. مرورگر باز می‌شود و صفحه را همان‌طور که بازدیدکننده می‌بیند نشان می‌دهد.
4. بررسی روی گوشی. بیشتر بازدیدکننده‌ها با گوشی می‌آیند. همان فایل index.html را در یک پیام‌رسان برای خودتان بفرستید و روی گوشی باز کنید تا خوانایی متن‌ها و جای دکمه‌ها را ببینید.
5. خواستن اصلاح. اگر رنگی را دوست ندارید یا فاصلهٔ خط‌ها کم است، تغییرها را یکی‌یکی در همان گفت‌وگو از مدل بخواهید.

یک نکته: هرچه در یک گفت‌وگو تغییر بیشتری بخواهید، متنی که مدل باید در هر پیام بخواند بلندتر می‌شود. گفت‌وگوی طولانی با کد حجیم هم کندتر می‌شود و هم گران‌تر. چرایش را در راهنمای پنجرهٔ زمینه نوشته‌ایم.

عنوان و توضیح صفحه برای گوگل

دو سطر کوچک در کد، یعنی عنوان صفحه (title) و توضیح کوتاه آن (meta description)، همان چیزی است که در نتیجهٔ جست‌وجو دیده می‌شود. از مدل بخواهید هر دو را با نام کسب‌وکار، شهر و کاری که می‌کنید بنویسد؛ مثلاً «نانوایی سنگک و بربری در [محله]، شیراز». این دو سطر جای شما را در گوگل بالا نمی‌برند، ولی بدون آن‌ها صفحه حرفی برای نتیجهٔ جست‌وجو ندارد. ثبت کسب‌وکار در نقشه‌ها هم برای مغازهٔ محله‌ای اغلب از خود سایت مهم‌تر است.

کجا کار را باید به یک متخصص بسپارید؟

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

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

بدون کد: سایت‌ساز گیسو

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

• تغییر: کل صفحه یا یک بخش را با پیام عوض کنید، یا در ویرایشگر دیداری متن، عکس، رنگ، فونت و جای بخش‌ها را خودتان تغییر بدهید. هر تغییر یک نسخه است و به هر نسخهٔ قبلی برمی‌گردید.
• هزینه: ساختن و تغییر دادن سایت با «گیسو» رایگان است و هر روز سهمیهٔ مشخصی دارد. فقط تصویری که با هوش مصنوعی ساخته شود از اعتبار گیسو کم می‌شود.
• انتشار: سایت در نشانی gisoo.pro/sites/… باز می‌شود و دامنهٔ خودتان را هم با رکورد A یا CNAME وصل می‌کنید. گواهی امنیتی (SSL) رایگان است و خودکار تمدید می‌شود.
• محدودیت: فقط سایت یک‌صفحه‌ای؛ فروشگاه، پرداخت آنلاین و فرم ندارد.

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

انتخاب مدل مناسب در گیسو

برای متن و ساختار صفحه، در حالت سادهٔ اپ گیسو «نوشتن و محتوا» را انتخاب کنید. نمونه‌های این مطلب با gemini-3.8-flash ساخته شده‌اند. اگر متن‌هایی که گرفتید کمی خشک یا ماشینی است، راهنمای بازنویسی متن با هوش مصنوعی نشان می‌دهد چطور لحنشان را به حرف زدن خودتان با مشتری نزدیک کنید.

برای کد، «کدنویسی» را بردارید. هزینهٔ هر پاسخ زیر همان پاسخ نوشته می‌شود و کپی کردن کد هزینه‌ای ندارد.

از سؤال‌های مشتری شروع کنید

اولین کار: سه سؤالی را که مشتری‌ها بیشتر از همه پشت تلفن می‌پرسند بنویسید و بخش‌ها و متنی بخواهید که به همان‌ها جواب بدهد. همین درخواست را در گیسو باز کنید؛ گفت‌وگویی با gemini-3.8-flash باز می‌شود که درخواست در آن نوشته شده و تا دکمهٔ ارسال را نزنید، چیزی فرستاده و حساب نمی‌شود.