0.8.6 PDP polish + real-defaults · máj 2026

Tokens, templates,
prototypy.
Bez buildu.

Design system pre NaMaximum / Greenmedical eshop. Vanilla HTML, CSS, JSON. Reálne PDP a cart layouty s reálnymi DB dátami z produkcie. Konzument: Venalio Greenmedical (Nette + Latte) cez git subtree.

Otvoriť desktop PDP → Všetky templates AGENTS.md
50
variantov WPC 80
z prod DB
28
live tweakov
v paneli
41
design tokenov
v tokens.css
0
npm deps
(vanilla)

V repe

Štyri funkčné HTML referencie. Každá samostatne otvoriteľná v prehliadači, bez build kroku. JSX prototypy v prototypes/ obsahujú stav a logiku.

PDP desktop
100% coverage 14 sekcií
PDP mobile
100% coverage v0.8.6 mobile-annotation-trio
Cart desktop
refresh v0.8 jun 2026
Cart mobile
refresh v0.8 jun 2026

Použiť v projekte

Tri kroky. Žiadny npm install, žiadny config, žiadny bundler.

  1. 1

    Načítaj tokens

    Pridaj do hlavičky projektu. Tokens sú jediný zdroj pravdy pre farby, fonty, spacing.

    <link rel="stylesheet" href="vendor/greenmedical-ds/tokens.css">
  2. 2

    Skopíruj fonty

    Montserrat (heading) + Satoshi (body) ako woff2. @font-face deklarácie sú v tokens.css.

    cp -r vendor/greenmedical-ds/assets/fonts/ public/assets/fonts/
  3. 3

    Vyber HTML blok

    Otvor relevantný template v templates/, skopíruj sekciu, adaptuj na cieľový framework (Latte / JSX / Vue). Zachovaj všetky var(--...) referencie.

    greenmedical-ds/templates/pdp-desktop.html  →  app/templates/Product/detail.latte

Prečo bez komponentového frameworku

Konzument je Nette + Latte

Backend produkčného eshopu beží na PHP/Latte. React komponenty by nikto nepoužil. Vanilla HTML kopíruje 1:1 do .latte templátov.

Reálne dáta, nie mocky

Prototyp WPC 80 ťahá 50 reálnych variantov, 23 príchutí a 25 Q&A z produkčnej DB blueweb_venaliogreenmedical. Layout overený na reálnom obsahu.

Tweak panel, žiadny Storybook

Floating panel v PDP samotnom (klávesa t) zapína 28 stavov: AI summary, gift block, množstevné zľavy, sale state, jazyk, atď. Žiadny izolovaný preview.

Subtree workflow

DS žije v Greenmedical eshope ako vendor/greenmedical-ds/. Bumpni verziu, real projekt spraví git subtree pull. Bidirectional sync.

Pre AI agentov

Použitie z Cursor / Claude Code / Codex

Skopíruj prompt do svojho IDE rules / project context. Agent dostane stručný workflow čo robiť keď ho user prosí o UI.

Quick start prompt

Pri generovaní UI pre tento projekt používaj Greenmedical DS: 1. Tokens v `tokens.css` — vždy `var(--color-1)`, NIKDY hardcoded `#0077BC` 2. Templates v `templates/` — full-page HTML referencie (PDP, Cart) 3. Prototypes v `prototypes/` — React/JSX zdrojáky pre čítanie logiky/stavu 4. Pred použitím prečítaj AGENTS.md (~10 min, ale stojí to za to) Pri otázke 'urob mi X': - Otvor relevantný template v templates/ + jeho .css - Skopíruj HTML blok podľa class prefixu (.pdp-d-*, .cart-*) - Adaptuj na cieľový framework (Latte/JSX/Vue) - Zachovaj všetky var(--...)

Príklad: „Vyrob mi sale badge"

1. Pozri templates/pdp-desktop.css → grep '.pdp-d-flag' alebo '.pdp-d-disc' 2. Nájdi: .pdp-d-flag.is-sale { background: var(--color-sale); ... } 3. Skopíruj rule + adaptuj selector na svoj naming 4. Pridaj <div class="flag flag--sale">−11 %</div> do HTML

