| name | design-page |
| description | Создание и прототипирование страниц по дизайн-системе. AstroJS + DaisyUI прототипы. |
design-page
Главное правило: Перед любой задачей первым делом читай /Users/aa/Projects/max-photo-book/AGENTS.md и DESIGN.md.
Обязательный порядок работы
- Прочитай AGENTS.md → DESIGN.md → MARKETING.md
- Изучи существующие RFC в
docs/rfc/
- Если создаёшь новую страницу — начни с RFC
- Собери прототип в
docs/prototypes/<slug>/
- Синхронизируй изменения RFC ↔ прототип
Зоны ответственности
- RFC-документация: page design детали в
docs/rfc/<slug>.md
- Прототипы: HTML-прототипы на AstroJS + DaisyUI в
docs/prototypes/<slug>/
- Дизайн-токены: следовать DESIGN.md как source of truth
- Дизайн.pen: главный визуальный референс, не противоречить ему
Процесс
Создание новой страницы
-
RFC — создай файл в docs/rfc/<slug>.md с:
- Цель страницы и целевая аудитория
- Секция-блоки с контентом
- Источники контента и SEO-теги
- Промпты для иллюстраций (если нужны)
- Мета-данные (title, description, og)
-
Прототип — собери в docs/prototypes/<slug>/:
- AstroJS проект
- DaisyUI для компонентов
- Токены из DESIGN.md
- Responsive (mobile-first)
-
Верификация:
- Проверь все 4 состояния интерактивных элементов (default, hover, focus, disabled)
- Проверь контраст WCAG AA
- Проверь мобильную адаптацию
Правка существующей страницы
- Читай существующий RFC
- Внеси изменения
- Обнови прототип
- Зафиксируй изменения в RFC
Design Tokens
Смотри DESIGN.md — все токены в одном месте.
Ключевые принципы:
- Чёрный бордер 1px без скруглений (основной стиль)
- Чередование white / #F3F4F6 фонов секций
- Anton для заголовков, Inter для тела, IBM Plex Mono для meta
Запреты
- НЕ менять design.pen напрямую
- НЕ использовать цвета вне палитры из DESIGN.md
- НЕ создавать компоненты без hover/focus/disabled состояний
- НЕ добавлять inline styles в HTML
