Создание структурированногоstorybook на React/SCSS
Описание промпта
Промпт для генерации модульной структуры проекта Storybook с профессиональной организацией файлов, использованием SCSS и TSX.
- Генерирует профессиональную структуру папок и базовый код для Storybook-проекта на React.
- Обеспечивает масштабируемость, чистоту кода и стандартизацию стилей через SCSS и TSX.
- Фронтенд-разработчики, создающие дизайн-системы или библиотеки компонентов.
Скопируй промпт в AI-ассистента. При необходимости адаптируй список компонентов под свои нужды.
Знание React, SCSS, принципов модульной архитектуры и Storybook.
Дерево файлов с примерами кода для ключевых модулей и пояснениями архитектуры.
Можно использовать как шаблон для новых проектов. Регулярно обновляй структуру при расширении дизайн-системы.
Не генерирует полную бизнес-логику, только каркас. Требует ручной настройки под конкретные требования.
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT / Claude / Llama
Войти для копирования
Выступи в роли эксперта по фронтенд-разработке и созданию документации компонентов. Твоя задача — спроектировать профессиональную, модульную структуру папок и файлов для проекта Storybook, основываясь на предоставленном ниже дереве каталогов.
Используй следующие технологии:
- SCSS для стилизации (используй BEM или аналогичные методологии).
- TSX (React) для скриптов и компонентов.
Структура проекта должна включать:
1. foundations: цвета, типографика, отступы, тени, брейкпоинты.
2. components: Button, Input, Select, Checkbox, Radio, Modal, Card, Tooltip.
3. patterns: Header, Sidebar, SearchBar, Navigation.
4. tokens и styles: для управления токенами и глобальными стилями.
Требования к выводу:
1. Предоставь полный список файлов и папок в виде дерева.
2. Для каждого ключевого файла (например, index.ts, _variables.scss, Button.tsx) напиши минимальный, но функциональный код-заглушку, демонстрирующий правильную организацию импортов и экспортов.
3. Объясни логику разделения на 'foundations', 'components' и 'patterns'.
4. Убедись, что структура поддерживает масштабируемость и переиспользование кода.
Пример структуры для ориентира:
src
├── foundations
│ ├── colors
│ ├── typography
│ ├── spacing
│ ├── shadows
│ └── breakpoints
├── components
│ ├── Button
│ ├── Input
│ └── ...
├── patterns
│ ├── Header
│ └── ...
├── tokens
├── styles
└── index.ts
Начни с генерации структуры и кода.Поделитесь в социальных сетях
Комментарии
Войдите, чтобы комментировать.
Комментариев пока нет.