skills.rest
matthew-johnson
matthew-johnsonCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

Catalog 54 real design systems as HTML/CSS templates.

Updated Apr 20, 2026
Search Tags:#templates#html#front-end#css#design-tokens#ui-patterns#design-systems
One-click install
npx skills add https://github.com/matthew-johnson/hermes-agent --skill popular-web-designs-matthew-johnson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/matthew-johnson/hermes-agent/tree/main/skills/creative/popular-web-designs
Command: npx skills add https://github.com/matthew-johnson/hermes-agent --skill popular-web-designs-matthew-johnson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Catalogs 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS templates that you can deploy or customize for rapid page generation.

Core Features & Use Cases

  • 54 templates covering typography, spacing, tokens, and components for design-to-code handoff.
  • Use cases include landing pages, marketing sites, dashboards, and product docs with consistent UI.
  • Real-world workflow: drop in a template and adapt quickly to a new brand while preserving layout fidelity.

Quick Start

Load a template with skill_view(name='popular-web-designs', file_path='templates/<site>.md') and customize the HTML/CSS for your project.

Frequently Asked Questions about popular-web-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get HTML and CSS templates based on real design systems like Stripe or Linear?▼

This skill catalogs 54 real design systems as HTML and CSS templates for rapid deployment. It includes predefined design tokens, typography, spacing, and UI patterns to ensure consistent branding across marketing pages and dashboards.

How do I customize a front-end template for a new brand while preserving the layout?▼

You load a template file and adapt the included HTML and CSS design tokens for your specific project. This allows you to quickly apply a new brand identity while preserving the original layout fidelity and component patterns.

Can I use these design system templates for product docs and dashboards?▼

These HTML and CSS templates are designed for building landing pages, marketing sites, dashboards, and product docs. They provide consistent typography, spacing, and component patterns across multiple brands.

What design tokens and UI patterns are included in these HTML and CSS templates?▼

The templates include predefined design tokens for typography and spacing, alongside UI component patterns. These elements ensure visual consistency across marketing pages and product sites during design-to-code workflows.

Do I need any front-end dependencies to deploy these HTML and CSS templates?▼

No external front-end dependencies are required to deploy these HTML and CSS templates. The catalog operates independently, providing raw templates and design tokens ready for immediate integration into your project.

Related Skills

Explore More Design & Creative Skills→
huahai2022huahai2022

setup

Install dependencies and configure the conda environment for ExecuTorch development.

Community
Intermediate
YeomanYeYeomanYe

frontend-design

Design and implement production-grade frontend interfaces from user requirements.

Community
Advanced
FoundationForgeFoundationForge

design-system

Audit design systems for naming inconsistencies, hardcoded values, and accessibility gaps.

Official
Intermediate
LGuguiLGugui

visual-intelligence

Extract and document design systems from CSS, Figma, and images.

Community
Advanced