Прогноз ML посчитан, он лежит в Excel на тысячи строк. Коллегам нужно другое: выбрать город и SKU, увидеть факт и прогноз на графике, поправить месяц и выгрузить правки. В этом уроке Claude Code строит такой экран: один HTML-файл, который открывается в браузере с общего диска. Без сервера, без интернета, без ключа API.
The ML forecast is calculated and sits in Excel, thousands of rows. Colleagues need something else: pick a city and SKU, see actuals and forecast on a chart, adjust a month and export the edits. In this lesson Claude Code builds that screen: one HTML file that opens in a browser from the shared drive. No server, no internet, no API key.
Всё хранится, всё по полкам: 3 страны × 40 городов × 200 SKU × 18 месяцев. Найти нужное можно, но долго, и легко взять не с той полки.
Everything is stored, all on shelves: 3 countries × 40 cities × 200 SKUs × 18 months. You can find things, but slowly, and it's easy to grab from the wrong shelf.
Витрина показывает выбранное красиво и сразу: график, итоги, точность. Прилавок — место, где «отпускают товар»: правка месяца и выгрузка правок. Склад при этом не трогают.
The window shows what you picked, clearly and at once: chart, totals, accuracy. The counter is where goods are "handed out": a month edit and an edit export. The warehouse itself is not touched.
Как устроено: цифры идут по цепочке. Каждое звено — отдельный файл, Claude Code пишет их все.
How it works: the numbers travel along a chain. Each link is a separate file; Claude Code writes them all.
extract.pydata.jsonbuild.pyforecast_ui.htmlextract.py — запустите всю цепочку до шага 5. Иначе data.json уже новый, а экран показывает старые цифры. Это самая частая ловушка: «я же исправила!» — исправила, но не пересобрала. Поэтому вся цепочка запускается одной кнопкой RUN_forecast_ui.bat. Changed an export or extract.py — run the whole chain through step 5. Otherwise data.json is new but the screen shows old numbers. This is the most common trap: "but I fixed it!" — fixed, but not rebuilt. That's why the whole chain runs with one button, RUN_forecast_ui.bat. Так выглядит хороший экран прогноза. Это рисунок, а не настоящий файл: по нему удобно объяснять Claude, чего вы хотите.
This is what a good forecast screen looks like. It's a drawing, not a real file: it helps you explain to Claude what you want.
Это настоящий маленький интерфейс — такой Claude Code соберёт вам за полчаса, только на ваших данных. Лимонад 0,5, три города, 8 месяцев факта и 4 месяца прогноза, тыс. л. Выберите город, месяц прогноза и поставьте новую цифру — или нажмите +10 %.
This is a real tiny interface — Claude Code will build one like it for you in half an hour, only on your data. Lemonade 0.5, three cities, 8 months of actuals and 4 months of forecast, k L. Pick a city and a forecast month and set a new number — or press +10%.
Хорошее ТЗ — половина интерфейса. Откройте Claude Code в папке проекта, включите режим плана (Shift+Tab, пока внизу не появится plan mode — урок 15-25) и вставьте текст ниже. Поменяйте имена файлов и список фильтров под себя.
A good specification is half the interface. Open Claude Code in the project folder, switch on plan mode (Shift+Tab until plan mode shows at the bottom — lesson 15-25) and paste the text below. Change the file names and the filter list to yours.
Нужен экран для прогноза ML отдела планирования «Долины напитков».
КТО ПОЛЬЗУЕТСЯ: 6 планеров и руководитель. Не программисты. Открывают файл двойным щелчком с общего диска.
ДАННЫЕ:
- input/forecast_ml.xlsx — прогноз ML, город × SKU × месяц, тыс. л, 18 месяцев вперёд;
- input/sales.xlsx — факт за 24 месяца, тот же уровень;
- input/baseline.xlsx — чистая базовая линия (из навыка очистки);
- input/sku_list.xlsx — справочник SKU: код, название, суббренд, страна.
Исходные файлы только читать. Ничего в них не менять.
ЧТО НА ЭКРАНЕ:
1. Слева фильтры: страна, город, суббренд, SKU. По умолчанию «Все».
2. Плитки: прогноз на год, рост к прошлому году в %, точность прошлых прогнозов (DFA).
3. График по месяцам: факт, чистая база, прогноз ML. Подписи в тысячах литров.
4. Таблица город × месяц под графиком.
5. Кнопка «✎ Правка»: меняю цифру месяца на текущем срезе.
6. Кнопка «⬇ Excel»: выгрузка текущего среза и журнала правок.
7. Вкладка «Откуда цифра?»: для каждой плитки — из какого файла и шага число.
ПРАВИЛА ПРАВКИ:
- разница уходит в базовую линию, блоки (промо и т. п.) не трогать;
- разносить по строкам город × SKU пропорционально их текущим значениям, доли сохраняются, ничего не уходит в минус;
- править только месяцы прогноза, факт заблокирован;
- журнал правок: кто, когда, срез, месяц, было, стало. Каждая правка — отдельная строка;
- правки выгружаются отдельным листом Adjusted_Forecast в новый файл. Исходник не перезаписывать.
ТЕХНИКА:
- один HTML-файл, без сервера и без интернета. Все библиотеки — внутри файла;
- ключ API внутрь не класть никогда;
- никаких абсолютных путей: только от папки скрипта, чтобы работало у любого коллеги;
- extract.py → data.json → build.py → forecast_ui.html, всё запускается RUN_forecast_ui.bat;
- выгрузка в Excel: числа числами, без заливок.
ПРОВЕРКА: после сборки покажи итог прогноза и факта по каждой стране в HTML и в исходных файлах. Должны совпасть до единицы. Если нет — остановись и скажи, где разница.
КАК РАБОТАЕМ: сначала покажи план — какие файлы создашь и что в каждом. Если что-то непонятно — задавай вопросы по одному. Код пиши только после моего «да». I need a screen for the ML forecast of the Valley Beverages planning team.
WHO USES IT: 6 planners and a manager. Not programmers. They open the file with a double click from the shared drive.
DATA:
- input/forecast_ml.xlsx — ML forecast, city × SKU × month, k L, 18 months ahead;
- input/sales.xlsx — actuals for 24 months, same level;
- input/baseline.xlsx — clean base line (from the cleaning skill);
- input/sku_list.xlsx — SKU lookup: code, name, sub-brand, country.
Read the source files only. Never change them.
ON THE SCREEN:
1. Filters on the left: country, city, sub-brand, SKU. Default "All".
2. Tiles: forecast for the year, growth vs last year in %, accuracy of past forecasts (DFA).
3. Monthly chart: actuals, clean base, ML forecast. Labels in thousand litres.
4. A city × month table under the chart.
5. An "✎ Edit" button: I change a month's number on the current slice.
6. An "⬇ Excel" button: export the current slice and the edit journal.
7. A "Where's it from?" tab: for each tile — which file and step the number comes from.
EDITING RULES:
- the difference goes to the base line, don't touch the blocks (promo etc.);
- spread over city × SKU rows in proportion to their current values, shares are kept, nothing goes negative;
- edit only forecast months, actuals are locked;
- edit journal: who, when, slice, month, before, after. Each edit is a separate line;
- edits are exported as a separate sheet Adjusted_Forecast in a new file. Never overwrite the source.
TECHNICAL:
- one HTML file, no server and no internet. All libraries inside the file;
- never put an API key inside;
- no absolute paths: only relative to the script folder, so it works for any colleague;
- extract.py → data.json → build.py → forecast_ui.html, all run by RUN_forecast_ui.bat;
- Excel export: numbers as numbers, no fills.
CHECK: after the build, show the forecast and actuals totals per country in the HTML and in the source files. They must match to the unit. If not, stop and tell me where the difference is.
HOW WE WORK: first show the plan — which files you'll create and what's in each. If anything is unclear, ask questions one at a time. Write code only after my "yes". 1. Добавь фильтр SKU под суббрендом; список SKU зависит от выбранного суббренда.
2. Все подписи и плитки — в тысячах литров, одна цифра после запятой, пробел между тысячами.
3. Добавь плитки: прогноз на год, рост к прошлому году, точность DFA. Под каждой — мелко, из какого файла.
4. Добавь кнопку «⬇ Excel»: выгрузи текущий срез, числа числами, без заливок. Имя файла — что выгружено и все фильтры.
5. Добавь правку месяца по правилам из ТЗ и вкладку «Правки» с журналом.
6. Добавь вкладку «Откуда цифра?»: для каждой плитки — файл, шаг и формула словами. 1. Add an SKU filter under the sub-brand; the SKU list depends on the chosen sub-brand.
2. All labels and tiles in thousand litres, one decimal, a space between thousands.
3. Add tiles: forecast for the year, growth vs last year, DFA accuracy. Under each — in small print, which file it comes from.
4. Add an "⬇ Excel" button: export the current slice, numbers as numbers, no fills. File name — what was exported and all the filters.
5. Add month editing according to the rules in the specification and an "Edits" tab with the journal.
6. Add a "Where's it from?" tab: for each tile — the file, step and formula in words. /forecast-ui по уроку 15-28: «пересобери экран, сверь итоги, скажи, что изменилось с прошлого раза». "Make RUN_forecast_ui.bat: Latin characters only, changes to its own folder, runs extract.py and build.py, prints the totals at the end and pause." Or package it as a /forecast-ui skill as in lesson 15-28: "rebuild the screen, reconcile the totals, tell me what changed since last time".forecast_ui.html в общую папку отдела (OneDrive / SharePoint). Попросите одного коллегу открыть его со своего ноутбука — это главная проверка. Потом отправьте ссылку всем: «Экран прогноза, обновляется каждый понедельник». Put forecast_ui.html in the team's shared folder (OneDrive / SharePoint). Ask one colleague to open it from their own laptop — that is the key test. Then send the link to everyone: "Forecast screen, updated every Monday."| Артефакт в чате (урок 15-15)Artifact in chat (lesson 15-15) | Claude Code + скрипт сборкиClaude Code + build script | |
|---|---|---|
| СкоростьSpeed | 5 минут5 minutes | полдня на первую версиюhalf a day for the first version |
| ДанныеData | вставляете руками, каждый раз зановоpasted by hand, every time again | обновляются кнопкой .bat из свежих выгрузокrefreshed by the .bat button from fresh exports |
| Где живётWhere it lives | в claude.aiin claude.ai | файл на вашем общем дискеa file on your shared drive |
| ОбъёмVolume | десятки–сотни строкtens to hundreds of rows | десятки тысяч строк город × SKU × месяцtens of thousands of city × SKU × month rows |
| Когда братьWhen to use | разовый вопрос, показать идею, прототипa one-off question, showing an idea, a prototype | экран, которым команда пользуется каждый месяцa screen the team uses every month |
Удобная связка: нарисуйте прототип артефактом в чате на 20 строках, покажите коллегам, соберите замечания — и только потом отдайте ТЗ в Claude Code.
A handy combination: sketch a prototype as a chat artifact on 20 rows, show it to colleagues, collect feedback — and only then hand the specification to Claude Code.
Технически — да, через ключ API. Но ключ должен лежать внутри HTML, а HTML — это текст. Любой, кто откроет файл Блокнотом, увидит ключ и сможет тратить деньги компании от вашего имени. Файл на общем диске видят десятки людей. Поэтому ответ: ключ в HTML — никогда.
Technically — yes, via an API key. But the key has to sit inside the HTML, and HTML is text. Anyone who opens the file in Notepad sees the key and can spend company money in your name. Dozens of people see a file on the shared drive. So the answer: a key in HTML — never.
Большинство вопросов к экрану — «откуда эта цифра». На них отвечают сами данные: «Прогноз FY = сумма прогноза ML по 12 месяцам, файл forecast_ml.xlsx, шаг extract». Claude Code соберёт такие ответы при сборке — без ключа и без интернета.
Most questions to a screen are "where does this number come from". The data itself answers them: "Forecast FY = sum of the ML forecast over 12 months, file forecast_ml.xlsx, extract step." Claude Code builds these answers at build time — no key, no internet.
Для сложного вопроса кнопка копирует в буфер текущий срез и его цифры: «Ветровск, Лимонад 0,5, янв 2027: прогноз 15,0, год назад 13,2…». Вы вставляете это в обычный чат Claude и спрашиваете. Данные уходят только туда, куда вы сами вставили.
For a hard question the button copies the current slice and its numbers to the clipboard: "Vetrovsk, Lemonade 0.5, Jan 2027: forecast 15.0, a year ago 13.2…". You paste it into a normal Claude chat and ask. The data goes only where you paste it.
Claude Code предлагает решения. Выберите, как правильно ответить.
Claude Code proposes solutions. Choose the right reply.
Учебный прогноз «Долины напитков»: 3 города × 2 SKU × 6 месяцев (ноябрь 2026 – апрель 2027), тыс. л. Скачайте файл и положите в папку input нового проекта.
A Valley Beverages training forecast: 3 cities × 2 SKUs × 6 months (November 2026 – April 2027), k L. Download the file and put it in the input folder of a new project.
Итоги за ноябрь – апрель, тыс. л:
Totals for November – April, k L:
| ГородCity | Вода 1,5Water 1.5 | Лимонад 0,5Lemonade 0.5 | ИтогоTotal |
|---|---|---|---|
| ВетровскVetrovsk | 259 | 147 | 406 |
| БереговойBeregovoy | 191 | 100 | 291 |
| КаменскKamensk | 129 | 67 | 196 |
| ВсегоTotal | 579 | 314 | 893 |
По месяцам (все города): ноя 137 · дек 124 · янв 129 · фев 145 · мар 167 · апр 191.
By month (all cities): Nov 137 · Dec 124 · Jan 129 · Feb 145 · Mar 167 · Apr 191.
Март +10 %: 167 → 183,7. Ветровск 76 → 83,6 (вода 52,8, лимонад 30,8); Береговой 54 → 59,4 (38,5 и 20,9); Каменск 37 → 40,7 (26,4 и 14,3). Доли до и после одинаковые: 45,5 % · 32,3 % · 22,2 %. Итог полугодия 893 → 909,7.
March +10%: 167 → 183.7. Vetrovsk 76 → 83.6 (water 52.8, lemonade 30.8); Beregovoy 54 → 59.4 (38.5 and 20.9); Kamensk 37 → 40.7 (26.4 and 14.3). Shares before and after are the same: 45.5% · 32.3% · 22.2%. The six-month total 893 → 909.7.
Если итог в экране другой — скорее всего, экран считает не все строки (фильтр по умолчанию не «Все») или файл прочитан с неправильным разделителем. Попросите Claude показать число прочитанных строк: должно быть 36.
If the screen shows a different total, most likely it doesn't count all rows (the default filter isn't "All") or the file was read with the wrong separator. Ask Claude to show the number of rows read: it should be 36.
| ОшибкаMistake | Как правильноDo this instead |
|---|---|
| Поправили extract.py, а экран показывает староеFixed extract.py, but the screen shows old numbers | Запускать всю цепочку через .bat, смотреть HTML, а не data.jsonRun the whole chain via the .bat, look at the HTML, not data.json |
| Ключ API вписали в HTML «чтобы был чат»Put an API key in the HTML "to have a chat" | Никогда. Вкладка «Откуда цифра?» + кнопка «Скопировать для Claude»Never. A "Where's it from?" tab + a "Copy for Claude" button |
| У коллеги «файл не найден»A colleague gets "file not found" | В скрипте путь к вашей личной папке. Пути — только от папки скриптаThe script has a path to your personal folder. Paths only relative to the script folder |
| У коллеги без сети пустой экранA colleague offline sees an empty screen | Библиотека грузилась из интернета. Попросите вшить её в файлA library was loaded from the internet. Ask to embed it in the file |
| 50 функций одним запросом50 features in one request | Минимум → сверка → по одной функции с пересборкойMinimum → reconcile → one feature at a time with a rebuild |
| Красивый экран, цифры никто не сверялA beautiful screen, nobody checked the numbers | Итог по стране, городу и SKU — с Excel, до единицы, до показа людямTotals by country, city and SKU — against Excel, to the unit, before showing people |
| Правка экрана перезаписала исходный прогнозAn edit on the screen overwrote the source forecast | Правки — отдельным листом Adjusted_Forecast в новый файлEdits go to a separate Adjusted_Forecast sheet in a new file |
RUN_forecast_ui.bat или навык /forecast-uiRUN_forecast_ui.bat or a /forecast-ui skill