skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

Generates HTML/CSS pages styled after 54 real-world design systems.

Updated Aug 22, 2026
Search Tags:#typography#templates#html#landing page#css#design systems#web design
One-click install
npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill popular-web-designs-vivekgoquest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/vivekgoquest/hermes-agent-stable/tree/main/skills/creative/popular-web-designs
Command: npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill popular-web-designs-vivekgoquest

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating the visual language of well-known websites from scratch requires manually reverse-engineering colors, typography, spacing, and component styles, which is slow and error-prone. ## Core Features & Use Cases - 54 Design System Templates: Complete visual specifications for sites like Stripe, Linear, Vercel, Apple, and Airbnb, covering color palettes, typography hierarchies, component styles, shadows, and responsive behavior. - CDN Font Substitutions: Each template maps proprietary fonts to Google Fonts equivalents with ready-to-paste link tags and CSS font stacks. - Agent Prompt Guides: Every template includes exact CSS values and example component prompts for generating accurate HTML. - Use Case: When asked to build a landing page that looks like Linear, load the linear.app.md template and apply its dark-mode palette, purple accent, and precise typography tokens to the generated HTML. ## Quick Start Build a landing page styled like Stripe using the popular-web-designs skill and verify the result visually.

Frequently Asked Questions about popular-web-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a webpage look like Stripe or Linear?▼

Load the corresponding template file (e.g., templates/stripe.md or templates/linear.app.md) and apply its design tokens when generating HTML. Each template specifies exact colors, typography, spacing, shadows, and component styles with ready-to-use CSS values.

What design systems are included in this template catalog?▼

The catalog contains 54 templates across categories like AI tools, developer platforms, infrastructure, fintech, and consumer brands. Examples include Vercel, Supabase, Figma, Notion, Airbnb, Apple, Spotify, and Coinbase.

How are proprietary fonts handled in generated HTML?▼

Each template maps proprietary fonts to Google Fonts substitutes, such as DM Sans for Airbnb Cereal or Source Sans 3 for Stripe's sohne-var. The template provides the exact link tag and CSS font-family stacks to paste into your HTML head.

Can I use these design templates for dark mode dashboards?▼

Yes, several templates are dark-mode native, including Linear, Cursor, Warp, ElevenLabs, and Superhuman. The catalog's choosing guide groups templates by use case such as dark UIs, data-dense dashboards, and monospace terminal aesthetics.

What are the limitations of font substitution in web design templates?▼

Substitutes preserve design character but are not pixel-identical to proprietary fonts. Follow the template's weight, size, and letter-spacing values closely, since those carry more visual identity than the specific font face.

Related Skills

Explore More Design & Creative Skills→
travelinman1013travelinman1013

popular-web-designs

Generate HTML/CSS templates from a catalog of 54 design systems.

Community
Advanced
ZardLi1115ZardLi1115
4

gitnexus-explorer

Index a git codebase into a navigable knowledge graph with a web UI.

Community
Intermediate
ehadziabdicehadziabdic

document-skills-frontend-design

Guides distinctive visual design decisions for building or reshaping web UI.

Community
Intermediate
Martino17xMartino17x

design-md

Create and manage DESIGN.md files capturing design tokens and visual rules.

Community
Basic