# Verkkosivusto ilman mallipohjaa Claude Codella ja Refero DESIGN.md:llä
> Refero Stylesin suunnittelukonteksti: DESIGN.md-rakenne, visuaalisen järjestelmän valinta, sen tuominen CLAUDE.md-tiedostoon, neljä vaihetta sivun luomiseen ja yleiset virheet.
Source: https://ailoot.ai/blog/fi/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/fi/claude-code-refero-design-md/
Language: fi
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-dc6383c73a6f9e3e158b0af5e783a2e05b03908d0f305d1902e30a631cb89409
Tärkein huomio
Claude Coden ”suoraan paketista” kirjoittamat verkkosivustot näyttävät kaikki samanlaisilta: tumma tausta, violetti liukuväri, sans serif -fontti ja shadcnin oletuskortit. Seuraavaksi näytämme, miten voit ottaa valmiin DESIGN.md-tiedoston Applelta, Linearilta, Stripeltä tai ElevenLabsilta (kirjastossa on yli 2 000 järjestelmää), lisätä sen projektiisi ja saada Clauden kirjoittamaan kyseisellä tyylillä. Valmis sivusto ei enää näytä tekoälyn mallipohjalta.
Käytännön materiaalia projektien ja mallien parissa työskentelyyn: [Ailoot-dokumentaatio](https://ailoot.ai/docs/).
## Miksi Claude Code -verkkosivustot näyttävät Tailwind-mallipohjilta?
Tärkein huomio
Ilman suunnittelujärjestelmää Claude Code piirtää koulutusdatansa perusteella keskivertokäyttöliittymän. Koulutusdataa on koko internet täynnä Tailwindia, shadcn/ui:ta ja tuhansia samanlaisia aloitussivuja. Kun värejä, fontteja ja välistyksiä koskevaa nimenomaista kontekstia ei anneta, agentti tuottaa ”kaikkien mallipohjien aritmeettisen keskiarvon”.
Tammikuun esimerkissä luotiin pieni sivuprojekti: kylmämyyntipuheluiden soittojärjestelmä. Tyhjässä repositoriossa Claude Codea pyydettiin rakentamaan etusivu. Tuloksena oli geneerinen sivu: tumma `slate-950`-tausta, `purple-500`-korostusväri, lihavoitu sans serif -otsikko ja sen alla kolme korttia, joissa kaikissa oli identtiset varjot. Sama asettelu kuin ChatGPT:n, Lovablen ja v0:n ensimmäisissä versioissa. Viiden promptimuokkauksen jälkeen, joissa lisättiin sanoja ”moderni”, ”premium” ja ”ei samanlainen kuin muut”, mikään ei muuttunut. Sivusto näytti yhä siltä kuin se olisi peräisin Tailwind UI Templates -mallipohjien kokoelmasta.
Claude siis ei ”ole tietämätön” siitä, miten luodaan jotain kaunista. Se tietää, mitä useimmat tekevät, ja toistaa enemmistön ratkaisut. Jotta tulos ei olisi keskiarvo, agentti tarvitsee tarkkoja rajoitteita: mitä värejä ja fontteja käytetään, millainen välistys valitaan ja mitä komponentteja pidetään ohjenuorana.
Tässä suunnittelujärjestelmä toimii kontekstina. Ei ”tee siitä kaunis”, vaan ”tee se tässä tietyssä tyylissä; tässä ovat sen parametrit”.
Refero Styles kuroo tämän kuilun umpeen valmiilla artefaktilla: `DESIGN.md`-tiedostolla, joka sisältää oikeista tuotteista poimittuja parametreja.
## Mikä Refero Styles on?
Tärkein huomio
Refero Styles on kirjasto, jossa on yli 2 000 oikeilta verkkosivustoilta poimittua suunnittelujärjestelmää, jotka on paketoitu `DESIGN.md`-tiedostoiksi. Kukin järjestelmä edustaa brändiä: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs tai Cursor. Siirryt osoitteeseen styles.refero.design, valitset brändin, kopioit sen markdown-tiedoston ja lisäät sen projektiisi Claude Coden, Cursorin, Codexin, v0:n tai Lovablen kontekstiksi.
styles.refero.designin etusivu kertoo asian suoraan: ”tutustu yli 2 000 tekoälyagenteille luettavaan suunnittelujärjestelmään johtavilta tuotesivustoilta”. Luettelossa on visuaalisen standardin määrittäviä brändejä: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal ja Duolingo. Järjestelmiä ei poimita käsin. Refero-tiimi suorittaa skriptin, joka analysoi sivuston todellista CSS:ää ja merkkausta ja paketoi tuloksen jäsennellyksi markdowniksi. styles.refero.designin kirjasto on maksuton.
Avainsana on ”jäsennellyiksi”. Tiedostossa ei ole kuvakaappauksia eikä kuvausta, kuten ”minimalistinen tyyli”. Se on markdownia, jossa on tarkat heksavärit, täsmälliset fonttikoot pt-yksiköissä, välistysyksiköt ja komponentteja koskevat säännöt. Tekoälyagentti lukee tiedoston ja käyttää konkreettisia tietoja sen sijaan, että yrittäisi kuvata makua sanallisesti.
Refero-tiimi listaa tuettaviksi työkaluiksi ai-agents-sivullaan ”Cursorin, Claude Coden, Codexin, v0:n ja Lovablen”. DESIGN.md toimii siis yleisenä artefaktina – yhtenä tiedostona, joka sopii kaikille merkittäville tekoälykehitysagenteille.
## Mitä DESIGN.md sisältää?
Tärkein huomio
Yksi tiedosto sisältää suunnittelujärjestelmän kaikki peruskerrokset: heksaväripaletin (tumma ja vaalea tila), typografian (fontti, kokoluokitus, leikkaukset, rivikorkeudet), välistyssäännöt (8px-ruudukko tai muu rytmi), komponenttikuvaukset (painikkeet, kortit, lomakkeet), liikesäännöt (animaatiot, easing) ja ”brändiäänen” (viestien sävy). Tiedostossa on 100–400 riviä markdownia.
Refero-tiimi kuvaa tiedoston rakenteen design-md-template-sivullaan näin:
Aloita tuotteen sävystä ja suunnitteluperiaatteista ja määrittele sitten värit, typografia, välistykset, komponentit, asettelu, liike, saavutettavuus ja säännöt siitä, mitä ei saa käyttää.
— Refero Styles -tiimi, https://styles.refero.design/design-md/design-md-template
Tiedoston rakenne on siis yleensä seuraavanlainen:
| Osio | Sisältö | Miksi agentti tarvitsee sitä |
|----|----|----|
| **Tuotteen sävy** | 2–3 virkettä siitä, miltä käyttöliittymä kuulostaa | ohjaa mikrotekstien suuntaa |
| **Suunnitteluperiaatteet** | 4–6 sääntöä, kuten ”minimalismi luettavuudesta tinkimättä” | ohjaa agenttia valitsemaan yhtä hyvien vaihtoehtojen välillä |
| **Värit** | nimetty heksapaletti (primary, secondary, accent, surface, text) + tumma/vaalea tila | agentti käyttää täsmällisiä koodeja keksimisen sijaan |
| **Typografia** | fontti (nimi ja varafonttipino), kokoluokitus (10–12 askelta), leikkaukset (regular, medium, bold), rivikorkeus | estää koko sivustoa muuttumasta yhdeksi Inter 16px -fontiksi |
| **Välistykset** | perusyksikkö (4px, 8px, 16px) ja kerrannaisista koostuva asteikko | täytteet ja marginaalit lakkaavat ”vaeltelemasta” |
| **Komponentit** | painikkeiden, korttien, lomakkeiden ja navigoinnin säännöt – koot, tilat, muunnelmat | agentti ei keksi uusia muunnelmia |
| **Asettelu** | ruudukko, breakpoints-kohdat, säiliöiden enimmäisleveydet | kaikki sivuston sivut rakennetaan yhden ruudukon varaan |
| **Liike** | kesto, easing, sallitut siirtymät | animaatiot pysyvät hillittyinä, eivät Bootstrap-2010-tyylisinä |
| **Ääni ja sävy** | esimerkkitekstit painikkeisiin, otsikoihin ja virheisiin | sivuston tekstit kuulostavat brändiltä |
| **Älä käytä** | kiellettyjen asioiden luettelo (”älä käytä `box-shadow: 0 10px 30px`”) | agentti ei palaa mallipohjaratkaisuihin |
Tekijät painottavat myös periaatetta, joka ratkaisee 80 % tekoälysuunnittelun ongelmista:
Konkreettinen konteksti toimii paremmin kuin makua kuvailevat adjektiivit.
— Refero Styles -tiimi, https://styles.refero.design/ai-agents/design-md-examples
Heksakoodi `#5E6AD2` on siis vahvempi kuin ”Linear-tyyliin”. Tarkka arvo `font-size: 13px / line-height: 18px` on vahvempi kuin ”pienikokoinen teksti”. Konkreettiset tiedot päihittävät tulkinnan.
Repositoriossa oleva `DESIGN.md` ei ole tiimille tarkoitettu kuva. Se on projektisi pysyvän kontekstin rakennuspalikka: jäsenneltyä tietoa, jota tekoäly lukee jokaisen pyynnön yhteydessä.
## Näin teet verkkosivuston Linearin tyylillä 4 vaiheessa
Tärkein huomio
Työnkulku on lyhyt: asenna Claude Code, avaa styles.refero.design, valitse brändi (esimerkiksi Linear), kopioi DESIGN.md tiedostoon `docs/DESIGN.md` tai `.claude/DESIGN.md`, lisää `CLAUDE.md`-tiedostoon rivi, joka viittaa siihen, ja pyydä Claudea rakentamaan sivu. Käytännössä tyhjästä projektista toimivaan etusivuun pääsee 30 minuutissa.
Nämä neljä vaihetta muodostavat kuvatun uuden verkkosivuston aloitusjärjestyksen. Kyse ei ole ”yleisistä neljästä vaiheesta”, vaan tietystä järjestyksestä, jossa jokaisessa vaiheessa tehdään yksi asia.
1. ### Asenna Claude Code
Natiivi yhden komennon asennusohjelma on `curl -fsSL https://claude.ai/install.sh | bash` (virallisen dokumentaation suosittelema menetelmä). macOS:ssä toimii `brew install --cask claude-code`; Windowsissa `winget install Anthropic.ClaudeCode`. Jos se on jo asennettu, tarkista versio komennolla `claude --version` (tarvitaan versio 2.1.178+ – siinä lisättiin `Tool(param:value)`-lupakäytännöt ja vaarallisten git-komentojen estäminen automaattisessa tilassa). Kirjaudu tilillesi: `claude` käynnistää ohjatun toiminnon. Claude Code sisältyy Pro-tilaukseen (\$17/kuukausi vuosimaksulla tai \$20/kuukausi kuukausimaksulla).
2. ### Avaa Refero Styles ja valitse brändi
Siirry osoitteeseen ja avaa luettelo. Tärkein valintaperuste on se, kuinka hyvin tyyli sopii tuotteeseesi, ei se, ”pidätkö sen ulkonäöstä”. Rakennatko SaaS-koontinäyttöä? Katso Linear, Vercel ja Notion. Rakennatko fintech-tuotetta? Katso Stripe, Mercury ja Column. Rakennatko jäsenille tarkoitettua tuotetta? Katso Duolingo. Avaa brändikortti ja napsauta ”Copy DESIGN.md”.
3. ### Lisää DESIGN.md projektiin kontekstiksi
Luo projektin juureen tiedosto `docs/DESIGN.md` ja liitä siihen kopioitu sisältö. Avaa sitten `CLAUDE.md` ja lisää yksi rivi: `@docs/DESIGN.md`. Tämä on tuontimääritys – Claude Code lataa sisällön kontekstiin istunnon alkaessa. Lisätietoja CLAUDE.md:n tuonneista on [Claude Codelle, Codexille ja Cursorille tarkoitetussa yhden ohjetiedoston oppaassa](https://ailoot.ai/blog/fi/agents-md-claude-md-one-instruction-file/).
4. ### Kirjoita prompti tiettyä sivua varten
Älä sano ”tee siitä kaunis”. Ole täsmällinen: ”Rakenna SaaS-tehtävänhallintatuotteen etusivu DESIGN.md:n pohjalta. Rakenne: hero-alue, jossa on otsikko ja alaotsikko, kaksi CTA-painiketta (ensisijainen ja toissijainen), niiden alla osio, jossa on 3 ominaisuutta ja kuvakkeet, ja sen jälkeen asiakaspalautteita sisältävä osio. Käytä täsmälleen DESIGN.md:n värejä ja typografiaa; älä keksi omia.”
Neljännen vaiheen jälkeen Claude rakentaa sivun. Kuvatussa kokemuksessa etusivun tekemiseen kuluu keskimäärin 8–12 minuuttia – ja se näyttää todella valitun brändin tyyliseltä. Se ei ole pikselintarkka kopio, mutta estetiikka on tunnistettava: samat fontit, sama paletti, sama välistysrytmi ja samankaltaiset pienet ratkaisut painikkeissa.
Referon tekijät kuvaavat samaa kolmivaiheista periaatetta hieman tiiviimmin ai-agents/design-resources-sivullaan:
Valitse tehtävä, avaa sopiva resurssi ja anna agentille konteksti: tuo DESIGN.md agentin kontekstiin, kerro tuotteesta ja pyydä tiettyä näkymää.
— Refero Styles -tiimi, https://styles.refero.design/ai-agents/design-resources
Tämä nelivaiheinen järjestys noudattaa samaa logiikkaa, mutta siihen on lisätty selkeät vaiheet Claude Coden asentamiselle ja tiedoston tuomiselle `CLAUDE.md`-tiedostoon.
## Minkä tyylin valitsisit tuotteellesi?
Tärkein huomio
Valitse tiheyden ja sävyn, älä brändin perusteella. Tiimin SaaS-työkalu (tiivis käyttöliittymä, paljon dataa) – Linear tai Vercel. Taloustuote (luottamus, tarkkuus) – Stripe, Mercury tai Column. Kuluttajatuote (lämpö, tunteet) – Duolingo, tiimeille tarkoitettu Notion tai Airbnb. Tekoäly-/kehittäjätyökalu (minimalismi, tumma teema) – ElevenLabs, xAI tai Modal. Jäsenille tarkoitettu tuote (saavutettavuus, luettavuus) – Duolingo. Jos olet epävarma, valitse Linear turvalliseksi yleisratkaisuksi.
Referon tekijät antavat tämän neuvon jo oppaansa ensimmäisessä vaiheessa: valitse esikuva paitsi brändin nimen myös tiheyden, sävyn ja yleisön perusteella.
Mitä tämä tarkoittaa käytännössä? Applelta johdetut värit, typografia, hierarkia ja hillitty liike voivat sopia SaaS-koontinäyttöön, vaikka tietyn markkinointisivun suuret välit eivät sopisi. Tarkista nimenomainen viite brändinimen perusteella valitsemisen sijaan. Määritä kirjanpitonäkymään tiiviit rivikorkeudet, välit ja tietotiheys säilyttäen numeroiden ja hallintakeinojen luettavuus. Älä kopioi väljää esittelyasettelua sellaisenaan.
Yksinkertainen valintaopas tuotetyypin mukaan:
| Tuotetyyppi | Sopivat Refero-tyylit | Yhteistä niille |
|----|----|----|
| Tiimin SaaS-koontinäyttö | Linear, Vercel, Notion, PostHog; Applelta johdetut tokenit mukautetulla tiiviillä asettelulla | luettava tiivis käyttöliittymä, selkeä hierarkia, ytimekäs typografia |
| Taloustuote | Stripe, Mercury, Column | luottamusta herättävä paletti, selkeä typografia, numeroille monospace-fontti |
| Tekoäly-/kehittäjätyökalu | ElevenLabs, xAI, Modal, Anthropic | tumma teema, hillityt korostukset, yksivärinen ilme ja yksi kirkas väri |
| Kuluttajatuote | Duolingo, Airbnb, Notion | lämmin paletti, ilmeikkäät kuvitukset, ystävällinen ääni |
| Markkinointisivusto | Linear, Vercel, Stripe (etusivut) | suuret otsikot, selkeä hierarkia, rauhallinen tausta |
| Minimalistinen portfolio | Apple, Mercury, Modal | mahdollisimman paljon tyhjää tilaa, sans serif, hillityt korostukset |
Jos epäröit vielä, valitse Linear. Sen perusta on monipuolisin: neutraali paletti, luettava typografia (Inter / Söhne) ja hillityt välistykset. Linear-pohjainen verkkosivusto näyttää ammattimaiselta 9:ssä tuotetyypissä 10:stä.
## Miksi DESIGN.md kannattaa tehdä osaksi projektin pysyvää kontekstia?
Tärkein huomio
DESIGN.md ei ole kertakäyttöinen artefakti. Se on osa projektin pysyvää kontekstia siinä missä `CLAUDE.md` ja `business/`-kansio. Kun tiedosto on repositoriossa, jokaisella Claude-istunnolla, tiimin jäsenellä ja uudella tekoälyagentilla (Codex, Cursor, Gemini CLI) on käytössään sama visuaalinen kanoni. Tieto jäsennellään kerran ja sitä käytetään siitä eteenpäin jatkuvasti.
Kuvatussa käytännössä `DESIGN.md` tallennetaan `CLAUDE.md`-tiedoston viereen jokaiseen tekoälyagenteilla hallittuun projektiin. Tiedostoa ei pidetä ”yhden tehtävän väliaikaisena tiedostona”. Se on pysyvä kanoni, johon kaikki tulevat istunnot tukeutuvat. Kuukauden päästä voit pyytää Claudelta uuden sivun lisäämistä projektiin – se avaa saman DESIGN.md-tiedoston ja rakentaa sivun samaan tyyliin. Kuuden kuukauden päästä voit luovuttaa projektin toiselle tiimin jäsenelle – hänkin voi käyttää Claudea ja saada yhtenäisen tuloksen, koska DESIGN.md on repositoriossa.
Suunnittelussa periaate toimii näin: paletista, typografiasta ja välistysrytmistä päätetään kerran. Sen jälkeen jokainen tekoälyagentti pitää niitä itsestään selvinä.
Suunnittelu siis elää koodina (markdown on koodia), ei Figma-tiedostona, jota tekoäly ei voi lukea. Kun suunnittelu on tiedosto repositoriossa, Claude Code lukee sitä, Codex lukee sitä ja tulevatkin työkalut voivat lukea sitä. Kun suunnittelu on Figmassa, se elää erillisessä ympäristössä ja se on käännettävä käsin jokaiselle istunnolle.
Kuvatuissa sivuprojekteissa käytettiin tätä rakennetta:
```
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)
└── ...
```
Nämä kolme tiedostoa ovat yksi tapa järjestää projektin pysyvä konteksti. DESIGN.md huolehtii visuaalisuudesta, ARCHITECTURE.md rakenteesta ja BRAND.md äänestä. Jokainen agentti, jolla on pääsy repositorioon, saa kaikki kolme kontekstiinsa.
## Mitä Refero MCP ja refero_skill ovat?
Tärkein huomio
Refero MCP on palvelin osoitteessa api.refero.design/mcp. Se antaa Claude Codelle pääsyn yli 150 000 näyttöön oikeista sovelluksista ja yli 6 000 käyttäjävirtaan suoraan chatista. Refero_skill on Claude Coden virallinen skill (`npx skills add`), joka käärii MCP:n ja tekee ”design researchista” pakollisen ensimmäisen vaiheen ennen koodin kirjoittamista.
Refero Styles on peruskerros (`DESIGN.md` tiedostona). Seuraava aalto koostuu integraatioista, jotka tuovat kirjaston ”natiivisti” tekoälyagenttien käyttöön.
**Refero MCP (virallinen).** Tämä on palvelin-API osoitteessa `https://api.refero.design/mcp`, johon Claude Code muodostaa yhteyden bearer-tokenilla. Agentti saa käyttöönsä yli 150 000 näyttöä ja yli 6 000 käyttäjävirtaa oikeista tuotteista. Sen voi asentaa skillillä:
```bash
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```
Asennuksen jälkeen Claude käynnistää ”design researchin” jokaisen istunnon alussa pakollisena ensimmäisenä vaiheena: se tarkastelee, mitkä visuaaliset valinnat sopivat tehtävään ja ehdottaa tarvittaessa kolmea valittuun esikuvaan sidottua suuntaa. 23. kesäkuuta 2026 refero_skill-repositoriossa on 67 committia ja 135 tähteä. Uusi tuote, jota kehitetään aktiivisesti.
Kuvatussa käytännössä käytetään yksinkertaista tapaa: avataan sivusto käsin, kopioidaan DESIGN.md ja sijoitetaan se tiedostoon. MCP on hyödyllinen, kun suunnittelujärjestelmien käyttö muuttuu rutiiniksi – esimerkiksi kun hallinnoit useita asiakasprojekteja ja vaihdat visuaalista kanonia päivittäin. Lisätietoja MCP-palvelimien yhdistämisestä Claude Codeen on NotebookLM- ja MCP-oppaassa.
## Mitkä 4 virhettä rikkovat työnkulun?
Tärkein huomio
Ensimmäinen virhe on käyttää promptia ”tee siitä modernin näköinen” liittämättä DESIGN.md-tiedostoa (agentti palaa koulutusdatan keskiarvoon). Toinen on liittää DESIGN.md chattiin viestinä sen sijaan, että se sijoitettaisiin repositorioon (konteksti ei säily istuntojen välillä). Kolmas on valita brändin perusteella tietyn näytön ja tiheyden sijaan, esimerkiksi kopioida väljä markkinointiasettelu kirjanpitonäkymään. Neljäs on jättää DESIGN.md mainitsematta promptissa (agentti sivuuttaa sen, vaikka tiedosto olisi kontekstissa).
Nämä neljä virhettä toistuvat kuvatussa kokemuksessa suunnittelukontekstin käytöstä. Kukin vaikuttaa harmittomalta, mutta jokainen vie tuloksen takaisin tavalliseen Tailwind-mallipohjaan.
**Virhe 1. Prompti ”tee siitä moderni”.** Tämä on yleisin virhemalli. Ihmiset avaavat Claude Coden ja kirjoittavat: ”tee minulle SaaS-verkkosivusto, moderni tyyli, premium-ilme”. Tuloksena on tumma tausta ja violetti korostusväri. Koulutusdatassa sana ”moderni” yhdistyy kaikkiin vuosien 2022–2024 aloitussivuihin, jotka on rakennettu samasta mallipohjasta. Ilman DESIGN.md:n tarkkoja parametreja ”moderni” tarkoittaa ”keskivertoa”.
**Virhe 2. DESIGN.md:n liittäminen chattiin viestinä.** Joskus ihmiset kopioivat DESIGN.md:n Claude Coden chat-ikkunaan ja sanovat: ”tässä on tyyli, käytä sitä”. Se toimii yhden kerran – istunnon loppuun asti. Avaa uusi istunto (tai vaihda toiseen tehtävään, /clear), niin konteksti katoaa. Jos haluat tyylin säilyvän, tiedoston on oltava repositoriossa ja tuotuna `CLAUDE.md`-tiedostoon. Lue lisää siitä, miksi `CLAUDE.md` on pysyvän kontekstin perusta, [Claude-muistioppaasta](https://ailoot.ai/blog/fi/claude-memory-claude-md-auto-memory/).
**Virhe 3. Tyylin valitseminen, koska ”pidät siitä”.** Väljä Applen markkinointiviite voi olla huono asettelu sellaisenaan kiinteistönäkymään, jossa pitää näkyä 30 kohdetta. Tämä ei sulje pois Applelta johdettua typografiaa, palettia tai hierarkiaa. Mukauta välit ja rivitiheys tehtävään ja tarkista kohdenäytön koossa todella näkyvä tieto. Valitse nimenomainen viite tiheyden, sävyn ja yleisön mukaan, älä vain brändinimestä.
**Virhe 4. DESIGN.md:n mainitsematta jättäminen itse promptissa.** DESIGN.md voi olla repositoriossa, tuotu `CLAUDE.md`-tiedoston kautta ja agentin nähtävissä. Jos promptissa kuitenkin lukee vain ”rakenna verkkosivusto”, Claude voi valita vakiotavan viittaamatta tiedostoon nimenomaisesti. Tämä rivi sopii jokaiseen suunnittelupromptiin: ”Käytä täsmälleen tiedoston docs/DESIGN.md värejä, fontteja ja välistyksiä. Älä keksi omia arvoja – poimi ne tiedostosta.” Näin varmistetaan, että agentti käyttää DESIGN.md:tä sen ohittamisen sijaan.
Täsmälliset tokenit ovat heksakoodeja, fonttikokoja pt-yksiköissä ja DESIGN.md:n välistysyksiköitä. Luonnollista kieltä ovat sanat ”moderni”, ”premium”, ”puhdas” tai ”Applen kaltainen”. Täsmälliset tokenit toimivat; vapaamuotoiset sanat eivät.
## Mitä seuraavaksi?
Tärkein huomio
DESIGN.md on visuaalisen kanonin ensimmäinen rakennuspalikka, ei ainoa. Sitä voi kehittää kolmeen suuntaan: Claude Coden Frontend Design Skill tuo visuaalista palautetta kuvakaappausten avulla, Refero MCP auttaa työskentelemään säännöllisesti eri tyylien parissa, ja DESIGN.md:n voi yhdistää kontekstitekniikkaasi – jolloin agentti ensin lukee visuaalisen kanonin, sitten rakentaa sivun ja lopuksi tarkistaa tuloksen itse kuvakaappauksesta.
Nyt sinulla on perusprosessi: Claude Code + Referon DESIGN.md + 4 vaihetta = verkkosivusto ilman mallipohjaa. Tämä kattaa 70 % tarpeista. Loput 30 % ovat tilanteita, joissa tarvitaan lisää tarkkuutta, nopeutta tai varmennusta.
Kolme suuntaa jatkoon, kun perusteet ovat hallussa:
1. **Frontend Design Skill.** Tämä on Claude Coden virallinen skill, joka lisää visuaalisen palautteen. Agentti ottaa valmiiksi kootusta sivusta kuvakaappauksen Puppeteerilla, tarkastelee sitä ”silmillään” (näkömallilla), vertaa sitä DESIGN.md:hen ja ehdottaa itse korjauksia. Kyseessä on automaattinen ”prompti → koodi → kuvakaappaus → kritiikki → prompti” -silmukka. Hyödyllinen, kun sivu on monimutkainen etkä saa sitä kuntoon yhdellä kierroksella.
2. **Refero MCP tuotantotilassa.** Kun hallinnoit 3–5 projektia rinnakkain, DESIGN.md:n lisääminen kuhunkin projektiin käsin käy työlääksi. Refero MCP löytää projektikuvauksen perusteella 3 sopivaa tyyliä ja antaa sinun valita niistä. Se lyhentää uuden projektin aloituksen 30 minuutista 3 minuuttiin.
3. **Yhdistäminen Context Engineeringiin.** DESIGN.md on yksi kontekstiartefakteista. Sen rinnalla on yleensä `ARCHITECTURE.md` (projektin rakenne), `BRAND.md` (ääni ja sävy) ja `business/audience.md` (kohdeyleisö). Ne kaikki tuodaan `CLAUDE.md`-tiedostoon. Kun Claude rakentaa sivua, se hyödyntää visuaalisuutta, yleisöä ja tuotteen rakennetta. Tämä on pohjimmiltaan [Context Engineeringiä](https://ailoot.ai/blog/fi/context-engineering/) – järjestelmällistä työtä sen parissa, mitä annat agentille ennen pyyntöä.
Käytännön materiaalia: [Ailoot-dokumentaatio](https://ailoot.ai/docs/).
Käytännön materiaalia: [Ailoot-dokumentaatio](https://ailoot.ai/docs/).
Lisää materiaaleja ja työkaluja: [Ailoot](https://ailoot.ai/).
## Kysymyksiä tästä oppaasta: Verkkosivusto ilman mallipohjaa Claude Codella ja Refero DESIGN.md:llä
### Voiko Apple-viite toimia tiheässä SaaS-koontinäytössä?
Kyllä, jos mukautat sen tehtävään. Käytä sopivaa palettia, typografiaa, hierarkiaa ja hillittyä liikettä, mutta määritä tiiviit rivikorkeudet, välit ja tietotiheys nimenomaisesti väljän markkinointiasettelun kopioimisen sijaan.
### Miksi tallennettu DESIGN.md ei vieläkään vaikuta uuteen sivuun?
Tarkista tiedoston olevan repositoriossa, tuotuna CLAUDE.md:stä ja nimettynä nimenomaisesti designpyynnössä. Pyydä sen todelliset väri-, fontti- ja väliarvot ja vertaa renderöityä sivua tarkoitettuun viitteeseen.
## Ailoot · Yritys ja sen projektisalkku
Ailoot perustuu kertyneeseen toimintakokemukseen, laajaan asiakaskuntaan, vakaaseen palveluun ja jatkuvaan KPI-seurantaan.
Yritys ja sen projektisalkku: miljoonia asiakkaita; kuukausittainen myynti miljardiluokassa.
Ailoot hyödyntää tätä toimintakokemusta tarjotessaan API-yhteyden tekoälytoimintoihin asiakkaiden tuotteissa, agenteissa, sovelluksissa ja automaatioissa.