hogyan épül az learnthevibe.com

Ez az oldal magát építi, és közben logolja. Amit most olvasol, az a learnthevibe-hub build nyersanyaga: minden agent-futás, minden szám, minden hiba. A recipe in-progress: a deploy még hátravan, a számok a build lezárásakor véglegesednek.

A költség $0: a teljes munka Claude Code Max planből ment, közvetlen API-díj nélkül. Amit mérni tudunk, az a token és az idő, azt mérjük.

a spec

Két doksi vezérelt, ember nem nyúlt a kódhoz:

• PRD.md (v1.1), mit és miért: a flywheel-modell (BUILD → SHOW → SELL → LOOP), a zéró-emberi-kontakt elv, a kétnyelvű hub döntése.
• DESIGN.md (akkor v1.1), hogyan néz ki: „terminal proof" esztétika, mono display (JetBrains Mono), terminál-zöld accent (#3FB950), 21 anti-pattern. Ez azóta három iteráción át a v2.1-ig jutott – a teljes fordulat lent, a saját fejezetében, mert az maga is tanulság.

A DESIGN.md kutatása: 4 párhuzamos exa keresés + élő CSS scrape curl-lel a Linear, a Vercel és a Raycast valódi tokenjeiről + firecrawl branding-scrape (strukturált JSON + teljes oldalas screenshotok). A versenytársak valódi CSS-e többet ért, mint a trend-cikkek: a token-értékek nem becslések, hanem mért adatok.

A két fájl egyben az agent-instrukció: a token-frontmatter a globals.css-be fordult, az anti-pattern lista pedig a verify-kapu.

a workflow

Három workflow rakta össze a hubot. Mind párhuzamos agent-futás, Claude Code orchesztrálva.

learnthevibe-foundation: 6 agent, 9,2 perc. Az alap: i18n (next-intl, HU az /-en, EN a /en-en), a design tokenek globals.css-be (DESIGN.md frontmatter → Tailwind v4 @theme), a CLAUDE.md, a BUILD-LOG.md és az MDX pipeline (gray-matter parse, content/{type}/{slug}.{locale}.mdx konvenció, locale- fallback).

learnthevibe-components-pages: 10 agent, 18 perc. A felület: 10 proof- és layout-komponens (TypedHeadline, ProofStat, CostBadge, BuildMeta, TerminalBlock, RecipeTimeline, AgentTag, GridLines, StatusBadge + layout), 6 oldal HU+EN-ben, a teljes copy és egy verify-kör. A verify 17 route-ot tesztelt runtime-on, a DESIGN.md 21-pontos anti-pattern listája alapján: 0 sértés.

learnthevibe-finish-quality: folyamatban. Resend hírlevél, AX réteg (llms.txt, agent-readiness) és a záró minőség-kapu. Utána jön a deploy.

A komponenseket előbb, az oldalakat rájuk: ez párhuzamosíthatóbb, mint oldalanként vertikálisan haladni.

a számok

workflow                      agent   tool-hívás   idő      token
─────────────────────────────────────────────────────────────────
learnthevibe-foundation              6        103       9.2m     344 044
learnthevibe-components-pages       10        381        18m   1 165 581
learnthevibe-finish-quality          –          –          –   folyamatban
─────────────────────────────────────────────────────────────────
mért összesen (2 UI-workflow)  16        484       27m   1 509 625

emberi idő (irányítás)        ~4.5h
kézzel írt kód                    0 sor
közvetlen költség                $0  (Max plan)

A git log öt commitja a teljes Fázis 0: scaffold → deps → foundation → ui → fix. A részletes log: [BUILD-LOG.md a repóban].

a design-fordulat (v1.1 → v2.1)

A design nem egy döntés volt, hanem négy kör. Mindegyikben az ember döntött, az agent épített és mért:

• v1.2 – „túl puritán". A v1.1 szigorú tiltásai lapos, üres oldalt adtak. Tanulság: az atmoszféra (glow, grain, grid-vonal) nem dísz, hanem kötelező réteg lett a doksiban.
• v1.3 – AI-slop audit. Egy külön audit-kör 5 telített AI-mintát talált a saját oldalunkon (számozott szekció-scaffold, eyebrow-spam, stat-grid). Tanulság: a Lineartől másolt minta is lehet AI-grammar, ha nincs mögötte jelentés. Az anti-pattern lista 21-ről 25-re nőtt.
• v2.0 – a zöld halála. A founder kimondta: a zöld terminál-esztétika „nem best in class". Három vizuális variáns után a döntés: Vercel DNA monokróm – nincs brand-szín, a fehér↔fekete kontraszt a brand, a karaktert a Bricolage Grotesque display adja. A #3FB950 teljes törlése: anti-pattern #26.
• v2.1 – best-in-class audit + termék-register. Mérce-sértések a saját kódunkban: a hero headline egy ad-hoc clamp() értéket használt a token helyett, ezért a doksi-módosítás vizuálisan semmit nem csinált. Javítva: két tiszta sorba törő headline, tracking-padló, 96px display-plafon. Új réteg: a tanuló-felület szabályai (monokróm-luminancia kód-séma, fénysín, AgentTranscript). Mért eredmény: Lighthouse performance 97, accessibility 100, CLS 0.

