Bepul boshlash

Kod yozuvchi agentingiz haqiqatan amal qiladigan dizayn tizimi.

Broom tizimni qisqa brif yoki siz svayp qiladigan mahsulot dizaynlari asosida loyihalaydi va uni kod yozuvchi agentingizga fayllar sifatida beradi: yorugʻ va qorongʻi mavzu uchun tokenlar, stekingiz uchun komponentlar, har bir komponentga bitta sahifa hamda agent ekranni tayyor deyishidan oldin ishga tushiradigan koʻnikmalar.
Bepul boshlash

3 ta bepul ishga tushirish. Karta kerak emas.

Broom ilovasidagi svayp kartalar toʻplami: qizil «yoqmadi» va yashil «yoqdi» tugmalari orasida bitta namuna kartasi — moliya ilovasi oynasi.Broom ilovasidagi «Dizayn tizimi» yorligʻi: yaratilgan tizimning Button sahifasi, uning oltita varianti qorongʻi va yorugʻ sxemada, chapda komponentlar roʻyxati.

Kartalar toʻplami va natija — ilova koʻrsatganidek

Mahsulotingiz shaklida chizilgan haqiqiy mahsulotlarni svayp qiling; tizim shunga oʻxshash sahifalar koʻrinishida qaytadi, har bir komponent ikkala sxemada. Koʻrsatilgan sahifalar ilovada saqlaydigan namunaviy tizimimiz — Ledgerniki.

Kodingiz qayta aytib beradigan hujjat emas, import qiladigan tizim.

Broom qismlarni kodingizning hech narsasini qayta yozmaydigan bitta zip arxivda beradi.

  • Stekingiz uchun komponentlar

    Veb-ilova uchun 44, mobil ilova uchun 50 va sayt uchun 52 ta, barcha variant va holatlari bilan, React + Tailwind, Next.js + Tailwind, Vue, Svelte va React Native uchun komponent fayllari sifatida.

  • Yorugʻ va qorongʻi mavzu uchun tokenlar

    Har bir matn juftligi oʻz foniga nisbatan tekshirilgan va CSS oʻzgaruvchilari, Tailwind konfiguratsiyasi va Tailwind v4 mavzusi, W3C DTCG JSON hamda Dart, Swift va Kotlin sifatida yozilgan.

  • Agentingiz oʻqiydigan hujjatlar

    DESIGN_SYSTEM.md, docs/components/ ichida har bir komponentga bitta sahifa va tokenlarni Figmaga qaytarish uchun figma/README.md.

  • Sizning nomlaringiz bilan koʻnikmalar

    build · states · edge-cases · consistency · review · finish · slop-check va mahsulot turingiz uchun yana bittasi: data, mobile yoki page. Ularda komponentlaringiz nomlari va raqamlaringiz ishlatiladi; CLAUDE.md, AGENTS.md yoki .cursorrules — faqat siz tanlagan agentlar uchun — agentingizni ularga yoʻnaltiradi, slop tekshiruvi esa agent oʻzgartirgan fayllarida ishga tushiradigan skript.

Toʻplamdagi komponentlar, mahsulot turi boʻyicha
  • Veb-ilova
    44
  • Mobil ilova
    50
  • Sayt
    52

Har birining barcha variantlari va holatlari bilan.

Har bir toʻplamdagi koʻnikmalar

  • build
  • states
  • edge-cases
  • consistency
  • review
  • finish
  • slop-check

Va mahsulot turingiz uchun yana bittasi: data, mobile yoki page.

Har bir stek nima oladi
StekKomponentlarTokenlarHujjatlar
React + TailwindKodHaHa
Next.js + TailwindKodHaHa
VueKodHaHa
SvelteKodHaHa
React NativeKodHaHa
HTML + CSSSpetsifikatsiyalarHaHa
FlutterSpetsifikatsiyalarHaHa
SwiftUISpetsifikatsiyalarHaHa
Jetpack ComposeSpetsifikatsiyalarHaHa

Bir nechta javob yoki bir nechta svayp.

