skills.rest
timchap
timchapCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

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

Updated Jul 10, 2026
Search Tags:#typography#templates#html#css#design systems#web design#brand matching
One-click install
npx skills add https://github.com/timchap/dot-hermes --skill popular-web-designs-timchap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/timchap/dot-hermes/tree/main/skills/creative/popular-web-designs
Command: npx skills add https://github.com/timchap/dot-hermes --skill popular-web-designs-timchap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating the look and feel of a well-known brand or product website requires manually reverse-engineering its colors, typography, spacing, and component styles, which is slow and error-prone. ## Core Features & Use Cases - 54 Ready-to-Use Design Templates: Each template captures a real site's complete visual language including color palette, typography hierarchy, component styles, spacing system, shadows, and responsive behavior. - Font Substitution Reference: Maps proprietary fonts (Airbnb Cereal, sohne-var, Circular) to Google Fonts CDN substitutes 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 "make a landing page that looks like Linear" or "style this dashboard like Stripe", load the matching template and apply its design tokens directly to the generated HTML. ## Quick Start Ask the AI to build a landing page styled after 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 matching template from the design catalog, then apply its color palette as CSS custom properties, its typography scale, and its component specs when generating the HTML. Each template includes exact CSS values and example prompts for common components.

What design systems are included in the template catalog?▼

The catalog contains 54 templates across AI tools, developer platforms, infrastructure, design tools, fintech, and consumer brands, including Stripe, Linear, Vercel, Notion, Figma, Apple, Airbnb, Spotify, and Coinbase.

How are proprietary fonts handled in generated HTML?▼

Each template maps proprietary fonts to Google Fonts CDN substitutes, such as DM Sans for Airbnb Cereal and Source Sans 3 for Stripe's sohne-var. The template provides the ready-to-paste link tag plus primary and monospace CSS font stacks.

When should I not use brand design templates?▼

Do not use these templates for original from-scratch design work with no brand reference; a design process skill like claude-design fits that case better. These templates are specifically for matching the visual language of a known product.

Why does my generated page not match the real site's font exactly?▼

Proprietary fonts are unavailable via CDN, so substitutes are used. 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→
2389-research2389-research
90

landing-page-design

Generate landing-page concepts with brand context and design briefs.

Official
Advanced
capaas2capaas2

image-creator

Renders self-contained HTML and CSS pages to PNG screenshots via Playwright with viewport sizing and verification.

Community
Advanced
BradliebsBradliebs

design-shotgun

Generate AI-driven design variants from a brief and surface them in a side-by-side comparison board for rapid evaluation.

Community
Advanced
sonhaicodersonhaicoder

kimi-render

Render UI from .design spec files and a starter HTML template.

Community
Advanced