من وبلاگ خود را با استفاده از “Vibe Coding” ساختم

بنابراین ، من یک کار انجام دادم. من با استفاده از آنچه که به عنوان “برنامه نویسی VIBE” لقب گرفته است ، کل وبلاگ خود را ، The Glitched Goblet ساختم. اما من را بشنوید ، زیرا احتمالاً این چیزی نیست که شما فکر می کنید. من همچنین می خواهم از قبل برای عنوان ClickBait و تمام وصل کردن بی شرمانه وبلاگ خود در طول این پست عذرخواهی کنم. من قول می دهم که یک نکته دارد!
این پست شامل بسیاری از افکار من خواهد بود و صادقانه با استفاده از هوش مصنوعی برای تولید کد ، برخی از آنها را آزار می دهد. اگر فقط برای “نکات و ترفندها” در اینجا هستید ، احساس راحتی کنید تا به پایان برسید. من توهین نخواهم شد قول می دهم
مقدمه
حال ، منظورم این است که وقتی می گویم وبلاگ من با استفاده از “برنامه نویسی VIBE” ساخته شده است؟ برای اینکه کاملاً صادقانه و سر راست باشم ، من چتپپ 90 ٪ وبلاگ را ساختم. این هر یک از مؤلفه ها مانند صفحه اصلی ، هدر ، پاورقی ، پست و حتی موضوع را ایجاد کرد. تنها محتوای اضافه شده توسط من ، خود وبلاگ ارسال می شود. (می توانید با ساختار تایپی و ساختار جمله بد بگویید.)
برای رسیدن به نقطه این پست و اینکه چرا آن را می نویسم. از آنچه من دیده ام ، افراد زیادی از AI برای تولید کد بدون درک آنچه انجام می دهد استفاده می کنند. این البته یک عمل خطرناک است ، و من می خواهم “نکات و ترفندهایی” را در مورد چگونگی استفاده بیشتر از AI ارائه دهم در حالی که هنوز درک خوبی از آنچه اتفاق می افتد ، ارائه می دهم.
شما باید ذهنیت خود را در مورد AI تغییر دهید. هوش مصنوعی فقط ابزاری دیگر در جعبه ابزار شماست. این است با استفاده از هوش مصنوعی ، من توانستم وبلاگ خود را در کسری از زمان بسازم که من را به انجام آن به صورت دستی انجام دهم. من از چارچوب های جدیدی استفاده کردم که با آنها آشنا نبودم و می خواستم هنگام ساختن چیزی که می توانم از آن استفاده کنم یاد بگیرم. .
اصول را درک کنید
من احساس می کنم یک معلم ریاضی که این را می گوید ، اما شما باید قبل از استفاده از هوش مصنوعی برای تولید کد ، اصول را درک کنید. درست مانند پرتاب یک معادله ریاضی در یک ماشین حساب نمودار ، باید بدانید که چگونه مشکل را قبل از اینکه اجازه دهید AI این کار را برای شما انجام دهد ، حل کنید.
بهترین بخش این است که اگر اصول اولیه را درک نکنید ، هوش مصنوعی می تواند در این زمینه نیز به شما کمک کند! من از ChatGPT برای کمک به من در درک مفاهیم جدید استفاده کرده ام ، مانند نحوه استفاده از یک چارچوب جدید یا نحوه اجرای یک ویژگی جدید. مثل این است که یک مدرس داشته باشید که 24/7 در دسترس باشد. (و وقتی 10 بار همان سؤال را می پرسید اذیت نمی شوید.)
همکاری کردن
من فقط اجازه ندادم چتپپ کد را تولید کند و روزی آن را صدا کند. من با آن همکاری کردم. من از بازخورد ، پیشنهادات و پیشرفت ها خواستم. من گزینه های مختلفی را درخواست کردم و یکی را انتخاب کردم که بهترین ها را دوست داشتم. من حتی در مورد اینکه چرا کد خود را تولید کرده است توضیح داده ام. حتی آمدن با نام وبلاگ یک تلاش مشترک بود.
“Glitched Goblet” احتمالاً 50 مین پیشنهادی بود که Chatgpt به من داد. من چیزی را می خواستم که مانند یک نام میخانه به نظر برسد اما با پیچ و تاب فنی.
کد را خودتان بنویسید و بازخورد بخواهید. بخش مورد علاقه من این بوده است که چتپپ را تا حد ممکن بدخلقی و صادقانه بسازد. این مثل این است که با یک دوست که نمی ترسد به شما بگوید کد شما بد است ، یک بررسی کد انجام دهید. به طور پیش فرض ، هوش مصنوعی بسیار خوشایند است و نمی خواهد به احساسات شما آسیب برساند. با اجازه دادن به آن ساده ، به شما کمک می کند تا یاد بگیرید و رشد کنید.
درخواست های مورد علاقه من برای بازخورد به طور کلی سؤالات کوتاه است و به دنبال آن چسباندن کدی که می خواهم بازخورد می خواهم.
- “آیا این به نظر شما درست است؟”
- “من احساس می کنم این می تواند بهتر یا کارآمدتر باشد.”
- “چه کاری متفاوت انجام می دهید؟”
- “آیا می توانید این کد را نقد کنید؟”
علاوه بر این ، این موارد بسیار خوبی برای استفاده در هنگام اشکال زدایی کد هستند.
تکرار کردن
اولین چیزی را که AI به پایان رسانده است ، نگیرید. با آن بازی کنید ، آنچه را که دوست دارید نگه دارید و گزینه های بیشتری را برای قطعاتی که نمی کنید درخواست کنید. فهمیدم که هرچه بیشتر روی کدی که چتگپ تولید می کند تکرار می شود ، بهتر می شود.
صفحه پست های وبلاگ قبلاً به این شکل به نظر می رسید:
بعد از چند تکرار ، اکنون به این شکل است:
واقعیت جالب ، من نمی دانستم چگونه تصاویر را در Markdown/NextJS پیوند دهم و مجبور شدم از AI بپرسم. در اینجا کلامی است که من پرسیدم:
How do I include images in my Markdown docs? The images are in the public folder. Something like this?
The blog posts page used to look like this:
[Blog Posts Old](../../../public/blog-posts-old.png)
After a few iterations, it now looks like this:
[Blog Posts New](../../../public/blog-posts-new.png)
و پاسخ:
شما خیلی نزدیک هستید ، kaemon – اما هنگام کار با Next.js و Markdown، نکته اصلی این است:
🧠 تصاویر در
public/
پوشه باید با استفاده از مسیرهای مطلق از ریشه ارجاع شود (/
) مسیرهای نسبی مانند../../../public/
بشر
✅ بنابراین در اینجا نحوه انجام درست آن را آورده است:
با فرض اینکه تصاویر در اینجا زنده هستند:
/public/blog-posts-old.png
/public/blog-posts-new.png
در شما پرونده علامت گذاری، از این نحو استفاده کنید:
The blog posts page used to look like this:

