skills.rest
i-bebsi
i-bebsiCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

Generates HTML/CSS pages styled after 54 real-world design systems like Stripe, Linear, and Vercel.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating the visual language of well-known websites requires manually reverse-engineering colors, typography, spacing, and component styles. This Skill provides 54 ready-made design system templates so generated HTML/CSS matches a chosen brand's look without manual inspection. ## Core Features & Use Cases - 54 Design System Templates: Each template captures a site's color palette, typography hierarchy, component styles, spacing system, shadows, and responsive behavior with exact CSS values. - Font Substitution Guidance: Maps proprietary fonts to Google Fonts CDN substitutes with ready-to-paste link tags and CSS font stacks. - Agent Prompt Guides: Each template includes example component prompts and iteration rules for accurate reproduction. - Use Case: Ask for a landing page styled like Linear, and the Skill supplies Linear's dark palette, purple accent, typography scale, and component specs so the generated HTML visually matches the real site. ## Quick Start Build a landing page styled like Stripe using the popular-web-designs skill and serve it with the generative-widgets workflow.

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 web page look like Stripe or Linear?▼

Load the corresponding template from the design catalog, then apply its color palette as CSS custom properties, its typography scale for headings and body text, and its component specs for buttons and cards. Each template includes exact hex values and font stacks.

What design systems are included in the template catalog?▼

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

How are proprietary fonts handled when generating 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 a ready-to-paste link tag and CSS font-family stacks.

Can I verify the generated page matches the original design?▼

Yes. The workflow recommends writing the HTML with write_file, serving it through the generative-widgets skill via a cloudflared tunnel, and checking the result with browser_vision for visual accuracy.

When should I use this skill instead of design-md?▼

Use this skill when the deliverable is a rendered HTML page styled after a known brand. Use design-md when you need a formal DESIGN.md token specification document rather than a visual artifact.

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
j-showj-show

frontend-design

Generate design plans with color palettes, typography, and layout strategies.

Official
Intermediate
mykcsmykcs
1

web-design-engineer

Generate HTML/CSS/JavaScript/React web artifacts from design intent and references.

Community
Advanced