skills.rest
yakeworld
yakeworldCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

Generates HTML/CSS pages styled after 54 real-world website design systems.

6|1|Updated May 11, 2026
Search Tags:#typography#templates#html#design system#css#color palette#web design
One-click install
npx skills add https://github.com/yakeworld/Synthos --skill popular-web-designs-yakeworld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/yakeworld/Synthos/tree/main/skills/extended/external-automation/creative/web-code/popular-web-designs
Command: npx skills add https://github.com/yakeworld/Synthos --skill popular-web-designs-yakeworld

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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-to-use design system templates so generated HTML/CSS matches a chosen brand's look without manual design research. ## Core Features & Use Cases - 54 Design System Templates: Each template captures a site's complete visual language including color palette, typography hierarchy, component styles, spacing system, shadows, and responsive behavior. - Font Substitution Reference: Maps proprietary fonts (e.g., Circular, Airbnb Cereal, sohne-var) to Google Fonts CDN substitutes with ready-to-paste link tags and CSS font stacks. - HTML Generation Pattern: Provides a standard pattern applying template tokens as CSS custom properties, with verification via browser screenshots. - Use Case: When asked to build a developer dashboard with a dark UI, load the Linear or Sentry template, apply its palette as :root variables, follow its typography and component specs, and produce a page visually consistent with that brand. ## Quick Start Generate an HTML landing page styled after Stripe using the popular-web-designs template catalog.

Frequently Asked Questions about popular-web-designs

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

FAQPage Schema
How do I generate HTML styled after a specific website like Stripe or Linear?▼

Pick the matching template from the catalog, load its file, and apply its design tokens when writing HTML. Define the template's color palette as CSS custom properties in :root, follow its typography and component specs, then verify the rendered page with a browser screenshot.

What design systems are included in the template catalog?▼

The catalog contains 54 templates across categories: AI tools (Claude, ElevenLabs, xAI), developer platforms (Vercel, Linear, Supabase), infrastructure (Stripe, MongoDB, HashiCorp), productivity (Notion, Figma, Miro), fintech (Coinbase, Revolut), and consumer brands (Apple, Airbnb, Spotify, BMW).

How are proprietary fonts handled when generating self-contained HTML?▼

Each template maps proprietary fonts to Google Fonts substitutes, such as DM Sans for Circular or Source Sans 3 for sohne-var. Templates include a ready-to-paste link tag and CSS font stacks, and you should follow the original weight, size, and letter-spacing values closely.

When should I use design-md instead of this template catalog?▼

Use design-md when the deliverable is a formal DESIGN.md token specification file rather than a rendered HTML page. This catalog supplies the visual vocabulary for rendered artifacts, while design-md produces the standalone token spec.

What happens if I request a template that is not in the catalog?▼

The skill does not fabricate a missing template. It returns an error indicating the template is not among the 54 available, along with suggestions for the closest matching real templates as alternatives.

Related Skills

Explore More Design & Creative Skills→
yahav123147yahav123147

design-strategist

Generates a structured Design Brief JSON for landing page visual strategy.

Community
Advanced
browser-usebrowser-use
108.4k

remote-browser

Control cloud-hosted browsers for website navigation and screenshots.

Official
Advanced
CleanExpoCleanExpo

design-board

Generate spec-conformant brand visual identity variants from a free-text brief.

Community
Advanced
marcogonzalomarcogonzalo
1

veta-design-md

Generate DESIGN.md from globals.css and layout.tsx token values.

Community
Intermediate