iso-figure Claude Skill yordamida interaktiv izometrik shakllar yarating

iso-figure nima qiladi

iso-figure — Claude uchun tabiiy tildagi tavsif asosida interaktiv izometrik shakllar yaratadigan skill. Siz obyekt nomini kiritasiz, skill esa raqamlangan plastinada nozik chiziqlar bilan chizilgan izometrik tasvirni o‘z ichiga olgan bitta HTML fayl yaratadi.

Tasvirlangan obyekt qismlari bosilganda javob berishi mumkin. Obyektga qarab, o‘zaro ta’sir natijasida matn, raqam yoki musiqiy nota paydo bo‘lishi mumkin. Agar obyektning bosish uchun mazmunli qismi bo‘lmasa, skill boshqa mavzuni tanlaydi.

Misollar uchun stol sintezatori yoki cho‘ntak kalkulyatorini sinab ko‘ring. Shuningdek, repository’ning examples katalogidagi fayllarni ham ochishingiz mumkin.

Yaratilgan shakllar qanday ishlaydi

Natija oddiy SVG’dan foydalanadi va tashqi kutubxonani talab qilmaydi. Proyeksiya kodining taxminan 15 qatori qutining har bir yuzini SVG matrix()iga aylantiradi. Shu sababli tekis chizilgan oddiy to‘rtburchaklar, matn va yo‘llar kerakli izometrik tekislikda ko‘rinadi.

Proyeksiya matn va yumaloq burchaklarni ham qo‘llab-quvvatlaydi. Chizish tartibi chuqurlikni boshqaradi, shuning uchun elementlar kutilganidek bir-birining oldida yoki orqasida ko‘rinadi.

O‘zaro ta’sir bitta holat obyekti va render() funksiyasi orqali boshqariladi. Harakatni CSS ta’minlaydi, natijada yaratilgan fayl mustaqil bo‘lib qoladi, shu bilan birga qismlar animatsiyaga yoki kiritmaga javob bera oladi.

Skill’ni o‘rnatish

Claude Code orqali o‘rnatish

Claude Code uchun eng oddiy sozlash usuli — repository’ni marketplace sifatida qo‘shib, plaginni o‘rnatish:

/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill

Qo‘lda o‘rnatish

Agar skill katalogini mahalliy Claude skills jildingizga nusxalashni xohlasangiz, repository’ni klonlang va iso-figure jildini nusxalang:

git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

Claude.ai’da foydalanish

Claude.ai uchun so‘nggi relizdan iso-figure.skill faylini yuklab oling va uni skill sozlamalariga yuklang.

Birinchi shaklingizni yarating

O‘rnatishdan so‘ng Claude’dan bosiladigan qismlarga ega obyekt so‘rang. Mavzuni kiriting va ko‘rishni istagan o‘zaro ta’sirni tasvirlang.

daqiqali tugmalari va vaqtni teskari sanaydigan displeyga ega oshxona taymeri uchun iso figure

Bu so‘rov jismoniy obyektni belgilaydi, unga interaktiv tugmalar qo‘shadi va displey xatti-harakatini ko‘rsatadi. Claude shakl holati va uni chizish mantiqini aniqlashda ushbu tafsilotlardan foydalanishi mumkin.

Shuningdek, kalitga o‘xshash o‘zaro ta’sirni ham so‘rashingiz mumkin:

fig 6, chiroqni yoqib-o‘chiradigan devor chiroq kaliti

fig 6 iborasi raqamlangan plastina taqdimotini belgilashga yordam beradi, kalit tavsifi esa aniq bosiladigan qism va uning natijasini ko‘rsatadi.

So‘rov berish bo‘yicha maslahatlar

• Aniq obyekt nomini ayting. Taymerlar, kalkulyatorlar, sintezatorlar va chiroq kalitlari chizish va bosish mumkin bo‘lgan taniqli qismlarga ega.
• Boshqaruv elementlarini tasvirlang. Kiritmaga javob berishi kerak bo‘lgan tugmalar, klavishlar, kalitlar yoki boshqa qismlarni ayting.
• Natijani tasvirlang. Qism bosilganda matn, raqam, nota yoki konsepsiya qo‘llab-quvvatlaydigan boshqa xatti-harakat paydo bo‘lishi kerakligini ayting.
• Zarur bo‘lsa, displey yoki chiqishni kiriting. Teskari sanoq, hisob-kitob yoki o‘zgaruvchan to‘lqin shakli o‘zaro ta’sirga ko‘rinadigan natija beradi.
• Bosadigan hech narsa bo‘lmasa, boshqa obyekt tanlang. Skill interaktiv shakllar atrofida ishlab chiqilgan, shuning uchun faqat statik mavzular unga unchalik mos kelmaydi.

Ilg‘or yo‘riqnoma

Skill ko‘rsatmalarini ko‘rib chiqing

Repository’da to‘liq jarayon SKILL.md faylida berilgan. Chizish yadrosi, yaratish jarayoni yoki vizual uslubni boshqaradigan qoidalarni tushunish kerak bo‘lsa, uni o‘qing.

Tekisliklar va chizish tartibini hisobga oling

Shakl SVG tekisliklaridan tuzilgani sababli har bir ko‘rinadigan sirt tegishli izometrik yuzaga joylashtirilishi kerak. Proyeksiya kodi kerakli SVG matrix()ini qo‘llaydi, chizish tartibi esa qaysi sirtlar boshqalarini yopishini belgilaydi. Bu, ayniqsa, qatlamli boshqaruv elementlari va asos ustida joylashgan qismlar uchun muhim.

O‘zaro ta’sir holatini aniq saqlang

Yaratilgan dizayn bitta holat obyekti va bitta render() funksiyasidan foydalanadi. Natijani takomillashtirganda, kerakli holat o‘zgarishini aniq tasvirlang: masalan, tugma bosilgandan keyin qiymat o‘zgarishi yoki kalit yoqilgan va o‘chirilgan holatlar o‘rtasida harakatlanishi.

Natijani mustaqil fayl sifatida oching

Natija bitta HTML fayli bo‘lib, uni brauzerda mahalliy ravishda ochish yoki mustaqil namuna sifatida ulashishni osonlashtiradi. Chizma kutubxonalar o‘rniga oddiy SVG va CSS’dan foydalangani uchun loyiha tomonidan qo‘shimcha bog‘liqliklarni o‘rnatish talab etilmaydi.

Xulosa

iso-figure qisqa Claude promptini ixcham, interaktiv izometrik illyustratsiyaga aylantiradi. Uni Claude Code orqali o‘rnating, skill’ni qo‘lda nusxalang yoki reliz faylini Claude.ai’ga yuklang. Eng yaxshi natijalar uchun bosish mumkin bo‘lgan qismlari aniq bo‘lgan obyektni tanlang va har bir interaksiya qanday natija berishi kerakligini tushuntiring.

Loyiha MIT litsenziyasi asosida chiqarilgan.