Ruka hadi maudhui makuu
Mafunzo ya AI

Unda Michoro ya Kiisometria Inayoingiliana kwa Ujuzi wa Claude wa iso-figure

Jifunze jinsi ya kusakinisha na kutumia iso-figure, ujuzi wa Claude unaounda michoro ya kiisometria inayoingiliana na inayojitosheleza katika HTML. Mafunzo haya yanaangazia usanidi, miundo ya maelekezo, uchoraji unaotegemea SVG, muundo wa mwingiliano, na njia za kupata matokeo bora zaidi.

Unda Michoro ya Kiisometria Inayoingiliana kwa Ujuzi wa Claude wa iso-figure

iso-figure hufanya nini

iso-figure ni ujuzi wa Claude unaozalisha michoro shirikishi ya vitu vya isometriki kutokana na maelezo ya lugha ya kawaida. Unataja kitu, na ujuzi huu hutengeneza faili moja la HTML lenye mchoro wa isometriki wa mistari myembamba kwenye bamba lenye nambari.

Sehemu za kitu kilichoonyeshwa zinaweza kuitikia zinapobonyezwa. Kulingana na kitu hicho, mwingiliano unaweza kutoa maandishi, nambari, au noti ya muziki. Ikiwa kitu hakina sehemu yenye maana ya kubonyezwa, ujuzi huu huchagua mada tofauti.

Kwa mifano, jaribu synthesizer ya mezani au kikokotoo cha mfukoni. Unaweza pia kufungua faili zilizo kwenye saraka ya examples ya hazina.

Mfano wa kitu shirikishi cha isometriki

Jinsi vitu vinavyozalishwa hufanya kazi

Matokeo hutumia SVG tupu na hayahitaji maktaba ya nje. Takriban mistari 15 ya msimbo wa projeksheni hubadilisha kila uso wa kisanduku kuwa matrix() ya SVG. Hii huruhusu mistatili, maandishi, na njia zilizochorwa kwa mlalo kuonekana kwenye ndege sahihi ya isometriki.

Projeksheni hiyo pia inasaidia maandishi na pembe zilizozungushwa. Mpangilio wa upakaji hudhibiti kina, hivyo vipengele huonekana mbele au nyuma ya vingine inavyotarajiwa.

Mwingiliano unaendeshwa na kitu kimoja cha hali na kazi ya render(). CSS hushughulikia mwendo, na kufanya faili inayozalishwa ijitosheleze huku bado ikiruhusu sehemu kuhuishwa au kuitikia ingizo.

Sakinisha ujuzi

Sakinisha kwa Claude Code

Usanidi rahisi zaidi wa Claude Code ni kuongeza hazina kama soko na kusakinisha programu-jalizi:

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

Sakinisha mwenyewe

Ikiwa unapendelea kunakili saraka ya ujuzi kwenye folda yako ya ndani ya ujuzi wa Claude, kloni hazina kisha nakili folda ya iso-figure:

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

Itumie kwenye Claude.ai

Kwa Claude.ai, pakua iso-figure.skill kutoka kwenye toleo jipya zaidi na ipakie kwenye mipangilio ya ujuzi wako.

Unda kitu chako cha kwanza

Baada ya usakinishaji, mwombe Claude kitu chenye sehemu zinazoweza kubonyezwa. Jumuisha mada na ueleze mwingiliano unaotaka kuona.

iso figure of a kitchen timer with minute buttons and a display that counts down

Kidokezo hiki hutambua kitu halisi, hukipa vitufe shirikishi, na hubainisha tabia ya skrini. Claude anaweza kutumia maelezo hayo anapoamua hali ya kitu na mantiki ya uonyeshaji.

Unaweza pia kuomba mwingiliano wa aina ya swichi:

fig 6, a wall light switch that turns a lamp on and off

Kauli fig 6 husaidia kubainisha uwasilishaji kwenye bamba lenye nambari, huku maelezo ya swichi yakitambulisha sehemu iliyo wazi ya kubonyezwa na matokeo yake.

Mfano wa kitu shirikishi cha isometriki

Vidokezo vya kuandika maelekezo

  • Taja kitu mahususi. Vipima muda, vikokotoo, synthesizer, na swichi za taa vina sehemu zinazotambulika ambazo zinaweza kuchorwa na kubonyezwa.
  • Eleza vidhibiti. Taja vitufe, funguo, swichi, au sehemu nyingine zinazopaswa kuitikia ingizo.
  • Eleza matokeo. Sema ikiwa kubonyeza sehemu kunapaswa kutoa maandishi, nambari, noti, au tabia nyingine inayoungwa mkono na dhana hiyo.
  • Jumuisha skrini au matokeo inapofaa. Kuhesabu kurudi nyuma, hesabu, au mawimbi yanayobadilika hupa mwingiliano matokeo yanayoonekana.
  • Tumia kitu tofauti ikiwa hakuna cha kubonyeza. Ujuzi huu umeundwa kuzunguka vitu shirikishi, hivyo mada tuli pekee si chaguo bora.

Maelekezo ya kina

Kagua maagizo ya ujuzi

Hazina inajumuisha utaratibu kamili kwenye SKILL.md. Isome unapohitaji kuelewa kiini cha uonyeshaji, utaratibu wa uzalishaji, au kanuni zinazosimamia mtindo wa kuona.

Fikiri kwa kutumia ndege na mpangilio wa upakaji

Kwa kuwa kitu hujengwa kutokana na ndege za SVG, kila uso unaoonekana lazima uwekwe kwenye uso unaofaa wa isometriki. Msimbo wa projeksheni hutumia matrix() inayohitajika ya SVG, huku mpangilio wa upakaji ukiamua ni nyuso zipi zinafunika nyingine. Hili ni muhimu hasa kwa vidhibiti vilivyowekwa kwa tabaka na sehemu zinazokaa juu ya msingi.

Weka hali ya mwingiliano wazi

Muundo unaozalishwa hutumia kitu kimoja cha hali na kazi moja ya render(). Unapoboreshwa matokeo, eleza kwa uwazi mabadiliko ya hali unayotaka, kama vile thamani kubadilika baada ya kubonyeza kitufe au swichi kusogea kati ya hali za kuwashwa na kuzimwa.

Fungua matokeo kama faili linalojitegemea

Matokeo ni faili moja la HTML, hivyo ni rahisi kulifungua katika kivinjari au kushiriki kama mfano unaojitosheleza. Kwa kuwa mchoro hutumia SVG na CSS tupu badala ya maktaba, hakuna usakinishaji wa utegemezi wa ziada unaoelezwa na mradi huu.

Hitimisho

iso-figure hubadilisha kidokezo kifupi cha Claude kuwa mchoro mdogo, wa kuingiliana, wa isometriki. Isakinishe kupitia Claude Code, nakili ujuzi huo wewe mwenyewe, au pakia faili la toleo kwenye Claude.ai. Kwa matokeo bora, chagua kitu chenye sehemu zinazoeleweka za kubonyezwa na ueleze kila mwingiliano unapaswa kutoa nini.

Mradi umetolewa chini ya Leseni ya MIT.