skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

popular-web-designs

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

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

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, which is slow and error-prone. This Skill provides ready-made design system specifications 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. - CDN Font Substitutions: Every template maps proprietary fonts to Google Fonts substitutes with ready-to-paste link tags and CSS font-family stacks. - Agent Prompt Guides: Templates include example component prompts and iteration guides for generating accurate HTML artifacts. - Use Case: When asked to build a landing page that looks like Stripe, load the stripe.md template and apply its purple gradient palette, weight-300 typography, and component specs directly into the generated HTML. ## Quick Start Ask the agent to build a landing page styled like Linear and it will load the matching template to generate the HTML with the correct design tokens.

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 from the design catalog, then apply its color palette as CSS custom properties, its typography hierarchy, and its component specs when generating the HTML. Each template includes exact CSS values and example component prompts.

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. Examples include Stripe, Linear, Vercel, Apple, Airbnb, Figma, Notion, Supabase, and Spotify.

How are proprietary fonts handled when generating HTML?▼

Each template maps proprietary fonts to Google Fonts substitutes that preserve the design's character, such as DM Sans for Airbnb Cereal or Source Sans 3 for Stripe's sohne-var. Templates include the ready-to-paste link tag and CSS font-family stacks.

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

Yes, the catalog includes dark-mode-focused systems like Linear, Cursor, ElevenLabs, Warp, and Superhuman. The choosing-a-design section groups templates by use case including dark UIs, data-dense dashboards, and terminal aesthetics.

What are the limitations of font substitution in generated pages?▼

When a substitute font replaces a proprietary one, some visual identity is lost since the exact letterforms differ. Following the template's weight, size, and letter-spacing values closely matters more than the specific font face for preserving the design's character.

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