NOISY Lab: как работи дизайнерът

Кратко описание за дизайнерите: защо работим така, как минава една задача и какви са правилата. Справочник с готови фрази: docs/GUIDE.md. Как е устроена системата: docs/PM-TECHNICAL.md.

1. Защо работим така

На срещата от 30.10 изброихме какво ни бави:

Какво не работи	Какво се сменя за теб
Прототипирането е бавно, а в прототипа не се вижда цялата картинка: как се движат екраните и как изглеждат с истински данни. AI вече се ползва, но поотделно и за отделни стъпки, без целия си потенциал	Агентът прави няколко живи варианта наведнъж, с анимациите и примерните данни, а ти избираш и насочваш
Резултатите с AI не са консистентни, защото всеки работи без обща дизайн система и общ контекст	Всички работят в едно хранилище, с едни правила и една дизайн система. Агентът ги чете преди всяка задача
DEV трудно разбира поведението и анимациите от Figma	Анимацията и състоянията са код в прототипа. В код се разбират по-лесно
Не се знае кое е последното и какво е решено	Всяка версия е на Стената, със снимки, автор и бележка
Дизайните се правят в различни периоди и не се вижда как изглежда продуктът като цяло	Всички екрани са в един жив прототип, свързани по зони

Figma остава за полиш и за дизайн системата.

2. Накратко

Работиш в приложението Claude (или Codex) и говориш с агента с обикновени думи. Git и командите са негова работа.
Всеки вариант е жив екран в браузъра, с анимации и примерни данни.
Една задача е една сесия. Работата се записва в GitHub сама след всеки отговор на агента.
PM избира на Стената. DEV получава кода на одобрения вариант.
Агентът учи вкуса ти от работата и помни поуките.

3. Пътят на една задача

Пътят на една задача. Изборът на PM (5) и приемането на кода (7, Approve) са две отделни решения.

Вариант и версия. Вариантът е друго решение на същия екран (А, Б, В). Версията е запазено състояние на екрана в даден момент, със снимки. Всичко се пази, нищо не се трие.

Стената е общото място на всички версии: https://noisy-stena.pages.dev. Там всеки вижда екраните един до друг, кой ги е направил и какъв е статусът: чернова, за одобрение, одобрено, в разработка, готово, върнато.

4. Какво казваш

Казваш	Какво става
„Нова задача: търсене в Theater“	Агентът отваря задача, която екипът вижда веднага
„Направи 3 варианта за телефон“	Вариантите идват наведнъж, с надпис кое е различно
„Направи го по този фрейм: <линк>“	Агентът пренася фрейма от Figma с компонентите на NOISY
„Покажи ми“	Снимки на две ширини и Стената вдясно
„Не така, заглавието е твърде голямо“	Агентът поправя и записва поуката
„Избирам Б“	Останалите отиват в архив
„Готово“	Версията отива за одобрение от PM
„Продължи задачата на колегата“	Поемаш работата на колегата в отделен клон, а неговата остава непокътната

5. Правилата

Дизайн системата. Цветове, шрифтове и компоненти само от design-system/. Проверката спира цвят и шрифт извън нея, а отстъпите и ъглите агентът проверява сам. Ако ти трябва нов цвят или компонент, кажи го: агентът го добавя в задача, а промяната се приема от PM или от двама други дизайнери.
Референции. Чужд интерфейс може да се копира 1:1 като експеримент. Към DEV отива само версия с компонентите на NOISY. Лога на конкуренти не се ползват.
Снимки. Снимки от интернет са позволени в прототипа. Агентът записва източника им в SOURCES.md, за да се заменят преди продукция.
Основата. Правилата, скриптовете и проверките се сменят само с одобрение от PM. Ако имаш идея за тях, кажи „предлагам ...“ и агентът я записва в личната ти папка.
Поверителни данни. Без договори, цени и неанонсирани партньори в прототипа.

6. Вкусът ти

