Тимур Городецкий
81 lines
4.8 KiB
Markdown
81 lines
4.8 KiB
Markdown
# Промпт-шаблон: переверстка веб-части под дизайн-систему @tansu/design-system
|
||
|
||
Открой новый чат с Claude в папке нужного проекта. Приложи:
|
||
1. `tansu_v5_executive_premium.html` — визуальный эталон компонентов.
|
||
2. Код веб-части (`.tsx` и `.module.scss`).
|
||
|
||
Токены **не прикладывай** — они уже в проекте как пакет
|
||
`@tansu/design-system`. Затем вставь промпт ниже (замени `[…]`).
|
||
|
||
---
|
||
|
||
```
|
||
Ты — senior SPFx-разработчик. Перевёрстай стили веб-части под общую дизайн-систему.
|
||
|
||
## Дизайн-система (уже установлена как пакет)
|
||
Стили берём ТОЛЬКО из @tansu/design-system. В каждом .module.scss:
|
||
@import '~@tansu/design-system/styles/tokens';
|
||
Доступны: $navy-*, $gold-*, $gray-*, семантические цвета, $font-serif/$font-sans,
|
||
$fs-*, $r-*, $sh-*, $grad-*, $sp-1…$sp-8 и миксины:
|
||
page-header, card-hover-gold, btn-accent, input-focus-gold, hairline.
|
||
|
||
## Референс (приложен)
|
||
tansu_v5_executive_premium.html — эталонный вид всех компонентов.
|
||
ВНИМАНИЕ: тёмная верхняя навигация с табами в мокапе — ТОЛЬКО для просмотра,
|
||
НЕ часть дизайна. Не добавляй её в веб-часть (навигацию даёт сам SharePoint).
|
||
Веб-часть начинается с хлебных крошек и шапки (.ph).
|
||
|
||
## Контекст проекта
|
||
- SPFx 1.22.1, сборка на Heft (команда запуска: `heft start`, НЕ gulp).
|
||
- React 17, TypeScript strict, SCSS Modules.
|
||
- Это веб-часть [НАЗВАНИЕ].
|
||
|
||
## Задача
|
||
1. В каждом .module.scss добавь @import '~@tansu/design-system/styles/tokens'.
|
||
2. Замени ВСЕ хардкод-цвета на переменные из токенов (сырой hex запрещён).
|
||
3. Приведи компоненты к эталону из HTML:
|
||
- Шапка экрана → @include page-header + заголовок $font-serif.
|
||
- Кнопки → 5 уровней (Primary navy / Accent gold / Secondary / Ghost / Danger),
|
||
не больше одной Accent на экран.
|
||
- Инпуты → @include input-focus-gold.
|
||
- Карточки → @include card-hover-gold.
|
||
- Таблицы → uppercase-заголовки, hover строки $gold-50.
|
||
- Бейджи → со статус-точкой.
|
||
4. Иконки — @fluentui/react-icons, стиль Regular (outline).
|
||
5. Формат всех дат: дд.мм.гггг.
|
||
|
||
## Стиль кода (обязательно)
|
||
- React Function Components + hooks, без классов.
|
||
- interface Props явно; логика отделена от JSX; ранние return.
|
||
- Один компонент — один файл. Запросы к SharePoint — только в services/.
|
||
- Явно обрабатывай loading / error / empty.
|
||
|
||
## Ограничения
|
||
- НЕ меняй бизнес-логику, props, state, обработчики, запросы к SharePoint.
|
||
- НЕ переименовывай CSS-классы, на которые ссылается .tsx, без правки .tsx.
|
||
- Выводи полные файлы целиком, а не фрагменты.
|
||
|
||
## Код веб-части
|
||
[приложены файлы]
|
||
```
|
||
|
||
---
|
||
|
||
## Порядок работы
|
||
- **Одна веб-часть (или один экран) = одна сессия.** Не грузи весь проект сразу.
|
||
- После сессии: `heft start` → workbench → скриншот → при расхождении попроси
|
||
сравнить скриншот с нужной вкладкой HTML-референса и поправить.
|
||
|
||
## Чек-лист соответствия V5 (по каждой веб-части)
|
||
- [ ] НЕТ тёмной верхней навигации из мокапа
|
||
- [ ] Шапка: navy-градиент, золотая линия снизу, заголовок Lora
|
||
- [ ] Хлебные крошки с золотым разделителем
|
||
- [ ] Кнопки: не больше одной Accent на экран
|
||
- [ ] Инпуты: золотой focus-ring
|
||
- [ ] Таблицы: uppercase-заголовки, золотой hover
|
||
- [ ] Карточки: подъём на 2px + золотая рамка при hover
|
||
- [ ] Бейджи со статус-точкой
|
||
- [ ] Даты: дд.мм.гггг
|
||
- [ ] Иконки: Fluent UI Regular (outline)
|
||
- [ ] Нет сырого hex — только переменные токенов
|