# Spletno mesto, ki ni videti kot predloga, s Claude Code in Refero DESIGN.md

> Oblikovalski kontekst Refero Styles: struktura DESIGN.md, izbira vizualnega sistema, uvoz v CLAUDE.md, štirje koraki za izdelavo strani in pogoste napake.

Source: https://ailoot.ai/blog/sl/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/sl/claude-code-refero-design-md/
Language: sl
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-5a74e44a7f151a93d457deb5b1ab18cc6539534b20f683d89c94d041f1771f55


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Spletna mesta, ki jih Claude Code napiše »privzeto«, so si vsa podobna: temno ozadje, vijoličen preliv, pisava brez serifov, privzete kartice shadcn. Spodaj pokažemo, kako vzeti že pripravljen DESIGN.md iz Apple, Linear, Stripe ali ElevenLabs (v knjižnici je več kot 2.000 sistemov), ga dodati v projekt in doseči, da Claude piše v tem slogu. Končno spletno mesto ni več videti kot predloga, ki jo je ustvarila UI.

</div>

Praktični materiali za delo s projekti in modeli: [dokumentacija Ailoot](https://ailoot.ai/docs/).



## Zakaj so spletna mesta Claude Code videti kot predloge Tailwind?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Brez oblikovalskega sistema Claude Code ustvari povprečen vmesnik na podlagi svojih učnih podatkov. Ti učni podatki pa so celoten internet s Tailwind, shadcn/ui in tisoči enakih ciljnih strani. Brez izrecnega konteksta o barvah, pisavah in razmikih agent ustvari »aritmetično sredino vseh predlog«.

</div>

V opisanem januarskem primeru je nastajal majhen stranski projekt – klicalnik za hladne prodajne klice. Claude Code je v praznem repozitoriju dobil nalogo, naj izdela domačo stran. Rezultat je bil generičen: temno ozadje `slate-950`, poudarek `purple-500`, krepki naslov v pisavi brez serifov ter tri kartice pod njim z enakimi sencami. Enaka postavitev kot pri prvi izdaji ChatGPT, prvi izdaji Lovable in prvi izdaji v0. Po petih popravkih poziva, ki so dodali »moderno«, »premium« in »ne kot vsi drugi«, se ni nič spremenilo. Stran je bila še vedno videti, kot da izvira iz zbirke Tailwind UI Templates.

Claude torej ne »ne zna« ustvariti nečesa lepega. Ve, kaj počne večina, in to večino tudi posnema. Za rezultat, ki ni povprečen, agent potrebuje konkretne omejitve: katere barve naj uporabi, katere pisave, kakšne razmike in katere komponente naj obravnava kot kanonične.

Tu v kontekst vstopi oblikovalski sistem. Ne »naj bo lepo«, temveč »izdelaj v tem konkretnem slogu; tukaj so njegovi parametri«.

Refero Styles premosti to vrzel z že pripravljenim artefaktom – datoteko `DESIGN.md` s parametri resničnih izdelkov.

## Kaj je Refero Styles?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Refero Styles je knjižnica z več kot 2.000 oblikovalskimi sistemi, pridobljenimi iz resničnih spletnih mest in zapakiranimi v datoteke `DESIGN.md`. Vsak sistem predstavlja znamko: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor. Obiščeš styles.refero.design, izbereš znamko, kopiraš njeno datoteko markdown in jo dodaš v projekt kot kontekst za Claude Code, Cursor, Codex, v0 ali Lovable.

</div>

Na domači strani styles.refero.design je to povedano neposredno: »odkrijte več kot 2.000 oblikovalskih sistemov vodilnih produktnih spletnih mest, ki jih lahko berejo agenti UI«. Katalog vključuje znamke, ki postavljajo vizualna merila: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Sistemov ne pridobivajo ročno – ekipa Refero zažene skript, ki analizira dejanski CSS in označevanje spletnega mesta ter rezultat zapakira v strukturiran markdown. Knjižnica styles.refero.design je brezplačna.

Ključna beseda je »strukturirane«. Datoteka ne vsebuje posnetkov zaslona ali opisa, kot je »v minimalističnem slogu«. Gre za markdown s konkretnimi šestnajstiškimi barvami, natančnimi velikostmi pisave v pt, enotami razmikov in pravili za komponente. Agent UI to datoteko prebere in dela s konkretnimi podatki, namesto da bi poskušal z besedami opisati okus.

Ekipa Refero na strani ai-agents med podprtimi orodji navaja »Cursor, Claude Code, Codex, v0 in Lovable«. Z drugimi besedami, DESIGN.md deluje kot univerzalni artefakt – ena datoteka, primerna za vse glavne agente za razvoj z UI.

## Kaj vsebuje DESIGN.md?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Ena datoteka vsebuje vse osnovne plasti oblikovalskega sistema: barvno paleto v šestnajstiškem zapisu (s temnim in svetlim načinom), tipografijo (pisava, lestvica velikosti, debeline, višine vrstic), pravila razmikov (mrežo 8px ali drug ritem), opise komponent (gumbi, kartice, obrazci), pravila gibanja (animacije, easing) in »glas znamke« (ton sporočil). Datoteka vsebuje od 100 do 400 vrstic markdowna.

</div>

Ekipa Refero na strani design-md-template strukturo datoteke opiše takole:

<figure>
<blockquote>
<p>Začni s tonom izdelka in načeli oblikovanja, nato določi barve, tipografijo, razmike, komponente, postavitev, gibanje, dostopnost in pravila o tem, česa ne uporabljati.</p>
</blockquote>
<figcaption>— Ekipa Refero Styles, https://styles.refero.design/design-md/design-md-template</figcaption>
</figure>

Struktura datoteke je torej običajno videti takole:

| Razdelek | Kaj vsebuje | Zakaj ga agent potrebuje |
|----|----|----|
| **Ton izdelka** | 2–3 stavki o tem, kako zveni vmesnik | določa smer za mikrobesedila |
| **Načela oblikovanja** | 4–6 pravil, na primer »minimalizem brez žrtvovanja berljivosti« | usmerja agenta pri izbiri med enako dobrimi možnostmi |
| **Barve** | šestnajstiška paleta z imeni (primarna, sekundarna, poudarek, površina, besedilo) + temni/svetli način | agent uporabi natančne kode, namesto da si jih izmisli |
| **Tipografija** | pisava (ime in nadomestni nabor), lestvica velikosti (10–12 stopenj), debeline (regular, medium, bold), višina vrstice | prepreči, da bi celotno spletno mesto postalo en sam Inter 16px |
| **Razmiki** | osnovna enota (4px, 8px, 16px) in lestvica večkratnikov | odmiki znotraj in zunaj elementov se nehajo »potepati« |
| **Komponente** | pravila za gumbe, kartice, obrazce, navigacijo – velikosti, stanja, različice | agent si ne izmišlja novih različic |
| **Postavitev** | mreža, prelomne točke, največje širine vsebnikov | vse strani so zgrajene na eni mreži |
| **Gibanje** | trajanje, easing, dovoljeni prehodi | animacije ostanejo zadržane, ne kot v Bootstrap-2010 |
| **Glas in ton** | primeri besedil za gumbe, naslove, napake | besedilo spletnega mesta zveni kot znamka |
| **Ne uporabljaj** | seznam prepovedi (»ne uporabljaj `box-shadow: 0 10px 30px`«) | agent se ne vrne k rešitvam iz predlog |

Ustvarjalci poudarjajo tudi načelo, ki reši 80 % težav z oblikovanjem UI:

<figure>
<blockquote>
<p>Konkretni kontekst deluje bolje kot pridevniki, ki opisujejo okus.</p>
</blockquote>
<figcaption>— Ekipa Refero Styles, https://styles.refero.design/ai-agents/design-md-examples</figcaption>
</figure>

To pomeni, da je šestnajstiška koda `#5E6AD2` močnejša od »kot Linear«. Natančna vrednost `font-size: 13px / line-height: 18px` je močnejša od »strnjeno besedilo«. Konkretni podatki so boljši od interpretacije.



`DESIGN.md` v repozitoriju je strukturirano znanje, ki ga UI prebere ob vsaki zahtevi. Celovita delujoča kombinacija je: Skills za vašo metodologijo + projektno znanje (`business/`, DESIGN.md, CLAUDE.md) + Context Engineering (Plan Mode, /compact). To so 3 stebri, brez katerih UI halucinira.

## Kako v 4 korakih ustvariti spletno mesto v slogu Linear

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Potek dela je kratek: namesti Claude Code, odpri styles.refero.design, izberi znamko (na primer Linear), kopiraj DESIGN.md v `docs/DESIGN.md` ali `.claude/DESIGN.md`, dodaj vrstico o tej datoteki v `CLAUDE.md` in prosi Claude, naj izdela stran. V praksi potrebuješ 30 minut od praznega projekta do delujoče domače strani.

</div>

Ti štirje koraki predstavljajo opisano zaporedje za začetek novega spletnega mesta. Ne gre za »štiri splošne korake«, temveč za konkretno zaporedje z enim dejanjem v vsakem koraku.

1.  ### Namesti Claude Code

    Izvorni namestitveni program z enim ukazom: `curl -fsSL https://claude.ai/install.sh | bash` (priporočena metoda v uradni dokumentaciji). V sistemu macOS deluje `brew install --cask claude-code`; v sistemu Windows pa `winget install Anthropic.ClaudeCode`. Če je že nameščen, preveri različico: `claude --version` (potrebna je različica 2.1.178+ – ta različica je uvedla dovoljenja `Tool(param:value)` in blokiranje nevarnih ukazov git v samodejnem načinu). Prijavi se v svoj račun: ukaz `claude` zažene čarovnika. Claude Code je vključen v naročnino Pro (\$17/mesec pri letnem obračunu ali \$20/mesec pri mesečnem obračunu).

2.  ### Odpri Refero Styles in izberi znamko

    Obišči <https://styles.refero.design> in odpri katalog. Glavno merilo izbire je, kako dobro se ujema s tvojim izdelkom, ne pa to, ali ti je »videz všeč«. Gradiš nadzorno ploščo SaaS? Oglej si Linear, Vercel in Notion. Gradiš fintech izdelek? Oglej si Stripe, Mercury in Column. Gradiš izdelek za člane? Oglej si Duolingo. Odpri kartico znamke in klikni »Copy DESIGN.md«.

3.  ### Dodaj DESIGN.md v projekt kot kontekst

    V korenski mapi projekta ustvari datoteko `docs/DESIGN.md` in vanjo prilepi kopirano vsebino. Nato odpri `CLAUDE.md` in dodaj eno vrstico: `@docs/DESIGN.md`. To je direktiva za uvoz – Claude Code ob začetku seje naloži vsebino v kontekst. Več o uvozih v datoteki CLAUDE.md preberi v [vodniku po eni datoteki z navodili za Claude Code, Codex in Cursor](https://ailoot.ai/blog/sl/agents-md-claude-md-one-instruction-file/).

4.  ### Zahtevaj konkretno stran

    Ne reci »naj bo lepo«. Bodi konkreten: »Z uporabo datoteke DESIGN.md v kontekstu izdelaj domačo stran za izdelek SaaS za upravljanje opravil. Struktura: hero z naslovom in podnaslovom, dva gumba CTA (primarni in sekundarni), spodnji blok s 3 funkcijami in ikonami, nato blok z izjavami uporabnikov. Uporabi natančno barve in tipografijo iz datoteke DESIGN.md; ne izmišljaj si svojih.«

Po četrtem koraku Claude izdela stran. Po opisanih izkušnjah domača stran v povprečju nastaja 8–12 minut – in je res videti podobno izbranemu slogu znamke. Ne gre za popolno kopijo do posameznega piksla, temveč za prepoznavno estetiko: enake pisave, enaka paleta, enak ritem razmikov in enake drobne odločitve pri gumbih.

Ustvarjalci Refero isto načelo treh korakov nekoliko krajše opišejo na strani ai-agents/design-resources:

<figure>
<blockquote>
<p>Izberi nalogo, odpri ustrezen vir, posreduj agentu kontekst: dodaj DESIGN.md v kontekst agenta, razloži izdelek in zahtevaj konkreten zaslon.</p>
</blockquote>
<figcaption>— Ekipa Refero Styles, https://styles.refero.design/ai-agents/design-resources</figcaption>
</figure>

To štirikoračno zaporedje sledi isti logiki, dodana pa sta še izrecna koraka namestitve Claude Code in uvoza datoteke v `CLAUDE.md`.

## Kateri slog izbrati za svoj izdelek?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Izbiraj glede na gostoto in ton, ne glede na znamko. Orodje SaaS za ekipo (gost UI, veliko podatkov) – Linear ali Vercel. Finančni izdelek (zaupanje, natančnost) – Stripe, Mercury, Column. Potrošniški izdelek (toplina, čustva) – Duolingo, Notion za ekipe, Airbnb. Orodje za UI/razvijalce (minimalizem, temna tema) – ElevenLabs, xAI, Modal. Izdelek za člane (dostopnost, berljivost) – Duolingo. Če nisi prepričan, je Linear varna izbira za splošno rabo.

</div>

Ustvarjalci Refero ta nasvet podajo že v prvem koraku svojega vodnika: referenco izberi glede na gostoto, ton in ciljno skupino, ne le glede na ime znamke.

Kaj to pomeni v praksi? Applove barve, tipografija, hierarhija in zadržano gibanje lahko ustrezajo nadzorni plošči SaaS, veliki razmiki določene trženjske strani pa morda ne. Preglej konkretno referenco, ne izbiraj samo po imenu znamke. Za računovodsko ploščo izrecno določi kompaktne višine vrstic, razmike in gostoto informacij ter ohrani berljive številke in upravljalne elemente; prostorne predstavitvene postavitve ne kopiraj nespremenjene.

Preprost vodnik za izbiro glede na vrsto izdelka:

| Vrsta izdelka | Ustrezni slogi Refero | Kaj jim je skupno |
|----|----|----|
| Nadzorna plošča SaaS za ekipe | Linear, Vercel, Notion, PostHog; Applovi tokeni s prilagojeno kompaktno postavitvijo | berljiv gost UI, jasna hierarhija, jedrnata tipografija |
| Finančni izdelek | Stripe, Mercury, Column | zaupanja vredna paleta, jasna tipografija, pisava monospace za številke |
| Orodje za UI/razvijalce | ElevenLabs, xAI, Modal, Anthropic | temna tema, zadržani poudarki, enobarvni videz z eno živahno barvo |
| Potrošniški izdelek | Duolingo, Airbnb, Notion | topla paleta, izrazite ilustracije, prijazen glas |
| Trženjsko spletno mesto | Linear, Vercel, Stripe (domače strani) | veliki naslovi, jasna hierarhija, umirjeno ozadje |
| Minimalistični portfelj | Apple, Mercury, Modal | največ praznega prostora, sans-serif, zadržani poudarki |

Če še vedno nisi prepričan, izberi Linear. Ima najbolj vsestransko osnovo: nevtralno paleto, berljivo tipografijo (Inter / Söhne) in zadržane razmike. Spletno mesto, zasnovano na Linearu, bo videti profesionalno pri 9 od 10 vrst izdelkov.

## Zakaj naj bo DESIGN.md del trajnega konteksta projekta?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

DESIGN.md ni enkraten artefakt. Je del trajnega konteksta projekta, tako kot `CLAUDE.md` in mapa `business/`. Ko je datoteka v repozitoriju, imajo vsaka seja Claude, vsak član ekipe in vsak nov agent UI (Codex, Cursor, Gemini CLI) dostop do istega vizualnega kanona. Znanje strukturiraš enkrat, nato pa ga uporabljaš v nedogled.

</div>

V opisani praksi je `DESIGN.md` shranjen ob `CLAUDE.md` v vsakem projektu, ki ga upravljajo agenti UI. Ta datoteka ni obravnavana kot »začasna za eno nalogo«. Je trajni kanon, na katerega se opirajo vse prihodnje seje. Čez mesec lahko Claude prosiš, naj projektu doda novo stran – odprl bo isto datoteko DESIGN.md in izdelal stran v istem slogu. Čez šest mesecev lahko projekt predaš drugemu članu ekipe – tudi on lahko zažene Claude in dobi skladen rezultat, ker je DESIGN.md v repozitoriju.

Pri oblikovanju to načelo deluje tako: enkrat sprejmeš odločitev o paleti, tipografiji in ritmu razmikov. Nato jo vsak agent UI upošteva kot dano.

To pomeni, da oblikovanje živi kot koda (markdown je koda), ne kot datoteka Figma, ki je UI ne more prebrati. Ko je oblikovanje v datoteki v repozitoriju, ga Claude Code prebere, prebere ga Codex in prebere ga lahko tudi katero koli prihodnje orodje. Ko je oblikovanje v Figmi, je v ločenem prostoru in ga je treba ročno prevesti za vsako sejo.

V opisanih stranskih projektih so uporabili to strukturo:

```
project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...
```

Te tri datoteke so eden od načinov za ureditev trajnega konteksta projekta. DESIGN.md obravnava vizualno podobo, ARCHITECTURE.md strukturo, BRAND.md pa glas. Vsak agent UI z dostopom do repozitorija dobi vse tri kot kontekst.

## Kaj sta Refero MCP in refero_skill?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Refero MCP je strežnik na api.refero.design/mcp, ki Claude Codeu neposredno v klepetu omogoča dostop do več kot 150.000 zaslonov iz resničnih aplikacij in več kot 6.000 uporabniških potekov. Refero_skill je uradni skill za Claude Code (`npx skills add`), ki ovije MCP in »raziskovanje oblikovanja« uvede kot obvezen prvi korak pred pisanjem kode.

</div>

Refero Styles je osnovna plast (DESIGN.md kot datoteka). Naslednji val sestavljajo integracije, zaradi katerih je dostop do knjižnice za agente UI »naraven«.

**Refero MCP (uradni).** To je strežniški API na naslovu `https://api.refero.design/mcp`, s katerim se Claude Code poveže z žetonom bearer. Agent nato dobi dostop do več kot 150.000 zaslonov in več kot 6.000 uporabniških potekov iz resničnih izdelkov. Namestiš ga lahko s skillom:

```bash
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```

Po namestitvi Claude na začetku vsake seje kot obvezen prvi korak zažene »raziskovanje oblikovanja«: pogleda, katere vizualne izbire ustrezajo nalogi, in po potrebi predlaga tri smeri, povezane z izbrano referenco. Na dan 23. junija 2026 ima repozitorij refero_skill 67 commitov in 135 zvezdic. Gre za nov izdelek, ki se aktivno razvija.

Opisana praksa uporablja preprost pristop: ročno odpri spletno mesto, kopiraj DESIGN.md in ga vstavi v datoteko. MCP je uporaben, ko delo z oblikovalskimi sistemi postane rutina – na primer, ko upravljaš več projektov za stranke in vsak dan preklapljaš med vizualnimi kanoni. Več o povezovanju strežnikov MCP s Claude Code preberi v vodniku o NotebookLM in MCP.

## Katere 4 napake pokvarijo potek dela?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

Prvič, uporaba poziva »naj bo videti moderno« brez priložene datoteke DESIGN.md (agent se vrne k povprečju učnih podatkov). Drugič, lepljenje datoteke DESIGN.md v klepet kot sporočila, namesto da bi jo dali v repozitorij (kontekst se med sejami ne ohrani). Tretjič, izbira po znamki namesto konkretnem zaslonu in gostoti, na primer kopiranje prostorne trženjske postavitve v računovodsko ploščo. Četrtič, če v pozivu izrecno ne omenimo DESIGN.md (agent ga prezre, tudi če je datoteka v kontekstu).

</div>

Te štiri napake se pojavljajo v opisanih izkušnjah z uporabo oblikovalskega konteksta. Vsaka je videti neškodljiva, vendar vsaka vrne rezultat k standardni predlogi Tailwind.

**Napaka 1. Poziv »naj bo moderno«.** To je najpogostejši vzorec napak. Ljudje odprejo Claude Code in napišejo: »naredi mi spletno mesto SaaS, moderen slog, premium videz«. Dobijo temno ozadje in vijoličen poudarek. V učnih podatkih je beseda »moderno« povezana z vsemi ciljnimi stranmi iz obdobja 2022–2024, izdelanimi po isti predlogi. Brez natančnih parametrov iz DESIGN.md »moderno« pomeni »povprečno«.

**Napaka 2. Lepljenje DESIGN.md v klepet kot sporočila.** Včasih ljudje kopirajo DESIGN.md v okno klepeta Claude Code in rečejo: »tukaj je slog, uporabi ga«. To deluje enkrat – do konca seje. Odpri novo sejo (ali preklopi na drugo nalogo, /clear) in kontekst se izgubi. Če želiš, da se slog ohrani, mora biti datoteka v repozitoriju in uvožena v `CLAUDE.md`. Več o tem, zakaj je `CLAUDE.md` temelj trajnega konteksta, preberi v [vodniku o pomnilniku Claude](https://ailoot.ai/blog/sl/claude-memory-claude-md-auto-memory/).

**Napaka 3. Izbira sloga, ker ti je »všeč«.** Prostorna Applova trženjska referenca je lahko slaba izbira za nespremenjeno kopiranje v nepremičninsko ploščo, ki potrebuje 30 oglasov na zaslonu. To ne izključuje Applove tipografije, palete ali hierarhije: razmike in gostoto vrstic prilagodi nalogi, nato preveri dejansko vidne informacije pri ciljni velikosti zaslona. Konkretno referenco izberi po gostoti, tonu in občinstvu, ne samo znamki.

**Napaka 4. Če v samem pozivu ne omeniš DESIGN.md.** DESIGN.md je lahko v repozitoriju, uvožen prek `CLAUDE.md` in viden agentu. Če pa poziv pravi »izdelaj spletno mesto«, lahko Claude izbere standardni pristop, ne da bi se izrecno skliceval na datoteko. Pri vsakem oblikovalskem pozivu je uporabna ta vrstica: »Uporabi natančno barve, pisave in razmike iz docs/DESIGN.md. Ne izmišljaj si svojih vrednosti – vzemi jih iz datoteke.« Tako poskrbiš, da agent uporabi DESIGN.md in ga ne obide.

Natančni žetoni so šestnajstiške kode, velikosti pisave v pt in enote razmikov v DESIGN.md. Naravni jezik pomeni »moderno«, »premium«, »čisto« ali »kot Apple«. Natančni žetoni delujejo; proste besede ne.

## Kaj narediti naslednje?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Ključne ugotovitve">

Ključna ugotovitev

DESIGN.md je prvi gradnik vizualnega kanona, ne pa edini. Razviješ ga lahko v treh smereh: Frontend Design Skill v Claude Code za vizualne povratne informacije prek posnetkov zaslona, Refero MCP za redno delo z različnimi slogi in združevanje DESIGN.md s svojim context engineeringom – tako da agent najprej prebere vizualni kanon, nato izdela stran in na koncu sam preveri rezultat s posnetkom zaslona.

</div>

Zdaj imaš osnovni potek dela: Claude Code + DESIGN.md iz Refero + 4 koraki = spletno mesto, ki ni videti kot predloga. To pokriva 70 % potreb. Preostalih 30 % predstavljajo primeri, ko potrebuješ večjo natančnost, večjo hitrost ali preverjanje.

Tri smeri za nadaljevanje po osvojitvi osnov:

1.  **Frontend Design Skill.** To je uradni skill za Claude Code, ki doda vizualne povratne informacije. Agent s Puppeteerjem posname sestavljeno stran, si jo ogleda s svojimi »očmi« (modelom za vid), jo primerja z DESIGN.md in sam predlaga popravke. To je samodejna zanka »poziv → koda → posnetek zaslona → kritika → poziv«. Uporabna je, kadar je stran zapletena in je ne moreš pravilno izdelati v eni iteraciji.

2.  **Refero MCP v produkcijskem načinu.** Ko upravljaš 3–5 projektov hkrati, postane ročno dodajanje DESIGN.md za vsakega zamudno. Refero MCP lahko na podlagi opisa projekta poišče 3 primerne sloge in ponudi izbiro. Tako se začetek novega projekta skrajša s 30 minut na 3.

3.  **Kombinacija s Context Engineering.** DESIGN.md je eden od artefaktov konteksta. Ob njem običajno najdeš še `ARCHITECTURE.md` (struktura projekta), `BRAND.md` (glas znamke) in `business/audience.md` (ciljna skupina). Vse so uvožene v `CLAUDE.md`. Ko Claude izdeluje stran, upošteva vizualno podobo, ciljno skupino in strukturo izdelka. V bistvu gre za [context engineering](https://ailoot.ai/blog/sl/context-engineering/) – sistematično delo s tem, kar agentu posreduješ pred zahtevo.

Praktični materiali: [dokumentacija Ailoot](https://ailoot.ai/docs/).

<div class="section" role="doc-bibliography" aria-label="Viri">

### Viri

- [Refero Styles – domača stran](https://styles.refero.design/)
- [Refero Styles – primeri DESIGN.md](https://styles.refero.design/ai-agents/design-md-examples)
- [Refero Styles – design-resources](https://styles.refero.design/ai-agents/design-resources)
- [Refero Skill na GitHubu](https://github.com/referodesign/refero_skill)
- [Claude Code Docs – uradna dokumentacija](https://code.claude.com/docs/en/overview)
- [Claude Code Quickstart – uradna navodila za namestitev](https://code.claude.com/docs/en/quickstart)

</div>

Praktični materiali: [dokumentacija Ailoot](https://ailoot.ai/docs/).





Več gradiv in orodij: [Ailoot](https://ailoot.ai/).

## Vprašanja in odgovori: Spletno mesto, ki ni videti kot predloga, s Claude Code in Refero DESIGN.md

### Ali je Applova referenca primerna za gosto nadzorno ploščo SaaS?

Da, če jo prilagodiš nalogi. Uporabi ustrezno paleto, tipografijo, hierarhijo in zadržano gibanje, kompaktne višine vrstic, razmike ter gostoto informacij pa določi izrecno, namesto kopiranja prostorne trženjske postavitve.

### Zakaj shranjeni DESIGN.md še vedno ne vpliva na novo stran?

Preveri datoteko v repozitoriju, uvoz iz CLAUDE.md in izrecno navedbo v zahtevi za oblikovanje. Zahtevaj dejanske vrednosti barv, pisav in razmikov, nato upodobljeno stran primerjaj s predvideno referenco.


## 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.
