/prismer-popular-web-designs

name: prismer-popular-web-designs
scope: common
category: creative
description: 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
version: 1.0.0
author: Hermes Agent + Teknium (design systems sourced from
  VoltAgent/awesome-design-md)
license: MIT
tags: [ design, css, html, ui, web-development, design-systems, templates ]
platforms: [ linux, macos, windows ]
triggers:
  - build a page that looks like
  - make it look like stripe
  - design like linear
  - vercel style
  - create a UI
  - web design
  - landing page
  - dashboard design
  - website styled like
metadata:
  nativeReplaces: [ popular-web-designs ]
  requiresExplicitGrant: true

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

<!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:

| Proprietary Font | CDN Substitute | Character | |---|---|---| | Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking | | Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures | | sohne-var (Stripe) | Source Sans 3 | Light weight elegance | | Berkeley Mono | JetBrains Mono | Technical monospace | | Airbnb Cereal VF | DM Sans | Rounded, friendly geometric | | Circular (Spotify) | DM Sans | Geometric, warm | | figmaSans | Inter | Clean humanist | | Pin Sans (Pinterest) | DM Sans | Friendly, rounded | | NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean | | CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy | | UberMove | DM Sans | Bold, tight | | HashiCorp Sans | Inter | Enterprise, neutral | | waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed | | IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts | | Rubik (Sentry) | Rubik | Available on Google Fonts |

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

| Template | Site | Style | |---|---|---| | `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout | | `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic | | `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics | | `minimax.md` | Minimax | Bold dark interface with neon accents | | `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned | | `ollama.md` | Ollama | Terminal-first, monochrome simplicity | | `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace | | `replicate.md` | Replicate | Clean white canvas, code-forward | | `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout | | `together.ai.md` | Together AI | Technical, blueprint-style design | | `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native | | `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |

Developer Tools & Platforms

| Template | Site | Style | |---|---|---| | `cursor.md` | Cursor | Sleek dark interface, gradient accents | | `expo.md` | Expo | Dark theme, tight