Prismer Popular Web Designs

Popular Web Designs

54 adapted brand-reference descriptions for explicitly requested HTML/CSS design work. They retain palette, typography, component, spacing and prompt examples, but are not certified current brand specifications. Use source screenshots and actual product assets when fidelity matters; local corrections intentionally override invalid or inaccessible example values.

Related design skills

• frontend-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: frontend-design drives the workflow, this skill supplies the visual vocabulary.
• prismer-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: read templates/<site>.md relative to this skill directory
3. Use the design tokens and component specs when generating HTML
4. Use a loopback-only preview or an authenticated task artifact preview

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

• Optional network font fallback; vendor licensed fonts for offline output
• CSS font-family stacks for primary and monospace
• Reminders to use write_file for HTML creation and the available browser inspection tool for verification

HTML Generation Pattern

htmlCopy code
<!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 Prismer 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 on loopback or through an authenticated task preview, and verify the result with the available browser inspection tool 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