Design-rendszer építő

Mire jó

Minden új anyagnál elölről dől el, milyen kék legyen a gomb, milyen betűvel megy a cím, és hogyan szólítod meg az olvasót. A weboldalad, az ajánlat-PDF-ed és a legutóbbi posztod így három különböző cégnek látszik.

A tét nem esztétikai kérdés. Ha az érdeklődő nem ismer rád két felület között, minden anyag nulláról kezdi építeni a bizalmat.

Ez a skill leírja a szabályokat, és fájlokba teszi őket. A kész mappában 11 alapdokumentum ül (szín, tipográfia, hangnem, szóhasználat, mozgás, képi világ), háromféle token-formátum, a logó változatai, kész React-komponensek és 7 felületenkénti útmutató.

Két úton dolgozik. Nulláról induló brandnél kutat és javaslatot ír konkrét színkódokkal, meglévő vállalkozásnál a weboldaladból és a kiadott anyagaidból nyeri ki a valós értékeket.

Kinek hasznos

• Szolgáltatóknak, akik évek óta viszik a brandjüket, de sosem írták le a szabályait
• 2–10 fős csapatoknak, ahol többen készítenek anyagot, és mindenki mást ért „a mi kékünkön”
• Most induló vállalkozásnak, ahol a vizuális irány még nyitott, és nem akarod fél év múlva újrakezdeni
• Annak, aki naponta gyártat anyagot AI-jal, és unja minden promptba bemásolni a színkódot

Kinek nem való

• Terminál nélkül el sem indul. Három parancssori eszközre épül, és ha bármelyik hiányzik, inkább megáll, mint hogy kitalált színkódokat írjon a fájlokba.
• Aki az API-kulcsos eszközöket elvből kerüli, itt megakad: a weboldal-beolvasáshoz saját kulcs kell.
• Egyetlen bannerhez vagy logóhoz túl nagy apparátus. Ott hamarabb célhoz érsz egy sima kéréssel.
• Kész arculati kézikönyv mellett duplikáció: azt fordítja gépi formátumra, ami már eldőlt.

Mit csinál lépésről lépésre

1. Ellenőrzi a három előfeltétel-eszközt, és ha bármelyik hiányzik, megáll, kiírja a telepítő parancsot, és megvárja a visszajelzésedet.
2. Egyetlen kérdéssel eldönti, melyik ágon vagy: új brand nulláról, vagy kinyerés működő vállalkozásból.
3. Új brandnél végigkérdezi az üzletet és a referenciáidat, majd szintézis-dokumentumot ír hex-kódokkal és betűpárral, öt jóváhagyó kérdéssel.
4. Meglévő brandnél beolvassa a weboldaladat, átfésüli a munkamappádat kiadott anyagok után, és összeveti a talált értékeket azzal, amit te mondtál.
5. A valódi anyagaidat sablonként másolja be, a logót pedig úgy rendereli, ahogy van: díszítést nem told rá.
6. Legenerálja a mappát, és minden döntést a 10 beépített szabályhoz mér: egy vezérszín, egy betűcsalád, mondat-kezdőbetűs címek, hype-szavak tiltása, minden állítás mellé szám vagy név.
7. Két beilleszthető szövegblokkot ad a Claude Design űrlapjához: egy 80 szó alatti cégleírást és egy 200–300 szavas jegyzetet.

Mit tartalmaz a csomag

• SKILL.md: a kétágú folyamat, a hűség-szabályok (valódi anyag a szintetikus előtt) és a 10 design-alapelv
• references/setup.md: az előfeltétel-eszközök diagnosztikája és telepítése
• references/branch-a-fresh.md és references/branch-b-extract.md: a két ág teljes forgatókönyve
• references/output-structure.md: mit tartalmazzon a kimeneti mappa minden fájlja
• references/non-negotiables.md: a 10 design-törvény indoklással, hogy vitatkozni is tudj velük
• references/claude-design-form.md: az átadó szöveg pontos formátuma
• assets/templates/: token-sablonok, React-komponensek, logó- és mintafájlok, közösségi sablonok
• scripts/render.mjs: az SVG logók és sablonok raszteres képpé renderelése
• evals/evals.json: tesztesetek a skill viselkedéséhez

Hogyan használd

Akkor vedd elő, amikor észreveszed, hogy két saját anyagod nem néz ki egy cégtől valónak, vagy amikor új felületet indítasz, és nem akarod megint kitalálni a stílust. Készítsd elő a weboldalad címét, a logót a legjobb minőségben, a betűtípusok nevét, és a mappát, ahol a korábbi anyagaid ülnek. Kezdd egy mondattal: „Építsük fel a design-rendszeremet a weboldalamból kiindulva.”

A szintézis-dokumentumnál állj meg. Itt dől el a szín, a betű és a hangnem, és ezen a ponton még olcsó nemet mondani. Ha nem tetszik, kérj másik irányt, ne a kész mappán javítgass.

A végén egy design-system/ mappát kapsz. Innentől bármelyik anyag-kérésnél elég rámutatnod, és új felületnél az applications/ mappa bővíthető.

Ha a kész design-rendszert utána egy saját skillbe kötnéd be, az első skilled megépítését ebben az anyagban lépjük végig.

Jó tudni

Három külső eszköz kell hozzá, és a skill mindhármat ellenőrzi indulás előtt. A Firecrawl parancssori eszköz végzi a weboldal-beolvasást, ehhez regisztráció és saját API-kulcs szükséges. Az extract-design-system a CSS-ből számolt valós értékeket szedi ki, ehhez a Playwright Chromium böngészőjét tölti le a gépedre. A Playwright Node-csomag a logók képpé renderelését végzi.

A skill szándékosan makacs: ha egy eszköz hiányzik, nem tippel helyette. A kitalált színkód rosszabb, mint a hiányzó.

A 10 szabály néha vitába száll veled: ha három vezérszínt kérsz, javasol helyette egyet. Felülbírálhatod, csak tudatos döntés legyen. A generált fájlok magyarul készülnek, a technikai kulcsok kivételével.

Telepítés

1. Töltsd le a csomagot a fenti gombbal.
2. claude.ai vagy Claude Desktop: Beállítások → Képességek (Capabilities) → Skillek → töltsd fel a letöltött zipet.
3. Claude Code: csomagold ki a zipet a projekted .claude/skills/ mappájába (vagy globálisan a ~/.claude/skills/ alá).
4. Ezután írd le a feladatot a saját szavaiddal — a skill automatikusan aktiválódik. Ha biztosra mennél, hivatkozz rá névvel.