Sleek design-mobile-apps skill

Sleek API orqali AI yordamida mobil ilova ekranlarini loyihalash, loyihalarni tahrirlash va dizaynni React Native yoki HTML'ga o'tkazish skill'i.

DizaynClaude CodeCursorCodexMIT★ 28
GitHub'da ochish ↗

Tezkor o'rnatish

npx skills add https://github.com/designed-by-ai/skills

Terminalda ishga tushiring. npx uchun Node.js kerak. Boshqa usullar quyidagi qo'llanmada.

Sleek design-mobile-apps nima

Bu skill agentga Sleek (AI asosidagi mobil ilova dizayn vositasi) REST API'si bilan ishlashni o'rgatadi. Agent loyiha yaratadi, qisqa brief asosida ekranlar dizayn qiladi, ularning HTML va render rasmlarini oladi, so'ng dizaynni React Native yoki HTML'da amalga oshiradi. U mobil ilova dizayneri va dasturchilar uchun foydali. Litsenziya: MIT.

O'rnatish

Usul Buyruq Natija
Interaktiv tanlash npx skills add sleekdotdesign/agent-skills Mavjud skill'lar ro'yxatidan tanlaysiz
To'g'ridan-to'g'ri npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps Skill darhol o'rnatiladi

Talablar:

  • Sleek akkaunti. Bepul akkauntda bir martalik sinov kreditlari bor (taxminan bitta dizayn sessiyasi). Doimiy foydalanish uchun Pro yoki undan yuqori tarif kerak: $69/oy yoki yillik to'lovda $30/oy ($360/yil), oyiga 20 000 AI kredit bilan.
  • API kalit SLEEK_API_KEY muhit o'zgaruvchisida saqlanadi.
  • npx skills add skill'ni ishchi papkadagi .agents/skills/ ichiga o'rnatadi. Agent uni o'zi topmasa, o'rnatilgan SKILL.md yo'lini unga ko'rsating.

API kalit olish

SLEEK_API_KEY yo'q bo'lsa, skill device flow'dan foydalanadi, shunda foydalanuvchi xom kalitni ko'rmaydi:

  1. POST https://sleek.design/api/v1/device/start (auth shart emas) so'rovini {"source": "your-tool-slug"} bilan yuboring. Javobda verificationUrl, userCode, deviceCode va interval bo'ladi.
  2. Foydalanuvchiga verificationUrl va userCode ni ko'rsating. Tasdiqlashdan oldin kod mos kelishini tekshirsin.
  3. POST https://sleek.design/api/v1/device/poll so'rovini {"deviceCode": "..."} bilan har interval soniyada yuboring. approved bo'lganda data.key ni darhol SLEEK_API_KEY sifatida saqlang, chunki kalit faqat bir marta beriladi.

Muqobil yo'l: sleek.design/agents/setup sahifasi. Kalitlarni sleek.design/dashboard/api-keys da boshqarish mumkin.

Ish jarayoni

  1. Kalit borligini tekshiring, yo'q bo'lsa yuqoridagi device flow'ni bajaring.
  2. Dizayn qilishda: Sleek'ga chat xabari yuborishdan oldin designing.md ni o'qing. Unda create → chat → screenshot sikli va uslub yo'nalishini yozish tartibi bor.
  3. Amalga oshirishda: kod yozishdan oldin implementing.md ni o'qing. Unda versiya tanlash, native'ga o'tkazish va qabul tekshiruvlari bor.
  4. Bitta so'rov ikkala bosqichni ham o'z ichiga olishi mumkin. Masalan, avval dizayn, keyin kod.

Asosiy API ma'lumotlari

  • Base URL: https://sleek.design, auth: Authorization: Bearer $SLEEK_API_KEY.
  • Endpointlar: loyihalar (/api/v1/projects), komponentlar, references, chat xabarlari va run'lar, screenshots, share-cards.
  • Muvaffaqiyatli JSON javob data ichida keladi. Xatolarda code, status, message bo'ladi. Avval HTTP statusni tekshiring.
  • Id'lar 11 belgili tokenlar. Ular turini ko'rsatmaydi, shuning uchun har birini qaysi maydondan olganingizni eslab qoling.
  • To'liq spetsifikatsiya: https://sleek.design/api/v1/spec.json, hujjatlar: https://sleek.design/api/v1/docs.

Amaliy misol

SKILL.md'dagi namuna: "fitness ilovasini dizayn qil va Expo'da yasab ber".

  1. Loyiha yarating va brief bilan chat xabarini yuboring.
  2. Run tugashini kuting va natijani user shot (oddiy, telefon shaklidagi render) bilan foydalanuvchiga ko'rsating.
  3. O'z ishingizni tekshirish uchun review shot (fullHeight: true, har so'rovga bitta komponent) oling.
  4. Keyin implementing.md bo'yicha dizaynni Expo (React Native) kodiga o'tkazing.

Cheklovlar va maslahatlar

  • JSON javobni echo orqali pipe qilmang: zsh \n ni haqiqiy yangi qatorga aylantirib, JSON'ni buzadi. Avval curl -o run.json bilan faylga yozing, keyin faylni tahlil qiling.
  • Kalit yaratilganda faqat bir marta ko'rsatiladi. Bepul akkauntda bir vaqtda bitta faol kalit bo'ladi.
  • Bepul sinov kreditlari taxminan bitta dizayn sessiyasiga yetadi. To'lov kerak bo'lishidan oldin narxni foydalanuvchiga ochiq ayting. Joriy narxlar https://sleek.design/agents.md da.
  • Agar README'dagi -s nomi ishlamasa, interaktiv o'rnatishdan foydalaning.

Manba

github.com/designed-by-ai/skills