A Vercel design.md fájllal tanítja ügynökeit márkahű oldalak készítésére

Egyetlen fájl a kódbázison kívüli munkákhoz

A Vercelnél kódoló ügynököket használnak olyan oldalak megtervezésére és elkészítésére, amelyeknek a vállalat saját felületeihez hasonló megjelenést és hangulatot kell követniük. Ehhez korábban a product-design nevű képességet alkalmazták, amely az adott kódtárban található tervezési rendszert és termékirányelveket ismerteti az ügynökökkel.

Ez a módszer jól működik a Vercel kódbázisaiban, de nem segít azoknál a jelentéseknél, ajánlatoknál és egyszeri oldalaknál, amelyeket olyan eszközökben készítenek, amelyek nem férnek hozzá ezekhez a fájlokhoz. A Vercel erre hozta létre a design.md fájlt, amelyet bármely ügynök egy nyilvános URL-ről betölthet.

A vállalat célja az volt, hogy az útmutató egyaránt lefedje a márkát, az elrendezést, a szövegírást, a reszponzív működést, az információs architektúrát és a tervezési rendszert. Az első próbálkozás során egyszerűen nyilvános prompttá alakították a product-design tartalmát, ez azonban nem bizonyult elég megbízhatónak.

A puszta vizuális leírás kevésnek bizonyult

A Vercel tapasztalata szerint ugyanazt a promptot a különböző modellek eltérően értelmezték, ezért jelentősen különböző oldalakat készítettek. Az olyan kifejezések, mint a „tartsd tisztán az elrendezést”, nem adnak elég konkrét iránymutatást, mivel a „tiszta” megjelenés többféleképpen értelmezhető.

A kódbázisban dolgozó ügynökök ráadásul nemcsak szöveges leírást olvasnak, hanem valós komponenseket és már elkészült példákat is látnak. Egy nyilvános promptból ezek hiányoznak, így a modelleknek kizárólag a szavak alapján kell újraalkotniuk a stílust.

A Vercel ezért új fájlt kezdett írni, és minden módosítást rögzített tesztesetekkel ellenőrzött. Hét, valós felhasználási esetekből származó forgatókönyvet állítottak össze: használati és teljesítményjelentést, megújítási ajánlatot, benchmarkjelentést, interaktív tervezési oldalt, build-versus-buy összefoglalót, biztonsági irányítási összefoglalót és prezentációs diákat.

A promptok változatlanok maradtak, miközben a design.md módosult. Így az eredmények közötti különbségeket az útmutató változásaihoz tudták kötni.

A design.md a szerkezetet is befolyásolja

Az első összehasonlításban ugyanazt a megújítási ajánlatot kétszer készítették el azonos környezetben és modellel. A prompt, az adatok és a megjelenítési terület is megegyezett, az egyetlen eltérés az volt, hogy az egyik futtatásban az ügynök megkapta a design.md fájlt.

Az útmutató nélkül egy általános SaaS-irányítópult készült. A design.md használatával az oldal a megújítási javaslattal kezdődött, a kereskedelmi bizonyítékokat egyetlen rácsba rendezte, az összehasonlítható értékeket közös skálára helyezte, a részleteket pedig úgy tette elérhetővé, hogy azok ne versenyezzenek az összefoglalóval.

A Vercel ebből arra következtetett, hogy a fájl nemcsak a stílust módosítja, hanem az oldal szerkezetére és hierarchiájára is hatással van.

Három rétegből áll a Vercel rendszere

A kísérletek során a megoldás három részből álló rendszerré fejlődött. A design.md azt írja le, hogyan kell az oldalnak az olvasó feladatát értelmeznie, a bizonyítékokat strukturálnia és a kompozíciót kiválasztania. Az útmutató tanácsokat ad többek között a gyors vezetői áttekintés és a részletes ellenőrzés együttes támogatásához, a konkrét állításokat és őszinte korlátozásokat tartalmazó szövegekhez, valamint a Vercel szóvédjegyének és háromszöglogójának használatához.

A második elem egy nyilvános stíluslap. Ez dokumentált osztályokat és tervezési tokeneket tartalmaz, valamint olyan alapvető elemeket csomagol CSS-be, mint a fejlécek, táblázatok, statisztikai sávok és diagramstílusok. A design.md megnevezi ezeket az osztályokat és tokeneket, így az ügynökök használhatják őket a HTML-ben, ahelyett hogy saját tipográfiát, térközöket és elrendezést találnának ki. A stíluslap kódja nem kerül a modell kontextusába, mivel a böngésző tölti be az oldal megjelenítésekor.

A harmadik elem az értékelési ciklus. A mechanikus hibákat, például a rendelkezésre álló szélességet figyelmen kívül hagyó táblázatokat, determinisztikus ellenőrzésekkel keresik. A hierarchiát, a kompozíciót és azt, hogy az oldal valóban választ ad-e az olvasó kérdésére, emberek értékelik.

A hét forgatókönyvet Claude Opus 4.8 és Codex with GPT-5.5 használatával futtatják. Egy teljes kör mind a hét forgatókönyv friss oldalainak elkészítését jelenti, a speciális változtatásokat pedig csak az érintett eseteken vagy egyetlen modellen is újra lehet futtatni. A Vercel szerint a közös vizuális nyelv nem kényszeríti az oldalakat azonos sablonba: a tervezési oldal a vezérlőket emeli ki, a megújítási ajánlat pedig a döntéshez szükséges javaslattal kezdődik.