Popular Web Designs
54 реальных дизайн-системы (Stripe, Linear, Vercel) в HTML/CSS.
Метаданные навыка
| Источник | Встроенный (установлен по умолчанию) |
| Путь | skills/creative/popular-web-designs |
| Версия | 1.0.0 |
| Автор | VibeOS + Teknium (дизайн-системы взяты из VoltAgent/awesome-design-md) |
| Лицензия | MIT |
| Платформы | linux, macos, windows |
Справочник: полный SKILL.md
к сведению
Ниже приведено полное описание навыка, которое VibeOS загружает при его активации. Это те инструкции, которые видит агент, когда навык активен.
Popular Web Designs
54 реальные дизайн-системы, готовые к использованию при генерации HTML/CSS. Каждый шаблон содержит полный визуальный язык сайта: цветовую палитру, иерархию типографики, стили компонентов, систему отступов, тени, адаптивное поведение и практичные подсказки для агента с точными значениями CSS.
Связанные навыки дизайна
claude-design— используйте для процесса и вкуса в дизайне (определение брифа, создание вариантов, проверка локального HTML-артефакта, избегание шаблонного AI-дизайна). Сочетайте с этим навыком, когда пользователь хочет продуманно оформленную страницу в стиле известного бренда:claude-designуправляет рабочим процессом, а этот навык предоставляет визуальный словарь.design-md— используйте, когда результатом должен быть формальный файл спецификации DESIGN.md, а не визуализированный артефакт.
Как использовать
- Выберите дизайн из каталога ниже
- Загрузите его:
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - Используйте токены дизайна и спецификации компонентов при генерации HTML
- Сочетайте с навыком
generative-widgets, чтобы опубликовать результат через туннель cloudflared
Каждый шаблон включает блок VibeOS Implementation Notes в начале с:
- CDN-заменителем шрифта и тегом
<link>для Google Fonts (готов к вставке) - CSS-стеком font-family для основного и моноширинного шрифтов
- Напоминаниями об использовании
write_fileдля создания HTML иbrowser_visionдля проверки
Шаблон генерации HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<!-- Вставьте тег <link> для Google Fonts из заметок VibeOS в шаблоне -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
/* Примените цветовую палитру шаблона как CSS-свойства */
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
/* ... остальное из раздела 2 шаблона */
}
/* Примените типографику из раздела 3 шаблона */
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
/* Примените стили компонентов из раздела 4 шаблона */
/* Примените макет из раздела 5 шаблона */
/* Примените тени из раздела 6 шаблона */
</style>
</head>
<body>
<!-- Создайте структуру, используя спецификации компонентов из шаблона -->
</body>
</html>
Запишите файл с помощью write_file, опубликуйте через рабочий процесс generative-widgets (туннель cloudflared) и проверьте результат с помощью browser_vision, чтобы убедиться в визуальной точности.
Справочник по замене шрифтов
Большинство сайтов используют проприетарные шрифты, недоступные через CDN. Каждый шаблон сопоставляется с заменителем из Google Fonts, сохраняющим характер дизайна. Распространённые соответствия:
| Проприетарный шрифт | Заменитель CDN | Характер |
|---|---|---|
| Geist / Geist Sans | Geist (на Google Fonts) | Геометрический, сжатый трекинг |
| Geist Mono | Geist Mono (на Google Fonts) | Чистый моноширинный, лигатуры |
| sohne-var (Stripe) | Source Sans 3 | Элегантность светлого начертания |
| Berkeley Mono | JetBrains Mono | Технический моноширинный |
| Airbnb Cereal VF | DM Sans | Округлый, дружелюбный геометрический |
| Circular (Spotify) | DM Sans | Геометрический, тёплый |
| figmaSans | Inter | Чистый гуманистический |
| Pin Sans (Pinterest) | DM Sans | Дружелюбный, округлый |
| NVIDIA-EMEA | Inter (или системный Arial) | Индустриальный, чистый |
| CoinbaseDisplay/Sans | DM Sans | Геометрический, вызывающий доверие |
| UberMove | DM Sans | Жирный, плотный |
| HashiCorp Sans | Inter | Корпоративный, нейтральный |
| waldenburgNormal (Sanity) | Space Grotesk | Геометрический, слегка сжатый |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Доступны в Google Fonts |
| Rubik (Sentry) | Rubik | Доступен в Google Fonts |
Когда CDN-шрифт шаблона совпадает с оригиналом (Inter, IBM Plex, Rubik, Geist), потери при замене нет. Когда используется заменитель (DM Sans вместо Circular, Source Sans 3 вместо sohne-var), строго следуйте значениям веса, размера и межбуквенного расстояния из шаблона — они несут больше визуальной идентичности, чем конкретный гарнитура.
Каталог дизайнов
AI и машинное обучение
| Шаблон | Сайт | Стиль |
|---|---|---|
claude.md | Anthropic Claude | Тёплый терракотовый акцент, чистый редакторский макет |
cohere.md | Cohere | Яркие градиенты, эстетика информационных панелей |
elevenlabs.md | ElevenLabs | Тёмный кинематографичный интерфейс, эстетика звуковых волн |
minimax.md | Minimax | Смелый тёмный интерфейс с неоновыми акцентами |
mistral.ai.md | Mistral AI | Французский минимализм, фиолетовые тона |
ollama.md | Ollama | Терминальный подход, монохромная простота |
opencode.ai.md | OpenCode AI | Тёмная тема для разработчиков, полный моноширинный шрифт |
replicate.md | Replicate | Чистый белый холст, ориентация на код |
runwayml.md | RunwayML | Кинематографичный тёмный интерфейс, медиа-насыщенный макет |
together.ai.md | Together AI | Технический дизайн в стиле чертежей |
voltagent.md | VoltAgent | Чёрный холст, изумрудный акцент, терминальный стиль |
x.ai.md | xAI | Строгая монохромность, футуристический минимализм, полный моноширинный шрифт |
Инструменты для разработчиков и платформы
| Шаблон | Сайт | Стиль |
|---|---|---|
cursor.md | Cursor | Элегантный тёмный интерфейс, градиентные акценты |
expo.md | Expo | Тёмная тема, плотный межбуквенный интервал, ориентация на код |
linear.app.md | Linear | Ультраминималистичная тёмная тема, точность, фиолетовый акцент |
lovable.md | Lovable | Игривые градиенты, дружелюбная разработческая эстетика |
mintlify.md | Mintlify | Чистый, зелёный акцент, оптимизирован для чтения |
posthog.md | PostHog | Игривый брендинг, дружелюбный тёмный интерфейс для разработчиков |
raycast.md | Raycast | Элегантный тёмный хром, яркие градиентные акценты |
resend.md | Resend | Минималистичная тёмная тема, моноширинные акценты |
sentry.md | Sentry | Тёмная панель, насыщенная данными, розово-фиолетовый акцент |
supabase.md | Supabase | Тёмная изумрудная тема, инструмент для разработчиков с приоритетом кода |
superhuman.md | Superhuman | Премиальный тёмный интерфейс, клавиатурный подход, фиолетовое свечение |
vercel.md | Vercel | Чёрно-белая точность, система шрифтов Geist |
warp.md | Warp | Тёмный интерфейс в стиле IDE, блочный командный интерфейс |
zapier.md | Zapier | Тёплый оранжевый, дружелюбный, с иллюстрациями |
Инфраструктура и облако
| Шаблон | Сайт | Стиль |
|---|---|---|
clickhouse.md | ClickHouse | Жёлтый акцент, стиль технической документации |
composio.md | Composio | Современный тёмный с красочными иконками интеграций |
hashicorp.md | HashiCorp | Корпоративная чистота, чёрный и белый |
mongodb.md | MongoDB | Зелёный брендинг с листом, фокус на документацию для разработчиков |
sanity.md | Sanity | Красный акцент, контент-ориентированный редакторский макет |
stripe.md | Stripe | Фирменные фиолетовые градиенты, элегантность weight-300 |
Дизайн и продуктивность
| Шаблон | Сайт | Стиль |
|---|---|---|
airtable.md | Airtable | Красочный, дружелюбный, эстетика структурированных данных |
cal.md | Cal.com | Чистый нейтральный интерфейс, простота для разработчиков |
clay.md | Clay | Органические формы, мягкие градиенты, художественный макет |
figma.md | Figma | Яркий многоцветный, игривый, но профессиональный |
framer.md | Framer | Смелый чёрный и синий, приоритет анимации, современный дизайн |
intercom.md | Intercom | Дружелюбная синяя палитра, паттерны диалогового интерфейса |
miro.md | Miro | Яркий жёлтый акцент, эстетика бесконечного холста |
notion.md | Notion | Тёплый минимализм, заголовки с засечками, мягкие поверхности |
pinterest.md | Красный акцент, сетка в стиле masonry, макет с приоритетом изображений | |
webflow.md | Webflow | Синий акцент, эстетика отполированного маркетингового сайта |
Финтех и крипто
| Шаблон | Сайт | Стиль |
|---|---|---|
coinbase.md | Coinbase | Чистый синий брендинг, ориентирован на доверие, институциональный стиль |
kraken.md | Kraken | Фиолетовый акцент на тёмном интерфейсе, панели с большим объёмом данных |
revolut.md | Revolut | Элегантный тёмный интерфейс, градиентные карты, финтех-точность |
wise.md | Wise | Яркий зелёный акцент, дружелюбный и понятный |
Корпоративные и потребительские
| Шаблон | Сайт | Стиль |
|---|---|---|
airbnb.md | Airbnb | Тёплый коралловый акцент, фотографический подход, округлый интерфейс |
apple.md | Apple | Премиальное белое пространство, SF Pro, кинематографичные изображения |
bmw.md | BMW | Тёмные премиальные поверхности, точная инженерная эстетика |
ibm.md | IBM | Дизайн-система Carbon, структурированная синяя палитра |
nvidia.md | NVIDIA | Зелёно-чёрная энергия, эстетика технической мощи |
spacex.md | SpaceX | Строгий чёрный и белый, изображения на всю ширину, футуристичность |
spotify.md | Spotify | Яркий зелёный на тёмном, жирный шрифт, эстетика обложек альбомов |
uber.md | Uber | Смелый чёрный и белый, плотный шрифт, городская энергия |
Выбор дизайна
Подбирайте дизайн под содержание:
- Инструменты для разработчиков / панели: Linear, Vercel, Supabase, Raycast, Sentry
- Документация / контентные сайты: Mintlify, Notion, Sanity, MongoDB
- Маркетинг / лендинги: Stripe, Framer, Apple, SpaceX
- Тёмные интерфейсы: Linear, Cursor, ElevenLabs, Warp, Superhuman
- Светлые / чистые интерфейсы: Vercel, Stripe, Notion, Cal.com, Replicate
- Игривые / дружелюбные: PostHog, Figma, Lovable, Zapier, Miro
- Премиальные / люксовые: Apple, BMW, Stripe, Superhuman, Revolut
- Насыщенные данными / панели: Sentry, Kraken, Cohere, ClickHouse
- Моноширинная / терминальная эстетика: Ollama, OpenCode, x.ai, VoltAgent