Distribúcia

Tri spôsoby ako tento DS dostať do projektu:

git subtree odporúčané 
git subtree add --prefix=vendor/greenmedical-ds <git-url> main --squash
# update neskôr:
git subtree pull --prefix=vendor/greenmedical-ds <git-url> main --squash
copy-paste

Skopíruj tokens.css + assets/fonts/ + relevantné templates/. Žiadne deps, žiadne CI.

fork & adapt

Fork repa, uprav tokens.css pre iný brand, ostatné súbory podla potreby.

Foundations · Colors

Paleta farieb

Klikni na swatch a skopíruj var(--name) do schránky.

Brand · Primary

Brand · Secondary

Semantic

Neutrals

Foundations · Typography

Typografia

Montserrat (display + UI chrome) + Satoshi (body + tabular numerics).

Type scale

--fs-display Display 48 48 / 1.05 / -0.02em
--fs-h1 Heading 32 32 / 1.15 / -0.01em
--fs-h2 Heading 22 22 / 1.20
--fs-h3 Heading 18 18 / 1.30
--fs-body Body 15 — Lorem ipsum dolor sit amet consectetur adipisicing elit. 15 / 1.50
--fs-body-sm Body small 14 — secondary text and captions. 14
--fs-caption Caption 13 — meta information 13 / 0.02em
--fs-label Label 13 13 / 0.08em / UPPER
--fs-micro Micro 11 — fine print 11

Weights

--fw-regMontserrat Regular 400400
--fw-medMontserrat Medium 500500
--fw-semiMontserrat SemiBold 600600
--fw-boldMontserrat Bold 700700
--fw-blackMontserrat Black 900900

Foundations · Spacing

8pt grid

Konzistentný spacing scale založený na 8-bodovej mriežke.

--s-1
4 px
--s-2
8 px
--s-3
12 px
--s-4
16 px
--s-5
20 px
--s-6
24 px
--s-8
32 px
--s-12
48 px
--s-16
64 px
--s-24
96 px

Foundations · Shape

Radii a tiene

Zaoblenia a elevácia — tri stupne pre rozumné použitie.

Radii

--r-sm · 6px
--r-md · 10px
--r-lg · 14px
--r-pill · 999px

Elevation

--shadow-sm
--shadow-md
--shadow-focus-ring

Templates · Prototypes

Prototypy z UNIT

UX/CRO designeri tu vytvárajú prototypy. Blueweb developeri ich potom realizujú v Latte. Source of truth pre eshop UI.

Status:
Device:

Načítavam prototypy z manifest.json…

Roadmap

Plán

Real-eshop coverage najprv (PDP → cart → PLP), potom extrakcia primitív do components/.

Aktuálne

v0.8.6

PDP desktop

100%

PDP mobile

100%

Cart

refresh

v0.1 - v0.2 · Done apr 2026

Tokens, fonts, 4 templates (PDP × 2, Cart × 2), prototypy (JSX), AGENTS.md, showcase shell. Počiatočná i18n SK + HU, tweak panel mechanizmus.

v0.3 - v0.4 · Done apr 2026

Real WPC 80 catalog import + content integration.

  • 50 variantov, 23 príchutí, 3 veľkosti, 25 Q&A z prod DB blueweb_venaliogreenmedical
  • Build-time data shim scripts/build-wpc80-data.mjs → window.WPC80
  • Long description (Froala HTML) v 2/3 + 1/3 layoute
  • Recommend % tile, hero meta Q&A count, gap analysis docs
v0.5 - v0.6 · Done · desktop PDP 100% apr - máj 2026

Real-eshop coverage gap closure + tweak panel UI.

  • P1: video tab (YouTube embeds), featured bestRating, variant matrix, naposledy prezerané
  • P2: per-review odporúčam pill, customer-type badges, NaMaximum reply, lang filter (4 vlajky), add-rating form
  • P3: share button (link/mail/FB/WA), gift ribbon, gift picks strip, honeypot, soldout overlay
  • D2 + D3: 16 nových tweak keys + floating panel UI (28 toggles, 6 kategórií, localStorage, t shortcut)
  • v0.6.1 fix: variant table layout, group rows by size, oranžový CTA