A számokban: a 30 tételes anti-pattern lista fele saját hibából született, nem előrelátásból. Ettől szabálylista és nem ízlés-doksi.

ami elromlott

Őszintén, mert ettől recipe és nem marketing:

• pnpm build jóváhagyási körök. A build több kézi approval-kört kért, mielőtt zölden lefutott; a harness-engedélyek nem voltak előre beállítva. Idő ment el a megszakításokra.
• React 19 FormEvent deprecation. A hírlevél-űrlap a régi tipizált FormEvent handlert használta, amit a React 19 már nem szeret. Külön fix-commit (d2e2fd8) cserélte inferált inline handlerre.
• A sips crop-probléma a design-kutatásnál. A versenytárs-screenshotok kivágása sips-szel nem a várt régiót adta; a firecrawl teljes oldalas képei oldották meg, nem a kézi crop.
• Ad-hoc érték a legszigorúbb ponton. A hero headline nem a design-tokent használta, hanem egy beégetett clamp()-et – így a token-módosítás vizuálisan semmit nem változtatott, és ez csak screenshot-összevetésen bukott ki. A saját anti-pattern szabályunkat (#19) a saját kódunk sértette.
• Dark-ra égetett header. A sticky header háttere rgba(10,10,11,0.72) hardcode volt: light módban olvashatatlan nav. A light módot senki nem nézte meg vizuálisan a v2.1 auditig. Javítás: --header-bg token mindkét módban.

tanulságok

• A design-doksit gépi olvashatóságra tervezd: a DESIGN.md token-frontmatterét egy az egyben le lehetett fordítani CSS-változókra. Megtérült.
• A verify-agent külön fusson, a saját anti-pattern-listájával. Ez fogta meg a sodródást, nem a "nézd át a végén" remény.
• Az engedélyeket állítsd be előre. A pnpm build approval-körök elkerülhetők lettek volna.
• Mérj tokent és időt, ne ígérj sebességet. A $0 költség valós, de a 27 perc gép-idő és a ~4,5 óra emberi irányítás is az.
• Az agent nézze meg, amit csinált: minden vizuális változás után screenshot, és a screenshotot tényleg ki kell értékelni. A token-bug és a light-header is így bukott ki, nem kód-olvasásból.
• A design-doksi verziótörténete tananyag: a v1.1 → v2.1 út (mikor, mit, miért írtunk felül) többet tanít, mint a végállapot.

a kinyert assetek

A melléktermékek, amik később asset packbe kerülnek:

• DESIGN.md mint agent-olvasható design-rendszer formátum (tokenek frontmatterben, ízlés prózában, tiltások az anti-patterns szekcióban)
• CLAUDE.md projekt-instrukciós template (doksi-hierarchia + skill-protokoll + anti-pattern-kapu)
• skill-betöltési protokoll: munkatípus → kötelező skillek mátrix
• versenytárs CSS-scrape módszertan: curl a valódi tokenekért + firecrawl branding-format + teljes oldalas screenshot
• recipe-formátum template (ez a hét szekció maga)

reprodukálás

Ha ugyanezt akarod:

1. Írj egy PRD.md-t (mit és miért) és egy DESIGN.md-t (hogyan néz ki). A DESIGN.md tokenjei legyenek gépi-olvasható frontmatterben, a tiltások egy anti-pattern listában.
2. Scaffold: Next.js 16 + TypeScript strict + Tailwind v4 + pnpm + shadcn.
3. Foundation-workflow: i18n + a DESIGN.md tokenek globals.css-be + MDX pipeline. Párhuzamos agentek.
4. Components-then-pages workflow: előbb a proof-komponensek, aztán az oldalak, végül egy külön verify-agent az anti-pattern listával.
5. Logolj minden futás után a BUILD-LOG.md-be: agent-szám, token, idő, ami elromlott. Ebből lesz a következő recipe.