Popular Web Designs

54 real-world design systems ready for use when generating HTML/CSS. Each template captures a site's complete visual language: color palette, typography hierarchy, component styles, spacing system, shadows, responsive behavior, and practical agent prompts with exact CSS values.

Related design skills

• claude-design — use for the design process and taste (scoping a brief, producing variants, verifying a local HTML artifact, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand: claude-design drives the workflow, this skill supplies the visual vocabulary.
• design-md — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.

How to Use

1. Pick a design from the catalog below
2. Load it: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. Use the design tokens and component specs when generating HTML
4. Pair with the generative-widgets skill to serve the result via cloudflared tunnel

Each template includes a Hermes Implementation Notes block at the top with:

• CDN font substitute and Google Fonts <link> tag (ready to paste)
• CSS font-family stacks for primary and monospace
• Reminders to use write_file for HTML creation and browser_exec (capture_screenshot()) for verification

HTML Generation Pattern

<!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 the file with write_file, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browser_exec: open the page, capture_screenshot(), and inspect the image to confirm visual accuracy.

Font Substitution Reference

Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. Common mappings:

When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3 for sohne-var), follow the template's weight, size, and letter-spacing values closely — those carry more visual identity than the specific font face.

Design Catalog

AI & Machine Learning

Developer Tools & Platforms

Infrastructure & Cloud

Design & Productivity

Fintech & Crypto

Enterprise & Consumer

Choosing a Design

Match the design to the content:

• Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
• Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
• Marketing / landing pages: Stripe, Framer, Apple, SpaceX
• Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
• Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
• Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
• Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
• Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
• Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent