Преглед на дизайн системата · 02.11.2026Вярно ли е описан дизайнът на NOISY?
Агентите в Claude Code ще правят дизайна на NOISY по един файл: DESIGN.md. Написа го агент от токените, одобрените екрани във Figma и бранд ръководството. Вие знаете истината, затова искаме вашата преценка, преди да започнем работа с него.
Каквото кажете тук, става правило за всички агенти. Каквото е грешно, се поправя по вашия отговор.
- Минете 9 кратки раздела. Всичко показано е с истинските стойности и компоненти.
- На всеки отговорете „Вярно“, „Не е така“ или „Не знам“. Ако не е така, напишете какво да се смени и, ако може, линк към фрейм във Figma.
- Накрая натиснете „Изпрати на Костадин“: отваря се имейл с готовите отговори, остава само „Изпрати“. Около 10-15 минути; отговорите се пазят, ако затворите страницата.
С жълто ПРЕДПОЛОЖЕНИЕ са местата, където агентът е гадал. Там отговорът ви е най-важен. Живите компоненти: noisy-lab-preview.vercel.app/design-system.
1 от 9 · Обща посока
Какво е NOISY на вид
- Тъмен, плътен, енергичен интерфейс за гледане. Съдържанието (кадри, постери, резултати на живо) е героят, интерфейсът стои зад него.
- Spectrum е искра, не фон: символ, активна зона, прогрес, фокус. Не голяма площ.
- Unbounded за заглавия, Manrope за всичко, което се чете.
- Всеки екран отговаря на един въпрос: какво да гледам сега.
- Настроение: кино зала в 22:00, стадион преди гол, групов чат по време на риалити. Не: банково табло, SaaS страница, неонов киберпънк. ПРЕДПОЛОЖЕНИЕ
2 от 9 · Цветове
Цветове
Spectrum (от бранд ръководството, потвърдено)
Signal Violet#B61DFF · привлича внимание
Pulse Magenta#CE13A8 · енергия, фокус
Impact Red#FF0000 · действие, на живо
Spectrum градиентсимвол и малки акценти
Повърхности и текст ПРЕДПОЛОЖЕНИЕ
Фон#0E0E0F
Повдигнат фон#161618
Повърхност#1E1E20 · карти
Повърхност 2#262628
Бутон Default#323232
Текст#FBFBFB
Вторичен текст#B4B4B8
Бележки#868688
Premium злато#E8C37A · само Premium Films
- Повърхностите и текстът са взети от екраните, не от Figma variables. Съвпадат ли с Figma?
- Premium златото е отделно от Spectrum и никога не се смесва с него на един елемент.
3 от 9 · Шрифт
Скала на шрифта ПРЕДПОЛОЖЕНИЕ
Агентът събра размерите, които прототипът вече ползва, в 10 стъпки. Агентите не могат да ползват друг размер.
Unbounded 600 · 32 px
Тази вечер в Theater
Unbounded 600 · 28 px
Под прикритие
Unbounded 600 · 22 px
Ергенът, еп. 30
Unbounded 600 · 18 px
Продължи гледането
Manrope 700 · 16 px
Престъпни намерения, еп. 12
Manrope 500 · 15 px
Новите епизоди влизат в Theater, щом свършат по телевизията.
Manrope 600 · 14 px
Жанр · Канал · Година
Manrope 500 · 13 px
2024 · Драма · bTV · 52 мин
Manrope 700 · 12 px
Жанр
Manrope 800 · 11 px
СЕРИАЛ
- Осем размера са извън скалата и още стоят в прототипа: 17, 19, 20, 24, 26, 30, 36 и 40 px. Кои трябва да влязат в скалата и кои да се махнат? Напишете го в бележката долу, например „24 влиза, 17 и 19 стават 16 и 18“.
- Unbounded никога за абзац и под 14 px. Цифрите в резултати, часове и цени са с еднаква ширина.
4 от 9 · Подредба
Подредба и отстояния
- Мобилно първо: дизайн на 390 px, проверка на 390 и 1440 px.
- Ширина до 1440 px, странично поле 48 px на десктоп и 16 px на телефон.
- Точки на прекъсване 720 и 900 px. ПРЕДПОЛОЖЕНИЕ
- Мрежи: постери по 180 px (2 на телефон), компактни по 140 px (3 на телефон), широки карти по 300 px (1 на телефон).
- Хоризонталните редове са основният модел на каталога; последната карта се вижда наполовина като знак за още. ПРЕДПОЛОЖЕНИЕ
Отстояния (8 стъпки)
--s-1 · 4--s-2 · 8--s-3 · 12--s-4 · 16--s-5 · 24--s-6 · 32--s-7 · 48--s-8 · 645 от 9 · Дълбочина
Дълбочина без сенки ПРЕДПОЛОЖЕНИЕ
- Нивата са стъпки на повърхността плюс тънка линия, не сенки.
- Сянка само за плаващо: меню, бутон за пускане върху кадър, долна лента.
- Размазан стъклен фон само върху видео или кадър, никога като украса на карта.
6 от 9 · Форми
Ъгли и пропорции
- Вложеният елемент е с по-малък радиус от родителя.
- Постерите са 2:3, кадрите 16:9.
7 от 9 · Компоненти
Готовите компоненти
Агентите ги ползват точно такива (1:1); в прототипа сменят само мястото и ширината. Друг вид минава като предложение.
- Всички състояния за всеки компонент: покой, hover, фокус (магента контур), натиснат, изключен, зареждане, празно, грешка.
- Движение: 180 ms за малко, до 400 ms за кадър или панел; само преместване и прозрачност; спира при „намалено движение“.
- Пълният списък: Nav, Button, Art, TitleCard, PersonCard, Scores, Search, Filters, Chips, Sort, ScopeSwitch, PremiumHero, Skeleton, Empty, Details, Player, Cart, EPG.
8 от 9 · Правила
Правете и не правете
Правете
- Започнете от истинското съдържание; размерите по най-дългото заглавие.
- Едно главно действие на екран.
- Йерархия с размер и тегло, не с цвят и рамки.
- Един и същ елемент изглежда еднакво на всички екрани.
- Цели за докосване поне 44 px.
- Зоните имат характер: Newsroom по-сериозен; Arena бърза и плътна, Theater спокойна и кадрова, Showtime игрива ПРЕДПОЛОЖЕНИЕ
Не правете (белези на AI шаблон)
- Лилаво-син градиент, неонов glow, градиентен текст, стъкло без причина.
- Еднакви карти с иконка и два реда текст; герой с огромно заглавие в празно.
- Цветна лента отстрани на карта, рамка около всичко, сенки на тъмен фон.
- Емоджи вместо икони, измислени числа, отзиви и лица.
- Всичко центрирано, всичко с еднакво отстояние, пет нива на сиво.
- Нов цвят, нов шрифт, нов бутон до готовия.
- Какво липсва? Правило, което прилагате, а го няма тук, или забрана, с която не сте съгласни.
9 от 9 · Theater
Две места в Theater не са по системата
Екранът Theater в прототипа е чернова на агент и няма да остане. Питаме само за двата компонента: агентът ги е отклонил от дизайн системата. Кажете дали да станат правило (влизат в системата за всички екрани), или да се оправят по системата.
1. Опциите във филтъра са хапчета с отметка
2. Превключвателят „Включено / Premium“ е по-тесен
- Ако двете трябва да се решат различно, напишете го в бележката, например „1 правило, 2 по системата“.
Накрая
Още нещо?
Ако копирането не стане, маркирайте текста и го копирайте ръчно