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