Ingyenes beállítási útmutató
Csinálj a Claude-ból webdesignert
A Claude Code tud olyan oldalt tervezni, ami nem néz ki AI-generáltnak. Öt ingyenes dolgot telepítesz, bemásolsz egy promptot, és leírod, milyen oldalt akarsz. Itt vannak a pontos parancsok, sorrendben, a linkekkel együtt.
Az általános AI-kinézet ellen
Alapból minden AI-oldal ugyanúgy néz ki: lila átmenet, középre zárt hero, kártya a kártyában. Ezek a skillek valódi elrendezést, tipográfiát, térközöket és mozgást tanítanak a Claude-nak, így a végeredmény tervezettnek látszik, nem generáltnak.
Az egész stack ingyenes
Mind a három skill nyílt forráskódú és ingyenes, a két csatlakozó sem kerül semmibe. Egyszer telepíted, és onnantól minden projekt örökli.
Leírod, és megépül
A telepített stackkel egy mondatban leírod, milyen oldalt akarsz. A Claude megtervezi, megépíti, és egy valódi böngészőben ki is próbálja magától.
Mi van benne
- A három design skill, egysoros telepítő paranccsal: Emil Kowalski skilljei, Impeccable, Taste Skill
- A két csatlakozó: Figma MCP a design-kontextushoz, Playwright MCP, hogy a Claude lássa, amit épített
- A telepítés pontos sorrendje, hogy semmi ne ütközzön
- A tíz másodperces ellenőrzés, hogy tényleg betöltöttek-e
- Az indító prompt, ami már elsőre használható oldalt ad
Kérdések
Nem. Mindegyik skill egy bemásolt paranccsal települ, onnantól magyarul beszélsz a Claude-dal. A kódot ő írja.
A három skill ingyenes és nyílt forráskódú. A Figma MCP a Figma ingyenes csomagjával is működik, a Playwright MCP szintén ingyenes. A meglévő Claude-előfizetéseden túl nem kell semmi.
Igen. A skillek a nyílt agent-skills formátumot követik, így Cursorban, Codex CLI-ben és a legtöbb AI kódoló eszközben is mennek. Ez az útmutató a Claude Code útvonalat mutatja.
Egy rövid utasításfájl, amit az AI a munka előtt elolvas. Ezek azt kódolják le, ahogy egy jó designer gondolkodik elrendezésről, tipográfiáról, térközről és mozgásról, és a Claude ezt alkalmazza mindenre, amit épít.