skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

popular-web-designs

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

5|2|Updated May 26, 2026
Search Tags:#typography#templates#html#landing page#css#design systems#web design
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill popular-web-designs-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/popular-web-designs
Command: npx skills add https://github.com/perasyudha/Nyxora --skill popular-web-designs-perasyudha

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 scale, shadows, and responsive behavior with exact CSS values. - CDN Font Substitutions: Every template includes Google Fonts links and CSS font stacks that substitute proprietary fonts while preserving visual character. - Agent Prompt Guides: Templates include copy-ready component prompts and iteration checklists for generating accurate pages. - 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 artifact. ## Quick Start Build a landing page styled like Stripe using the popular-web-designs skill and verify the result visually.

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 agent prompt examples for common components.

What design systems are included in this template catalog?▼

The catalog contains 54 templates across AI tools, developer platforms, infrastructure, fintech, and consumer brands. Examples include Vercel, Supabase, Figma, Notion, Coinbase, Apple, Spotify, and Uber, each with full design token documentation.

How are proprietary fonts handled in generated 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. Templates include ready-to-paste link tags and CSS font-family stacks.

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

Yes, several templates document dark-mode systems including Linear, Cursor, ElevenLabs, Warp, Superhuman, and Kraken. They specify dark surface colors, accent values, and elevation treatments for data-dense interfaces.

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

Substitutes preserve character but not exact letterforms, so weight, size, and letter-spacing values matter more than the font face itself. Templates using fonts available on Google Fonts directly, like Inter or IBM Plex, have no substitution loss.

Related Skills

Explore More Design & Creative Skills→
travelinman1013travelinman1013

popular-web-designs

Generate HTML/CSS templates from a catalog of 54 design systems.

Community
Advanced
NeoLabs-SystemsNeoLabs-Systems
23

popular-web-designs

Generate HTML/CSS matching visual identities from real website design systems.

Official
Intermediate
rafifosrafifos
6

design-md

Analyze Stitch projects to generate a semantic DESIGN.md design system document.

Community
Intermediate
gatiemegatieme
1

drawio

Generate and edit diagrams from natural language commands with draw.io.

Community
Advanced