Agent skill

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

View SKILL.md on GitHub Repository
Stars 56,643
Forks 7,481

Install this agent skill to your Project

npx add-skill https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/popular-web-designs

SKILL.md

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.

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_vision for verification

HTML Generation Pattern

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 the file with write_file, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browser_vision 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 letter-spacing, code-centric
linear.app.md Linear Ultra-minimal dark-mode, precise, purple accent
lovable.md Lovable Playful gradients, friendly dev aesthetic
mintlify.md Mintlify Clean, green-accented, reading-optimized
posthog.md PostHog Playful branding, developer-friendly dark UI
raycast.md Raycast Sleek dark chrome, vibrant gradient accents
resend.md Resend Minimal dark theme, monospace accents
sentry.md Sentry Dark dashboard, data-dense, pink-purple accent
supabase.md Supabase Dark emerald theme, code-first developer tool
superhuman.md Superhuman Premium dark UI, keyboard-first, purple glow
vercel.md Vercel Black and white precision, Geist font system
warp.md Warp Dark IDE-like interface, block-based command UI
zapier.md Zapier Warm orange, friendly illustration-driven

Infrastructure & Cloud

Template Site Style
clickhouse.md ClickHouse Yellow-accented, technical documentation style
composio.md Composio Modern dark with colorful integration icons
hashicorp.md HashiCorp Enterprise-clean, black and white
mongodb.md MongoDB Green leaf branding, developer documentation focus
sanity.md Sanity Red accent, content-first editorial layout
stripe.md Stripe Signature purple gradients, weight-300 elegance

Design & Productivity

Template Site Style
airtable.md Airtable Colorful, friendly, structured data aesthetic
cal.md Cal.com Clean neutral UI, developer-oriented simplicity
clay.md Clay Organic shapes, soft gradients, art-directed layout
figma.md Figma Vibrant multi-color, playful yet professional
framer.md Framer Bold black and blue, motion-first, design-forward
intercom.md Intercom Friendly blue palette, conversational UI patterns
miro.md Miro Bright yellow accent, infinite canvas aesthetic
notion.md Notion Warm minimalism, serif headings, soft surfaces
pinterest.md Pinterest Red accent, masonry grid, image-first layout
webflow.md Webflow Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Template Site Style
coinbase.md Coinbase Clean blue identity, trust-focused, institutional feel
kraken.md Kraken Purple-accented dark UI, data-dense dashboards
revolut.md Revolut Sleek dark interface, gradient cards, fintech precision
wise.md Wise Bright green accent, friendly and clear

Enterprise & Consumer

Template Site Style
airbnb.md Airbnb Warm coral accent, photography-driven, rounded UI
apple.md Apple Premium white space, SF Pro, cinematic imagery
bmw.md BMW Dark premium surfaces, precise engineering aesthetic
ibm.md IBM Carbon design system, structured blue palette
nvidia.md NVIDIA Green-black energy, technical power aesthetic
spacex.md SpaceX Stark black and white, full-bleed imagery, futuristic
spotify.md Spotify Vibrant green on dark, bold type, album-art-driven
uber.md Uber Bold black and white, tight type, urban energy

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

NousResearch/hermes-agent

agentmail

Give the agent its own dedicated email inbox via AgentMail. Send, receive, and manage email autonomously using agent-owned email addresses (e.g. hermes-agent@agentmail.to).

56,643 7,481
Explore
NousResearch/hermes-agent

base

Query Base (Ethereum L2) blockchain data with USD pricing — wallet balances, token info, transaction details, gas analysis, contract inspection, whale detection, and live network stats. Uses Base RPC + CoinGecko. No API key required.

56,643 7,481
Explore
NousResearch/hermes-agent

solana

Query Solana blockchain data with USD pricing — wallet balances, token portfolios with values, transaction details, NFTs, whale detection, and live network stats. Uses Solana RPC + CoinGecko. No API key required.

56,643 7,481
Explore
NousResearch/hermes-agent

one-three-one-rule

Structured decision-making framework for technical proposals and trade-off analysis. When the user faces a choice between multiple approaches (architecture decisions, tool selection, refactoring strategies, migration paths), this skill produces a 1-3-1 format: one clear problem statement, three distinct options with pros/cons, and one concrete recommendation with definition of done and implementation plan. Use when the user asks for a "1-3-1", says "give me options", or needs help choosing between competing approaches.

56,643 7,481
Explore
NousResearch/hermes-agent

fastmcp

Build, test, inspect, install, and deploy MCP servers with FastMCP in Python. Use when creating a new MCP server, wrapping an API or database as MCP tools, exposing resources or prompts, or preparing a FastMCP server for Claude Code, Cursor, or HTTP deployment.

56,643 7,481
Explore
NousResearch/hermes-agent

qdrant-vector-search

High-performance vector similarity search engine for RAG and semantic search. Use when building production RAG systems requiring fast nearest neighbor search, hybrid search with filtering, or scalable vector storage with Rust-powered performance.

56,643 7,481
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results