Popular Web Designs

54 реальных дизайн-системы (Stripe, Linear, Vercel) в виде HTML/CSS.

Метаданные навыка

Справочник: полный SKILL.md

Popular Web Designs

54 реальных дизайн-системы, готовых к использованию при генерации HTML/CSS. Каждый шаблон охватывает полный визуальный язык сайта: цветовую палитру, типографическую иерархию, стили компонентов, систему отступов, тени, адаптивное поведение и практические промпты для агента с точными CSS-значениями.

Связанные навыки для дизайна

• claude-design — используй для самого процесса проектирования (уточнение задачи, генерация вариантов, проверка локального HTML-артефакта, борьба с «AI-design slop»). Комбинируй с этим навыком, когда пользователю нужна продуманно оформленная страница в стиле известного бренда: claude-design ведёт рабочий процесс, этот навык даёт визуальный словарь.
• design-md — используй, когда результатом должен быть формальный файл спецификации токенов DESIGN.md, а не отрендеренный артефакт.

Как использовать

1. Выбери дизайн из каталога ниже
2. Загрузи его: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. Используй дизайн-токены и спецификации компонентов при генерации HTML
4. Подключи навык generative-widgets, чтобы раздать результат через туннель cloudflared

Каждый шаблон содержит блок Hermes Implementation Notes в начале файла:

• CDN-замена шрифта и тег <link> для Google Fonts (готов к вставке)
• Стеки font-family для основного и моноширинного шрифтов
• Напоминания: создавать HTML через write_file, проверять результат через 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>
  <!-- Paste the Google Fonts <link> from the template's Hermes notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>

Запиши файл через write_file, опубликуй через generative-widgets (туннель cloudflared) и проверь визуальную точность через browser_vision.

Справочник по подстановке шрифтов

Большинство сайтов используют проприетарные шрифты, недоступные через CDN. Каждый шаблон сопоставлен с заменой из Google Fonts, сохраняющей характер дизайна. Распространённые соответствия:

Когда CDN-шрифт в шаблоне совпадает с оригиналом (Inter, IBM Plex, Rubik, Geist) — потерь нет. При использовании замены (DM Sans вместо Circular, Source Sans 3 вместо sohne-var) строго соблюдай насыщенность, размер и межбуквенный интервал из шаблона: именно они несут визуальную идентичность больше, чем конкретная гарнитура.

Каталог дизайнов

ИИ и машинное обучение

Инструменты разработчика и платформы

Инфраструктура и облако

Дизайн и продуктивность

Финтех и крипто

Корпоративное и потребительское

Выбор дизайна

Подбирай дизайн под содержание:

• Инструменты разработчика / дашборды: Linear, Vercel, Supabase, Raycast, Sentry
• Документация / контентные сайты: Mintlify, Notion, Sanity, MongoDB
• Маркетинг / лендинги: Stripe, Framer, Apple, SpaceX
• Тёмный режим: Linear, Cursor, ElevenLabs, Warp, Superhuman
• Светлый / чистый UI: 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