skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating the visual language of well-known websites from scratch requires manually reverse-engineering color palettes, typography, spacing, and component styles. This Skill provides ready-made design system specifications so generated HTML/CSS pages match the look of sites like Stripe, Linear, or Vercel without guesswork. ## 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 (Geist, sohne-var, Circular) to Google Fonts substitutes with ready-to-paste link tags and font-family stacks. - Category-Based Selection: Templates organized by domain (AI, developer tools, fintech, enterprise) with guidance on matching designs to content type. - Use Case: A user asks for a landing page styled like Stripe. The Skill loads the stripe.md template, applies its purple gradient palette, weight-300 typography, and component specs to produce a matching HTML page. ## Quick Start Ask the agent to build a landing page that looks like Linear, and it will load the corresponding design template and generate matching HTML and CSS.

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 file (such as stripe.md or linear.app.md) from the design catalog, then apply its color palette, typography, and component specs as CSS custom properties and styles in your HTML. Each template includes exact CSS values and font links.

What design systems are included in the template catalog?▼

The catalog contains 54 templates across categories like AI tools, developer platforms, fintech, and enterprise. Examples include Stripe, Linear, Vercel, Notion, Figma, Spotify, Apple, and Supabase, each with full visual specifications.

How are proprietary fonts handled when generating HTML?▼

Each template maps proprietary fonts to Google Fonts substitutes, such as Source Sans 3 for Stripe's sohne-var or DM Sans for Spotify's Circular. Templates include ready-to-paste link tags and font-family stacks, with weight and letter-spacing values that preserve the design's character.

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

Yes, the catalog includes dark-mode designs suited for dashboards, such as Linear, Cursor, Sentry, Warp, and Supabase. The choosing guide in the documentation matches design templates to content types like data-dense dashboards or terminal aesthetics.

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

Substitute fonts cannot perfectly replicate proprietary typefaces, so visual identity depends on following the template's weight, size, and letter-spacing values closely. When the original font is available on Google Fonts, such as Inter or IBM Plex, no substitution loss occurs.

Related Skills

Explore More Design & Creative Skills→
vmitsarasvmitsaras

layout-direction-explorer

Generate three to five structurally distinct layout directions from a design brief or existing page.

Community
Intermediate
cxnaivecxnaive

sketch

Generates interactive HTML mockups for comparing multiple UI/UX design variants side-by-side.

Community
Intermediate
martin-hsu-testmartin-hsu-test
1

design-shotgun

Generate multiple AI design variants and display them side-by-side for comparison.

Community
Advanced
oVservantoVservant

ui-designer-agent

Generate DESIGN.md specifications and design tokens from wireframes.

Community
Intermediate