# Claude Design: vodnik in pet praktičnih scenarijev
> Funkcije, cene, sistem oblikovanja, ciljne strani, predstavitve, prototipi in e-poštna sporočila HTML. Izvoz, omejitve in predaja rezultata Claude Code.
Source: https://ailoot.ai/blog/sl/claude-design-guide/
Canonical: https://ailoot.ai/blog/sl/claude-design-guide/
Language: sl
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-058
Revision: sha256-8ffd4c098789ff33b1fb4ce9e6cdfb5e0c4fdbddcace9e583743723e0322f6bb
[Praktične informacije o uporabi Ailoota so na voljo v dokumentaciji](https://ailoot.ai/docs/).
## Kaj je Claude Design in zakaj vsi gledajo na 17. april?
Ključne ugotovitve
Claude Design je Anthropicovo orodje, ki iz besedilnega poziva sestavi klikljive prototipe, ciljne strani, predstavitve in trženjska gradiva. Predstavljeno je bilo 17. aprila 2026, poganja pa ga Claude Opus 4.7. To je Anthropicov prvi izdelek, zasnovan po paradigmi »agent plus platno«: klepet na levi, živo platno na desni.
Petek, 17. april 2026. Anthropic predstavlja [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) — orodje, ki besedilni opis spremeni v delujočo ciljno stran, predstavitev za vlagatelje ali prototip mobilne aplikacije. Ne gre za »še en generator slik«. To je Anthropicov prvi poskus, da bi oblikovalca odstranil iz zgodnjih faz razvoja izdelka.
Štiriindvajset ur pozneje je Adobe napovedal povezovalnik Firefly-Claude in se predstavil kot platformni partner. Sporočilo je jasno: Anthropic ni zmagal v bitki za izdelek, temveč je prinesel spremembo paradigme — oblikovanje se zdaj ustvarja, uveljavljena podjetja pa postajajo distributerji.
Claude Design si oglejmo z vidika vibe coderja: kaj zmore, koliko stane, kako ga uporabljati brez oblikovalskega znanja in za katere praktične naloge je uporaben. Če gradite izdelek brez internega oblikovalca, je ta vodnik za vas.
## Kaj zmore Claude Design: 6 vrst rezultatov
Ključne ugotovitve
Anthropic opisuje 6 značilnih vrst rezultatov Claude Design: realistične prototipe, makete, alternativne smeri, predstavitve, trženjska gradiva in eksperimentalne zasnove z vgrajeno UI. Sprejema besedilo, posnetke zaslona, dokumente DOCX/PPTX/XLSX, kodne baze in povezave do spletnih mest. Izvaža v PDF, PPTX, samostojen HTML, Canvo kot urejljiv projekt ter Claude Code kot paket z namenom oblikovanja.
Na kratko: Claude Design ustvari zasnove, za katere bi oblikovalec prej porabil 3–5 dni. Po Anthropicovih besedah obstaja šest vrst rezultatov:
| Vrsta | Kaj je to | Kdaj jo uporabiti |
|----|----|----|
| Realistični prototipi | Klikljive makete za uporabniško testiranje | Preizkusite hipotezo, preden plačate razvijalca |
| Žični modeli in makete | Specifikacije za predajo v razvoj | Ko morate razvijalcu predati specifikacijo |
| Alternativne smeri | Več konceptov hkrati | Ko izbirate med 3–4 smermi |
| Predstavitve | Diapozitivi, ki jih je mogoče izvoziti v PPTX ali Canvo | Predstavitev vlagateljem, prijava v pospeševalnik |
| Trženjska gradiva | Ciljne strani, pasice, objave | Začetek plačljivega oglaševanja, e-poštne kampanje |
| Eksperimentalno oblikovanje | Prototipi z glasom, videom, 3D in vgrajeno UI | Označeno kot eksperimentalno; lahko ne deluje |
Vmesnik ima dva podokna. Klepet s Claudom je na levi, predogled na živem platnu pa na desni. Postopek poteka v petih korakih: nastavitev projekta, opis, pregled, iteracije in izvoz. Če je poziv nejasen, Claude zastavi dodatna vprašanja, zato je postopek bolj podoben sodelovanju z osebo kot uporabi generatorja.
**Kaj lahko uporabite kot vhod:**
1. Besedilne pozive (glavni način uporabe).
2. Posnetke zaslona, slike in obstoječa sredstva.
3. Dokumente: DOCX, PPTX, XLSX.
4. Kodno bazo — prek povezave do repozitorija ali z uvozom lokalne mape.
5. Posnetek obstoječega spletnega mesta prek URL-ja.
**Oblike izvoza:**
1. PDF.
2. PPTX (PowerPoint).
3. Samostojna datoteka HTML — takoj jo lahko naložite kot stran.
4. Prenos v Canvo — tam se odpre kot povsem urejljiv projekt.
5. Paket za Claude Code — z vsemi nameni oblikovanja za razvoj.
6. Deljenje povezave znotraj organizacije.
**Česa Claude Design ne počne** (to je dobro razjasniti že na začetku):
- Ne ureja kodne baze in ne izvaja ukazov — to je naloga Claude Code.
- Ne uvaža ali izvaža datotek `.fig` — izvorne integracije s Figmo ni.
- Ne nadomešča Figme ali Canve.
- Nima dnevnika dejavnosti ali poročil za skrbnike, zato ni primeren za velika podjetja z zahtevami glede skladnosti.
- Nima vgrajenega izvoza videa — animacije lahko posnamete le kot posnetek zaslona.
## Kako se Claude Design razlikuje od orodij Figma, Lovable, v0 in Canva
Ključne ugotovitve
Claude Design je najboljši pri eni stvari: samodejno izlušči nabor komponent iz kodne baze in preda zasnovo Claude Code, ne da bi se pri tem izgubil namen. Pri celoviti integraciji z bazo podatkov in strežnikom je slabši od Lovable in Bolta (ni shranjevanja podatkov, avtorizacije ali objave z enim klikom). Pri končnem izpiljevanju je slabši od Figme. Pri že pripravljenih predlogah za tisk in družbena omrežja je slabši od Canve. Njegova glavna konkurenčna prednost je zaprta zanka »oblikovanje v enem oknu, koda v naslednjem« prek Claude Code.
V tukaj opisanem pristopu se teh pet orodij uporablja za različne naloge. Primerjava za maj 2026:
| Orodje | Kaj počne | Začetna cena | Prednost | Slabost |
|----|----|----|----|----|
| **Claude Design** | Prototipi, diapozitivi, ciljne strani, trženje | \$20/mesec (Pro) | Sistem oblikovanja iz kodne baze + integracija s Claude Code + prenos v Canvo | Brez celovite integracije z bazo podatkov in strežnikom, brez `.fig`, brez brezplačnega paketa |
| **Lovable** | Celovite aplikacije z bazo podatkov in avtorizacijo | \$0 (5 kreditov na dan) / \$25 Pro | »Prototip z enim pozivom« — baza podatkov in avtorizacija delujeta takoj | Slabši rezultati oblikovanja |
| **v0 (Vercel)** | Pripravljene komponente za React in frontend | \$0 / \$20 Premium | Uvoz iz Figme, koda React/Tailwind, kopiranje in lepljenje v Next.js | Ne ustvarja predstavitev ali dokončanih ciljnih strani |
| **Bolt.new** | Celovite aplikacije, najhitrejši prototipi | \$0 (1M žetonov) / \$25 Pro | Najhitrejša izdelava, objava z enim klikom | Slabša blagovna znamka, tipografija in dodelanost |
| **Figma** | Oblikovanje od raziskave do predaje razvijalcem | \$0 (3 datoteke na ekipo) / \$16/seat | Širok nabor orodij, vtičniki, način za razvijalce | Visok prag učenja za neoblikovalce; brez UI na ravni Claude Design |
| **Canva** | Trženje, predstavitve, družbena omrežja | \$0 / \$15 Pro | Ogromna knjižnica predlog, pripravljen potek dela za tisk | Ne ustvarja prototipov uporabniškega vmesnika izdelka |
**Kje Claude Design prekaša vse druge:**
1. **Sistem oblikovanja iz kodne baze.** Noben konkurent samodejno ne izlušči nabora komponent iz repozitorija. v0 lahko uvozi iz Figme, ne pa iz kode.
2. **Zaprta zanka s Claude Code.** Namen oblikovanja se ohrani. Lovable in Bolt to omogočata v enem orodju, vendar je tam oblikovanje stranski produkt kode.
3. **Več rezultatov iz istega konteksta.** Ena blagovna znamka — ciljna stran, predstavitev, e-poštna kampanja, ustvarjalni material za družbena omrežja. Drugi zmorejo le eno od teh stvari.
4. **Vmesnika se ni treba učiti.** Vmesnika se vam ni treba učiti tako kot pri Figmi. To je pomembno za občinstvo »ustanoviteljev in produktnih vodij brez oblikovalskega znanja« — tako Anthropic uradno opredeljuje svoj položaj.
**Kje Claude Design zaostaja:**
1. **Brez celovite integracije z bazo podatkov in strežnikom.** Lovable in Bolt ponujata delujočo aplikacijo z bazo podatkov, avtorizacijo in objavo. Claude Design ponuja le frontend. Za enak rezultat: Claude Design → Claude Code → Vercel ali drugo gostovanje → ročna nastavitev plačilnega sistema. Tri orodja namesto enega.
2. **Brez datotek `.fig`.** Oblikovalci rezultata ne morejo prenesti v Figmo — uporabijo lahko le posnetek zaslona ali vse znova izdelajo.
3. **Brez brezplačnega paketa.** Vsi konkurenti imajo brezplačen paket. Claude Design je na voljo pri Pro in višjih paketih.
4. **Dodelanost.** Figma še vedno prevladuje pri končni pripravi za produkcijo. Claude Design je namenjen prvemu osnutku.
5. **Hitrost izdelave golega prototipa.** Bolt je hitrejši za čisto osnovni prototip — v brskalniku se zažene v nekaj sekundah.
Claude Design je orodje za drugo nalogo: izdelavo prvega osnutka brez oblikovalca, ki ga nato prevzame nekdo drug.
## Koliko stane Claude Design in kako preveriti dostop
Ključne ugotovitve
Brezplačnega paketa ni; dostop se začne pri \$20/mesec (Pro). Začetna kvota za približno 20 običajnih pozivov je na voljo do 17. julija 2026 — dovolj, da orodje preizkusite na 2–3 projektih.
Paketi in dostop:
| Paket | Dostop | Omejitve |
|----|----|----|
| Brezplačni | Ne | \- |
| Pro (\$20/mesec) | Da | Tedenske omejitve na uporabnika |
| Max | Da | Razširjene omejitve |
| Team | Da | Omejitve na uporabnika, ne skupna kvota |
| Enterprise | Da, vendar je privzeto onemogočen | Skrbnik ga omogoči v nastavitvah Organization Settings → Capabilities → Anthropic Labs |
Začetno kvoto prejmete enkrat — paket 20 običajnih pozivov velja do 17. julija 2026. Dovolj je za izdelavo 2–3 celotnih projektov in odločitev, ali je Claude Design pravi za vas.
Gumbi vmesnika so na voljo samo v angleščini.
## Kako povezati sistem oblikovanja iz svoje kodne baze
Ključne ugotovitve
Glavna funkcija Claude Design za vibe coderje je, da orodje samo izlušči nabor komponent iz obstoječe frontend kode. Barve, tipografija, komponente, vzorci razmikov in polmeri zaobljenih vogalov se samodejno uporabijo pri vsakem novem projektu. Deluje po istem načelu kot [Second Brain](https://ailoot.ai/blog/sl/claude-code-second-brain/) v Claude Code: več kot je povezanega konteksta projekta, manj je halucinacij. Brez povezanega sistema oblikovanja bodo rezultati »delujoči, a generični« (Anthropicove besede).
Glavna konkurenčna prednost Claude Design je namenjena ljudem, ki so že nekaj izdelali. Nobeno drugo orodje samodejno ne izlušči sistema oblikovanja iz repozitorija. Podobno je pristopu [Second Brain](https://ailoot.ai/blog/sl/claude-code-second-brain/): Claudu vam ni treba razlagati svoje blagovne znamke — posredujete mu povezavo do vira, on pa stvari ugotovi sam.
**5 korakov nastavitve:**
1. **Odprite Claude Design na naslovu `claude.ai/design`** in ustvarite nov projekt.
2. **Med začetno nastavitvijo izberite vir sistema oblikovanja.** Na voljo so: smernice blagovne znamke, frontend kodna baza, stare predstavitve in slogovni priročniki, delujoče spletno mesto prek URL-ja, datoteke Figma.
3. **Če izberete repozitorij** — posredujte povezavo GitHub. Claude bo prenesel mapo s frontend kodo in analiziral nastavitve teme, slogovne spremenljivke, obstoječe komponente in tipografijo.
4. **Če izberete delujoče spletno mesto** — posredujte URL. Claude bo zajel strukturo strani in izluščil barve, pisave ter vzorce gumbov in kartic.
5. **Potrdite izluščeni nabor komponent.** Claude bo prikazal izluščeno barvno paleto, pisave in osnovne komponente, ki jih lahko uredite pred shranjevanjem.
Nato bo vsak nov projekt v Claude Design samodejno podedoval vaš sistem oblikovanja. To pomeni, da bo ciljna stran, ki jo ustvarite danes, videti enako kot vaše trenutno spletno mesto.
**Poziv za ponovno preverjanje sistema oblikovanja:**
```
Show my active design system in this project: color palette, typography,
basic components, spacing patterns, and corner radii. Compare it with my live
website [URL] and flag anything that differs.
```
V opisanem postopku se to preverjanje ponovi na vsake 3–4 iteracije v projektu. Anthropic v objavi odkrito opozarja, da lahko Claude po več iteracijah pozabi sistem oblikovanja in se vrne k privzetim vzorcem. Rešitev je, da ga občasno s pozivom spomnite na svoj nabor komponent. V bistvu gre za enako [inženirstvo konteksta](https://ailoot.ai/blog/sl/context-engineering/) kot v Claude Code: kontekst se upravlja izrecno, ne potihem.
## Scenarij 1: ciljna stran za predstavitev izdelka
Ključne ugotovitve
Ciljna stran je najpogostejši scenarij za podjetnika brez internega oblikovalca. Claude Design ustvari samostojno datoteko HTML, ki jo lahko takoj naložite kot stran. Prihranek časa: 6–8 ur dela oblikovalca in en dan razvoja frontenda za običajno enostransko spletno mesto. Prvi osnutek je pripravljen v 40–60 minutah, nato sledi ura popravkov. Spodaj so podrobna predloga poziva, stvari, ki jih Claude opravi dobro, in tiste, ki jih je treba urediti ročno.
Po tukaj opisanih izkušnjah je prvi rezultat novega poskusa v Claude Design ciljna stran. Prej je sledil dan usklajevanja z oblikovalcem, nato teden iteracij. Zdaj zadostujejo en poziv, ura popravkov in dokončana koda HTML.
**Predloga poziva:**
```
Create a landing page for [PRODUCT NAME, one-sentence description].
Visual direction: [reference brand 1] meets [reference brand 2],
with a [adjective] and [adjective] tone. Structure: hero with one
value proposition, three benefit sections, an early-access signup form,
a 5-question FAQ, footer. Use my design system.
```
**Kaj boste dobili:** samostojno datoteko HTML z vdelanimi slogi. Naložite jo lahko kot stran na svoje spletno mesto ali kot ločen projekt na katerem koli gostovanju.
**Kaj ljudje običajno preverijo in popravijo po Claudovem predlogu:**
- Konkretno besedilo v uvodnem delu — Claude je dober pri strukturi, ne pa pri razumevanju pomena izdelka.
- Slike — Claude vstavi nadomestne slike. Zamenjam jih s svojimi ali jih ustvarim z drugim orodjem.
- Metrike in številke — vedno uporabim prave. Nikoli si ne izmislim »80 % naših strank«.
**Prihranek časa:** 6–8 ur dela oblikovalca in en dan razvoja frontenda pri običajni ciljni strani za predstavitev. Claude Design pripravi prvi osnutek v 40–60 minutah, nato sledi ura iteracij.
## Scenarij 2: predstavitev za vlagatelje ali partnerje
Ključne ugotovitve
Desetdiapozitivna predstavitev, izdelana s Claude Design, vzame eno uro namesto dveh ali treh dni. Izvozite jo v PPTX ali Canvo, nato pa ročno izpilite besedilo, metrike in podrobnosti. Anthropic v objavi poudarja, da je tisto, za kar je bilo v drugih orodjih potrebnih 20+ pozivov, v Claude Design mogoče opraviti z dvema. Spodaj sta podrobna predloga za serijo A in seznam pasti.
Predstavitev je drugi glavni scenarij: gradiva za vlagatelje, prijava v pospeševalnik ali pogovor s partnerjem.
**Predloga poziva:**
```
Create a 10-slide Series A presentation for [Company],
which builds [what] for [whom] and has [key metric]. Audience:
early B2B SaaS investors. Tone: confident, warm, no hype. Slides
in this order: title, problem, solution, traction (highlight the metric prominently),
product demo, market size, business model, competitors, team, ask.
```
**Kaj boste dobili:** datoteko PPTX in prenos v Canvo. V Canvi se datoteka odpre kot povsem urejljiv sodelovalni projekt.
**Čas:** prihranite 6–10 ur v primerjavi z ročno izdelavo. Največ časa prihranite pri diapozitivih, osredotočenih na tipografijo — veliki naslovi, malo vizualnega nereda, vse pa sledi vašemu sistemu oblikovanja.
**Past:** Claude Design ustvarja statične diapozitive. Če potrebujete animacije, jih prenesite v Canvo in jih animirajte tam ali pa uporabite Figmo.
## Scenarij 3: klikljiv prototip mobilne aplikacije
Ključne ugotovitve
Prototip za nenadzorovan uporabniški preizkus — prej ste potrebovali oblikovalca in ločeno orodje, kot je ProtoPie. Claude Design zagotovi povezavo s klikljivimi prehodi med zasloni. Anthropicova objava navaja stranko, ki takole opiše prihranek časa: kar je prej zahtevalo teden usklajevanj, maket in pregledov, se zdaj zgodi v enem pogovoru s Claudom. Spodaj so podrobna predloga poziva in seznam stvari, ki jih je treba preveriti ročno.
Praktični scenarij: preizkusite hipotezo o mobilni aplikaciji, preden plačate razvijalca.
Kar je prej zahtevalo teden usklajevanj, maket in krogov pregledov, se zdaj zgodi v enem pogovoru.
— Anthropic, https://www.anthropic.com/news/claude-design-anthropic-labs
**Predloga poziva:**
```
Build an interactive onboarding prototype for the [product] mobile app
with three scenarios: empty state, the user's first action, and the moment
of insight. Make the elements clickable for an unmoderated user test
through Maze or Useberry.
```
**Kaj boste dobili:** povezavo do prototipa. Pošljete ga lahko neposredno v Maze za preizkus s 5–10 uporabniki.
**Kaj preveriti:**
- Mere zaslonov — preverite, ali je Claude uporabil pravilno razmerje stranic za iOS/Android.
- Globino scenarija — Claude včasih združi zapletene veje na en zaslon. Pomaga poziv »vsako vejo prikaži kot ločen zaslon«.
- Stanja — prazno, napaka, nalaganje. Ustvari jih le, če ga za to prosite.
**Prihranek časa:** 1–2 sprinta v primerjavi z ročno izdelavo v Figmi + ProtoPie.
## Scenarij 4: trženjska kampanja s 5 enostranskimi spletnimi mesti
Ključne ugotovitve
Claude Design lahko pripravi pet različic z vašo blagovno znamko za preizkus vrednostne ponudbe. Izvoza PDF in Canva sta gradivo za pregled; za preizkus dejanskih pristajalnih strani potrebujete še objavljeni HTML, delujoče povezave CTA in obrazec ter ločeno merjenje vsake različice. V opisani kampanji je bil prihranek pri oblikovanju 4–6 ur.
Scenarij za ljudi, ki se ukvarjajo s plačljivim oglaševanjem: primerjajte pet vrednostnih ponudb z istim obrazcem in enotnim načinom merjenja.
**Predloga poziva:**
```
Ustvari 5 enostranskih spletnih mest z našo blagovno znamko za preizkus različnih vrednostnih ponudb:
[možnost 1, možnost 2, možnost 3, možnost 4, možnost 5].
Vsako potrebuje uvodni razdelek z edinstvenim naslovom, sliko in gumbom CTA,
ki vodi na [ISTI PRAVI URL OBRAZCA]. Vsako izvozi kot samostojen HTML.
Za pregled oblikovanja izvozi tudi predoglede PDF in mapo Canva.
Cilj gumbov CTA in merilni dogodki naj bodo enaki na vseh petih straneh.
```
**Kaj boste dobili:** pet osnutkov strani HTML, pet predogledov PDF in mapo projekta Canva. Predogledi pomagajo potrditi oblikovanje; ne potrjujejo delujočih pristajalnih strani ali merjenja konverzij.
**Pred usmerjanjem prometa:**
1. Vsako stran HTML objavite na svojem URL-ju pri izbranem ponudniku gostovanja ali jo predajte Claude Code za vgradnjo v svoje spletno mesto.
2. Zamenjajte nadomestna besedila in preverite vsak CTA. Skozi skupni obrazec oddajte neškodljiv poskusni vnos in preverite, ali prispe na pravi cilj.
3. Vsaki strani določite posebno oznako kampanje ali različice. Ločeno beležite obiske strani, klike CTA in uspešne oddaje obrazca, da med različicami primerjate isto dejanje obiskovalca.
4. Objavljene URL-je odprite na računalniku in telefonu, preverite zabeležene poskusne dogodke in šele nato zaženite načrtovani preizkus prometa.
**Uporaba:** plačljivo oglaševanje, e-poštne kampanje in preizkusi za družbena omrežja. Za stopnjo klikov primerjajte klike CTA na obisk strani, za konverzijo pa uspešne oddaje na obisk. Sam pregled v PDF ali Canvi je pregled oblikovanja, ne tak preizkus v živo.
**Past:** Claude Design samodejno izbere slike iz svojih sredstev. Če potrebujete točno določene fotografije, jih naložite vnaprej.
## Scenarij 5: e-poštna kampanja za Resend, Mailchimp ali Sendsay
Ključne ugotovitve
Predloga e-poštnega sporočila HTML je običajna tehnična naloga, pri kateri je Claude Design uporaben predvsem zaradi hitrosti. Gre za samostojno datoteko HTML z vdelanimi slogi in brez zunanjih odvisnosti, pripravljeno za uporabo v katerem koli e-poštnem odjemalcu. Struktura predloge je standardna: podnaslov, naslov, odstavki, pozivni gumb in podpis. Pripravljena je za kopiranje v Resend, Mailchimp, Sendsay ali Unisender. Spodaj je opisano, kaj je običajno treba urediti ročno.
Vsaka množična e-poštna kampanja potrebuje predlogo HTML z vdelanimi slogi. Za tržnika brez frontend razvijalca je to tehnična nadloga.
**Predloga poziva:**
```
Create an HTML email template for [campaign topic]. Design: dark theme,
your brand's primary accent, brand fonts. Structure: subheading,
heading, 3 paragraphs, call-to-action button, signature. Export as
a standalone HTML file with embedded styles and no external dependencies.
```
**Kaj boste dobili:** datoteko HTML, pripravljeno za kopiranje v Resend, Mailchimp, Sendsay ali Unisender.
**Kaj ljudje običajno preverijo in popravijo:**
- Širina — e-poštni odjemalci imajo raje fiksno širino 600px.
- Slike — povezave zamenjam s povezavami do svojih sredstev, gostovanih na spletu.
- Različica v navadnem besedilu — Claude Design je ne ustvari; napišem jo sam.
**Prihranek časa:** 2–3 ure dela za postavitev na predlogo.
## Predaja Claude Code: zaprta zanka
Ključne ugotovitve
Glavna edinstvena funkcija Claude Design za ljudi, ki pišejo kodo s Claude Code. Zasnova se izvozi kot paket, ki vsebuje namen oblikovanja: komponente, vzorce, logiko oblikovalskih odločitev in sidrišča za odzivno oblikovanje. Claude Code jo prenese v kodo, ne da bi izgubil pomen. Lovable, v0 in Bolt nimajo te zaprte zanke — tam je oblikovanje stranski produkt kode. Spodaj je opisano, kaj je v paketu, kako poteka delo in kje imajo konkurenti omejitve.
V tukaj opisanem pristopu ta funkcija upraviči izbiro Claude Design, tudi če imate Figmo. Vsako drugo orodje za oblikovanje preda sliko ali datoteko Figma. Nato jo razvijalec pogleda in prevede »po svojem razumevanju«. Tako se izgubi 30–40 % namena oblikovanja.
Claude Design zagotovi paket, ki ne vsebuje le vizualnih elementov, temveč tudi:
- Strukturo komponent (kako so logično povezane).
- Logiko oblikovalskih odločitev (zakaj so razmiki takšni, zakaj so vogali tako zaobljeni, zakaj je hierarhija takšna).
- Sidrišča za odzivno oblikovanje — mesta, kjer se blok »pripne« na zaslon pri različnih velikostih.
- Poimenovane vrednosti slogov namesto čarobnih števil.
Claude Code ta paket odpre neposredno in napiše kodo, ki ohrani namen. Ne ustvari le kopije slike v postavitvi, temveč uveljavi logiko oblikovanja. To deluje skupaj z [datoteko `CLAUDE.md` vašega projekta](https://ailoot.ai/blog/sl/claude-md-template/): natančnejša kot so pravila v `CLAUDE.md`, manj Claude Code »odstopa« od prvotnega namena.
**Potek dela:**
1. **V Claude Design** — dokončajte zasnovo → kliknite »Export to Claude Code«.
2. **V Claude Code** — odprite projekt → prilepite ID paketa → poziv: »Implement this design in `src/components/`.«
3. **Claude Code** — prebere paket, razume vzorce in napiše komponente z vašim trenutnim naborom tehnologij (Next.js + Tailwind, Vue, Svelte — kar koli uporabljate).
4. **Nato** — spreminjajte kodo prek Claude Code ali pa Claude Design (nova iteracija zasnove) in jo znova predajte naprej.
**Kaj je pomembno:** ne gre za »UI, ki ga napiše UI«. Gre za to, da »oblikovanje in koda postaneta en dokument«. Ko spremenim razmik med razdelki v Claude Design, bo Claude Code v naslednji iteraciji razumel, da gre za nov vzorec, ne za enkratni popravek.
**Kje imajo konkurenti pomanjkljivosti:**
- **Lovable / Bolt** — oblikovanje je stranski produkt kode. Če želite spremeniti sistem oblikovanja, morate znova napisati celoten poziv.
- **v0** — zagotovi komponente React, ne pa paketa z namenom oblikovanja. Nato delate s kodo, ne z zasnovo.
- **Figma + Cursor** — obstajajo vtičniki, vendar prenesejo le vizualne elemente, ne pa logike odločitev.
Ekskluzivna integracija, ki Claude Design vključi v Anthropicovo strategijo »agent plus platno«.
## Kaj ne deluje: arhitekturne slabosti
Ključne ugotovitve
Claude Design je predogled, ne različica, pripravljena za produkcijo. Arhitekturne omejitve: ni dnevnika dejavnosti, zahtev glede hrambe podatkov ali vgrajenega izvoza videa. Posebnost vedenja: po več iteracijah Claude pozabi sistem oblikovanja. Spodaj so opisane rešitve za vse te težave.
Anthropic odkrito pove, da gre za predogled. Nekatere funkcije še ne delujejo.
**Arhitekturne slabosti:**
- Ni dnevnika dejavnosti — težava za velika podjetja z zahtevami glede skladnosti.
- Ni zahtev glede hrambe podatkov — orodja ne morete uporabljati z reguliranimi podatki.
- Eksperimentalno oblikovanje (glas, video, 3D) je označeno kot eksperimentalno in lahko ne deluje.
- Ni vgrajenega izvoza videa — animacije lahko posnamete le kot posnetek zaslona.
**Posebnosti Claudovega vedenja** (skupne vsem orodjem, ne samo Design):
- Po več iteracijah pozabi zahteve in se vrne k privzetim vzorcem.
- Dobro opravlja jasno strukturirane naloge (ponavljanje vzorca), slabše pa odprte naloge (iskanje nove smeri).
- Lahko se »oklepa« svojih navad, namesto da bi sledil navedenim ciljem.
Rešitev je opomnik v obliki poziva, ki ga vsakih 3–4 iteracije vrne k sistemu oblikovanja. To ni ovira, zahteva pa nekaj navade.
## Kdaj ostati pri Figmi, Lovable ali Canvi
Ključne ugotovitve
Claude Design ni univerzalno orodje. Figmo uporabite za končno izpiljevanje in vtičnike. Lovable ali Bolt izberite, če z enim pozivom potrebujete delujoč izdelek z bazo podatkov in avtorizacijo. Canvo uporabite za trženjska gradiva iz predlog in tiskovine. v0 izberite, če delate v ekosistemu Next.js / Vercel in potrebujete že pripravljene komponente React. Običajen postopek v tukaj opisanem pristopu je: Claude Design pripravi prvi osnutek, Claude Code ga pretvori v kodo, končno izpiljevanje pa opravite tam, kjer vam najbolj ustreza.
V tukaj opisanem pristopu se teh pet orodij uporablja za različne naloge. Iskren pregled, kdaj uporabiti posamezno orodje:
**Claude Design uporabite, če:**
- Ste ustanovitelj, produktni vodja ali tržnik brez oblikovalskega znanja.
- Potrebujete prvi osnutek predstavitve, ciljne strani ali makete v eni uri, ne enem dnevu.
- Že imate kodno bazo ali smernice blagovne znamke, ki jih Claude lahko uporabi.
- Načrtujete predajo oblikovalcu ali razvijalcu za izpiljevanje.
- S Claude Code pišete kodo in želite sklenjeno zanko »oblikovanje → razvoj«.
**Figmo uporabite, če:**
- Ste oblikovalec in pripravljate končno izpiljen izdelek.
- Morate delati kot ekipa, osredotočena na predajo razvijalcem.
- Potrebujete vtičnike, način za razvijalce ali resno upravljanje različic.
- Potrebujete končno zasnovo, pripravljeno za produkcijo.
**Lovable ali Bolt uporabite, če:**
- Potrebujete delujoč izdelek z bazo podatkov, avtorizacijo in objavo na podlagi enega poziva.
- Ste pripravljeni žrtvovati dodelanost oblikovanja za hitrost.
- Vam je pomemben brezplačni paket.
**Canvo uporabite, če:**
- Potrebujete trženjska gradiva iz že pripravljenih predlog.
- Oblikovalska naloga je sestavljanje elementov iz knjižnice, ne ustvarjalno generiranje.
- Potrebujete tisk, družbena omrežja in video v enem izdelku.
**v0 uporabite, če:**
- Razvijate frontend in potrebujete že pripravljene komponente za kopiranje in lepljenje.
- Že delate v ekosistemu Next.js / Vercel.
- Želite neposredno uvažati iz Figme.
Običajen postopek v tukaj opisanem pristopu: Claude Design pripravi prvi osnutek ciljne strani → Claude Code ga prenese v `src/app/` → urejanje v kodi → če je potrebna tipografska dodelava, uporabim Figmo → če so potrebne animacije za družbena omrežja, uporabim Canvo.
Claude Design ne trdi, da zmore vse. Želi biti prvi korak, po katerem veste, kaj storiti naprej.
### Viri
- [Anthropic - Predstavljamo Claude Design, Anthropic Labs](https://www.anthropic.com/news/claude-design-anthropic-labs)
- [Cenik Lovable](https://lovable.dev/pricing)
- [Cenik v0 by Vercel](https://v0.app/pricing)
- [Paketi in cene Bolta](https://bolt.new/pricing)
- [Paketi in cene Figme](https://www.figma.com/pricing/)
[Odprite Ailoot](https://ailoot.ai/).
## Vprašanja in odgovori: Claude Design: vodnik in pet praktičnih scenarijev
### Ali lahko konverzije pristajalne strani merim samo iz izvoza PDF?
Ne. Objavite strani HTML, vsak CTA povežite s pravim obrazcem ter preverite poskusno oddajo in merilne dogodke. Vsaki različici določite svojo oznako, da lahko primerjate obiske, klike CTA in uspešne oddaje.
### Kaj preverim, preden oblikovanje predam Claude Code?
Potrdite aktivni sistem oblikovanja, zamenjajte nadomestne slike in izmišljene metrike ter preverite potrebna stanja interakcij. Nato izvozite oblikovalski paket in ga vgradite v obstoječi projekt; nastali vmesnik znova preglejte.
## Ailoot · Podjetje in njegov portfelj projektov
Ailoot temelji na pridobljenih operativnih izkušnjah, široki bazi strank, stabilni storitvi in stalnem spremljanju KPI.
Podjetje in njegov portfelj projektov: milijoni strank; mesečna prodaja v milijardah.
Ailoot te operativne izkušnje uporablja za dostop prek API do funkcij umetne inteligence v izdelkih strank, agentih, aplikacijah in avtomatizacijah.