skills.rest
xu1713
xu1713COMMUNITY
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 5, 2026
Search Tags:#typography#ui#templates#html#css#design systems#web design
One-click install
npx skills add https://github.com/xu1713/openhorse --skill popular-web-designs-xu1713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/xu1713/openhorse/tree/main/openhorse/openhorse/skills/creative/popular-web-designs
Command: npx skills add https://github.com/xu1713/openhorse --skill popular-web-designs-xu1713

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 (e.g., Airbnb Cereal, sohne-var) to Google Fonts CDN substitutes with ready-to-paste link tags and CSS font stacks. - Agent Prompt Guides: Every template includes example component prompts and iteration rules for generating accurate HTML. - 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 to produce a matching HTML page. ## Quick Start Build me a landing page styled like Stripe using the popular-web-designs templates.

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 color palette, typography, and component specs when generating HTML. Each template includes exact CSS values and example component prompts.

What design systems are included in this template catalog?▼

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

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 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 use these design templates for dark mode dashboards?▼

Yes, several templates are dark-mode native, including Linear, Cursor, ElevenLabs, Warp, Superhuman, and Supabase. The catalog's choosing guide groups templates by use case such as dark UIs, dashboards, and landing pages.

What are the limitations of font substitution in these templates?▼

Substitutes approximate but do not exactly match proprietary typefaces. When a substitute is used, follow the template's weight, size, and letter-spacing values closely, since those carry more visual identity than the font face itself.

Related Skills

Explore More Design & Creative Skills→
Hive-AcademyHive-Academy
28

ui-ux-designer

Define brand visual identity through structured discovery and reference analysis.

Official
Intermediate
ZardLi1115ZardLi1115
4

gitnexus-explorer

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

Community
Intermediate
AlexKonceptAlexKoncept

claude-design

Generate HTML landing pages, decks, and prototypes from briefs in CLI/API environments.

Community
Advanced
oVservantoVservant

ui-designer-agent

Generate DESIGN.md specifications and design tokens from wireframes.

Community
Intermediate