Всяка тенденция: какво е, за какво пасва и за какво не, колко тежи, как стои на кирилица, готов промпт за AI агент и правила „задължително“ и „забранено“. Промптовете са на английски, защото така ги разбират най-добре агентите.
v0.1 · 2026-10-19 · от Better Mechanics · ниво: общност (живите проби с протокол идват една по една)
01 · Bento мрежи
Модулна мрежа от карти с различни размери: функции, показатели и визуални истории в едно сканируемо цяло.
тежест: лека–средна · кирилица: да; картите да побират 25–35 % по-дълъг текст
Подходящо за
SaaS функции, показатели, партньори, „как работи“, профили на организации
Не за
новинарски поток, дълги текстове, всичко еднакво важно
Промптът (EN)
Create a responsive asymmetric bento grid for a Bulgarian-language website. Establish one dominant card, two supporting cards, and compact utility cards. Use semantic HTML and CSS Grid; preserve content hierarchy when the grid collapses.
задължително
една ясна доминираща карта
логичен ред в HTML
картите имат различна функция
без хоризонтален скрол
забранено
12 еднакви карти
текст, който се реже
анимация във всяка карта
вложени бутони без нужда
02 · Кинетична променлива типография
Заглавието мени тегло или ширина при скрол, посочване или смяна на състояние (variable fonts); движението подчертава, не пречи.
тежест: лека–средна · кирилица: само ако шрифтът има пълна кирилица и locl за български
Подходящо за
културни събития, кампании, конгресен портал, портфолио
Не за
формуляри, дълги статии, малък текст
Промптът (EN)
Use kinetic variable typography as a restrained brand device. Animate only the headline's variable font axes and keep the text selectable, readable, and present in the DOM. Provide a static Bulgarian-Cyrillic fallback.
задължително
истински HTML текст
най-много 1–2 оси
стабилна подредба
вариант без движение
забранено
текст като картинка/canvas
непрекъсната анимация
скачащи редове
буква по буква за цял абзац
03 · Жива 3D/WebGL сцена
Интерактивен 3D обект в героя като част от разказа; компресирани модели, внимание към GPU и резервна картинка.
тежест: тежка · кирилица: да, ако текстът е отделен HTML слой
Подходящо за
зали, инфраструктура, технологии, интерактивна карта, физически продукт
Не за
информационен НПО сайт, често сменян афиш, малък бюджет за оптимизация
Промптът (EN)
Build a progressively enhanced WebGL hero with a meaningful 3D object related to the brand. Keep all headings, navigation, CTA, and explanatory content as semantic HTML above the canvas. Load the scene only after the critical content and provide a responsive poster fallback.
задължително
резервна картинка (poster)
късно зареждане
компресирани GLB/KTX2
таван на DPR
пауза извън екрана
забранено
текст в WebGL
блокиращ зареждач
автоматичен звук
навигация, зависима от сцената
безкраен цикъл без контрол
04 · View Transitions API
Вградени преходи между състояния или страници; за много страници — само като подобрение, с нормална навигация отдолу.
Add View Transitions as progressive enhancement for same-origin navigation. Use stable transition names only for the shared hero image and title. Unsupported browsers must receive immediate standard navigation with identical final content.
задължително
проверка за поддръжка
нормални <a> връзки
кратък преход
без движение при reduced-motion
забранено
навигация, зависима от API
преход на всеки елемент
дублирани имена
преход при посочване
05 · CSS анимации, водени от скрола
Анимации, чието време следва скрола или навлизането в екрана; съдържанието е видимо и без тях.
тежест: лека–средна · кирилица: да
Подходящо за
хронологии, процес, история на организация, представяне на зала
Не за
заключен скрол, текст, който се появява твърде късно
Промптът (EN)
Use native CSS scroll-driven animation only as progressive enhancement. Content must be visible in the default state, with animation enabled inside @supports and removed for prefers-reduced-motion.
задължително
видимо по подразбиране
@supports
само transform/opacity
резервна подредба
забранено
отвличане на скрола
закачане на цяла страница
анимация на размерите
скрит текст без резерва
06 · Изтънчено стъкло (наследникът на glassmorphism)
Прозрачни слоеве с по-малко размиване и ясни нива; инструмент за йерархия, не ефект върху всяка карта.
тежест: средна · кирилица: да, при достатъчен размер и контраст
Подходящо за
плаваща навигация, прозорци, филтри, контроли върху карта или 3D
Не за
пъстър фон без стабилен контраст, стил на всяка секция
Промптът (EN)
Use refined translucent surfaces only for elevated controls and navigation. Maintain an opaque fallback and WCAG-compliant text contrast regardless of the background frame.
задължително
малко стъклени повърхности
плътна резерва
видима граница
проба върху всички фонове
забранено
основен текст върху непредвидим фон
backdrop-filter навсякъде
бледосиво
стъкло върху стъкло
07 · Мек брутализъм
Сурова геометрия, ясни рамки, директна типография, но с умерени цветове и дисциплинирани отстояния.
тежест: лека · кирилица: да; често върви много добре
Подходящо за
младежки платформи, културни програми, кампании
Не за
медицински, социални, административни услуги
Промптът (EN)
Create a soft-brutalist interface with strong borders, direct typography, tactile controls, and disciplined spacing. Keep the structure accessible and calm enough for repeated use.
задължително
ясна йерархия
видими граници
истински състояния на бутоните
ограничена палитра
забранено
мигащи цветове
умишлено лоша подредба
нечетими моно абзаци
хаос без система
08 · Зърнести mesh градиенти
Mesh градиенти със зърно, които дават материалност; първо CSS/SVG, WebGL само ако движението разказва нещо.
тежест: лека (CSS/SVG) · тежка (WebGL) · кирилица: да, ако фонът е отделен от текста
Подходящо за
фон на героя, културна идентичност, фон на призив
Не за
зад дълъг текст, постоянна бърза анимация, еднаква лилаво-синя палитра
Промптът (EN)
Create a brand-specific grainy mesh gradient using CSS or SVG first. Use WebGL only if the motion adds narrative value. Keep the grain subtle and preserve a quiet, high-contrast area behind Bulgarian text.
задължително
първо CSS/SVG
цветовете на марката
статична резерва
фино зърно
забранено
лилаво-синият AI градиент
едро зърно
анимиран филтър върху целия екран
WebGL само за украса
09 · Тъмна тема по подразбиране
Тъмни нива на повърхностите, не чисто черно; светла тема и системното предпочитание се уважават.
детски сайт, дневна туристическа информация, дълги текстове без светла версия
Промптът (EN)
Design a dark-first theme using layered neutral surfaces rather than pure black. Include a light theme and respect prefers-color-scheme, while preserving the brand's identity in both modes.
задължително
токени за повърхностите
помни избора
системното предпочитание
проверка на контраста
забранено
#000 навсякъде
сив текст под AA
обърнати снимки
цветът като единствен сигнал
10 · Целенасочени микровзаимодействия
Кратки реакции при посочване, фокус, изпращане, успех, грешка; обясняват, не украсяват.
тежест: лека · кирилица: да
Подходящо за
бутони, форми, филтри, регистрация, „Копирай промпт“
Не за
когато посочването е единственият начин да разбереш функцията
Промптът (EN)
Add functional microinteractions for hover, focus-visible, active, loading, success, and error states. Keep each transition short and ensure the state remains understandable without motion.
задължително
състояние и от клавиатура
надпис при зареждане
семантика за неактивно
без движение при нужда
забранено
информация само при посочване
„магнитни“ важни бутони
въртележка без текст
анимация вместо съобщение за грешка
11 · Ефекти около показалеца
Локална реакция към мишката; изключва се на тъч, при reduced-motion и в критични интерфейси.
Add a localized pointer effect only inside the showcase area. Preserve the native cursor, disable the effect for touch/coarse pointers and reduced motion, and never attach essential information to pointer position.
задължително
системният показалец остава
локален обхват
чистене на слушателите
60 fps бюджет
забранено
скрит показалец
глобална следа от частици
ефект върху полета
действие само с мишка
12 · Редакционно оформление (като списание)
Типографска йерархия, колони, надписи под снимки, цитати, въздух и ритъм; идентичност без тежък код.
тежест: лека · кирилица: отлична, ако шрифтът има български форми
Create an editorial Bulgarian layout with a strong headline, short dek, metadata, captions, pull quotes, and a readable article measure. Preserve a single logical reading order across breakpoints.
задължително
семантичен article
60–75 знака на ред
надписи под снимките
йерархия на заглавията
забранено
колони с объркан ред
двустранно подравнен текст
твърде тесен кирилски текст
снимки без надпис/alt
13 · Огромни заглавия, малко текст
Героят е едно силно типографско изявление, кратко обяснение и едно действие; заглавието е конкретно за организацията.
тежест: лека · кирилица: да; тест за по-широките букви и пренасянето
Подходящо за
кампания, събитие, конгрес, културен сезон, SaaS с едно обещание
Не за
когато не става ясно кой стои отзад и какво предлага
Промптът (EN)
Design a bold typographic hero around one concrete Bulgarian value proposition. Use a short supporting sentence and one primary CTA; keep the full heading readable at 320px without clipping.
задължително
конкретно обещание
течен размер (clamp)
контролирано пренасяне
един основен бутон
забранено
„Empowering the future“
огромен текст без контекст
отрицателна разредка за кирилица
повече от два равностойни бутона
14 · Разчупена мрежа, органични композиции
Асиметрия, застъпване, диагонали; редът в HTML остава независим от визуалното разместване.
Use an asymmetric editorial composition with controlled overlap while preserving semantic source order. At narrow widths, remove overlap and return to a calm single-column layout.
задължително
безопасни зони на застъпване
спокойна колона на телефон
запазени размери на снимките
четим ред на фокуса
забранено
абсолютно позициониране на всичко
текст върху лица
засечени рамки на фокуса
визуален ред, обратен на HTML
15 · Ръчна илюстрация и смесени техники
Рисунки, колаж, сканирани текстури и истинска фотография като знак за човешка авторска посока.
тежест: лека–средна · кирилица: отлична
Подходящо за
детски и младежки проекти, НПО, култура, история, местно наследство
Не за
стилове, смесени произволно; AI картина като документална снимка
Промптът (EN)
Build the visual identity around a coherent hand-drawn illustration system and authentic photography. Do not generate generic 3D blobs or stock-style AI people. Keep decorative artwork separate from semantic content.
задължително
бриф за арт посоката
еднаква линия и палитра
права и автори
оптимизирани SVG/WebP
забранено
фалшива документална сцена
различен AI стил във всяка секция
текст в картинка
украсен alt текст
16 · Контекстна персонализация и AI вход
Секции според избран интерес или роля, разговорен вход към каталога; без скрито профилиране и без различна реалност за търсачките.
тежест: средна–тежка · кирилица: да, ако моделът и търсенето са изпитани на български
Подходящо за
въвеждане в SaaS, каталог на събития, търсене по интереси
Не за
автоматична промяна по чувствителни признаци, чатбот вместо навигация
Промптът (EN)
Add explicit, user-controlled personalization based on selected interests, not inferred sensitive traits. Preserve a complete, crawlable default page and expose every personalized result through normal links and filters.