After a few iterations, it now looks like this:

نیازی به استفاده از مسیرهای نسبی نیست و نیازی به گنجاندن نیست public/
در URL – Next.js در خدمت محتویات است /public
در ریشه (/
).
و اینگونه آموختم که چگونه تصاویر را در پرونده های Markdown خود بگنجانم. بنابراین می توانید منتظر تصاویر بیشتر در پست های من باشید که به جلو می روند!
اجازه ندهید کدگذاری شود
آیا می خواهید برنامه نویسی را تمرین کنید؟ اجازه ندهید که هوش مصنوعی تمام کارها را انجام دهد. بگذارید یک نقطه شروع ایجاد کند ، یا مراحل مربوط به چگونگی حل یک مشکل را ارائه دهد. سپس ، خودتان آن را کدگذاری کنید. اجازه دادن به AI تمام کارها مانند استفاده از ماشین حساب برای هر مشکل ریاضی است. شما هرگز یاد نخواهید گرفت که چگونه خودتان مشکل را حل کنید. در حالی که “کد تولید نکنید. من می خواهم این را خودم کدگذاری کنم” از موارد زیر استفاده کنید.
- “مراحل حل این مشکل چیست؟”
- “آیا می توانید یک نقطه شروع برای این کار ارائه دهید؟”
- “چگونه این ویژگی را اجرا می کنید؟”
هوش مصنوعی اطلاعات کافی را در اختیار شما قرار می دهد تا بدون انجام تمام کارها برای شما انجام شود. اجازه ندهید که مهارت های خود را با تکیه بر هوش مصنوعی رکود کنید تا تمام کارها را برای شما انجام دهد.
tldr ؛ – نکات و ترفندها
- اصول را درک کنید: اگر می خواهید از کد تولید شده AI استفاده کنید ، حتماً درک کاملی از اصول اولیه داشته باشید. این به شما کمک می کند تا درک کنید که هوش مصنوعی چه کاری انجام می دهد و چرا این کار را انجام می دهد.
- آن را خفه کن: AI ، به طور پیش فرض بسیار لذت بخش است. نمی خواهد احساسات شما را آزار دهد. آن را خفه کنید ، آن را صادقانه کنید ، آن را واقعی کنید. این به شما کمک می کند تا یاد بگیرید و رشد کنید.
- همکاری کردن: فقط اجازه ندهید که هوش مصنوعی تمام کارها را انجام دهد. خودتان با چیزی روبرو شوید و از انتقاد ، بازخورد ، پیشرفت یا حتی فقط یک نقطه شروع بخواهید.
- تکرار کردن: فقط اولین چیزی را که AI به شما می دهد ، نگیرید. با آنچه تولید شده و پیگیری کنید ، بازی کنید. آن را تغییر دهید ، آن را تغییر دهید ، گزینه های بیشتری بخواهید.
- اجازه ندهید کدگذاری شود: اجازه ندهید که هوش مصنوعی تمام کارها را انجام دهد. بگذارید یک نقطه شروع ایجاد کند ، یا مراحل مربوط به چگونگی حل یک مشکل را ارائه دهد. خودتان آن را کدگذاری کنید و بازخورد بخواهید.
افکار نهایی (و یک صدای کوچک)
اگر در حال غرق شدن در فناوری هستید یا صرفاً با تکیه بر کد تولید شده AI ، کدگذاری می کنید ، لطفاً یک لحظه دوباره تجدید نظر کنید. از آن به عنوان ابزاری برای سرعت بخشیدن به پلاک و همکاری با آن برای یادگیری و رشد استفاده کنید. اجازه ندهید تمام کارها را برای شما انجام دهد. در صورت انجام این کار هرگز یاد نخواهید گرفت که چگونه خودتان مشکلات را حل کنید.
من فکر می کنم این روند ، گرچه اکنون خنده دار است ، ممکن است باعث سردردهای آینده (و بلایای خنده دار) شود. اما سلام ، این فقط برداشت من است.
بنابراین ، نظر شما در مورد “برنامه نویسی VIBE” چیست؟ آیا آن را امتحان کرده اید؟ آیا راهنمایی یا ترفندی برای به اشتراک گذاشتن دارید؟ در نظرات زیر به من اطلاع دهید. من همیشه به دنبال راه های جدید برای بهبود گردش کار خود هستم.
و اگر علاقه مند به خواندن بیشتر افکار من هستید ، وبلاگ من را در glitchedgoblet.blog بررسی کنید.
تفریح اضافی
هنگام نوشتن این پست ، من یک جلسه بزرگ طوفان مغزی با Chatgpt داشتم و یک تن پنهان اضافه کردم secrets
به وبلاگ اگر بتوانید همه آنها را پیدا کنید ، من بسیار تحت تأثیر قرار می گیرم. (و شاید کمی ترسیده باشد.)