i18n hoitaa käännökset.
KDF hoitaa designin.
Molemmat asuu JSONissa.
JSON-pohjainen designin koordinaatiokerros server-side-webbisoftsille ja tekoäly-avusteiseen UI-koodaamiseen. Toistuvat päätökset — layout, spacing, typografia, komponenttien tyylit — löytyy yhdestä sorsasta, jota sun agentit pystyy lukeen sen sijaan et ne keksis pyörää uudelleen eri tiedostoissa, sivuilla ja sessioissa.
{ "$layout": ["hero", "footer"], "hero": { "wrapper": "mx-auto max-w-6xl px-6 py-20", "title": "@typography.h1", "cta-primary": "@button.cta" } }
Yksi source of truth pitää huolen siitä, et jokainen sivu, komponentti ja agenttisessio on yhdenmukainen.
JSON määrittelee · koodi renderöi · data-kdf mäppää takas
Design alkaa rönsyillä
sun komponenteissa.
Kun class-namet elää vaan .tsx-tiedostojen sisällä, jokainen sivu lähtee pikkuhiljaa elämään omaa elämäänsä. Tää on fine jos koodaa yksin — mut se hajoo käsiin heti kun agentit alkaa koskeen sun UI:hin.
<section className="mx-auto max-w-6xl px-6 py-20"> <h1 className="text-5xl font-semibold tracking-tight"> // …and again, slightly different, on the next page
Sama nappi saa vaivihkaa viis eri varianttii. Välit muuttuu sivu sivulta. Jokaisen uuden agenttisession pitää oppii säännöt alusta alkaen.
- — Agentit sooloilee värien, välien, typografian ja layoutin kans.
- — Käyttäjät joutuu korjaan lopputuloksen chatissa, joka ikinen kerta.
- — Muutosten takii joutuu penkomaan läpi kasan komponenttitiedostoja.
- — Toistuvat sessiot kadottaa alkuperäisen designin idean.
→ loputonta "isompi" · "enemmän sinistä" · "siirrä vasemmalle" iteraatioo
Tee designista eksplisiittistä.
KDF tekee designille saman minkä i18n teksteille: se siirtää toistuvat päätökset pois komponenttitiedostoista suoraan JSONiin. Renderöity UI käyttää edelleen ihan normaalia CSS:ää — ainoo mikä muuttuu on se kuka sen omistaa.
{ "hero": { "title": "text-5xl font-semibold tracking-tight" } }
const d = getDesign("homepage"); <h1 data-kdf="hero.title" className={d("hero.title")}>
Kirjasto sanoo mikä.
KDF sanoo mikä niistä.
Design-kirjasto antaa sulle Buttonin. KDF taas kertoo, et tää on homepage.hero.cta-primary, joka renderöidään Buttonina ja tyylitellään tällä tokenilla. Se lisää sen yhden mäppäyksen, minkä kirjastot aina unohtaa — elementistä design-päätökseen.
Kuusi symbolia.
Yksi kielioppi.
KDF tallentaa class-namet, jaetut referenssit, sectionien järjestyksen ja CSS custom propertiesit. Se ei koskaan tallenna liiketoimintalogiikkaa, event handlereita, datan hakua, oikeuksia tai saavutettavuusjuttuja.
Jokainen tokenia käyttävä elementti kantaa mukanaan vastaavaa polkua. DOM-nodet pystyy jäljittään suoraan JSONiin — helppoo scannereille, testeille ja agenteille.
Resolvaa polun className-stringiksi. d.css() palauttaa CSS custom properties -objektin.
Osoita uudelleenkäytettävään tokeniin shared/-kansiossa. Refsit voi ketjuuntua ja laajentua extra-classeilla.
Array section-avaimia. Listatut sectionit renderöidään järjestyksessä; puuttuvat piilotetaan softan toimesta.
Metadataa agenteille ja host-työkaluille — mikä komponentti renderöi tän tokenin, ja variantti- ja kokohintit.
Arvot, joita ei voi ilasta uudelleenkäytettävinä classeina. Laitetaan inline-tyylimuuttujiksi d.css():n kautta.
Jaetut defaultit.
Sivukohtaiset overridet.
Design-tokenit asuu kahdessa paikassa: uudelleenkäytettävät defaultit shared/-kansiossa ja sivukohtainen kompositio, joka ylikirjoittaa vaan sen mitä tarvii. Kaks sun omaa CSS-tiedostoo hoitaa first paintin ja hätäratkaisut.
kdf/ shared/ button.json ← reusable defaults card.json color.json typography.json homepage.json ← page composition konde-server.css ← critical, first paint konde.css ← non-critical tweaks
Referenssi kuten @button.cta resolvaa ensin sivun shared/:sta, sitten parentin shared/:sta ja sit sivun tokeneista. Templatet ylikirjoittaa vaan tarvittavat osat ja perii loput.
Design resolvaa serverillä;Selain saa valmiit class-stringit. Kriittinen CSS tulee jo ekaan ruudunpäivitykseen (first paint), loppu latautuu myöhemmin — renderöintitaakkaa ei kaadeta hitaille laitteille.
Softan importtaama, jotta design-muuttujat ja no-FOUC overridet tulee suoraan first paintissa — ennen ku mikään ehtii välähtää.
/* konde-server.css */ :root { --kdf-primary: #1F8F47; } [data-kdf="hero.slider"] { display: none; }
Ladataan frameworkin ja appin CSS:n jälkeen pikkusäätöjä, testejä ja hätäfiksauksia varten — hiomista, jonka ei ikinä tarvii blokata piirtämistä.
/* konde.css */ [data-kdf="hero.title"] { letter-spacing: -0.02em; } [data-kdf="hero.wrapper"] { gap: 3rem; }
→ KDF luo molemmat kerran eikä ikinä ylikirjoita niitä. Plugin paljastaa niiden polut env-muuttujissa - sun softa hoitaa importit; mitään ei injektoida väkisin.
Vaihda design
yhtä helposti ku kieli.
Samalla tavalla kun i18n vaihtaa kieltä, KDF vaihtaa design-templateja. Sama softa, samat komponentit, sama koodi — osoita vaan KDF_DIR uuteen design-kansioon ja koko lookki muuttuu.
designs/ lander/ shared/ homepage.json newlander/ shared/ homepage.json
// next.config.ts withKDF({ dir: "./designs/lander" })(nextConfig);
Resolvaa serverillä.
Syötä stringit alaspäin.
KDF core lukee JSONia levyltä, eli se pyörii server-sidellä: Next.js Server Componenteissa, Astron rendereissä, Honon handlereissa. Resolvaa classit siellä ja heitä sit puhtaat stringit client-komponenteille.
import { getDesign, cn } from "@kondeio/kdf"; const d = getDesign("homepage"); <button data-kdf="hero.cta" className={cn(d("hero.cta"), isActive)}>Start</button>
→ resolvattu className-stringi
→ CSS custom-properties -objekti
Yhdistä ehdolliset classit, droppaa falsyt arvot, poista tuplakappaleet — ilman mitään kummempia semantiikkoja oletuksena.
Tuotannossa kätköttää; devauksessa revalidoi mtimen ja koon mukaan.
Se istuu
sun stäkin päällä.
TYYLITTELY — TALLENTAA CLASS-NIMIÄ, EI CSS:ÄÄ
KDF ei oo mikään CSS-engine. Tokenit pitää sisällään mitä tahansa class-stringejä sun tyylisysteemi ikinä tajuukaan. Jos sun framework skannaa sorsatiedostoi, osoita se myös noihin JSONeihin: @source "../kdf/**/*.json".
RUNTIME — SERVER-SIDE JAVASCRIPT
Asenna kerran.
Init hoitaa loput.
Asennus generoi myös aloitustemplaten kdf/-kansioon, jos sellasta ei oo jo valmiiks olemassa. Olemassa olevia tiedostoi ei ikinä ylikirjoteta.
import withKDF from "@kondeio/kdf/plugin"; export default withKDF({ dir: "./designs" })(nextConfig);