popular-web-designs

Solid

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.

Web & Frontend 175,435 stars 29875 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ...

Details

Author
NousResearch
Repository
NousResearch/hermes-agent
Created
10 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

OpenAI · AI Anthropic · AI Cloudflare · Cloud Vercel · Cloud

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

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.

1 Updated today
VisionaireLabs
Web & Frontend Listed

design

Generate a DESIGN.md from any reference website using designmd.me, then apply its design tokens (colors, typography, spacing) to your project — CSS variables, Tailwind config, theme files

2 Updated yesterday
veekunth217
Web & Frontend Listed

ui-design

Anti-slop UI sur tout code de composant visuel. Se charge à l'écriture/modification de : .html, .css, .scss, .sass, .less, .jsx, .tsx, .vue, .svelte, .astro, .svg, classes Tailwind, styled-components, emotion, CSS-in-JS, blocs <style>, ET à la génération d'assets — logo, favicon, image Open Graph, avatar, icône SVG, conversion svg→png. Vise des interfaces distinctives : bannit cyan/violet/glassmorphism générique, gradients indigo-blue par défaut, boutons bg-indigo-500, Inter partout, trois cartes icônes en ligne. Couvre typographie (sélection par contexte, hiérarchie, éditorial), couleur (palette marque, discipline de l'accent), layout (hiérarchie visuelle), spacing (échelle cohérente), motion (recipes), micro-interactions, responsive, accessibilité WCAG AA, cohérence marque, lois UX (Fitts, Hick, Gestalt, Anchoring…), hero rules, personnalité UI, copywriting d'interface, assets SVG et export PNG fidèle. Ne se charge PAS quand : fichiers .md, templates de référence, HTML d'email, HTML de doc/config.

3 Updated 1 weeks ago
vendeesign
AI & Automation Listed

design-md

Author/validate/export Google's DESIGN.md token spec files.

5 Updated today
LiHongwei-cn
Web & Frontend Solid

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.

314 Updated today
tobihagemann