# „Claude Design“: vadovas ir penki praktiniai scenarijai > Funkcijos, kainodara, dizaino sistema, nukreipimo puslapiai, pristatymai, prototipai ir HTML el. laiškai. Eksportavimas, apribojimai ir rezultato perdavimas „Claude Code“. Source: https://ailoot.ai/blog/lt/claude-design-guide/ Canonical: https://ailoot.ai/blog/lt/claude-design-guide/ Language: lt Publisher: Ailoot (https://ailoot.ai/) Translation: guide-058 Revision: sha256-4bfff70e5c05387dabdab6d749f7007ac1f3d317e1e8d3fa2f98b6f5da3e1857 [Praktinės informacijos apie darbą su Ailoot rasite dokumentacijoje](https://ailoot.ai/docs/). ## Kas yra „Claude Design“ ir kodėl visi žvelgia į balandžio 17-ąją?
Svarbiausia mintis „Claude Design“ – „Anthropic“ įrankis, kuris pagal tekstinę užklausą kuria spustelėjamus prototipus, nukreipimo puslapius, pristatymus ir rinkodaros medžiagą. Jis pristatytas 2026 m. balandžio 17 d. ir veikia su „Claude Opus 4.7“. Tai pirmasis „Anthropic“ produktas, sukurtas pagal „agentas ir drobė“ paradigmą: pokalbis kairėje, tiesioginė drobės peržiūra dešinėje.
2026 m. balandžio 17 d., penktadienį, „Anthropic“ pristato [„Claude Design“](https://www.anthropic.com/news/claude-design-anthropic-labs) – įrankį, kuris tekstinį aprašymą paverčia veikiančiu nukreipimo puslapiu, investuotojų pristatymu arba mobiliosios programėlės prototipu. Tai ne „dar vienas vaizdų generatorius“. Tai pirmasis „Anthropic“ bandymas pašalinti dizainerį iš ankstyvųjų produkto kūrimo etapų. Po 24 valandų „Adobe“ paskelbė apie „Firefly-Claude“ jungtį ir save pristatė kaip platformos partnerę. Signalas aiškus: „Anthropic“ laimėjo ne produktų karą, o paradigmos pokytį – dizainas dabar generuojamas, o įsitvirtinę rinkos dalyviai tampa platintojais. Šiame straipsnyje „Claude Design“ nagrinėjamas iš vibe koduotojo perspektyvos: ką jis daro, kiek kainuoja, kaip juo naudotis neturint dizaino pagrindų ir kokioms praktinėms užduotims jis tinka. Jei kuriate produktą be vidinio dizainerio, šis vadovas skirtas jums. ## Ką gali „Claude Design“: 6 tipų rezultatai
Svarbiausia mintis „Anthropic“ įvardija 6 tipinius „Claude Design“ rezultatus: tikroviškus prototipus, maketus, alternatyvias kryptis, pristatymus, rinkodaros medžiagą ir eksperimentinius dizainus su integruotu DI. Įrankis priima tekstą, ekrano kopijas, DOCX/PPTX/XLSX dokumentus, kodų bazes ir svetainių nuorodas. Jis eksportuoja į PDF, PPTX, savarankišką HTML, „Canva“ kaip redaguojamą projektą ir „Claude Code“ kaip paketą, kuriame išsaugota dizaino logika.
Trumpai tariant, „Claude Design“ kuria dizainus, kuriems anksčiau dizaineriui reikėdavo 3–5 dienų. „Anthropic“ žodžiais, yra šešių tipų rezultatai: | Tipas | Kas tai | Kada naudoti | |----|----|----| | Tikroviški prototipai | Spustelėjami maketai naudotojų testavimui | Išbandyti hipotezę prieš samdant programuotoją | | Eskizai ir maketai | Specifikacijos, kurias galima perduoti programuotojui | Kai reikia pateikti programuotojui specifikaciją | | Alternatyvios kryptys | Kelios koncepcijos vienu metu | Kai renkatės iš 3–4 krypčių | | Pristatymai | Skaidrės, kurias galima eksportuoti į PPTX arba „Canva“ | Pristatyti investuotojams, teikti paraišką akseleratoriui | | Rinkodaros medžiaga | Nukreipimo puslapiai, reklaminės juostos, įrašai | Pradedant mokamą reklamą ar el. pašto kampanijas | | Eksperimentinis dizainas | Prototipai su balsu, vaizdo įrašu, 3D ir integruotu DI | Pažymėta kaip eksperimentinė funkcija; gali neveikti | Sąsają sudaro dvi sritys. Kairėje – pokalbis su „Claude“, dešinėje – tiesioginė drobės peržiūra. Procesą sudaro penki žingsniai: projekto nustatymas, aprašymas, peržiūra, iteracijos ir eksportavimas. Kai užklausa neaiški, „Claude“ užduoda papildomų klausimų, todėl procesas labiau primena darbą su žmogumi nei su generatoriumi. **Kokius įvesties duomenis jis priima:** 1. Tekstines užklausas (pagrindinis naudojimo atvejis). 2. Ekrano kopijas, vaizdus ir turimus išteklius. 3. Dokumentus: DOCX, PPTX, XLSX. 4. Kodų bazę – per saugyklos nuorodą arba importuojant vietinį aplanką. 5. Esamos svetainės kopiją, nurodžius URL. **Eksportavimo formatai:** 1. PDF. 2. PPTX („PowerPoint“). 3. Savarankiškas HTML failas – jį galite iškart įkelti kaip puslapį. 4. Perdavimas į „Canva“ – ten failas atidaromas kaip visiškai redaguojamas projektas. 5. „Claude Code“ paketas su visa dizaino logika, skirtas kūrimui. 6. Nuorodos bendrinimas organizacijoje. **Ko „Claude Design“ nedaro** (svarbu išsiaiškinti iš anksto): - Jis neredaguoja kodų bazės ir nevykdo komandų – tai „Claude Code“ darbas. - Jis neimportuoja ir neeksportuoja `.fig` failų – savosios „Figma“ integracijos nėra. - Jis nepakeičia „Figma“ ar „Canva“. - Nėra veiklos žurnalo ar administratoriaus ataskaitų, todėl įrankis netinka didelėms įmonėms, kurioms taikomi atitikties reikalavimai. - Nėra integruoto vaizdo įrašo eksporto – animaciją galima užfiksuoti tik kaip ekrano įrašą. ## Kuo „Claude Design“ skiriasi nuo „Figma“, „Lovable“, „v0“ ir „Canva“
Svarbiausia mintis „Claude Design“ geriausiai sekasi vienas dalykas: automatiškai iš kodų bazės išgauti komponentų rinkinį ir perduoti dizainą „Claude Code“, neprarandant jo logikos. Jis nusileidžia „Lovable“ ir „Bolt“ integruojant visą duomenų bazę bei serverį (nėra duomenų saugyklos, autorizacijos ar publikavimo vienu spustelėjimu). Jis nusileidžia „Figma“ galutinio apipavidalinimo srityje ir „Canva“ – paruoštais spaudos bei socialinių tinklų šablonais. Pagrindinis konkurencinis pranašumas – uždaras ciklas „dizainas viename lange, kodas kitame“ per „Claude Code“.
Čia aprašytoje darbo eigoje šie penki įrankiai naudojami skirtingoms užduotims. Štai palyginimas 2026 m. gegužės mėn.: | Įrankis | Ką daro | Pradinė kaina | Pranašumas | Trūkumas | |----|----|----|----|----| | **Claude Design** | Prototipai, skaidrės, nukreipimo puslapiai, rinkodara | \$20/mėn. („Pro“) | Dizaino sistema iš kodų bazės + integracija su „Claude Code“ + perdavimas į „Canva“ | Nėra visos duomenų bazės ir serverio integracijos, nėra `.fig`, nėra nemokamo plano | | **Lovable** | Visos programėlės su duomenų baze ir autorizacija | \$0 (5 kreditai per dieną) / \$25 „Pro“ | „Prototipas viena užklausa“ – duomenų bazė ir autorizacija veikia iškart | Silpnesni dizaino rezultatai | | **v0 („Vercel“)** | Paruošti „React“ ir frontend komponentai | \$0 / \$20 „Premium“ | „Figma“ importas, „React“ / „Tailwind“ kodas, kopijavimas į „Next.js“ | Nekuria pristatymų ar užbaigtų nukreipimo puslapių | | **Bolt.new** | Visos programėlės, greičiausi prototipai | \$0 (1M žetonų) / \$25 „Pro“ | Greičiausias kūrimas, publikavimas vienu spustelėjimu | Silpnesnė prekių ženklo raiška, tipografija ir apipavidalinimas | | **Figma** | Dizainas nuo tyrimų iki perdavimo programuotojui | \$0 (3 failai komandai) / \$16/vartotojui | Įrankių gausa, papildiniai, programuotojo režimas | Ne dizaineriams sudėtinga išmokti; DI galimybės neprilygsta „Claude Design“ | | **Canva** | Rinkodara, pristatymai, socialiniai tinklai | \$0 / \$15 „Pro“ | Didžiulė šablonų biblioteka, paruošta spaudos darbo eiga | Nekuria produkto sąsajos prototipų | **Kur „Claude Design“ lenkia visus:** 1. **Dizaino sistema iš kodų bazės.** Nė vienas konkurentas automatiškai neišgauna komponentų rinkinio iš saugyklos. „v0“ gali importuoti iš „Figma“, bet ne iš kodo. 2. **Uždaras ciklas su „Claude Code“.** Dizaino logika išsaugoma. „Lovable“ ir „Bolt“ tai atlieka viename įrankyje, tačiau juose dizainas tėra šalutinis kodo kūrimo rezultatas. 3. **Keli rezultatai iš vieno konteksto.** Vienas prekės ženklas – nukreipimo puslapis, pristatymas, el. pašto kampanija, socialinių tinklų turinys. Kiti įrankiai atlieka tik vieną iš šių užduočių. 4. **Nereikia mokytis naudotis sąsaja.** Nereikia mokytis dirbti su sąsaja, kaip „Figma“. Tai svarbu auditorijai „steigėjai ir produktų vadovai, neturintys dizaino pagrindų“ – taip „Anthropic“ oficialiai pristato produktą. **Kur „Claude Design“ nusileidžia:** 1. **Nėra visos duomenų bazės ir serverio integracijos.** „Lovable“ ir „Bolt“ pateikia veikiančią programėlę su duomenų baze, autorizacija ir publikavimu. „Claude Design“ pateikia tik frontend. Norint gauti tokį patį rezultatą, reikia: „Claude Design“ → „Claude Code“ → „Vercel“ arba kita priegloba → mokėjimo sistema rankiniu būdu. Trys įrankiai vietoj vieno. 2. **Nėra `.fig` failų.** Dizaineriai negali perkelti rezultato į „Figma“ – tik kaip ekrano kopiją arba atkuriant iš naujo. 3. **Nėra nemokamo plano.** Visi konkurentai turi nemokamą planą. „Claude Design“ prieinamas nuo „Pro“ plano. 4. **Apipavidalinimas.** Galutiniam paruošimui gamybai vis dar pirmauja „Figma“. „Claude Design“ skirtas pirmajam juodraščiui. 5. **Greitis kuriant paprastą prototipą.** „Bolt“ greičiau sukuria paprastą prototipą – jis per kelias sekundes paleidžiamas naršyklėje. „Claude Design“ skirtas kitai užduočiai: sukurti pirmąjį juodraštį be dizainerio, o tada perduoti jį kitam žmogui. ## Kiek kainuoja „Claude Design“ ir kaip patikrinti prieigą
Svarbiausia mintis Nemokamo plano nėra; prieiga prasideda nuo \$20/mėn. („Pro“). Pradinis kreditas, kurio užtenka maždaug 20 įprastų užklausų, galioja iki 2026 m. liepos 17 d. – jo pakanka išbandyti įrankį 2–3 projektuose.
Planai ir prieiga: | Planas | Prieiga | Apribojimai | |----|----|----| | Nemokamas | Ne | \- | | „Pro“ (\$20/mėn.) | Taip | Savaitiniai apribojimai kiekvienam naudotojui | | „Max“ | Taip | Didesni apribojimai | | „Team“ | Taip | Apribojimai kiekvienam naudotojui, ne bendrai visai komandai | | „Enterprise“ | Taip, bet pagal numatytuosius nustatymus išjungta | Administratorius įjungia per „Organization Settings“ → „Capabilities“ → „Anthropic Labs“ | Pradinis kreditas suteikiamas vieną kartą – tai 20 įprastų užklausų paketas, galiojantis iki 2026 m. liepos 17 d. Jo pakanka sukurti 2–3 visus projektus ir nuspręsti, ar „Claude Design“ jums tinka. Sąsajos mygtukai pateikiami tik anglų kalba. ## Kaip prijungti kodų bazės dizaino sistemą
Svarbiausia mintis Pagrindinė „Claude Design“ funkcija vibe koduotojams – įrankis pats iš esamo frontend kodo išgauna komponentų rinkinį. Spalvos, tipografija, komponentai, tarpų šablonai ir kampų spinduliai automatiškai taikomi kiekvienam naujam projektui. Tai veikia tuo pačiu principu kaip [Antrosios smegenys](https://ailoot.ai/blog/lt/claude-code-second-brain/) „Claude Code“ aplinkoje: kuo daugiau projekto konteksto prijungta, tuo mažiau haliucinacijų. Be prijungtos dizaino sistemos rezultatai bus „funkcionalūs, bet bendriniai“ (taip teigia „Anthropic“).
Pagrindinis „Claude Design“ konkurencinis pranašumas skirtas tiems, kurie jau yra ką nors sukūrę. Joks kitas įrankis automatiškai neišgauna dizaino sistemos iš saugyklos. Tai panašu į [Antrosios smegenų](https://ailoot.ai/blog/lt/claude-code-second-brain/) principą: nereikia aiškinti „Claude“ savo prekės ženklo – pateikiate pirminio šaltinio nuorodą ir jis pats išsiaiškina detales. **5 sąrankos žingsniai:** 1. **Atidarykite „Claude Design“ adresu `claude.ai/design`** ir sukurkite naują projektą. 2. **Pradinės sąrankos metu pasirinkite dizaino sistemos šaltinį.** Galima rinktis iš prekės ženklo gairių, frontend kodų bazės, senų pristatymų ir stiliaus vadovų, veikiančios svetainės pagal URL arba „Figma“ failų. 3. **Jei renkatės saugyklą,** pateikite „GitHub“ nuorodą. „Claude“ atsisiųs frontend aplanką ir išanalizuos temos nustatymus, stiliaus kintamuosius, esamus komponentus ir tipografiją. 4. **Jei renkatės veikiančią svetainę,** pateikite URL. „Claude“ užfiksuos puslapio struktūrą ir išgaus spalvas, šriftus bei mygtukų ir kortelių šablonus. 5. **Patvirtinkite išgautą komponentų rinkinį.** „Claude“ parodys išgautą spalvų paletę, šriftus ir pagrindinius komponentus, kuriuos galėsite redaguoti prieš išsaugodami. Po to kiekvienas naujas projektas „Claude Design“ automatiškai perima jūsų dizaino sistemą. Tai reiškia, kad šiandien sugeneruotas nukreipimo puslapis atrodys taip pat kaip dabartinė jūsų svetainė. **Užklausa dizaino sistemai patikrinti:** ``` Parodykite šio projekto aktyvią dizaino sistemą: spalvų paletę, tipografiją, pagrindinius komponentus, tarpų išdėstymo šablonus ir kampų spindulius. Palyginkite ją su mano veikiančia svetaine [URL] ir pažymėkite visus skirtumus. ``` Čia aprašytoje eigoje ši patikra kartojama kas 3–4 projekto iteracijas. Pranešime „Anthropic“ atvirai įspėja, kad po kelių iteracijų „Claude“ gali pamiršti dizaino sistemą ir grįžti prie numatytųjų šablonų. Sprendimas – periodiškai priminti jam apie jūsų komponentų rinkinį. Iš esmės tai ta pati [konteksto inžinerija](https://ailoot.ai/blog/lt/context-engineering/) kaip ir „Claude Code“ aplinkoje: kontekstas valdomas aiškiai, o ne tyliai. ## 1 scenarijus: nukreipimo puslapis produkto pristatymui
Svarbiausia mintis Nukreipimo puslapis – dažniausias scenarijus verslininkui, neturinčiam vidinio dizainerio. „Claude Design“ pateikia savarankišką HTML failą, kurį galite iškart įkelti kaip puslapį. Tipinei vieno puslapio svetainei sutaupoma 6–8 val. dizainerio darbo ir viena frontend kūrimo diena. Pirmasis juodraštis sukuriamas per 40–60 minučių, o pataisymams skiriama dar viena valanda. Toliau pateiktas išsamus užklausos šablonas, „Claude“ stiprybės ir tai, ką reikės redaguoti rankiniu būdu.
Pagal čia aprašytą patirtį, pirmasis naujo eksperimento „Claude Design“ rezultatas yra nukreipimo puslapis. Anksčiau reikėdavo dienos dizaineriui supažindinti su užduotimi, o paskui savaitės iteracijoms. Dabar pakanka vienos užklausos, valandos pataisymų ir turite užbaigtą HTML. **Užklausos šablonas:** ``` Sukurkite nukreipimo puslapį produktui [PRODUKTO PAVADINIMAS, vieno sakinio aprašymas]. Vaizdinė kryptis: [1 nuorodinis prekės ženklas] dera su [2 nuorodiniu prekės ženklu], tonas [būdvardis] ir [būdvardis]. Struktūra: pagrindinė sritis su vienu vertės pasiūlymu, trys naudos skyriai, išankstinės prieigos registracijos forma, 5 klausimų DUK, poraštė. Naudokite mano dizaino sistemą. ``` **Ką gausite:** savarankišką HTML failą su įterptais stiliais. Galite įkelti jį kaip puslapį savo svetainėje arba kaip atskirą projektą bet kurioje prieglobos platformoje. **Ką žmonės paprastai patikrina ir pataiso po „Claude“ darbo:** - Konkretų pagrindinės srities tekstą – „Claude“ gerai sudėlioja struktūrą, bet prasčiau supranta produkto reikšmę. - Vaizdus – „Claude“ įterpia laikinuosius variantus. Juos pakeičiu savais arba sugeneruoju atskiru įrankiu. - Rodiklius ir skaičius – visada naudoju tikrus. Niekada neišgalvoju „80 % mūsų klientų“. **Sutaupytas laikas:** tipiniam produkto pristatymo nukreipimo puslapiui sutaupoma 6–8 val. dizainerio darbo ir viena frontend kūrimo diena. „Claude Design“ pirmąjį juodraštį sukuria per 40–60 minučių, o iteracijoms skiriama dar viena valanda. ## 2 scenarijus: pristatymas investuotojams ar partneriams
Svarbiausia mintis 10 skaidrių pristatymas, sukurtas su „Claude Design“, užtrunka valandą, o ne dvi ar tris dienas. Eksportuokite jį į PPTX arba „Canva“, tada patobulinkite rankiniu būdu – tekstus, rodiklius ir detales. „Anthropic“ pranešime pabrėžia, kad tai, kam kituose įrankiuose prireiktų daugiau nei 20 užklausų, „Claude Design“ telpa į 2. Toliau pateiktas išsamus A serijos šablonas ir galimos problemos.
Pristatymas – antras pagrindinis scenarijus: medžiaga investuotojams, paraiška akseleratoriui arba pokalbiui su partneriu. **Užklausos šablonas:** ``` Sukurkite 10 skaidrių A serijos pristatymą bendrovei [Bendrovė], kuri kuria [ką] [kam] ir turi [pagrindinį rodiklį]. Auditorija: ankstyvojo etapo B2B SaaS investuotojai. Tonas: užtikrintas, šiltas, be perdėto entuziazmo. Skaidrės iš eilės: pavadinimas, problema, sprendimas, trauka (aiškiai išryškinkite rodiklį), produkto demonstracija, rinkos dydis, verslo modelis, konkurentai, komanda, prašymas. ``` **Ką gausite:** PPTX failą ir perkėlimą į „Canva“. Ten failas atidaromas kaip visiškai redaguojamas bendradarbiavimo projektas. **Laikas:** sutaupoma 6–10 val., palyginti su kūrimu rankiniu būdu. Daugiausia laiko sutaupoma tipografijos skaidrėse – didelės antraštės, nedaug vizualinio triukšmo, viskas pagal jūsų dizaino sistemą. **Problema:** „Claude Design“ generuoja statines skaidres. Jei reikia animacijos, perkelkite jas į „Canva“ ir animuokite ten arba naudokite „Figma“. ## 3 scenarijus: spustelėjamas mobiliosios programėlės prototipas
Svarbiausia mintis Prototipas nemoderuojamam naudotojų testavimui – anksčiau tam reikėjo dizainerio ir atskiro įrankio, pavyzdžiui, „ProtoPie“. „Claude Design“ pateikia nuorodą su spustelėjamais perėjimais tarp ekranų. „Anthropic“ pranešime cituojamas klientas taip apibūdina sutaupytą laiką: tai, kam anksčiau reikėdavo savaitės susitikimų, maketų ir peržiūrų, dabar atliekama per vieną pokalbį su „Claude“. Toliau pateiktas išsamus užklausos šablonas ir sąrašas, ką patikrinti rankiniu būdu.
Praktinis scenarijus: išbandyti mobiliosios programėlės hipotezę prieš samdant programuotoją.

Tai, kam anksčiau reikėdavo savaitės susitikimų, maketų ir peržiūrų ciklų, dabar atliekama per vieną pokalbį.

— Anthropic, https://www.anthropic.com/news/claude-design-anthropic-labs
**Užklausos šablonas:** ``` Sukurkite interaktyvų įvadinį [produkto] mobiliosios programėlės prototipą su trimis scenarijais: tuščia būsena, pirmasis naudotojo veiksmas ir akimirka, kai paaiškėja svarbi įžvalga. Padarykite elementus spustelėjamus, kad būtų galima atlikti nemoderuojamą naudotojų testą naudojant Maze arba Useberry. ``` **Ką gausite:** prototipo nuorodą. Galite iškart nusiųsti ją į „Maze“ ir išbandyti su 5–10 naudotojų. **Ką patikrinti:** - Ekrano matmenis – įsitikinkite, kad „Claude“ pasirinko tinkamą „iOS“ / „Android“ kraštinių santykį. - Scenarijaus išsamumą – kartais „Claude“ sudėtingas šakas sutraukia į vieną ekraną. Tai pataisys užklausa „kiekvieną šaką parodykite atskirame ekrane“. - Būsenas – tuščią, klaidos ir įkėlimo. Jei neprašysite, jų nesukurs. **Sutaupytas laikas:** 1–2 sprintai, palyginti su kūrimu rankiniu būdu naudojant „Figma“ ir „ProtoPie“. ## 4 scenarijus: rinkodaros kampanija su 5 vieno puslapio svetainėmis
Svarbiausia mintis „Claude Design“ gali parengti penkis firminius variantus vertės pasiūlymams palyginti. PDF ir „Canva“ rezultatai skirti dizainui peržiūrėti; veikiančių nukreipimo puslapių bandymui taip pat reikia paskelbto HTML, veikiančių CTA nuorodų ir formos bei atskiro kiekvieno varianto stebėjimo. Aprašytoje kampanijoje dizaino etape sutaupyta 4–6 valandos.
Scenarijus žmonėms, dirbantiems su mokama reklama: palyginti penkis vertės pasiūlymus naudojant tą pačią formą ir vienodą matavimo metodą. **Užklausos šablonas:** ``` Sugeneruokite 5 firminius vieno puslapio puslapius skirtingiems vertės pasiūlymams išbandyti: [1 variantas, 2 variantas, 3 variantas, 4 variantas, 5 variantas]. Kiekviename turi būti pagrindinė sritis su unikalia antrašte, vaizdu ir raginimo veikti mygtuku, vedančiu į [TĄ PATĮ TIKRĄ FORMOS URL]. Kiekvieną eksportuokite kaip atskirą HTML failą. Taip pat eksportuokite PDF peržiūras ir „Canva“ aplanką dizainui peržiūrėti. Visuose penkiuose puslapiuose išlaikykite tą pačią CTA paskirties vietą ir matavimo įvykius. ``` **Ką gausite:** penkis HTML puslapių projektus, penkias PDF peržiūras ir „Canva“ projekto aplanką. Peržiūros padeda patvirtinti dizainą; jos neįrodo, kad nukreipimo puslapiai ir konversijų stebėjimas veikia. **Prieš nukreipdami srautą:** 1. Kiekvieną HTML puslapį paskelbkite atskiru URL pasirinktoje priegloboje arba perduokite „Claude Code“, kad įgyvendintų jį jūsų svetainėje. 2. Pakeiskite vietaženklius ir patikrinkite kiekvieną CTA. Per bendrą formą pateikite nepavojingą bandomąjį įrašą ir patikrinkite, ar jis pasiekia numatytą vietą. 3. Kiekvienam puslapiui priskirkite atskirą kampanijos ar varianto žymą. Atskirai fiksuokite puslapio apsilankymus, CTA paspaudimus ir sėkmingus formos pateikimus, kad variantuose būtų lyginamas tas pats lankytojo veiksmas. 4. Atverkite paskelbtus URL kompiuteryje ir telefone, patikrinkite užfiksuotus bandomuosius įvykius ir tik tada pradėkite numatytą srauto eksperimentą. **Paskirtis:** mokama reklama, el. pašto kampanijos ir socialinių tinklų bandymai. Paspaudimų rodikliui lyginkite CTA paspaudimus vienam apsilankymui, o konversijai — sėkmingus formos pateikimus vienam apsilankymui. Vien PDF ar „Canva“ peržiūra yra dizaino peržiūra, o ne šis veikiančių puslapių bandymas. **Problema:** „Claude Design“ automatiškai parenka vaizdus iš turimų išteklių. Jei reikia konkrečių nuotraukų, iš anksto įkelkite jas. ## 5 scenarijus: el. pašto kampanija su „Resend“, „Mailchimp“ arba „Sendsay“
Svarbiausia mintis HTML el. laiško šablonas – įprasta techninė užduotis, kuriai „Claude Design“ labiausiai praverčia dėl greičio. Tai savarankiškas HTML failas su įterptais stiliais ir be išorinių priklausomybių, paruoštas naudoti bet kurioje el. pašto programoje. Šablono struktūra įprasta: paantraštė, antraštė, pastraipos, raginimo veikti mygtukas, parašas. Jį galima įklijuoti į „Resend“, „Mailchimp“, „Sendsay“ arba „Unisender“. Toliau aptariama, ką paprastai reikia redaguoti rankiniu būdu.
Kiekvienai masinei el. pašto kampanijai reikia HTML šablono su įterptais stiliais. Rinkodaros specialistui, neturinčiam frontend programuotojo, tai kelia techninių rūpesčių. **Užklausos šablonas:** ``` Sukurkite HTML el. laiško šabloną kampanijos tema [kampanijos tema]. Dizainas: tamsi tema, jūsų prekės ženklo pagrindinė akcentinė spalva, prekės ženklo šriftai. Struktūra: paantraštė, antraštė, 3 pastraipos, raginimo veikti mygtukas, parašas. Eksportuokite kaip savarankišką HTML failą su įterptais stiliais ir be išorinių priklausomybių. ``` **Ką gausite:** HTML failą, paruoštą įklijuoti į „Resend“, „Mailchimp“, „Sendsay“ arba „Unisender“. **Ką žmonės paprastai patikrina ir pataiso:** - Plotį – el. pašto programos pirmenybę teikia fiksuotam 600 px pločiui. - Vaizdus – nuorodas pakeičiu į savo internete laikomų išteklių nuorodas. - Tekstinę versiją – „Claude Design“ jos nesugeneruoja, todėl parašau ją pats. **Sutaupytas laikas:** 2–3 val. maketavimo vienam šablonui. ## Perdavimo „Claude Code“ procesas: uždaras ciklas
Svarbiausia mintis Pagrindinė išskirtinė „Claude Design“ funkcija žmonėms, kurie rašo kodą naudodami „Claude Code“. Dizainas eksportuojamas kaip paketas, kuriame išsaugota jo logika: komponentai, šablonai, dizaino sprendimų motyvai ir pritaikomumo inkarai. „Claude Code“ pritaiko jį kodui, neprarasdamas prasmės. „Lovable“, „v0“ ir „Bolt“ tokio uždaro ciklo neturi – juose dizainas tėra šalutinis kodo kūrimo rezultatas. Toliau aptariama, kas įeina į paketą, kaip atrodo darbo eiga ir kokie konkurentų apribojimai.
Pagal čia aprašytą darbo eigą, ši funkcija pateisina „Claude Design“ pasirinkimą net ir turint „Figma“. Visi kiti dizaino įrankiai perduoda vaizdą arba „Figma“ failą. Tada programuotojas į jį žiūri ir atkuria „kaip supranta“. Taip prarandama 30–40 % dizaino logikos. „Claude Design“ pateikia paketą, kuriame yra ne tik vaizdinė medžiaga, bet ir: - Komponentų struktūra (kaip jie logiškai susiję). - Dizaino sprendimų motyvai (kodėl parinkti tokie tarpai ir kampų spinduliai, kodėl tokia hierarchija). - Pritaikomumo inkarai – vietos, prie kurių elementas „prikimba“ skirtingo dydžio ekranuose. - Pavadintos stiliaus reikšmės vietoj magiškų skaičių. „Claude Code“ tiesiogiai atidaro šį paketą ir rašo kodą, išsaugantį dizaino logiką. Jis ne tik atkuria vaizdą išdėstyme, bet ir įgyvendina dizaino principus. Tai dera su [jūsų projekto `CLAUDE.md`](https://ailoot.ai/blog/lt/claude-md-template/): kuo tikslesnės taisyklės faile `CLAUDE.md`, tuo mažiau „Claude Code“ nukrypsta nuo pradinės logikos. **Darbo eiga:** 1. **„Claude Design“ aplinkoje** – užbaikite dizainą → spustelėkite „Eksportuoti į „Claude Code““. 2. **„Claude Code“ aplinkoje** – atidarykite projektą → įklijuokite paketo ID → užklausa: „Įgyvendinkite šį dizainą aplanke `src/components/`.“ 3. **„Claude Code“** perskaito paketą, supranta šablonus ir parašo komponentus naudodamas esamą steką („Next.js“ + „Tailwind“, „Vue“, „Svelte“ ar kitą). 4. **Tada** atlikite pakeitimus kode naudodami „Claude Code“ arba „Claude Design“ aplinkoje (sukurdami naują dizaino iteraciją) ir vėl perduokite jį toliau. **Svarbu:** esmė ne ta, kad „DI rašo frontend“. Esmė ta, kad „dizainas ir kodas tampa vienu dokumentu“. Kai „Claude Design“ pakeičiu tarpą tarp skyrių, kitoje iteracijoje „Claude Code“ supras, kad tai naujas šablonas, o ne vienkartinis pataisymas. **Kur konkurentams trūksta šios funkcijos:** - **„Lovable“ / „Bolt“** – dizainas tėra šalutinis kodo kūrimo rezultatas. Norint pakeisti dizaino sistemą, reikia perrašyti visą užklausą. - **„v0“** – pateikia „React“ komponentus, bet ne paketą su dizaino logika. Tada dirbama su kodu, ne dizainu. - **„Figma“ + „Cursor“** – yra papildinių, tačiau jie perduoda tik vaizdinę medžiagą, o ne sprendimų motyvus. Išskirtinė integracija, įtraukianti „Claude Design“ į „Anthropic“ strategiją „agentas ir drobė“. ## Kas neveikia: architektūriniai trūkumai
Svarbiausia mintis „Claude Design“ yra peržiūros versija, o ne paruoštas gamybai produktas. Architektūriniai apribojimai: nėra veiklos žurnalo, duomenų saugojimo reikalavimų ar integruoto vaizdo įrašo eksporto. Elgsenos ypatybė: po kelių iteracijų „Claude“ pamiršta dizaino sistemą. Toliau aprašyti visų šių problemų sprendimo būdai.
„Anthropic“ neslepia: tai peržiūros versija. Kai kurios funkcijos vis dar neveikia. **Architektūriniai trūkumai:** - Nėra veiklos žurnalo – tai problema didelėms įmonėms, kurioms taikomi atitikties reikalavimai. - Nėra duomenų saugojimo reikalavimų – įrankio negalima naudoti su reguliuojamais duomenimis. - Eksperimentinis dizainas (balsas, vaizdo įrašas, 3D) pažymėtas kaip eksperimentinė funkcija ir gali neveikti. - Nėra integruoto vaizdo įrašo eksporto – animaciją galima užfiksuoti tik kaip ekrano įrašą. **„Claude“ elgsenos ypatybės** (būdingos visiems įrankiams, ne vien „Design“): - Po kelių iteracijų jis pamiršta reikalavimus ir grįžta prie numatytųjų šablonų. - Jam gerai sekasi aiškiai struktūruotos užduotys (šablono kartojimas), prasčiau – atviros užduotys (naujos krypties paieška). - Jis gali „laikytis“ savo įpročių, užuot vykdęs nurodytus tikslus. Sprendimas – kas 3–4 iteracijas priminimo užklausa grąžinti jį prie dizaino sistemos. Tai nėra kliūtis, bet reikia įprasti. ## Kada rinktis „Figma“, „Lovable“ ar „Canva“
Svarbiausia mintis „Claude Design“ nėra universalus įrankis. Galutiniam apipavidalinimui ir papildiniams naudokite „Figma“. Jei viena užklausa norite gauti veikiantį produktą su duomenų baze ir autorizacija, rinkitės „Lovable“ arba „Bolt“. Šablonais pagrįstai rinkodaros medžiagai ir spaudiniams naudokite „Canva“. Jei naudojate „Next.js“ / „Vercel“ ekosistemą ir reikia paruoštų „React“ komponentų, rinkitės „v0“. Čia aprašytas įprastas procesas: „Claude Design“ sukuria pirmąjį juodraštį, „Claude Code“ paverčia jį kodu, o galutinai apipavidalinate patogiausioje vietoje.
Čia aprašytoje darbo eigoje šie penki įrankiai naudojami skirtingoms užduotims. Štai sąžiningas paaiškinimas, kada kurį rinktis: **Rinkitės „Claude Design“, jei:** - Esate steigėjas, produktų vadovas arba rinkodaros specialistas, neturintis dizaino pagrindų. - Pirmojo pristatymo, nukreipimo puslapio ar maketo juodraščio reikia per valandą, o ne per dieną. - Jau turite kodų bazę arba prekės ženklo gaires, kurias gali naudoti „Claude“. - Planuojate perduoti rezultatą dizaineriui ar programuotojui, kad šis jį patobulintų. - Rašote kodą su „Claude Code“ ir norite uždaro „dizainas → kūrimas“ ciklo. **Rinkitės „Figma“, jei:** - Esate dizaineris ir atliekate galutinį apipavidalinimą. - Norite dirbti komandoje ir daugiausia dėmesio skiriate perdavimui programuotojui. - Reikia papildinių, programuotojo režimo arba rimtos versijų kontrolės. - Reikia galutinio, gamybai paruošto dizaino. **Rinkitės „Lovable“ arba „Bolt“, jei:** - Viena užklausa norite gauti veikiantį produktą su duomenų baze, autorizacija ir publikavimu. - Norite iškeisti dizaino kokybę į greitį. - Jums svarbus nemokamas planas. **Rinkitės „Canva“, jei:** - Reikia rinkodaros medžiagos iš paruoštų šablonų. - Dizaino užduotis – surinkti elementus iš bibliotekos, o ne kurti naują dizainą. - Norite spaudą, socialinius tinklus ir vaizdo įrašus viename produkte. **Rinkitės „v0“, jei:** - Kuriate frontend ir reikia paruoštų komponentų, kuriuos galima kopijuoti ir įklijuoti. - Jau naudojate „Next.js“ / „Vercel“ ekosistemą. - Norite tiesiogiai importuoti iš „Figma“. Čia aprašyta įprasta darbo eiga: „Claude Design“ sukuria pirmąjį nukreipimo puslapio juodraštį → „Claude Code“ perkelia jį į `src/app/` → pataisymai kode → jei reikia tipografijos patobulinimų, pereinu į „Figma“ → jei socialiniams tinklams reikia animacijos, pereinu į „Canva“. „Claude Design“ nepretenduoja aprėpti visko. Jis siekia būti pirmuoju žingsniu, po kurio aišku, ką daryti toliau.
### Šaltiniai - [„Anthropic“ – pristato „Claude Design“ iš „Anthropic Labs“](https://www.anthropic.com/news/claude-design-anthropic-labs) - [„Lovable“ kainodara](https://lovable.dev/pricing) - [„v0 by Vercel“ kainodara](https://v0.app/pricing) - [„Bolt“ planai ir kainodara](https://bolt.new/pricing) - [„Figma“ planai ir kainodara](https://www.figma.com/pricing/)
[Atidarykite Ailoot](https://ailoot.ai/). ## Klausimai ir atsakymai ### Ar nukreipimo puslapio konversijas galima matuoti vien pagal PDF eksportą? Ne. Paskelbkite HTML puslapius, prijunkite kiekvieną CTA prie tikros formos ir patikrinkite bandomąjį pateikimą bei stebėjimo įvykius. Kiekvienam variantui suteikite atskirą žymą, kad galėtumėte lyginti apsilankymus, CTA paspaudimus ir sėkmingus pateikimus. ### Ką patikrinti prieš perduodant dizainą Claude Code? Patvirtinkite taikomą dizaino sistemą, pakeiskite vaizdų vietaženklius ir išgalvotus rodiklius bei patikrinkite reikalingas sąveikos būsenas. Tada eksportuokite dizaino paketą, įgyvendinkite jį esamame projekte ir dar kartą peržiūrėkite sukurtą sąsają. ## Ailoot · Įmonė ir jos projektų portfelis Ailoot remiasi sukaupta veiklos patirtimi, plačia klientų baze, stabiliomis paslaugomis ir nuolatine KPI kontrole. Įmonė ir jos projektų portfelis: milijonai klientų; mėnesio pardavimai siekia milijardus. Ailoot šią veiklos patirtį pritaiko teikdama API prieigą prie DI funkcijų klientų produktuose, agentuose, programose ir automatizavimo sprendimuose.