Детальная спецификация одной страницы для разработчика или агента: дерево секций, раскладка, контент и поведение на брейкпоинтах.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — инженер дизайн-систем. Опиши одну страницу так, чтобы ИИ-агент или разработчик сверстал её без уточняющих вопросов. Страница: [название] Маршрут: [/path] Источник: [скриншот, Figma-описание или текущий код] Токены: [ссылка на CLAUDE.md или список токенов] Стек: [например: Next.js + Tailwind] Сделай: 1. Шапка: маршрут, layout-обёртка, какие данные нужны и откуда. 2. Дерево структуры сверху вниз, например: PAGE ├── Hero: h1, подзаголовок, CTA (primary, lg), изображение ├── Features: h2, FeatureCard × 3 (grid) └── CTA: h2, CTA (primary, lg) 3. Для каждой секции блок LAYOUT: контейнер (например `max-w-[1280px] mx-auto px-6`, на мобильном `px-4`), направление (flex-col на мобильном → flex-row на десктопе), gap, вертикальные отступы, фон. 4. Блок CONTENT: точные тексты или плейсхолдеры, тег, класс типографики, цвет-токен, ограничения длины и что происходит при переполнении. 5. Поведение: hover и focus, анимации появления (длительность, easing, reduced motion), клики и переходы. 6. Состояния данных: loading (skeleton с размерами финального блока), empty, error — через явные if/else. Формат: Markdown, значения только в классах/единицах проекта с px в скобках, без слов «примерно» и «по ситуации».
```text Ты — инженер дизайн-систем. Опиши одну страницу так, чтобы ИИ-агент или разработчик сверстал её без уточняющих вопросов. Страница: [название] Маршрут: [/path] Источник: [скриншот, Figma-описание или текущий код] Токены: [ссылка на CLAUDE.md или список токенов] Стек: [например: Next.js + Tailwind] Сделай: 1. Шапка: маршрут, layout-обёртка, какие данные нужны и откуда. 2. Дерево структуры сверху вниз, например: PAGE ├── Hero: h1, подзаголовок, CTA (primary, lg), изображение ├── Features: h2, FeatureCard × 3 (grid) └── CTA: h2, CTA (primary, lg) 3. Для каждой секции блок LAYOUT: контейнер (например `max-w-[1280px] mx-auto px-6`, на мобильном `px-4`), направление (flex-col на мобильном → flex-row на десктопе), gap, вертикальные отступы, фон. 4. Блок CONTENT: точные тексты или плейсхолдеры, тег, класс типографики, цвет-токен, ограничения длины и что происходит при переполнении. 5. Поведение: hover и focus, анимации появления (длительность, easing, reduced motion), клики и переходы. 6. Состояния данных: loading (skeleton с размерами финального блока), empty, error — через явные if/else. Формат: Markdown, значения только в классах/единицах проекта с px в скобках, без слов «примерно» и «по ситуации». ```
{
"messages": [
{
"role": "user",
"content": "Ты — инженер дизайн-систем. Опиши одну страницу так, чтобы ИИ-агент или разработчик сверстал её без уточняющих вопросов.\n\nСтраница: [название]\nМаршрут: [/path]\nИсточник: [скриншот, Figma-описание или текущий код]\nТокены: [ссылка на CLAUDE.md или список токенов]\nСтек: [например: Next.js + Tailwind]\n\nСделай:\n1. Шапка: маршрут, layout-обёртка, какие данные нужны и откуда.\n2. Дерево структуры сверху вниз, например:\nPAGE\n├── Hero: h1, подзаголовок, CTA (primary, lg), изображение\n├── Features: h2, FeatureCard × 3 (grid)\n└── CTA: h2, CTA (primary, lg)\n3. Для каждой секции блок LAYOUT: контейнер (например `max-w-[1280px] mx-auto px-6`, на мобильном `px-4`), направление (flex-col на мобильном → flex-row на десктопе), gap, вертикальные отступы, фон.\n4. Блок CONTENT: точные тексты или плейсхолдеры, тег, класс типографики, цвет-токен, ограничения длины и что происходит при переполнении.\n5. Поведение: hover и focus, анимации появления (длительность, easing, reduced motion), клики и переходы.\n6. Состояния данных: loading (skeleton с размерами финального блока), empty, error — через явные if/else.\n\nФормат: Markdown, значения только в классах/единицах проекта с px в скобках, без слов «примерно» и «по ситуации»."
}
]
}