Sizdə şəkil var: bəyəndiyiniz bir sayt, və öz səhifənizin də elə görünməsini istəyirsiniz. Belə saytı sözlə təsvir etmək mümkün deyil. "Açıq rəngli, havadar, kartlar üç sütunda, seriflərsiz şrift, iri başlıqlar" - bu artıq şəkli sadəcə açmaqdan uzundur, amma yenə də dəqiq deyil. Buradan təbii bir sual yaranır: agent mətnlə işləyir. O, ümumiyyətlə şəkli görürmü?
Görür. Ekran görüntüsünü birbaşa sorğuya əlavə etmək olar və agent sizin sözlə təsvirinizi yox, şəklin özünü tam alacaq. Amma şəkil tapşırığın yalnız yarısıdır: o, necə görünməli olduğunu deyir və qalan hər şey barədə susur. Qalanını siz yazırsınız, məhz nəyi - aşağıda görəcəksiniz.
1. Şəkli agentə necə vermək
İki yol var.
- Şəkli kopyalayıb sorğu sətrinə yapışdırmaq:
Ctrl+V, Windows-da və WSL-də isəAlt+V. @yazıb təklifdən yolu seçmək.
Yapışdıranda sorğu sətrində [Image #1] etiketi görünür. Sonra həm siz, həm agent şəklə nömrə ilə istinad edirsiniz; ikincisi [Image #2] olacaq, və s. Belə görünür:
[Image #1] Səhifəni bu ekran görüntüsünə oxşar et.Etiketi Claude Code qoyur, siz onu yazmırsınız. Bir şəkil və bir ifadədən ibarət sorğu belə görünür, bu isə azdır, amma bu barədə aşağıda. Əgər şəkil artıq layihədə yerləşirsə, məsələn dizaynerin maketi img/ qovluğunda, ikinci üsul daha rahatdır:
@img/reference.png index.html-i bu nümunənin stilinə uyğunlaşdır.@ yazın, fayl adını yazmağa başlayın, Claude Code yolu özü qoyacaq. Belə şəklə qayıtmaq asandır: növbəti istənilən sorğuda yenidən @img/reference.png yazmaq kifayətdir, onu yenidən yapışdırmağa ehtiyac yoxdur. Layihədən kənarda olan faylı da tam yolla göstərmək olar.
Terminal Ctrl+V-ni öz ehtiyacları üçün tutursa, Alt+V köməyə gəlir. Formatlar adi: PNG, JPEG, WebP, GIF də olur, sadəcə animasiyadan agentə yalnız birinci kadr çatacaq. Telefondan çəkilmiş ekran görüntüsü uyğun gəlir. Ekranın fotoşəkli isə daha pisdir: parıltı və əyri bucaq ucbatından mətn səhv oxunur.
Sıra da vacibdir: əvvəl şəkil, sonra sözlər. Agent belə daha yaxşı işləyir, sizə də belə rahatdır - əvvəl göstərmək, sonra izah etmək.
Ekran görüntüsü söhbətdə mətnlə birlikdə yaşayır və agent onu hər addımda yenidən oxuyur. Bir-iki nümunə normaldır. Ard-arda on dənə sessiyanı nəzərəçarpacaq dərəcədə ağırlaşdırır, işlənmiş şəkilləri isə yeni tapşırığa daşımağa ehtiyac yoxdur.
2. Agent şəkildə nəyi görür
Şəklin özünü, təsviri yox. İri ekran görüntüsü göndərilmədən əvvəl kiçilir, ona görə sizin ekranınızdakı xırda detallar agent üçün bir-birinə qarışa bilər. İri detalları isə etibarlı şəkildə götürür: hansı bloklar hansı ardıcıllıqla yuxarıdan aşağı yerləşir, onların proporsiyaları, səhifə açıq rənglidir, yoxsa tünd, vurğu rəngi hansıdır, oxunaqlı mətn, ümumi xarakter - sıx, yoxsa havadar, küncləri iti, yoxsa dəyirmi.
Agentin sizin baxdığınız yerə baxdığına əmin olmağın sadə yolu: düzəlişlərdən əvvəl heç nə dəyişmədən nümunəni sözlə təsvir etməyi ondan xahiş edin. Bir dəqiqə vaxt aparır. Cavab təxminən belə görünür:
Açıq rəngli səhifə. Yuxarıda solda ad, sağda üç link olan dar başlıq zolağı.
Aşağıda iki sətirlik iri başlıq və altında qısa abzas.
Sonra bir sırada üç eyni enli kart, üstündə şəkil, altında mətn.
Vurğu rəngi bir dənədir, tünd göy: başlıq zolağındakı düymə və alt xətlər.
Bloklar arasında çox hava, künclər dəyirmi, kölgə demək olar ki, yoxdur.Sizin nümunənizin təsviri özününkü olacaq, orada rəng kodunun, "təxminən 24 piksel məsafə"nin və şrift adının olması da tam mümkündür. Bu, pipetka və ya xətkeş deyil, gözəyarı qiymətdir: belə rəqəmlər nümunə ilə yanaşı yoxlanılır, ölçülmüş kimi qəbul edilmir. Birinci cəhd doğru istiqaməti verəcək, birə-bir alınmayacaq. Bu, şəklin xüsusiyyətidir, agentin səhvi deyil, niyə belə olduğunu isə aşağıda görəcəksiniz.
3. Şəkildə nə yoxdur
| Etibarlı götürür | Görmür və ya təxmini görür |
|---|---|
| blokların yeri və ardıcıllığı | piksellə dəqiq ölçülər - təxmini |
| rəng qammasını və vurğu rəngini | rəng kodları - təxmini |
| şriftin xarakterini | şriftin adı - oxşarını seçəcək |
| oxunaqlı mətni | çox xırda mətn və ikonlar - kiçildikdən sonra itir |
| ümumi xarakter: hava, dəyirmiləşdirmə, kontrast | davranış: kursor üzərinə gəlmə, klik, animasiya - yox |
| kadrda olanı | digər səhifələr, telefondakı görünüş, kadrdan kənarda qalan - yox |
| iri elementlərin sayı, adətən düzgün | xırdaların dəqiq sayı - təxmini |
24 piksellik məsafəni agent "təxminən 24" adlandıracaq və üçdə bir səhv edə bilər, rəng kodunun əvəzinə oxşarını verəcək, xarakterinə görə yaxın şrift seçəcək. Kursor üzərinə gəlmə, klik, animasiya, qonşu səhifələr, telefondakı görünüş - şəkildə bunlar yoxdur və siz deməyincə agent bunları bilməyəcək.
Nümunədəki şəkillər, loqotip və illüstrasiyalar sizin səhifənizdə özləri görünməyəcək. Agent şəkilləri anlayır, amma yenilərini çəkmir. Öz şəkillərinizi layihə qovluğuna özünüz gətirməli və onların harada olduğunu deməlisiniz.
Xırda detal vacibdirsə, ekran görüntüsündən yalnız o hissəni kəsib ikinci fayl kimi verin - əl ilə və ya agentdən lazımi hissəni kəsməyi xahiş edərək. Amma mətni iriləşdirmək naminə ətrafındakı hər şeyi kəsməyin: agentə bu hissənin harada dayandığını və yanında nəyin olduğunu görmək lazımdır.
Telefon barədə ayrıca. Ekran görüntüsü bir ekran enində çəkilib və agent yalnız bu eni görür. Telefondakı görünüş vacibdirsə və nümunə link üzərindən açılırsa, onu telefondan da çəkin: iki şəkil, iki etiket. İkinci şəkil olmadan dar ekran barədə sözlə demək lazım gələcək, nəticə isə nümunənin yox, agentin öz variantı olacaq.
4. Sözlə nəyi əlavə etmək
Şəkil "necə görünməli" sualına cavab verir və daha dörd suala cavab vermir. Sizin işiniz - nümunəni vermək və onunla nə etmək lazım olduğunu demək. Dörd sətir, sonra nəticəni məhz onlarla tutuşduracaqsınız.
Nümunədə əsas nədir. Rənglərmi? Kartların şəbəkəsimi? Başlıq zolağımı? Şriftlərin xarakterimi? Bu olmadan agent hər şeyi birdən və ortalama götürəcək, ortalama isə adətən lazım olan deyil. Bu sətir üçün sözlər artıq var: onları agentin əvvəldə etdiyi nümunə təsvirindən götürün.
Özünüzdə nəyi saxlamaq. Mətni, səhifənin strukturunu, linkləri, öz şəkillərinizi. Əks halda agent başlıqları nümunəyə uyğun yenidən yaza bilər: axı orada başqa başlıqlar var idi.
Nəyi kopyalamamaq. Loqotipi, başqasının mətnlərini, məhsulları, fotoşəkilləri. Nümunə - üslubdur, məzmun deyil.
Sərhədlər. Bir səhifə, düzəlişlər yalnız index.html və style.css-də, kitabxanalar və yığım olmadan. Nəyə toxunmaq olmaz.
Dörd sətir şəklin yanında darıxdırıcı görünür. Onlarsız gözəl, amma lazım olmayan nəticə çıxır, yenidən düzəltmək isə bu sətirlərdən daha uzun çəkir.
5. Bir sorğu tam şəkildə
Əvvəl şəkil, sonra dörd sətir:
[Image #1] Mənim səhifəmi bu nümunənin stilinə uyğunlaşdır.
Əsas: açıq rəng qamması, kartlar üç sütunda, seriflərsiz iri başlıqlar.
Mətni, strukturu və mənim şəkillərimi olduğu kimi saxla.
Loqotipi, fotoşəkilləri və mətnləri nümunədən köçürmə.
Yalnız index.html və style.css-ə düzəliş et, kitabxanalar olmadan.Şəkildən sonrakı dörd sətir məhz onda olmayan o dörd şeydir.
Cavabında agent adətən nümunədən nəyi götürdüyünü sadalayır və fayllara düzəlişlər edir. Birinci nəticə - istiqamətdir, kopya deyil. Sonra sözlə qısa dəqiqləşdirmələr gəlir, çünki nümunə artıq söhbətdədir və şəkli təkrarlamağa ehtiyac yoxdur:
Kartlar nümunəyə daha yaxın olsun: kölgələr daha yumşaq, dəyirmiləşdirmə daha böyük, kartlar arasında daha çox hava.Agent "hazırdır" deyəndə, nümunəni və öz səhifənizi yanaşı açın və öz dörd sətrinizlə yoxlayın. Nəticə nümunədən tamamilə uzaqdırsa, eyni şəkli eyni xahişlə təkrarlamayın: ən çox nəyin uyğun gəlmədiyini adlandırın və bir-bir düzəldin. "Şəkildəki kimi etdim" hesabatı yoxlama sayılmır. xüsusən də çox əminliklə deyiləni.
6. Yadda saxlamaq lazım olan
- Şəkil görünüşü müəyyən edir, sözlər isə sərhədləri. Biri o birisiz ya "lazım olmayan" nəticə verir, ya da uzun çəkir.
- Agent şəkildən iri detalları götürür: strukturu, proporsiyaları, rəng qammasını, xarakteri. Xırdalıq və davranış isə sizin öhdənizdə qalır.
- Birinci cəhd - istiqamətdir. Dəqiqləşdirmələr qısadır, çünki nümunə artıq söhbətdədir.
- Şəkil təkcə nümunə kimi faydalı deyil. Təsvirin şəklin özündən uzun alındığı hər yerdə onu verin.
Konsolda qırmızı mətn, qəribə sürüşmüş blok, anlaşılmaz mesajlı pəncərə - çəkin və olduğu kimi verin. Sizin əl ilə, həm də yazı səhvləri ilə köçürəcəyiniz mətni agent birbaşa şəkildən oxuyacaq.
"Burdakı kimi et" yaxşı başlanğıc olaraq qalır. Yaxşı tapşırığa isə o, dörd sətir və nəticəyə nümunə ilə yanaşı bir baxışdan sonra çevrilir.
Klaviatura kombinasiyaları və şəkil etiketinin görünüşü Claude Code-un yeni versiyalarında fərqli ola bilər; ötürmə üsulu və agentin gördüklərinin sərhədləri versiyadan asılı deyil.
GO TO FULL VERSION