Klocki ultra-strony — podgląd

Warianty hero

Pierwszy ekran. Wybiera go terytorium podpisu (z nazwy firmy i branży) — albo wymusza uklad.hero.

{
 "hero": "poswiata"
}

{
 "hero": "karta"
}

{
 "hero": "typo"
}

{
 "hero": "okno"
}

{
 "hero": "pasy"
}

{
 "hero": "blok"
}

{
 "hero": "magazyn"
}

{
 "hero": "pole"
}

{
 "hero": "morph"
}

{
 "hero": "dashboard"
}

{
 "hero": "glitch"
}

Tła hero

Powierzchnia pod pierwszym ekranem. Od 22.09 domyślnie jasna (wash, mgła, tint) — pełna barwa ze środka skali jasności na całym hero to język 2014 r.; pola „akcent” i „duo” schodzą na głębię.

{
 "hero": "poswiata",
 "hero_tlo": "wash"
}

{
 "hero": "poswiata",
 "hero_tlo": "mgla"
}

{
 "hero": "poswiata",
 "hero_tlo": "tint"
}

{
 "hero": "poswiata",
 "hero_tlo": "ciemny"
}

{
 "hero": "poswiata",
 "hero_tlo": "tlo"
}

Scenariusze — kolejność sekcji

Koniec szablonu „hero → oferta → o nas → proces”. Cztery scenariusze układają stronę inaczej i dokładają blok wielkiej typografii.

{
 "scenariusz": "klasyczny",
 "hero": "poswiata"
}

{
 "scenariusz": "dowodowy",
 "hero": "poswiata"
}

{
 "scenariusz": "narracyjny",
 "hero": "poswiata"
}

{
 "scenariusz": "sprzedazowy",
 "hero": "poswiata"
}

Partytura barw — powierzchnie sekcji

Które sekcje dostają kolor. Zasada: jedno pole pełnego koloru + jedno ciemne, reszta tinty (kolor na 10–30 % wysokości strony).

{
 "hero": "poswiata",
 "scenariusz": "narracyjny",
 "pola": {
  "manifest": "tint",
  "proces": "ciemny"
 }
}

{
 "hero": "poswiata",
 "scenariusz": "narracyjny",
 "pola": {
  "manifest": "ciemny",
  "proces": "tint"
 }
}

{
 "hero": "poswiata",
 "scenariusz": "narracyjny",
 "pola": {
  "manifest": "akcent",
  "proces": "ciemny"
 }
}

Kombinacje kolorów

Katalog zaprojektowanych zestawów 3–4 barw o rolach. Branża wybiera swoją; uklad.kombinacja wymusza.

{
 "kombinacja": "superkids",
 "hero": "poswiata"
}

{
 "kombinacja": "maluch",
 "hero": "poswiata"
}

{
 "kombinacja": "retro",
 "hero": "poswiata"
}

{
 "kombinacja": "neon-miasto",
 "hero": "poswiata"
}

{
 "kombinacja": "las-baldachim",
 "hero": "poswiata"
}

{
 "kombinacja": "burgund-zloto",
 "hero": "poswiata"
}

Palety jednobarwne

Dla branż poważnych i eleganckich: jeden akcent + neutralne.

{
 "paleta": "kancelaria",
 "hero": "pole"
}

Katalog kombinacji kolorów (43)

Prosto z paleta.js — to samo, co widzi agent w node <klocki>/paleta.js --kombinacje.

Palety jednobarwne (27)

Temperamenty (6)

Temperament bierze się z branży i ustawia skalę pisma, ilość ruchu, liczbę dodatków i pasmo koloru.

Baza dodatków (240 efektów w 33 grupach)

Efekty dobiera automat do temperamentu i branży (node <klocki>/dodatki.js --lista). Można je też wstrzyknąć do gotowej strony: dodatki.js --wstrzyknij=<katalog>.

Jak to złożyć u siebie

Agent robi to dwoma ruchami — najpierw pisze treść, potem uruchamia rusztowanie:

node <klocki>/rusztowanie.js --schemat > tresc-fable.json   # wzór z opisem każdego pola
node <klocki>/rusztowanie.js --branza="przedszkole" --firma="Ptasie Radio" --miasto="Gdynia" \
     --telefon="58 555 12 34" --tresc=tresc-fable.json
node <klocki>/weryfikuj.js . --styl        # render w Chrome: kontrast, pierwszy ekran, WOW 0–100

Dokumentacja w repozytorium: wiedza/ui-ux-pro-max/SKILL.md (tryb twórczy i składania), wiedza/kolory-stron/SKILL.md (role barw, pasmo koloru, §4a „nowoczesność”) oraz skill z przepisem na stronę w 4–5 wywołaniach.