УНІВЕРСАЛЬНИЙ ПРОМПТ ДЛЯ ГЕНЕРАЦІЇ БРУТАЛЬНИХ ЛЕНДІНГІВ У СТИЛІ CLAUDE CODE CLI. ПАЛІТРА, ТИПОГРАФІКА, КОМПОНЕНТИ, АНІМАЦІЇ, ASCII-ДЕКОР. БЕЗ ФРЕЙМВОРКІВ — ОДИН ФАЙЛ INDEX.HTML.
Побудуй односторінковий лендінг у стилі хардкор-бруталізму. Vanilla HTML/CSS/JS в одному файлі — без фреймворків, без збірки. ═══════════════════════════════════════════════════ DESIGN PHILOSOPHY ═══════════════════════════════════════════════════ - Terminal-brutalism: спец-лист × ASCII × монотип × один акцент - Кожен блок має тверду функцію. Без декоративного флафу. - Інформація подається як тех-специфікація: ключ → значення - Українська для контенту, англійська для технічних міток - ВЕЛИКІ ЛІТЕРИ для всіх заголовків без винятків ═══════════════════════════════════════════════════ PALETTE (Claude Code CLI — теплі тони) ═══════════════════════════════════════════════════ --bg: #1a1411 /* теплий темний фон */ --fg: #F5F1E8 /* крем, основний текст */ --accent: #D97757 /* Claude orange, головний акцент */ --accent-2: #B85A3E /* глибокий */ --accent-3: #E89B7F /* персиковий */ --accent-4: #CC785C /* середній */ --accent-ink: #1a0f0a /* текст на оранжевому */ --muted: #A89E8F /* приглушений текст */ --dim: #5C5048 /* найпритлумленіший */ --border-c: rgba(245, 241, 232, 0.2) /* всі структурні бордери */ Правила кольору: - Один акцент на всю сторінку. Ніяких вторинних кольорів. - Один блок може бути повністю акцентним (bg: accent, color: ink). - Один блок може бути інвертованим (bg: fg, color: bg). - Все інше — темне з border-c 1px між блоками. - Парні блоки отримують rgba(245,241,232,0.04) для ритму. ═══════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════ Google Fonts (обов'язково з кирилицею): - Display: Unbounded 500/700/800/900 — ВСІ заголовки, числа, ціни - Mono: JetBrains Mono 400/500/600/700 — body, meta, labels, tags Розміри (clamp для адаптиву): - Hero H1: clamp(44px, 7.2vw, 108px), weight 900, line-height 0.88, letter-spacing -0.055em - Section H2: clamp(36px, 6vw, 88px), weight 900, letter-spacing -0.045em - Big numbers: clamp(64px, 10vw, 128px), weight 900 - Card titles: 22px, weight 800 - Body: 13-15px JetBrains Mono - Meta labels: 10-11px JetBrains Mono 700, letter-spacing 0.15em, ALL CAPS НІКОЛИ: - ❌ -webkit-text-stroke (ламає рендеринг, замість нього color: --dim) - ❌ Градієнти на тексті (плоский колір або накладання span'ів) - ❌ border-radius > 0 (всі кути гострі) - ❌ box-shadow soft (тільки якщо для глибини картки, rgba 0.5) - ❌ Інші шрифти окрім Unbounded і JetBrains Mono ═══════════════════════════════════════════════════ LAYOUT — BLOCK KIT (комбінуй за потребою) ═══════════════════════════════════════════════════ A. HEADER (sticky 52px, 3 колонки grid): brand-link зліва з 1-піксельним квадратним лого акцентом | nav з [01][02]... посиланнями | CTA кнопка акцентом справа. Бордер 1px знизу border-c. На ≤720px nav → hamburger. B. META STRIP (5 комірок grid): ID / COUNT / LIMIT / FORMAT / STATUS — кожна монотипом з key: value патерном. Парні з tint 4%. C. HERO (split grid 1fr/380px): LEFT: kicker з ▸ бейджем + величезний H1 з кольоровими span'ами + параграф + CTA buttons-row. RIGHT: spec-sheet (rows key/value), останній рядок — price-row з bg акцентом або --fg. H1 має data-scramble — символи мішаються і резолвляться 1.4s. D. TICKER (horizontal marquee): Великі монотипні повідомлення з /// × ★ → як роздільниками. Варіант 1: bg акцент, color ink — для привернення уваги. Варіант 2: bg dark, color fg — між секціями. E. BENTO GRID (4 колонки, 6-8 комірок): Одна повинна бути акцентною (solid accent). Одна повинна бути інвертованою (solid fg). Одна повинна містити vertical text-marquee списку фіч. Одна повинна містити ASCII-арт блок. Одна повинна містити checkbox-список (інтерактивний). Одна повинна містити велике число з одиницею. Решта — заголовки з монотипними індексами [01] [02]... F. 3-COLUMN SECTION (who / what / why): Максимально лаконічні блоки з ▶/×/★ маркерами 48px, заголовком 22px і 1-2 реченнями 12.5px. G. PROGRAM ROWS (таблиця grid 120/1fr/200/80): Номер великий (36px акцентом) + дата | title + опис | теги монотипні в рамках | → стрілка. Hover ВЕСЬ РЯДОК → bg акцент, color ink. Миттєво (0.1s). H. STATS ROW (4 колонки): Гігантські числа з counter-анімацією на scroll (ease-out-cubic 1.6s). Ключ зверху, лейбл знизу. I. TOOLKIT GRID (3×2): Файли/модулі з .md/.txt/.json іменами монотипом, коротким описом. Hover → акцент-заливка. J. AUTHOR SPLIT (420px / 1fr): LEFT: акцентний блок з ASCII-портретом (█▓▒░ патерн) на фоні + гігантським monogram'ом текстом. RIGHT: біо з b-тегами ключових слів + 3 міні-статистики в рамці border-c. K. RESULTS/OUTCOMES (3 колонки): Великі номери 01/02/03 акцентом + заголовок + опис. L. CTA BLOCK (split 1.4fr/1fr): LEFT dark: h2 з кольоровими span'ами + параграф + streams-list (3 рядки з статусами типу "CLOSED", "OPEN ★"). RIGHT акцент: колосальна ціна/число + APPLY кнопка з темним бордером і стрілкою. M. FOOTER (3 колонки grid): © / бренд / → Telegram — все монотип, ALL CAPS, letter-spacing 0.12em. Між всіма секціями — border-top/bottom 1px border-c. ═══════════════════════════════════════════════════ ANIMATIONS & INTERACTIONS ═══════════════════════════════════════════════════ ВСЕ через IntersectionObserver на scroll: 1. TEXT SCRAMBLE (hero H1 on load) TreeWalker обходить текстові ноди, мішає символи з "!<>-_\/[]{}—=+*^?#АБВГ010101", прогресивно резолвить за 1.4s з індексом символу як фракцією часу. 2. CHAR REVEAL (section H2 на scroll) data-anim="char". Split по chars, кожен у span.anim-char з opacity 0 + translateY(0.5em) + rotateX(-60deg). Observer додає .in з stagger 22ms. Cubic-bezier(0.22,1,0.36,1). 3. WORD REVEAL (titles, descriptions) data-anim="word". Auto-apply селекторами на .pr-title, .cell h3, .tk-name, descriptions. Stagger 50ms. blur(6px)→0 + translateY(20px)→0. 4. COUNTER (усі числа) data-count="N" data-decimals="0". Ease-out-cubic 1.6s. requestAnimationFrame loop. 5. PARTICLES CANVAS ~90 точок у 4 відтінках accent. Connections між ближніми (<115px) з alpha по відстані. Interaction: курсор відштовхує точки. Dampening 0.985. Random walk ±0.01. Wrap по краях. 6. PARALLAX (lerp smoothing) Selectors з різними speed: hero-side: 0.08, ascii-tl: -0.12, ascii-br: 0.14, ascii-block: 0.07, avatar: -0.09, amount: 0.1, tickers: 0.04, h1: -0.04. On scroll → target, lerp 0.18. 7. ASCII SPINNER data-spin. Array ['▘','▝','▗','▖']. setInterval 130ms. 8. BLINK / COLOR-CYCLE .blink: step-end 1.1s opacity 1→0. .color-cycle: 3s linear через 3 акценти. 9. HOVER STATES (миттєві, 0.1s, не smooth) Program rows → весь ряд bg акцент, color ink. Toolkit cells → bg акцент. Stats → bg fg, color bg. Nav links → bg fg, color bg. 10. SCROLL PROGRESS BAR Fixed top 3px, bg акцент, width = scroll% from 0 to 100. ═══════════════════════════════════════════════════ ASCII DECORATIONS (обов'язково, не опціонально) ═══════════════════════════════════════════════════ Hero corners (z-index > h1): Top-left (acc): ▘ SYS.READY ◉ CONN:_<blink> ▓▒░ LOADED 06/06 Bottom-right (acc-3): ▲ Δ ◆ ▼ × ★ ░▒▓█▓▒░ [●] LIVE FEED Bento ASCII block card (цілу комірку): ░░▒▒▓▓██▓▓▒▒░░ ▓▒░ [LABEL] ░▒▓ ██ ────────── ██ ▓▒░ N=[num] ░▒▓ ░░▒▒▓▓██▓▓▒▒░░ Author avatar block (фон): ████████████████████ ██░░░░░░░░░░░░░░░░██ ██░░▓▓██████████▓▓░░██ ... (pixel-art патерн ~11 рядків) ASCII divider (marquee between sections): Потік з ░▒▓█, ●○◉◎, ◆◇◈, ▲△▼▽, ★☆, кастомних токенів. Різнокольорові span'и (g1/g2/g3/g4) через nth-child. Character palette (завжди використовуй): Blocks: ░ ▒ ▓ █ Circles: ● ○ ◉ ◎ ◦ Diamonds: ◆ ◇ ◈ Triangles:▲ △ ▼ ▽ Stars: ★ ☆ Arrows: → ← ↑ ↓ ▸ ◂ Box draw: ┌ ─ ┐ │ └ ┘ ┼ ╔ ═ ╗ ║ ╚ ╝ ═══════════════════════════════════════════════════ RESPONSIVE (3 breakpoints) ═══════════════════════════════════════════════════ 900px: - Шрифти clamp min ×0.75 - Padding ×0.7 - Bento 4→2 колонки - Hero 1fr/380 → stack vertical - Split blocks → stack 720px: - Nav → hamburger (52×52 кнопка з 3 лініями) - Mobile menu: full-screen overlay slide from top 0.4s з великими 28px Unbounded 800 пунктами, ESC/resize/link-click → close - Bento 1 колонка - Program 4 cols → 2 (number + title, теги/стрілка hidden) - Stats 4→2×2 - Footer → 1 колонка - overflow: hidden на body при відкритому меню 480px: - Шрифти ще менше - Nav прихований повністю крім логотипа і CTA - ASCII декоративні блоки fade до opacity 0.6 ═══════════════════════════════════════════════════ TECH CONSTRAINTS ═══════════════════════════════════════════════════ - Один файл index.html, 2000-3000 рядків це норма - Без npm, без зборки, без Tailwind - Google Fonts через preconnect - Favicon через data: URL SVG з 4 квадратами палітри - SEO: title, description, og:title, og:description, og:type - overflow-x: hidden на html і body (обов'язково) - scroll-behavior: smooth на html - Всі script'и як IIFE у кінці body - ARIA атрибути на інтерактиві (menu-toggle, overlays) ═══════════════════════════════════════════════════ VOICE & COPYWRITING ═══════════════════════════════════════════════════ - Спец-лист тон. Тверді факти. Без маркетингу. - Числа замість прикметників: "10 осіб" а не "невелика група" - Монотипні мітки англійською: SESSIONS, SLOTS, STATUS, APPLY - Контент українською, ВЕЛИКИМИ ЛІТЕРАМИ для заголовків - Короткі параграфи 1-3 речення max - Використовуй "/" і "·" як роздільники: "ПОТІК 03 · TBD" - Bullet points замінюй на → та ▸ ═══════════════════════════════════════════════════ COMMON PITFALLS (не повторюй) ═══════════════════════════════════════════════════ ❌ Unbounded ширший за Archivo Black — якщо hero H1 обрізається, опускай clamp max з 148→108 ❌ Text scramble з nested spans: НЕ перевикористовуй innerHTML, використовуй TreeWalker щоб зберегти структуру span'ів ❌ background-clip: text на батьківському з inline-block дочірніми ламає градієнт: дублюй background-gradient на кожен span окремо ❌ -webkit-text-stroke → blur на мобільних. Замінюй color: --dim ❌ Забути overflow-x: hidden → parallax дає горизонтальний скрол ❌ Забути pointer-events: none на декоративних ASCII → перехоплюють кліки ❌ Радіус > 0 десь пролазить → руйнує брутальний вигляд