Личната ти папка е designers/<име>/: профил, вкус, референции и поуки. Агентът я създава в първия ден, след един въпрос за името, ролята и зоните ти. Понякога пита по един кратък въпрос, например „Какво не ти хареса в Б?“, и можеш да го пропуснеш. Когато нещо се повтори, предлага да го запише като правило във вкуса ти и чака твоето „да“.

7. С колегите

В началото на сесията агентът казва кой по какво работи в момента.
Двама по един екран се договарят кой коя част прави. Ако промените се застъпят, агентът показва двете версии една до друга и избирате вие.
Когато DESIGN.md или дизайн системата се сменят, агентът ти казва с едно изречение при следващия старт.

8. Как е устроено отвътре

Всичко е едно Git хранилище в GitHub. Основният клон main е одобреното състояние: от него тръгва всяка нова сесия и от него DEV взима кода.

noisy-lab/
├── AGENTS.md            правилата, които агентът чете в началото на всяка сесия (Claude и Codex)
├── CLAUDE.md            добавки само за Claude
├── PRODUCT.md           потвърдените факти за продукта NOISY
├── DESIGN.md            визуалният език: отстъпи, ъгли, сенки, тон (горната част се генерира от токените)
├── design-system/       токени (tokens.css), компоненти (components.css), лого и марка
├── prototype/           живият прототип (Next.js)
│   ├── app/             страниците: начална, theatre, atlas (Картата), board, design-system
│   ├── components/      общите части на екраните
│   └── lib/             примерните данни: каталог, програма (ЕПГ), режимите на данните
├── designers/<име>/     личната папка на дизайнера
├── pm/<име>/            личната папка на PM, плюс approvers.json (кой одобрява)
├── tasks/<задача>/      бележките на задачата, по една на човек
├── versions/<екран>/<версия>/   запазените версии: снимки и meta.json
├── specs/               спецификациите със случаите за DEV
├── decisions/           решенията по системата (Р1, Р2...)
├── archive/             отхвърленото и старото; нищо не се трие
├── docs/                документацията, включително този файл
├── scripts/             скриптовете на системата и hooks
├── .agents/skills/      уменията на агента (.claude/skills сочи същото)
└── .github/             CODEOWNERS, списък на екипа и автоматичните проверки

Личната папка (designers/<име>/): profile.md (име, роля, зони, Git имейл), taste/ (вкусът ти и референциите), learnings.md (поуките от корекциите), proposals/ (предложенията ти за основата), skills/ (лични умения, ако си направиш). Записва се направо в main през отделен клон personal/..., защото е само твоя и не чака одобрение.

Основата са AGENTS.md, PRODUCT.md, scripts/, .agents/, .github/ и настройките. Hook-ът guard-foundation спира агента, ако опита да ги смени в задача. Промяна в тях минава като предложение към PM.

Как минава една задача технически:

„Нова задача“: scripts/task.mjs прави клон task/<човек>/<задача> от main, отделна работна папка и порт за прегледа, и отваря чернова на pull request.
Агентът чете AGENTS.md, PRODUCT.md, DESIGN.md, дизайн системата и личната ти папка, после пише кода на вариантите в prototype/.
След всеки отговор hook-ът за автоматичен запис прави commit и push в клона на задачата. Преди commit check-design проверява цветовете и шрифтовете.
Всеки push пуска в GitHub проверките и публикува прегледа на задачата в Cloudflare Pages.
„Покажи ми“: scripts/design-version.mjs снима екрана на 390 и 1440 px и записва версията в versions/. Стената се сглобява наново от тези записи.
„Готово“: статусът става „за одобрение“. PM избира „одобрено“ на Стената и дава Approve на pull request-а. Кодът влиза в main.
DEV взима пакета от точния одобрен commit.

Автоматичните проверки в GitHub (.github/workflows/): checks (дизайн системата, тестовете и сглобяването на прототипа), odobrenie (дали има нужното одобрение), lichno (личните папки), pregled и pregled-deploy (линкът за преглед), stena (Стената), design-md-izvestie (известие при промяна в DESIGN.md).

9. Технически въпроси