v0.7 · Done · mobile PDP 100% apr 2026

Mobile PDP doviezol na paritu s desktopom (M0 - M5, ~30 atomic commits, 5 sequential agent waves).

  • M0: wire mobile PDP to window.WPC80 real data (50 variants, 23 flavors, cascade matrix verified)
  • M1: long description (Froala HTML), Q&A full module, sticky tab anchor nav, variant matrix card list, video tab, files tab, recently viewed, footer accordion
  • M2: per-variant stock detail (in/low/restock/out chip), gift indicator on pills, restock notification bottom-sheet, qty tier discount block, gift bonus block, shipping options expander
  • M3: hero polish (multi-brand row, product flags, Q&A count, alt names, EAN row, savings line, MCountdown ticker, expiration warning, 2x2 trust strip, gallery overlay flags) + i18n en-dash sweep 30 -> 0
  • M4: promo bar, top categories nav, value-props strip, share button bottom-sheet, MTweakPanel slide-up sheet (28 toggles, 6 categories, cross-tab desktop sync via shared pdp-tweaks-v1)
v0.8 · Done · real-defaults + tweak system + parity máj 2026

Default tweak state matchne real namaximum.sk WPC 80 PDP. Všetky extras = tweaky v 4 user-facing kategóriách. Mobile section order zladený s desktopom. Live na Cloudflare Pages.

  • v0.8.0 (F1): tweak panel reorg 6 -> 4 user-facing kategórie (demo / Nové vylepšenia / Špecifické stavy / UX a real eshop), bulk toggle, per-cat description
  • v0.8.1 (F2): 17+3 default flips na real-style state, render guards na all hidden bloky, localStorage pdp-tweaks-v1 -> v2 migration
  • v0.8.2 (F3): cross-sell karty polished na real combinations.latte - heading "Tieto produkty sa skvele dopĺňajú", Detail btn, "od" price prefix, sale-flag overlay
  • v0.8.3: revert linklist variant (cards-only po user feedbacku)
  • v0.8.4: mobile section order zarovnaný s desktopom - cross-sell + bundle hore po sticky ATC, recent presunutý za QA
  • v0.8.5: mobile hero / thumb 0 / lightbox slide 0 používajú brand packshot (rovnaký ako desktop), nie chocolate flavor
  • v0.8.6: 3 mobile annotations - drop subtitles z 5 h2 headings, unstick tabs head (overlap so sticky ATC), drop Detail btn z mobile cross-sell cards
  • F5: Cloudflare Pages deploy na greenmedical.unit618.com
v0.8 · Cart refresh jun 2026

Apply real-eshop coverage gap analysis na cart-desktop + cart-mobile. Bonus selector, gift block, free-shipping progress, qty tiers, recommended add-ons, real cart math.

v0.9 · Re-author primitív → components/ jul 2026

Po dokončení PDP + cart pokrytia, extrahovať najpoužívanejšie primitívy do components/: variant pill, button, badge, stepper, modal, toast, chip. Čistá BEM, samostatne preview-ovatelne, dokumentované v showcase.

v1.0 · Plné pokrytie Q4 2026

PLP, search, kategórie, account, checkout. Patterns: variant-selector (cascading), qty-tiers, restock-flow ako Web Components. CHANGELOG, semver discipline, multi-brand swap surface (Greenmedical NaMaximum HU vs SK).

Pivot

Pôvodný v0.2 plán "re-author primitív prvé" bol otočený: namiesto budovania komponentov bez kontextu sme najprv dotiahli reálne PDP/cart layouty na 100% pokrytia ostrého eshopu (s reálnymi DB dátami z blueweb_venaliogreenmedical). Primitívy sa extrahujú až keď ich shape je overený v skutočnom užívaní.