Fayl kerak emas: didingizni ikki usulning biri bilan koʻrsating.

  • Tezkor yoʻl

    Mahsulot dizaynlarini svayp qiling va har birini yoqtiring yoki yoqtirmang. Broom didingizni siz qoldirganlaridan oʻqiydi; kamida uchta baho kerak.

  • Toʻliq brif

    Kulranglarning haroratini — iliq, neytral yoki sovuq — aksent va brend ranglarini, burchaklarni, shrift juftligini, ikonkalarni, animatsiyani, platformalarni va hech qachon koʻrishni istamaydigan narsalaringizni tanlang. Mahsulotingizning jonli koʻrinishi har bir tanlovga ergashadi.

  • Kulrang harorati
  • Aksent rangi
  • Burchaklar
  • Brend ranglari
  • 11 ta shrift juftligi
  • Ikonkalar kutubxonasi
  • Animatsiya
  • Platformalar
  • Hech qachon koʻrsatmaslik

  • Jonli koʻrinish

    Har bir vizual tanlov yonida mahsulotingiz chiziladi, yorugʻ va qorongʻi mavzuning oʻz almashtirgichi bilan.

  • Siz allaqachon ishlatadigan ikonkalar

    Komponentlar ikonkalarni Hugeicons, Lucide, Phosphor, Tabler, Heroicons, Material Symbols, SF Symbols va oʻz toʻplamingiz dan oladi.

  • Sayt uchun atmosfera

    Katta boʻlimlar ortida: donadorlik, shovqin, tuman, duoton va mesh gradiyent — bir nechtasi birdaniga yoki hech biri.

Mavjud mahsulotdan qaytadan boshlash

«Mahsulotim bor», keyin «Toʻliq redizayn»ni tanlang: «Koʻrinish oʻzgaradi. Biz mavjud narsadan va nega u ishlamayotganidan boshlaymiz hamda mahsulotga kerakli tizimni loyihalaymiz». Repozitoriyingiz yoki Figma faylingizni — hech boʻlmasa bittasini — va sabablaringizni olib keling. Repozitoriy boʻlsa, ekranlaringizdan biri yangi tizim bilan qayta yigʻiladi: oldin va keyin.

Boʻsh sahifadan tizimgacha — toʻrt qadamda.

  1. 01Mahsulotni tasvirlang.

    Uning nomi, nima qilishi, kim uchunligi va u veb-ilova, mobil ilova yoki saytmi; keyin uning toifasi.

  2. 02Didingizni koʻrsating.

    Dizaynlarni svayp qiling yoki toʻliq brifga javob bering.

  3. 03Broom tizimni quradi.

    Tokenlar, komponentlar, hujjatlar va koʻnikmalar; har bir matn juftligi yorugʻ va qorongʻi mavzuda tekshirilgan.

  4. 04Agentingiz u bilan quradi.

    Toʻplamni repozitoriyingiz ildiziga oching; undagi yoʻriqnoma fayllari agentingizni unga yoʻnaltiradi.

U tayyor ekranlarni emas, tizimni beradi.

  • Ekranlar agentingiz zimmasida qoladi

    Broom ularning hech birini yozmaydi va kodingizni oʻzgartirmaydi. Agentingiz toʻplamdan quradi.

  • U faqat sizga xos emas

    Oʻxshash brifga oʻxshash tizim qaytishi mumkin.

  • U ingliz tilida yozilgan

    Ilova ingliz, rus va oʻzbek tillarida ishlaydi. Toʻplam ingliz tilida, chunki uni kod yozuvchi agentlar oʻqiydi.

  • Baʼzi steklar hozircha spetsifikatsiyalar oladi

    HTML + CSS, Flutter, SwiftUI va Jetpack Compose tokenlar, hujjatlar va komponent spetsifikatsiyalarini oladi. Ular uchun komponent kodi keyinroq boʻladi.

