nousresearch/popular-web-designs
skills/creative/popular-web-designs/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add nousresearch/hermes-agent popular-web-designsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 11:20 AM82.2s55 files scanned
SKILL.md
- name:
- popular-web-designs
- description:
- >
- 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]
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
- Pick a design from the catalog below
- Load it:
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - Use the design tokens and component specs when generating HTML
- Pair with the
generative-widgetsskill 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_filefor HTML creation andbrowser_visionfor 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_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
Related Skills
nousresearch/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task. Creates comprehensive implementation plans with bite-sized tasks, exact file paths, and complete code examples.
87,661SKILL.mdUpdated Apr 15, 2026
nousresearch/test-driven-development
development
VerifiedTrustedCommunity
Use when implementing any feature or bugfix, before writing implementation code. Enforces RED-GREEN-REFACTOR cycle with test-first approach.
87,661SKILL.mdUpdated Apr 15, 2026
nousresearch/systematic-debugging
development
VerifiedTrustedCommunity
Use when encountering any bug, test failure, or unexpected behavior. 4-phase root cause investigation — NO fixes without understanding the problem first.
87,661SKILL.mdUpdated Apr 15, 2026
nousresearch/subagent-driven-development
development
VerifiedTrustedCommunity
Use when executing implementation plans with independent tasks. Dispatches fresh delegate_task per task with two-stage review (spec compliance then code quality).
87,661SKILL.mdUpdated Apr 15, 2026