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.
1.0.0
Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)
MIT
design
css
html
ui
web-development
design-systems
templates
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
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.
Use the design tokens and component specs when generating HTML
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
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Page Title</title><!-- Paste the Google Fonts <link> from the template's Hermes notes --><linkhref="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.
