Vibecoding · 4-dars · 9-11 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 1Неделя: 1Week: 1

Frilans: Qat'iy Buyurtma (UI)

Klient nima xohlasa, shuni quramiz. Dizayn qonunlari va AI ga qat'iy texnik talablar (PRD) berish san'ati.

Haqiqiy dunyo

Frilans Bozori qanday ishlaydi?

Upwork yoki Fiverr kabi platformalarda siz AI yordamida pul ishlashingiz mumkin. Lekin u yerda ikkita katta qoida bor:

1. Vaqt = Pul. Agar siz AIni to'g'ri boshqara olmasangiz, 1 soatlik ishga 5 soat ketadi.
2. Mijoz doim haq. Agar mijoz "Qizil tugma" desa, AI yashil qilib bersa ham, siz qizil qilishga majbursiz!

Mijoz turlari

Mijozlarning 2 turi

"Nimanidir chizib ber"

Ular aniq nimani xohlashini bilmaydi. Natijani ko'rgach, "Bu menga yoqmadi" deb pul to'lashmaydi.

Korporativ Mijoz (PRD)

Ular aniq ranglar, piksellar va talablarini berishadi. Agar shuni bajarsangiz, kafolatlangan katta pul to'lashadi.

Asosiy hujjat

PRD nima o'zi?

PRD (Product Requirements Document) — bu loyihaning qanday bo'lishi kerakligini tushuntiruvchi texnik hujjat.

Dasturchining Konstitutsiyasi

Frilanser yoki Vibecoder hech qachon PRD siz ish boshlamaydi. Prompt yozishdan oldin hujjatni 100% tushunish shart.

Vibecoder Fojiasi

Yomon Prompt oqibati

Tasavvur qiling, siz mijozning PRDsini o'qimadingiz va AI ga shunday yozdingiz:

"Menga zo'r taymer sayt qilib ber." / "Сделай мне крутой таймер."

AI xatosi 1: AI orqa fonni o'zi bilganicha pushti qilib qo'yadi. Mijoz rad etadi.
AI xatosi 2: Tugmalar chap burchakda yashirinib qoladi (CSS Flexbox yo'q).

Bugungi mijoz

Buyurtma: Pomodoro Taymer

Bugun bizga quyidagi qat'iy talablar bilan buyurtma tushdi:

Background (Fon): To'q ko'k
Markazda CSS Grid orqali Oq Card
Card ichida katta matn: 25:00
Start, Pause, Reset tugmalari (Flexbox Row)

Dizayn siri

Nega To'q ko'k va Oq? (Kontrast)

PRD da bekorga ranglar belgilanmagan. Bu Kontrast qonuni.

To'g'ri (High Contrast)

Oq matn to'q ko'k fonda juda yaqqol ko'rinadi.

Xato (Low Contrast)

Oq matn ochiq fonda ko'rinmaydi va o'qish qiyin.

Vizual tartib

Matn Ierarxiyasi

Nega PRD hujjatida "Juda katta matn" deb so'raldi? Dasturlashda bu Visual Hierarchy (Vizual Ierarxiya) deyiladi.

Eng muhim element (Taymer vaqti) eng katta bo'lishi kerak.
Agar taymer raqamlari kichkina bo'lsa, foydalanuvchi uzoqdan ko'ra olmaydi.

Chizma

Grid va Flexbox (Skelet)

UIning 2 ta asosiy arxitektura asbobi:

CSS Grid

Oq Card ni ekranning mutlaq markaziga qo'yish uchun ishlatamiz. U 2D (tepa-past, ong-chap) joylashuvni boshqaradi.

CSS Flexbox

3 ta tugmani bitta gorizontal chiziqqa (Row) tizish uchun ishlatamiz. U 1D (bir qatorli) joylashuvni boshqaradi.

Oltin Qoida

Iteratsiya (Qayta ishlash)

AI birinchi urinishdayoq mukammal kod yozmaydi. U xato qiladi. Mijoz esa xatoni qabul qilmaydi.

Agar AI tugmalarni ustma-ust (ustun) qilib qoysa, nima deymiz?
Javob: "Tugmalar CSS orqali Flexbox qatoriga (row) terilmagan. Shuni to'g'irla."
Bunga Iteratsiya deyiladi. AIni jazolab, to'g'ri yo'lga solish!

Kod yozish vaqti

Vazifa: Mijozga UI chizish

1. Claude yoki v0.dev ni ochib, PRD dagi 4 ta shartni kiritish.
2. Hosil bo'lgan dizaynni PRD bilan solishtirish (Kontrast va Flexbox).
3. Xato bo'lsa, iteratsiya qilib to'g'irlatish (Prompt orqali).

10 ballik mezon

Claude yoki v0.dev ni ochib, PRD dagi 4 ta shartni kiritish.4

Hosil bo'lgan dizaynni PRD bilan solishtirish (Kontrast va Flexbox).4

Xato bo'lsa, iteratsiya qilib to'g'irlatish (Prompt orqali).2

Jami10

DIQQAT: Hozircha taymer ishlashi shart emas (JS yo'q)! Faqat UI kerak.

Dars yakuni

Nimalarni o'rgandik?

Haqiqiy frilansda "Menga sayt qilib ber" degan gap o'tmaydi. PRD (qat'iy talab) bilan ishlash shart.
Kontrast qonuni — orqa fon va matn bir-biridan yaqqol ajralib turishi kerak.
Keyingi darsda (keyingi 40 minutda) bu chiroyli mashinaga dvigatel (JS) o'rnatamiz!