Къде точно е работата ми? В клона на задачата task/<човек>/<задача>, видим в GitHub като чернова на pull request от първата минута. Бележките на задачата (цел, направено, остава, решения) са в tasks/<задача>/<човек>.md. Кодът на екраните е в prototype/, по зони: Discover, Theater, Arena, Newsroom, Showtime.

Кога се записва? След всеки отговор на агента работата се записва и изпраща в GitHub сама, докато се работи в задача. Ако работиш извън задача, агентът първо я отваря и пренася незаписаното.

Какво е версия технически? Запис в versions/<екран>/<версия>/ със снимки на 390 и 1440 px и файл meta.json: точен commit, автор, адрес, бележка и история на статуса. По него всяка версия може да се отвори отново точно каквато е била.

Как вариантите са на един адрес? Вариантът е параметър в адреса: ?v=a, ?v=b. Данните се сменят с бутоните на началната страница (в адреса ?data=): „Демо“ за представяне, „Днес“ по часовника, „Бъдещи 3 мес.“ за избрана дата напред и „Лоши случаи“ за липсващи данни, дълги текстове и бавно зареждане.

Какво хваща проверката на дизайн системата? При всеки запис check-design спира цвят, шрифт, размер на шрифта или пренаписан компонент извън design-system/. Отстъпите, ъглите и сенките агентът проверява сам по DESIGN.md.

Как се одобрява? Изборът на Стената („одобрено“) е изборът на дизайна и го слага само PM. После PM дава Approve на pull request-а в GitHub и кодът влиза в основния клон main. Промяна само в DESIGN.md или design-system/ може да приемат и двама дизайнери, различни от автора.

Какво получава DEV? Пакет от точния одобрен commit: снимките, спецификацията със случаите, дизайн системата и кода на прототипа. Ако DEV има въпрос, версията се връща със статус „върнато“ и бележка, която виждаш на Стената и в следващата сесия.

Моята одобрена версия стана „върнато“. Сгреших ли? Не. PM е одобрил по-нова версия на същия екран и старата е заменена автоматично, с бележка „заменено от ...“.

Мога ли да счупя нещо? Правилата, скриптовете и проверките се сменят само с одобрение от PM. Всичко, което е в GitHub, се връща от историята. Нищо не се трие: отхвърлените варианти отиват в archive/.

Какво става при застъпване с колега? Когато двама сменят едно и също място, агентът спира, преди да запише. Агентът показва двете версии една до друга, вие избирате, после записва.

Как агентът знае кой съм? По Git имейла на компютъра. На чужд компютър кажи „аз съм <име>“.

Claude или Codex? И двата четат едни и същи правила (AGENTS.md), умения и лична папка. Разликата е, че в Claude Стената се отваря в панел вдясно, а в Codex в браузъра. В Claude агентът тръгва със Sonnet; Opus се предлага за финален вариант или след два отказа, в нова сесия.

Figma? Агентът чете конкретен фрейм по линк и го пренася с компонентите на NOISY. Може и обратното: изнася версия от прототипа във Figma за полиш. Връзката се включва веднъж с /mcp и вход във Figma.

Линковете за преглед? Всяка задача има свой тестов адрес в Cloudflare Pages, който се обновява сам около 2 минути след изпращане. Не е production. Докато не се включи входът с фирмен имейл, линковете не се дават извън екипа.

10. Ако нещо не работи

Виждаш	Какво правиш
Агентът казва, че работата е само на лаптопа	Нищо. Изпраща се сама при следващото записване с мрежа
Лимитът свърши	Работата е записана. Продължаваш, когато лимитът се поднови, в нова сесия или в Codex
„Тази промяна иска одобрение от PM“	Пипаш основата. Агентът записва идеята ти като предложение към PM
Figma не отговаря	Пиши `/mcp`, избери `figma` и влез отново
Нещо друго	Кажи „провери компютъра“

Последна редакция: 05.11.2026.

Вътрешна документация на MediaHub. Тестов адрес, не е продукция.