Tuttu ongelma: Pyydät AI-koodausagenttia rakentamaan uuden sivun, ja se keksii omia tyylejä. Värit eivät täsmää, napit näyttävät erilaisilta, ja fonttikoot vaihtelevat mielensä mukaan. Design-järjestelmä josta sovit tiimin kanssa unohtuu heti kun agentti alkaa kirjoittaa koodia.
Ongelma ei ole agentin älykkyydessä. Se on kontekstissa -- tai sen puutteessa.
Tässä oppaassa käymme läpi viisikerroksisen rakenteen joka pakottaa AI-agentin noudattamaan design-järjestelmääsi. Ei suosituksia vaan pakotteita. Jokainen kerros vahvistaa edellistä.
Miksi agentit eivät noudata design-järjestelmiä
AI-koodausagentit tekevät sitä mitä niille kerrotaan. Jos niille ei kerrota mitään design-järjestelmästä, ne tuottavat koodia joka näyttää toimivalta mutta ei noudata mitään yhtenäistä linjaa.
Agentti ei ole laiska eikä kapinallinen. Sillä ei yksinkertaisesti ole tietoa siitä, millaisia komponentteja projektissa käytetään, mitkä värit kuuluvat palettiin tai miten napit käyttäytyvät eri tiloissa. Se ratkaisee ongelman nopeimmalla tavalla jonka löytää -- ja se tarkoittaa usein inline-tyylejä, kovakoodattuja arvoja ja uusia komponentteja vanhojen sijaan.
Viisikerroksinen rakenne ratkaisee tämän antamalla agentille kaiken tarvittavan tiedon, oikeassa muodossa, oikeaan aikaan.
Kerros 1: Design-tokenien dokumentointi
Ensimmäinen kerros on yksinkertaisin mutta tärkein. Kirjoita design-järjestelmäsi tokenit -- värit, fontit, välistykset, pyöristykset, varjot -- tiedostoon jonka agentti löytää aina.
design-tokens.md
## Värit
- Primary: hsl(221, 83%, 53%) / #3b82f6
- Secondary: hsl(215, 20%, 65%) / #94a3b8
- Background: hsl(222, 47%, 11%) / #0f172a
- Surface: hsl(217, 33%, 17%) / #1e293b
- Text: hsl(210, 40%, 98%) / #f8fafc
- Accent: hsl(187, 92%, 69%) / #22d3ee
- Error: hsl(0, 84%, 60%) / #ef4444
## Typografia
- Fontti: Inter
- H1: 2.25rem / font-bold
- H2: 1.5rem / font-semibold
- Body: 1rem / font-normal
- Small: 0.875rem / font-normal
## Välistykset
- xs: 0.25rem
- sm: 0.5rem
- md: 1rem
- lg: 1.5rem
- xl: 2rem
## Pyöristykset
- Napit: 0.5rem
- Kortit: 0.75rem
- Modaalit: 1rem
Olennaista on muoto. Tiedoston pitää olla selkeä, jäsennelty ja yksiselitteinen. Älä kirjoita proosaa -- kirjoita spesifikaatioita. Agentti ei tulkitse "pehmeän moderni ilme" -kuvausta samalla tavalla kuin sinä.
Kerros 2: Komponenttikirjasto ja sen säännöt
Toinen kerros kertoo agentille mitä komponentteja projektissa on ja miten niitä käytetään.
Jos käytät shadcn/ui:ta ja Tailwind CSS:ää, sinulla on jo komponenttikirjasto. Ongelma on, ettei agentti tiedä siitä ellei kerro. Luo tiedosto joka listaa jokaisen komponentin nimen, käyttötarkoituksen ja importtipolun.
Tilaa AI-Sanomien Plus-jäsenyys niin näet loput sisällöstä
Tilaamalla AI-Sanomien maksullisen jäsenyyden saat pääsyn kaikkiin uutiskirjeen sisältöihin sekä tuet Suomen parasta AI-mediaa.
Tilaa jäsenyys tästä! Voit lopettaa koska tahansa.Miksi tilaus kannattaa?:
- Pääsy kaikkiin maksullisiin oppaisiin
- Webinaari-tallenteet
- Näet kaikki uutiskirjeen sisällöt, uudet AI-työkalut sekä vinkit tekoälyn käyttöön.
- GPT4o-botti: Tämä on tietoturvallinen versio ChatGPT:stä, jossa syöttämääsi dataa ei käytetä kielimallin kouluttamiseen.
- Tuet Suomen parasta AI-mediaa 😊
