popular-web-designs – skill Thiết kế & UI cho agent AI

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 (optional: hermes skills install official/creative/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:

| 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

… (nội dung đầy đủ có trong gói tải về)