# 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. Пътят на една задача

<!-- fig:flow -->
```text
„нова задача“ -> агентът показва кратък бриф и започва
  -> варианти А, Б, В на един адрес
  -> „покажи ми“: снимки на телефон и компютър, Стената се отваря вдясно
  -> корекции с думи, нови версии
  -> „избирам Б“: другите отиват в архив
  -> „готово“: версията чака PM
  -> PM одобрява -> DEV получава пакета
  -> въпрос от DEV: версията се връща при теб с бележка
```

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

**Стената** е общото място на всички версии: 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 взима кода.

```text
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.

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

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