Сайт open-source проекта
Сайт open-source библиотеки в светлой инженерной теме на линиях: шапка с чипом звёзд GitHub, первый экран с копируемой командой установки и терминалом, который печатает сам, песочница, где переключатели меняют и код, и живую таблицу, возможности bento-плитками с CSS-микродемо, сравнение размера бандла растущими полосами, сообщество со стеной контрибьюторов из инициалов, история версий с метками breaking, призыв поставить звезду и минимальный подвал. Onest и JetBrains Mono, электрик-синий акцент.
Сайт библиотеки, который за минуту показывает, зачем она нужна и как её поставить: копируемая команда установки, терминал, песочница, где переключатели меняют и код, и результат, возможности плитками. Проект в демо вымышленный.
Из чего собрано
9 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка open-source проекта с чипом звёздnavbar-030
Имя пакета, версия, разделы, чип звёзд GitHub с count-up.
2. Первый экран
Первый экран библиотеки с установкой и живым терминаломhero-030
Заголовок, установка с вкладками и копированием, терминал печатает сам.
3. Песочница
Песочница: переключатели меняют код и живую таблицуopensource-001
Переключатели меняют код и живую таблицу одновременно.
4. Возможности
Возможности bento-плитками с CSS-микродемоbento-001
Bento-плитки с CSS-микродемо: виртуализация, сортировка, группировка, типы, размер.
5. Сравнение
Сравнение размера бандла растущими полосамиcomparison-006
Размер бандла полосами, растут при появлении, числа считают вверх.
6. Сообщество
Сообщество: count-up числа и стена контрибьюторовstats-002
Числа count-up и стена контрибьюторов из инициалов.
7. История версий
История версий с раскрытием и метками breakingchangelog-004
Аккордеон релизов с метками latest и breaking.
8. Звезда
Призыв поставить звезду с заливающейся звездойcta-024
Звезда заливается по наведению, кнопки GitHub и npm, спонсоры.
9. Подвал
Минимальный подвал open-source проектаfooter-029
Версия, лицензия, ссылки, статус CI.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Сайт open-source проекта»?
- Из 9 секций каталога по порядку: Шапка open-source проекта с чипом звёзд, Первый экран библиотеки с установкой и живым терминалом, Песочница, Возможности bento-плитками с CSS-микродемо, Сравнение размера бандла растущими полосами, Сообщество, История версий с раскрытием и метками breaking, Призыв поставить звезду с заливающейся звездой, Минимальный подвал open-source проекта. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.