Boshlashdan oldingi savollar.

  • Menga dizayner yoki Figma fayli kerakmi?

    Yoʻq. Hammasi mahsulotingiz haqidagi bir nechta javobdan yoki siz svayp qiladigan dizaynlardan boshlanadi. Dizayningiz allaqachon Figmada boʻlsa, uni Figma handoff yozib beradi.

    Figma handoff qanday ishlaydi

  • Talablar hujjatidan boshlasa boʻladimi?

    Ha. Uni birinchi qadamga tashlang — .txt, .md, .docx yoki .pdf — va u mahsulot nomini, nima qilishini va kim uchunligini toʻldiradi. Maydonlarni oʻzingiz tahrirlashingiz mumkin, hujjat esa mahsulotingiz konteksti sifatida oʻqiladi.

  • Natijani oʻzgartirsa boʻladimi?

    Ha. Loyiha ochilgach, toʻplam sizniki: undan foydalaning, oʻzgartiring, chiqaring va u bilan soting. Boshqa javoblar bilan qayta ishga tushirishingiz ham mumkin; qayta ishga tushirish — yana bitta ishga tushirish.

  • Bu mobil ilovalar va nativ steklar uchun ishlaydimi?

    Ha. Mobil ilova 50 ta komponent oladi. React Native uchun ular komponent fayllari sifatida keladi; Flutter, SwiftUI va Jetpack Compose uchun — Dart, Swift va Kotlindagi tokenlar hamda hujjatlar yonida komponent spetsifikatsiyalari sifatida; ular uchun komponent kodi keyinroq boʻladi.

    Toʻliq brifda mobil stekni tanlang — u komponentlar qanday koʻrinishi kerakligini ham soʻraydi: nativ komponentlar, Liquid Glass yoki har bir platformada bir xil boʻlgan maxsus komponentlar.

  • U shrift va ranglarni men uchun tanlaydimi?

    Tezkor yoʻlda — ha: Broom ularni siz qoldirgan dizaynlardan oʻqigan didingiz boʻyicha tanlaydi. Toʻliq brifda ularni oʻzingiz tanlaysiz — kulrang haroratini, aksentni va uning yonida ikkitagacha brend rangini, burchaklarni, 11 ta shrift juftligidan birini va ikonkalar kutubxonasini — mahsulotingizning jonli koʻrinishi esa har bir tanlovni yorugʻ va qorongʻi mavzuda koʻrsatadi.

  • Bu DESIGN.md faylidan nimasi bilan farq qiladi?

    DESIGN.md fayli dizaynni — uning ranglari, shriftlari va qoidalarini — tasvirlaydi, agentingiz esa baribir uni ekranma-ekran komponentlarga aylantirishi kerak. Broom tizimning oʻzini beradi: kodingiz import qiladigan komponentlar, stekingiz formatlaridagi tokenlar, har bir komponentga bitta sahifa hamda agent oʻz ishida ishga tushiradigan tekshiruvli koʻnikmalar.

  • Mahsulotim allaqachon boʻlsa-chi?

    «Mahsulotim bor»ni tanlang: koʻrinish oʻzgarishi kerak boʻlsa — «Toʻliq redizayn», u qolib, faqat andoza yechimlar ketishi kerak boʻlsa — «Faqat AI-slopni olib tashlash».

    Slop auditi qanday ishlaydi

Qaysi yoʻl bilan kelsangiz ham, agentingiz oʻz qoidalarini oladi.

  • Faqat AI-slopni olib tashlash

    Koʻrinish oʻzgarmaydi. Tizimingizni mahsulotning oʻzidan oʻrganamiz, kod undan andoza yechimlar tomon qayerda chetga chiqqanini topamiz va bu toʻxtashi uchun qoidalar yozamiz.

    Slop auditi qanday ishlaydi

  • Figma handoff

    Dizayningiz Figmada tayyor. Biz uni agentingiz uchun qoidalarga aylantiramiz.

    Figma handoff qanday ishlaydi

AI-slop nima va agentlar uni nega yaratadi

Agentingiz keyingi ekranni yozishidan oldin unga tizim bering.

Qisqa brifga javob bering yoki bir nechta dizaynni svayp qiling va natijani oʻqing.

Bepul boshlash

3 ta bepul ishga tushirish. Karta kerak emas.

  • Har bir natija toʻlovdan oldin ekranda
  • Muvaffaqiyatsiz ishga tushirish oʻzi qaytadi
  • Kodingiz ishga tushirishdan keyin saqlanmaydi