AI yordamida dizayn — boshlovchi qo'llanma

"Menda dizayner yo'q" — bugun bu jiddiy chegara emas. AI-vositalar logoni 5 daqiqada, UI'ni 30 daqiqada, brendbookni bir kunda chiqaradi. Lekin AI o'z-o'zicha "yaxshi dizayn" tushinmaydi — sizdan aniq talab va to'g'ri vosita tanlovi kerak.

Ushbu qo'llanmada — AI bilan dizayn jarayonining bo'g'inlari va har biri uchun tavsiyalar.

Dizayn sikli

1. Brending: logo, palette, shrift

Boshlash kerakli minimum:

• 1 ta logo (asosiy + ixcham versiya)
• 3–5 rangli palitra
• 2 ta shrift (sarlavhalar uchun + matn uchun)

Logo

Vositalar:

• Midjourney / FLUX — vektor emas, ammo qonsept-tasvir uchun yaxshi
• Looka, Brandmark — to'liq logo + brending paketi (50–100 USD)
• Recraft — AI bilan vektor (SVG) ishlab chiqarish, eng yaxshi vektor sifati

Promtning kuchi: "minimal flat logo for cloud-storage company, modern san-serif, emerald and graphite, isometric cube concept" — AI 5 daqiqada 10 ta variant chiqaradi.

Iteratsiya: AI birinchi chiqishi — 70% darajada. Eng yaxshi variantni tanlab, "make it more X" deb qayta jo'nating — 5–6 iteratsiyadan keyin natija "production-ready".

Palitra

• Coolors.co, Realtime Colors — interaktiv palitra generatori
• AI promtga: "5 ranglar palitrasi: profesional, emerald va graphite asosida, dark theme uchun"
• WCAG kontrast ni tekshirish — kichik buton matni o'qiladimi?

Standard nabor: bg, surface, primary, text, muted, accent. Bu yetadi.

Shrift

• Google Fonts (bepul, 1500+ shrift)
• Inter, JetBrains Mono, Space Grotesk — texnik / SaaS standart
• Variable fonts — bitta fayl, ko'p og'irlik (300–900). Hajmi kichik.

Promt AI ga: "for SaaS dashboard, modern, readable, with monospaced for code — recommend 2 Google Fonts".

2. Wireframe va UX

Vositalar:

• v0.dev (Vercel) — promtdan to'g'ridan-to'g'ri React komponent
• bolt.new — promt → ishlaydigan ilova (Vite + React)
• Figma + AI plug-ins — wireframe varianti

Approach: avval — sof matnli wireframe yozing.

[Header]
- logo (chap)
- nav: features, pricing, login (o'ng)

[Hero]
- katta sarlavha
- subtitle (1-2 qator)
- 2 ta CTA tugma

[Features grid]
- 3 column, 6 element
- har biri: icon, title, 2 qator matn

[Footer]
- 4 column links
- copyright

Bu — promtning kostyaki. Endi v0.dev ga jo'nating — siz markup'ni olasiz.

Iteratsiya: layout chiqdi — keyin "add a testimonials section between hero and features" deb yangilang. AI farqni tushinadi.

3. Visual dizayn

Wireframe → polishing:

• Figma (klassika) — AI plug-inlari bilan (Magician, Builder.io)
• Penpot — open-source Figma alternativasi
• Galileo AI — promtdan dizayn fayli
• Uizard — qog'ozdagi sketchdan dijital UI ga

Pattern: birinchi cherk to'liq AI, keyin Figma'da qo'lda polishing. AI 80% qiladi, qolgan 20% — odamga.

4. Komponentlar va assetlar

Iconki

• Lucide, Heroicons, Phosphor — bepul SVG kutubxonalari, AI esa "qaysi icon mos" deb tavsiya beradi
• Iconify — 200K+ icon barcha kutubxonalardan
• Recraft — maxsus icon-set generatsiya qilish

Illyustratsiyalar

• unDraw, Storyset — bepul, brendga moslashtirish mumkin
• Midjourney / FLUX — original illyustratsiyalar
• Inkscape — vektor tahririni qo'l bilan moslashtirish

Foto va banner

• Unsplash, Pexels — bepul, AI bilan tanlash mumkin
• Generative-AI (Midjourney, Imagen, FLUX) — to'liq orginal
• Recraft, Picsart — fonni o'chirish, fon almashtirish

5. Kod va export

Dizayndan koda:

• Figma → React/Vue/HTML: Anima, Locofy, builder.io plug-ini
• Promt → ishlaydigan kod: v0.dev, bolt.new, lovable.dev
• MCP integratsiyasi: Figma MCP serveri Claude Code'ga get_design_context qaytaradi — kod yozish promtga moslangan tarzda

Maslahat: AI generatsiya qilgan kod 60–80% to'g'ri. Manual review zarur — accessibility, semantic HTML, responsive.

6. Brendning konsistentsi

AI har xil natijani chiqaradi. Brending konsistent bo'lishi uchun:

• Design tokens — color, typography, spacing — tokens.json
• Component library — shadcn/ui, MUI, Mantine — AI biladi va to'g'ri ishlatadi
• CLAUDE.md / promtning konstanti — har bir generatsiya promtning qismi sifatida tokenlar berish

# Brand guidelines (har bir promtga qo'shing)

- Primary color: #59C53E (emerald)
- Background: #0a0d0c (graphite)
- Font: Inter for UI, JetBrains Mono for code
- Style: minimalist, dark-first, sharp corners (radius 4-8px max)
- Tone: confident, technical, accessible

7. Sifat tekshiruvi

AI chiqargan dizayn — gipoteza, dalil emas. Tekshirish ro'yxati:

• Mobile responsive — 320px gacha qisqartirib ko'rish
• Accessibility — kontrast WCAG AA+, keyboard navigation, alt text
• Performance — rasm hajmi, font yuklash
• Cross-browser — Safari, Firefox, Chrome
• Real foydalanuvchi — 3–5 odamga ko'rsating, "qayerga bosish kerak?" deb so'rang

Boshlovchi to'plami (bepul-arzon)

Vazifa	Vosita	Narx
Logo	Recraft	Bepul tier
Palitra	Coolors.co	Bepul
Shrift	Google Fonts	Bepul
Wireframe / UI	v0.dev	Bepul tier
Figma	Figma	Bepul (1 file)
Iconki	Lucide	Bepul
Illyustratsiya	unDraw	Bepul
Foto	Unsplash	Bepul
Vektor tahrir	Inkscape	Bepul

Oyiga 0 USD bilan — to'liq dizayn sikli.

Anti-paternlar

• Brending yo'q, har joyda boshqacha rang: foydalanuvchi sizning mahsulotni tanimaydi
• AI chiqishini ko'r-ko'rona ishlatish: AI generic chiqishni beradi, "polish" — odam zaruriyati
• Faqat AI dizayn, foydalanuvchi testi yo'q: chiroyli, ammo foydalanish noqulay
• Brendni o'zgartirish (re-brand) tez-tez: 6 oyda bir marta — yetadi. AI bilan oson bo'lgani — bu sabab emas

Keyingi qadamlar

• Token tejash — AI generatsiyalarni narx-samaraga moslashtirish
• Video kontentni avtomatlashtirish